Cum să afișați codul în WordPress – 3 metode (cu și fără pluginuri)

Doriți să afișați fragmente de cod pe site-ul dvs., dar nu sunteți sigur de cea mai bună modalitate de a face acest lucru? Această postare este pentru tine. În acest ghid, vă vom arăta diferite metode pentru a afișa cu ușurință codul în WordPress .

De ce este greu să afișați codul în WordPress?

Dacă aveți un site pe care postați ghiduri utile pentru utilizatori, poate fi necesar să prezentați fragmente de cod în postările de pe blog. Chestia este că nu este atât de simplu ca să lipiți codul. De fapt, dacă inserați un fragment HTML în postarea de pe blog, de exemplu, nu va funcționa. După cum știți, editorul de text WordPress este un editor bazat pe HTML, așa că procesează automat codul și îl imprimă.

În mod similar, dacă copiați și lipiți un cod scurt, WordPress va afișa funcția în loc să arate pur și simplu codul scurt scris.

Acest lucru nu este ideal dacă doriți să afișați codul și poate duce la o formatare slabă. De exemplu, dacă doriți să încorporați un cod HTML în articolul dvs. prin editorul clasic WordPress, editorul va procesa codul și îl va afișa în conținut.

Cel mai bun mod de a remedia această problemă este să utilizați stilul dedicat pentru fragmentele de cod. Și asta vă vom arăta în acest articol.

Cum să afișați codul în WordPress

Există 3 metode principale de a afișa codul în WordPress :

1. Folosind editorul WordPress
   1. Gutenberg
   2. Editor clasic
2. Folosind un plugin WordPress dedicat
3. Introducerea manuală a codului

Să aruncăm o privire la fiecare metodă și să vă arătăm cum să afișați codul pe site-ul dvs. pas cu pas.

1) Folosind Editorul WordPress

Cel mai simplu mod de a afișa codul în WordPress este să folosești Editorul WordPress. În această secțiune, vă vom arăta cum să o faceți folosind atât Gutenberg, cât și Editorul clasic.

1.1) Gutenberg

Mai întâi, conectați-vă la site-ul dvs. WordPress și deschideți postarea în care doriți să afișați codul. Căutați un bloc numit Cod și selectați-l.

Puteți începe să scrieți codul acolo și, odată ce ați terminat, publicați postarea. În partea din față, veți vedea codul.

Acesta este modul în care puteți folosi editorul Gutenberg pentru a afișa codul pe site-ul dvs.

1.2) Editor clasic

Dacă încă utilizați Editorul clasic, puteți afișa și fragmente de cod folosind opțiunea de text preformatat. Mai întâi, deschideți postarea în care doriți să includeți codul folosind editorul clasic.

Apoi, selectați fragmentul de cod și alegeți opțiunea de text preformatat din meniul drop-down.

Veți vedea cum se schimbă textul. Apoi, publicați articolul și verificați pagina din partea frontală și veți vedea codul într-o casetă personalizată, așa cum se arată mai jos.

În acest fel, puteți afișa orice cod pe site-ul dvs. WordPress.

După cum puteți vedea, utilizarea Editorului WordPress este simplă și directă. Cu toate acestea, dacă doriți mai multe opțiuni pentru a afișa diferite tipuri de cod, veți avea nevoie de altceva.

2) Afișează codul cu un plugin WordPress

O altă modalitate de a afișa codul în WordPress este utilizarea unui plugin dedicat. Există multe opțiuni, dar pentru această demonstrație, vom folosi un instrument gratuit numit SyntaxHighighter Evolved.

În primul rând, trebuie să instalați pluginul, așa că, după ce vă conectați la site-ul dvs., accesați Plugin-uri > Adăugați nou . Căutați pluginul SyntaxHighlighter Evolved, instalați-l și activați-l.

În secțiunea Setări WordPress, veți vedea opțiunile de configurare ale pluginului.

Pe pagina de setări a pluginului, veți vedea mai multe opțiuni de personalizare:

