Există multe motive pentru care doriți să scrieți sau să includeți cod suplimentar în postările dvs. pe WordPress. Este posibil să fie nevoie să afișați reclamă, să aplicați stilul unic pe anumite secțiuni ale site-ului dvs. web sau să marcați pur și simplu text sau conținut pentru a atrage atenția. Totuși, este posibil să adăugați cod pentru a obține diverse efecte vizuale pentru a oferi o experiență mai bună utilizatorului.


Toate acestea și altele sunt motive valide, dar, indiferent de ce căutați să obțineți cu codul personalizat, procesul de scriere a codului poate fi o înfășurare nervoasă sau o provocare totală! În acest tutorial, vom acoperi următoarele domenii:

  • Adăugarea unui cod care arată cod, dar nu se comportă ca un cod (în cazul în care căutați să afișați linii de cod sau să îmbunătățiți aspectul site-ului dvs. web)
  • Adăugarea codului care este destinat să se comporte ca codul, de ex. Anunțuri scriptate, cum ar fi Google Adsense Ads

În aceste două categorii, vom dedica puțin codul de programare precum HTML, CSS, Javascript și atingem reclame și frumusețea

container. Acum, fără alte fanfare, să trecem la afaceri și să scriem un cod.

Adăugarea unui cod care arată cod, dar nu se comportă ca un cod

Dacă doriți să afișați codul (poate sunteți un designer web sau un dezvoltator) pe care utilizatorii dvs. îl pot copia și lipi, este important să faceți acest lucru corect, deoarece chiar și o singură pauză de linie poate încurca codul, de aici toate lucrările dvs. Modul în care codul dvs. va fi interpretat de WordPress depinde de dacă utilizați editorul HTML sau Visual Post. Introducerea codului dvs. direct în editorul vizual nu va avea efectul pe care doriți să îl creați, deoarece editorul vizual consideră că codul este un text normal, ceea ce înseamnă că browserele web nu vă vor interpreta codul ca „cod”, ci ca un text obișnuit..

Pe de altă parte, editorul HTML Post va recunoaște orice marcare HTML sau CSS pe care o utilizați, ceea ce înseamnă că vor fi interpretate de browserul web, lucru care ar putea avea ca rezultat machete și conținut funky. De exemplu, 

în editorul vizual va fi interpretat ca text obișnuit, iar rezultatul va fi just

. in orice caz,

 în editorul HTML va fi interpretat ca marcare HTML, iar rezultatul va fi crearea unui container.

Un exercițiu HTML

Este un exercițiu de inutilitate cu adevărat, dar îl puteți încerca pentru o imagine mai clară a ceea ce vreau să spun. Doar deschideți-vă Editor HTML, tip

și salvați-o ca schiță. După salvarea proiectului, faceți clic pe „Preview Post” pentru a vă vedea site web mangled. Nu vă faceți griji, nu este permanent și puteți doar să coșul de gunoi. Acum înapoi la afaceri.

În general, puteți utiliza codul în două moduri. În primul rând, puteți utiliza codul dintr-o linie (sau un paragraf) pentru a clarifica un punct despre codul dvs. În al doilea rând, puteți scrie, evidenția și pune codul într-un bloc ca acesta:



Scrierea codului în WordPress Posts Tutorial


...

Pentru a obține efectul de mai sus, folosim eticheta de cod scrisă ca ... codul nostru intră aici . Săgeți înlocuitoare (<  >) Cu paranteze pătrate ([]) în funcție de site-ul dvs. WordPress și de editorul de postări pe care îl utilizați (vizual sau HTML). Codul pe care doriți să îl afișați trebuie să treacă între eticheta de deschidere,   și eticheta de închidere, . De exemplu, pentru a utiliza codul într-un paragraf:

Cod în paragraf

Eticheta de cod face ca textul non-HTML să semene cu codul, dar nu îi spune browserului web să interpreteze marcajul HTML sau să îl scoată din postare. Aceasta înseamnă că un browser vă poate încă codifica marcajul HTML, ceea ce face dificilă prezentarea Etichete HTML în codul tău. Cu toate acestea, puteți depăși această problemă folosind caractere extinse sau entități de caractere pentru a reprezenta < > personaje, care vor păcăli fiecare browser. De exemplu…

Etichetele HTML pot fi interpretate ca Marcaje HTML

… va crea un nou container (mulțumită

) și o rubrică (

), care vă va încurca pagina web. Dar dacă utilizați entități de caractere pentru a înlocui < > săgeți, veți evita acest comportament și vă va scoate codul după cum doriți. Prin urmare, codul de mai sus va arăta astfel:

