Cum se folosește blocul de cod WordPress

Afișarea codului în paginile și postările WordPress poate fi dificilă. Doar postarea codului în conținut poate avea rezultate interesante, mai ales dacă WordPress îl afișează incorect sau securitatea dvs. vă blochează pentru activități dăunătoare. Din fericire, blocul de cod WordPress facilitează afișarea fragmentelor de cod. Știind cum să utilizați acest bloc vă va ajuta să afișați codul în conținutul dvs. în cel mai bun mod atât pentru site-ul dvs., cât și pentru cititorii dvs.

În acest articol, vom analiza blocul de cod WordPress și vom vedea ce face. Vom vedea cum să-l adăugăm la postările și paginile dvs. și să vedem setările și opțiunile acestuia. Rămâneți până la capăt pentru a vedea sfaturi și cele mai bune practici despre cum să îl utilizați și pentru a vedea întrebările frecvente.

Abonați-vă la canalul nostru Youtube

Cum să adăugați blocul de cod la postarea sau pagina dvs.

Pentru a adăuga blocul de cod la paginile și postările dvs., selectați instrumentul de inserare a blocurilor de lângă zona de conținut în care doriți să plasați blocul sau selectați inseratorul în colțul din stânga sus al paginii. Introduceți numele blocului și selectați-l când apare sau derulați printre blocuri pentru a vedea ce este acolo.

Dacă preferați, puteți tasta / codifica în zona în care doriți să apară blocul. Apoi, doar apăsați Enter sau selectați blocul din opțiunile care apar.

Acum aveți un bloc de cod în conținutul dvs., unde puteți adăuga orice tip de cod doriți să afișați. Codul este marcat automat cu etichete de cod, deci se afișează corect ca cod. Acest lucru ajută la oferirea de exemple pentru ca cititorii să învețe sau să le folosească în propriile lor proiecte. În acest exemplu, folosesc pseudo-codul din pagina de asistență WordPress (pentru că) lazy.level = avansat.

Setări și opțiuni pentru blocarea codurilor

Blocul de coduri are două locuri în care veți găsi setări și opțiuni. Prima este Bara de instrumente Cod deasupra blocului. A doua este opțiunile din bara laterală dreaptă. Ne vom uita la amândouă.

Bara de instrumente pentru blocarea codului

Faceți clic oriunde în bloc pentru a vedea bara sa de instrumente. Dacă nu vedeți toate instrumentele, plasați mouse-ul sub bloc într-o locație nouă de bloc și apoi faceți clic pe bloc. Toate setările vor apărea.

Schimbați tipul sau stilul blocului de cod

Prima setare folosește săgețile stânga și dreapta. Aceasta schimbă blocul într-un bloc HTML personalizat, bloc preformatat, modifică coloanele și vă permite să creați un grup, astfel încât să puteți regla culoarea de fundal, să alegeți chenarele și să reglați alte opțiuni. Trecând peste ele vă oferă o previzualizare a modului în care ar arăta fiecare. Plac peste opțiunea HTML personalizată.

Trage

Instrumentul de tragere include șase puncte. Apucați aceste puncte pentru a trage blocul oriunde doriți. Apare o linie albastră unde va fi plasată în orice locație posibilă când treceți cu mouse-ul peste diferitele zone.

Când îl lăsați, blocul va fi plasat în noua sa locație.

Mutare

Săgețile de mișcare în sus și în jos deplasează blocul în sus sau în jos cu un bloc din blocurile de conținut de fiecare dată când faceți clic pe ele.

Indraznet si italic

Setările aldine și cursive se aplică codului pe care l-ați evidențiat. Le puteți folosi împreună sau individual. Folosesc atât împreună, cât și independent în acest exemplu. Este o modalitate bună de a atrage atenția asupra anumitor linii sau comenzi din cod.

Legătură

Linkul vă permite să transformați oricare dintre coduri într-un link care poate fi făcut clic. Puteți căuta sau introduce adresa URL pentru porțiunea de cod evidențiată. Acest lucru este bun dacă doriți să vă conectați la tutoriale pentru fiecare dintre comenzi, alte exemple, de unde a venit codul etc. Puteți avea linkul deschis în aceeași filă sau într-o filă nouă.

Mai multe setari

Mai multe setări din blocul de coduri deschide o casetă derulantă cu mai multe opțiuni. Am aplicat fiecare dintre opțiunile din acest exemplu.

Inline Code - arată textul formatat ca cod. Plasează singur textul pe o linie. Deoarece totul este formatat ca cod, fontul arată la fel.

Imagine în linie - plasează o imagine în textul în care ați plasat mouse-ul. Se deschide biblioteca media unde puteți selecta o imagine. Dacă faceți clic pe imagine, veți vedea o casetă derulantă în care îi puteți modifica lățimea.

Introducere tastatură - adaugă etichete de tastatură la codul selectat. Codul este afișat în fontul monospațial implicit al browserului.

Strikethrough - adaugă o linie prin codul pe care l-ați evidențiat.

Indice - formatează codul ca indice.