• Controlul versiunii
• Tema de culoare
• Încărcare perii
• Diverse
• Clase CSS suplimentare
• Numărul liniei de început
• Umplutură cu numărul de linie
• Dimensiunea filei
• Titlu

Dacă sunteți un utilizator de bază, configurația implicită este suficient de bună, în timp ce dacă sunteți un utilizator avansat, poate doriți să aruncați o privire asupra setărilor și să le ajustați la nevoile dvs. După ce ați schimbat setările, salvați modificările. În secțiunea de previzualizare live, veți vedea un cod exemplu cu efect de evidențiere.

În acest moment, procesul variază în funcție de editorul pe care îl utilizați. Să aruncăm o privire la ambele.

2.1) Editor Gutenberg

După activarea pluginului, veți vedea un nou bloc numit SyntaxHighlighter Code în editor.

Puteți folosi acel bloc pentru a afișa diferite tipuri de cod în postările dvs. Pur și simplu selectați blocul și în panoul de setări, veți vedea opțiunea de a alege limba pe care doriți să o afișați. Veți vedea că există zeci de limbi din care puteți alege.

Pentru acest exemplu, vom afișa un fragment de cod CSS, așa că vom alege CSS din meniul drop-down.

De asemenea, puteți schimba limbajul codului din secțiunea de blocare.

După selectarea limbajului codului, lipiți scriptul în bloc.

În plus, puteți ajusta setările implicite ale pluginului din secțiunea Avansat din panoul din dreapta și puteți schimba stilul.

Odată ce ați terminat, publicați (sau actualizați) postarea și verificați postarea din front-end pentru a vedea rezultatele.

După cum puteți vedea în captura de ecran de mai sus, am evidențiat cu succes codul CSS în postarea noastră. În acest fel, puteți afișa orice cod doriți în WordPress, selectând pur și simplu limbajul corect al codului din setările de bloc.

2.2) Editor clasic

Dacă nu utilizați editorul Gutenberg, va trebui să introduceți manual codul de limbă. Pentru a afișa codurile Syntaxhighlighter folosind editorul clasic, vom folosi shortcodes. Dacă nu sunteți familiarizat cu codurile scurte, vă recomandăm să aruncați o privire la acest ghid.

Mai întâi, deschideți orice postare sau creați una nouă folosind editorul clasic. Pentru a afișa conținut HTML, de exemplu, utilizați codul scurt [html] [/html] și inserați codul între ele după cum urmează și publicați postarea.

[html]
<a href="quadlayers.com”>QuadLayers</a>
[/html]

Dacă verificați postarea din front end, veți vedea codul HTML evidențiat.

Acesta este modul în care puteți utiliza caracteristica de încorporare HTML, dar puteți face același lucru pentru orice alte limbaje de cod. De exemplu, pentru a afișa un fragment PHP, utilizați codurile scurte [php] [/php] , codurile scurte [css] [/css] pentru a afișa CSS și așa mai departe.

În acest fel, puteți modifica codurile scurte și puteți afișa orice fragment de cod doriți. Să afișăm un exemplu de fragment de cod PHP într-un articol:

[php]
<?php
?>
[/php]

După cum puteți vedea, puteți schimba codurile și puteți afișa orice fragment pe site-ul dvs. WordPress.

NOTĂ: Dacă doriți să modificați fontul, dimensiunea fontului și greutatea fontului codului dvs., trebuie să adăugați o clasă CSS personalizată pentru pluginul Syntaxhighlighter. Puteți face acest lucru din setările pluginului și apoi adăugați cod CSS prin personalizarea WordPress sau editorul de teme pentru a-l personaliza.

3) Afișează manual codul

Dacă aveți abilități de codare, puteți afișa manual codul în WordPress. Aceasta este o metodă mai avansată și vă oferă multă flexibilitate. Pentru această demonstrație, vom folosi etichetele <pre> și <code> pentru a afișa codul într-o postare.