Folosiți în schimb entități de caractere

Creați un bloc de cod evidențiat

Dacă aș dori să evidențiez un bloc de cod (sau chiar text) pentru a obține ceva de genul;

Bloc de cod

Încep prin a pune codul (sau textul) într-un container ca atare:

Trebuie să faceți acest lucru în editorul HTML

Apoi adaug stilul folosind CSS fie direct (ca în imaginea de mai sus), fie prin style.css fișierul găsit în folderul principal al temei.

Stilează-ți etichetele de cod

Eticheta de cod va folosi dimensiunea fontului din și introduceți textul într-un font monospațiat în mod implicit. Puteți schimba toate acestea, pentru ca codul dvs. să arate exact așa cum doriți. Nu trebuie decât să adăugați …

 cod {font-size: 1.2em; color: # 000; font-weight: normal;} 

… sau ceva similar cu al tău style.css. Există stiluri nelimitate și totul depinde de preferințele dvs. personale, deci nu vă rețineți – stilul departe.

Adăugarea codului care comportă codul

Această secțiune este utilă în special dacă doriți să afișați reclame sau alte scripturi, de ex. Fragmente Javascript în postările dvs. În timp ce există pluginuri, de ex Adsense rapid, care vă va ajuta să gestionați reclame în postările dvs., puteți fi interesat să instalați scripturi autonome pe care le aveți control complet.

Dacă anunțul dvs. este o imagine simplă și un link, puteți adăuga anunțul în postarea dvs. prin utilitatea de încărcare. Trebuie doar să încărcați imaginea și să introduceți linkul dvs. (și, probabil, o legendă) și munca dvs. este gata. Această metodă este limitată, întrucât puteți alinia anunțul numai la stânga, la dreapta sau la centru – la fel ca o imagine tipică. Alternativ, puteți crea un container în postarea dvs. utilizând editorul HTML.

Exemplu:


Creați acest container exact acolo unde doriți anunțul dvs., adică trebuie să aveți postarea pregătită înainte de a adăuga anunțul. Odată ce recipientul este gata, îl puteți stila oricât doriți. Puteți să-l mutați folosind style.css dvs. folosind butonul poziţie proprietate. Dacă doriți să rulați un Anunț Google Adsense în cadrul postărilor dvs., puteți utiliza în continuare Adsense rapid – pluginul – sau creați un container și plasați codul de anunț astfel:


Nota 1: Reclamele Google se bazează pe Javascript și pot fi interpretate de către toate browserele web importante, cu condiția ca utilizatorul să fi activat Javascript pe mașinile lor.

Nota 2: Trebuie să alegeți dimensiunile de anunțuri potrivite pentru site-ul dvs. web pentru a evita să vă încurcați postările, precum și site-ul.

Dacă doriți să adăugați un anunț permanent care să apară pe toate postările (postările actuale și viitoare) fără alte lucrări suplimentare, va trebui să editați Șablon de postare unică (Single.php). Am plasat o reclamă 468px cu 60px în partea de sus a tuturor postărilor mele adăugând următorul cod în single.php imediat dupa < – – END post-entry-meta – ->.


Desigur, trebuie să folosiți propriile dvs. Anunțuri Google �� Așa apare anunțul Google Adsense pe blogul meu:

Scrierea codului în WordPress

A găsi single.php, du-te la tine Panou de administrare – >> Aspect – >> Editor – >> single.php. Odată ce single.php este deschis, utilizați bara de căutare (Ctrl + F) a localiza < – – END post-entry-meta – ->.

Puteți lăsa containerul așa cum este sau îl puteți folosi folosind style.css după cum considerați potrivit. Și nu uitați să salvați toate modificările.

containerul este cu adevărat util, iar atunci când îl asociați cu CSS și o uncie de creativitate, puteți realiza atât de mult cu site-ul dvs. WordPress. Te poate ajuta să plasezi orice cod (sau ceva cu adevărat) oriunde pe site-ul tău.

Caseta de instrumente

Dacă doriți să aflați mai multe despre scrierea codului personalizat în postările dvs. WordPress, nu ezitați să consultați următoarele resurse:

Ei bine, este vorba despre asta. Am reușit să acoperim zonele descrise la început. Dar dacă nu înțelegeți niciun concept în această postare sau doriți să adăugați sugestiile sau opiniile dvs., vă rugăm să vă împărtășiți gândurile în secțiunea de comentarii de mai jos!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me