Superscript - formatează codul ca un supercript. Puteți utiliza împreună indicele și superindiciul. Aceasta reduce dimensiunea fontului și centrează orizontal codul.

Culoare text - modifică culoarea codului pe care l-ați evidențiat. Selectați dintre culorile premade, alegeți o culoare pe instrumentul de selectare a culorilor sau introduceți valoarea ca HEX, RBG sau HSL.

Opțiuni

Opțiunile de blocare a codului sunt plasate în cele trei puncte din extrema dreaptă a barei de instrumente. Opțiunile includ:

Ascundeți mai multe setări - ascunde bara laterală dreaptă pentru a vă oferi un spațiu de lucru curat și larg.

Copiere - copiază blocul astfel încât să îl puteți lipi oriunde în zona de conținut.

Duplicate - dublează blocul și îl plasează sub original.

Inserați înainte - adaugă o zonă de conținut deasupra blocului de cod.

Inserați după - adaugă o zonă de conținut sub blocul de cod.

Mutare în - vă permite să mutați blocul plasând o linie albastră pe care o puteți deplasa în sus sau în jos cu tastele săgeată. Când ajungeți la linia dorită, pur și simplu apăsați Enter.

Editați ca HTML - modificări la editorul de cod pentru blocul în care puteți edita codul ca HTML. Selectați Editare vizuală pentru a schimba blocul înapoi în modul vizual.

Adăugați la blocuri reutilizabile - adaugă blocul la blocurile reutilizabile, astfel încât să îl puteți reutiliza pe orice pagină sau postare.

Grup - adaugă blocul unui grup, astfel încât să le puteți face modificări ca o singură unitate.

Eliminare bloc - șterge blocul de cod.

Setări blocare cod

Setările de blocare a codului sunt plasate în bara laterală dreaptă. Acestea includ tipografie și setări avansate. Selectarea blocului va afișa setările. Dacă bara laterală nu se afișează, faceți clic pe pictograma roată din colțul din dreapta sus.

Tipografie

Tipografia vă permite să selectați dimensiunea fontului pentru întregul bloc. Alegeți dimensiunea fontului dintr-o casetă derulantă cu 7 dimensiuni sau introduceți o dimensiune personalizată în câmp. Faceți clic pe Resetare pentru a-l modifica înapoi la dimensiunea implicită a fontului.

Avansat

Setările avansate includ o ancoră HTML și un câmp pentru clase CSS suplimentare. Ancora este o adresă URL doar pentru acest bloc, astfel încât să puteți conecta direct la acesta. Câmpul Clase CSS suplimentare vă permite să adăugați o clasă CSS personalizată pentru a stiliza blocul.

Sfaturi și cele mai bune practici pentru utilizarea eficientă a blocului de cod

Utilizați acest bloc oricând doriți să afișați cod în conținutul dvs. Codul în sine nu are niciun efect asupra blocului.

Formatați codul cu spații așa cum ați face atunci când creați cod cu un editor de text. Utilizați setările aldine și italice pentru a atrage atenția asupra anumitor fragmente din codul dvs.

Ca la orice cod, etichetați-l bine, astfel încât să fie ușor de înțeles. Puteți să comentați codul sau să adăugați note în cadrul blocului, dar asigurați-vă că nu se află în elementele codului în cazul în care cineva dorește să copieze codul.

Întrebări frecvente despre blocul de cod

Care este scopul blocului de cod WordPress?

Pentru a afișa codul pe care alții îl pot vedea și utiliza. Afișează codul într-un aspect curat, care vă păstrează spațiul.

Blocarea codului rulează codul?

Nu. Afișează codul formatat, astfel încât cititorii dvs. să îl poată vedea și utiliza. Codul este înfășurat automat cu etichetele de cod HTML.

Ce tipuri de cod poate afișa?

Acesta va afișa orice cod din orice limbaj de programare sau de scriptare. Limba nu face nicio diferență.

Formatează codul?

Nu. Nu funcționează ca editor de cod, deci nu schimbă spațiul, culorile, nu adaugă numere etc. Afișează codul doar în modul în care îl tastați.

În ce este diferit blocul de cod de blocul HTML?

Blocarea HTML vă permite să creați HTML fără a fi nevoie să vă schimbați vizualizarea editorului de cod al paginii dvs. Acesta va rula codul HTML în partea frontală. Puteți previzualiza rezultatele din partea din spate. Puteți utiliza blocul de cod pentru a afișa HTML dacă nu doriți să se execute.

În ce este diferit de blocul preformatat?

Blocul preformatat afișează text cu spațiile dvs. într-un font monospațial. Se adaugă fonturi și culori de fundal pentru opțiunile barei laterale.

Concluzie

Aceasta este privirea noastră asupra blocului de cod WordPress. Blocul este simplu și ușor de utilizat. Deoarece nu rulează codul, limba în sine nu contează. Acest bloc oferă o modalitate bună de a afișa orice tip de cod pe care cititorii dvs. îl pot copia sau învăța.

Vrem sa auzim de la tine. Ați folosit codul WordPress Block? Spuneți-ne ce părere aveți despre asta în comentarii.

Imagine prezentată prin Danielala / shutterstock.com