În primul rând, trebuie să utilizați un instrument extern pentru a vă converti textul în HTML. Vom folosi MotherEff, dar puteți folosi orice alt codificator HTML doriți.

Apoi, inserați fragmentul HTML în caseta decodificată și instrumentul vă va oferi o versiune codificată.

Pentru acest exemplu, codul nostru este:

 <p><a href="/quadlayers">Vizitați portofoliul nostru</a></p>

Și instrumentul îl transformă în asta:

Codul nu va arăta prietenos, dar va face treaba.

Apoi, în tabloul de bord WordPress, deschideți editorul clasic și comutați la editorul de text.

Lipiți codul codificat acolo folosind etichetele deschise <pre> și <code> și </code> și </pre> pentru a le închide. De exemplu, codul nostru exemplu va arăta astfel:

Apoi, publică postarea și în front-end, vei vedea codul evidențiat așa cum se arată mai jos.

În acest fel, puteți afișa manual codul în orice postare WordPress.

NOTĂ : Utilizatorii Gutenberg nu vor putea folosi această metodă. Puteți face acest lucru numai folosind Editorul clasic.

Bonus: Cum să afișați codul într-un paragraf

Pe lângă afișarea codului într-o postare WordPress, o altă alternativă interesantă este afișarea codului într-un paragraf. În această secțiune, vă vom arăta cum să o faceți. Pentru aceasta, vom folosi puțin CSS și HTML.

În primul rând, trebuie să adăugați un cod CSS simplu pe site-ul dvs. Puteți folosi fie personalizarea WordPress, fie un plugin specific site-ului, cum ar fi Fragmente de cod. Pentru această demonstrație, vom merge la Aspect > Personalizare > CSS suplimentar și vom lipi codul nostru acolo.

 cod {
 dimensiunea fontului: 1.2em;
 culoare: #1e1e1e;
 poziție: relativă;
 chenar-rază: 4px;
 fundal: #e1e1e1
 } 

După ce publicați modificările, deschideți orice postare pe care doriți să o editați. Apoi, selectați conținutul pe care doriți să îl evidențiați. De exemplu, vom afișa expresia „s tart a blog” ca cod în acest paragraf.

Comutați la editorul de text și includeți conținutul în etichetele <code> și </code> . Urmând exemplul nostru, codul nostru va arăta astfel:

<code>începeți un blog</code>

Apoi, publicați sau actualizați modificările și verificați front-end-ul pentru a vedea modificările.

În acest fel, puteți evidenția anumite cuvinte sau propoziții. Dacă doriți să modificați stilul CSS al codului, nu ezitați să editați scriptul CSS pe care l-am folosit aici.

Concluzie

Una peste alta, prezentarea codului pe site-ul dvs. nu este la fel de simplă precum lipirea scriptului. Cu toate acestea, în acest ghid, v-am arătat diferite metode de afișare a codului în WordPress:

1. Folosind editorul de conținut WordPress
2. Cu un plugin dedicat
3. Manual

Dacă doriți o soluție rapidă și ușoară, editorul de conținut WordPress vă oferă instrumentele pentru a prezenta scripturi pe orice postare. Cu toate acestea, dacă aveți nevoie de mai multe opțiuni de personalizare, pluginul SyntaxHighligher Evolved este cea mai bună alegere. Pe de altă parte, dacă aveți abilități de codare, puteți adăuga manual fragmentele de cod și puteți personaliza stilul în frontend cu puțin CSS.

În cele din urmă, dacă doriți să evidențiați anumite propoziții sau cuvinte într-un paragraf, puteți include textul în etichetele <code> </code> .

Pentru mai multe informații despre cum să editați codul pe site-ul dvs., consultați următorul ghid de editare HTML în WordPress.

Ți s-a părut utilă această postare? Ce metodă preferați să afișați codul pe site-ul dvs.? Anunțați-ne în secțiunea de comentarii de mai jos.