Trebuie să fi văzut fragmente de cod în diferite postări de pe blogul WPBeginner pe care le creăm pentru a ajuta cititorii noștri să rezolve probleme. Cu toate acestea, afișarea acelui cod nu este simplă.
Acest lucru se datorează faptului că, dacă încercați să adăugați cod precum text obișnuit, WordPress nu îl va afișa corect. WordPress rulează conținutul dvs. prin mai multe filtre de curățare de fiecare dată când salvați o postare. Aceste filtre sunt acolo pentru a se asigura că cineva nu injectează cod printr-un editor de postări pentru a vă sparge site-ul web.
În acest articol, vă vom arăta modalitățile corecte de a afișa codul pe site-ul dvs. WordPress. Vă vom arăta diferite metode și puteți alege cea care se potrivește cel mai bine nevoilor dvs.
De ce să afișezi cod pe un site WordPress?
Dacă scrieți postări de blog pe subiecte tehnice sau creați documentație pentru produsele dvs., atunci afișarea fragmentelor de cod este foarte utilă. Utilizatorii dvs. pot copia pur și simplu bucata de cod și o pot adăuga pe site-ul lor.
Cu toate acestea, afișarea codului pe un site web WordPress nu este atât de simplă.
WordPress va interpreta fragmentele ca cod funcțional și va încerca să îl implementeze pe site-ul dvs. în loc să îl afișeze ca text. De asemenea, nu ar afișa codul corect, ceea ce ar duce la erori atunci când utilizatorii îl introduc pe site-ul lor.
În plus, WordPress folosește mai multe filtre ca măsuri de securitate. Filtrează conținutul pentru a împiedica hackerii să injecteze cod malițios în editorul de conținut și să-ți spargă site-ul web.
Acestea fiind spuse, există diferite moduri în care puteți afișa cod în WordPress. Puteți face clic pe linkurile de mai jos pentru a sări la secțiunea preferată:
Metoda 1. Afișarea codului folosind editorul implicit în WordPress
Această metodă este recomandată pentru începători și utilizatori care nu au nevoie să afișeze cod foarte des.
Pur și simplu editați postarea de blog sau pagina unde doriți să afișați codul. Pe ecranul editorului de conținut WordPress, adăugați un nou bloc de cod la postarea dvs.
Acum puteți introduce fragmentul de cod în zona de text a blocului.
Blocul de cod va afișa o previzualizare a codului dvs.
După aceea, puteți salva postarea blogului și o puteți previzualiza pentru a vedea blocul de cod în acțiune.
Odată ce sunteți mulțumit de aspectul codului dvs., continuați și publicați postarea de pe blog.
În funcție de tema dvs. WordPress, blocul de cod poate arăta diferit pe site-ul dvs. web.
Metoda 2. Afișarea codului în WordPress folosind un plugin
Pentru această metodă, vom folosi un plugin WordPress pentru a afișa cod în postările tale de pe blog. Această metodă este recomandată utilizatorilor care afișează frecvent cod în articolele lor.
Vă oferă următoarele avantaje față de blocul de cod implicit:
- Vă permite să afișați cu ușurință orice cod în orice limbaj de programare.
- Afișează codul cu evidențierea sintaxei și numerele liniilor.
- Utilizatorii tăi pot studia cu ușurință codul și îl pot copia.
Mai întâi, trebuie să instalați și să activați pluginul SyntaxHighlighter Evolved. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.
După activare, puteți edita postarea de pe blog unde doriți să afișați codul. Pe ecranul de editare a postării, adăugați blocul „SyntaxHighlighter Code” la postarea dvs.
Veți vedea acum un nou bloc de cod în editorul de postări unde puteți introduce codul dvs.
După adăugarea codului, trebuie să selectați setările blocului din coloana din dreapta.
Mai întâi, trebuie să selectezi limba pentru codul tău, cum ar fi PHP, CSS, Java, etc. După aceea, poți dezactiva numerele liniilor, poți furniza primul număr de linie, poți evidenția orice linie dorești și poți dezactiva funcția de a face linkurile clicabile.
Odată ce ați terminat, salvați-vă postarea și faceți clic pe butonul de previzualizare pentru a o vedea în acțiune.
Pluginul vine cu o serie de scheme de culori și teme.
Pentru a schimba tema culorilor, trebuie să vizitați pagina Setări » SyntaxHighlighter.
Din pagina de setări, puteți selecta o temă de culori și puteți modifica setările SyntaxHighlighter.
Puteți salva setările pentru a vedea o previzualizare a blocului de cod în partea de jos a paginii.
Utilizarea SyntaxHighlighter cu Editorul clasic
Dacă încă folosiți vechiul editor clasic WordPress, iată cum ați folosi pluginul SyntaxHighlighter pentru a adăuga cod la postările dvs. de blog WordPress.
Pur și simplu încadrați codul în paranteze pătrate cu numele limbajului. De exemplu, dacă veți adăuga cod PHP, îl veți adăuga astfel:
<?php
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
Similar, dacă dorești să adaugi un cod HTML, atunci îl vei încadra în shortcode-ul HTML astfel:
<a href="example.com">A sample link</a>
Metoda 3. Afișarea codului în WordPress manual (fără plugin sau bloc)
Această metodă este pentru utilizatori avansați, deoarece necesită mai multă muncă și nu funcționează întotdeauna conform intenției.
Este potrivit pentru utilizatorii care încă folosesc vechiul editor clasic și doresc să afișeze codul fără a folosi un plugin.
Mai întâi, trebuie să treceți codul printr-un instrument online de codificare a entităților HTML. Acesta va transforma marcajul codului dvs. în entități HTML, ceea ce vă va permite să adăugați codul și să ocoliți filtrele de curățare WordPress.
Acum copiați și lipiți codul în editorul de text și încadrați-l în etichetele <pre> și <code>.
Codul dvs. ar arăta astfel:
<pre><code>
<p><a href="/home.html">Acesta este un link de probă</a></p>
</pre></code>
Acum puteți salva postarea și previzualiza codul în acțiune.
Browserul dvs. va converti entitățile HTML, iar utilizatorii vor putea vedea și copia codul corect.
Sperăm că acest articol v-a ajutat să învățați cum să afișați cu ușurință cod pe site-ul dvs. WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să permiteți PHP în postările și paginile WordPress și selecția noastră expertă de cele mai bune instrumente de dezvoltare WordPress.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
Olaf
Ca dezvoltator PHP, am un mic blog unde postez ocazional diverse tehnici și fluxuri de lucru pentru programarea în PHP, precum și îmi partajez propriile fragmente de cod. Este grozav că WordPress permite nativ afișarea codului. Cu toate acestea, eu personal folosesc un plugin, deoarece uneori am nevoie ca codul să arate că este în CSS, alteori în PHP și foarte rar în JavaScript. Este benefic atunci când codul este bine formatat și, ideal, colorat pe funcții etc. Este, de asemenea, util să luați în considerare o funcție de copiere, astfel încât utilizatorii să poată copia cu ușurință întregul fragment de cod în clipboard. De aceea prefer un plugin în locul editorului de blocuri.
Dennis Muthomi
Cred că pluginul este grozav pentru treaba lui, dar...
o funcționalitate pe care aș dori să o văd adăugată este un buton de copiere.
În prezent, utilizatorii trebuie să selecteze manual și să copieze întregul bloc de cod, ceea ce poate fi anevoios, mai ales pentru fragmente mai lungi.
O opțiune de copiere cu un singur clic ar îmbunătăți considerabil experiența utilizatorului.
Astfel, cititorii ar putea prelua cu ușurință codul, fără a omite accidental vreo parte din el atunci când selectează codul.
Suport WPBeginner
Thank you for sharing that recommendation
Admin
Jiří Vaněk
Există posibilitatea de a avea un buton de copiere a codului în plugin, astfel încât utilizatorul să nu fie nevoit să copieze codul în clipboard manual?
Suport WPBeginner
Not at the moment but we will keep an eye out for a method we would recommend
Admin
Jiří Vaněk
Mulțumesc pentru răspuns. Este o mare păcat, deoarece facilitează mult munca. Uneori se întâmplă ca chiar și numerele liniilor să fie copiate în cod prin metoda manuală. Elementor are un widget pentru cod pe care butonul de copiere îl are și este grozav. Voi urmări actualizarea articolului dacă este necesar.
Ms Gray
Salut,
Poate fi introdus cod în paginile adăugate de pluginuri terțe, cum ar fi Woocommerce?
Suport WPBeginner
Da, ați putea plasa cod pe acele pagini.
Admin
Ravish
Salut, în primul rând, Mulțumesc pentru acest blog.
Vreau să adaug coduri pentru orice problemă în diferite limbi (de exemplu, Python și C++). Cum putem face asta?
Suport WPBeginner
Acest plugin ar trebui să funcționeze în continuare și pentru acele limbi
Admin
Nimesh
Acest lucru este grozav.
Dacă nu ar fi fost asta, aș fi folosit un plugin separat pentru fragmente de cod de intrare.
Încă folosesc editorul clasic al WordPress și voi adăuga fragmentele de cod la postările mele, așa cum este menționat aici.
Vă mulțumesc pentru acest share uimitor!
Suport WPBeginner
Glad our guide was able to help
Admin
Induwara
Mulțumesc,
Acest articol este foarte util. Am instalat pluginul și funcționează bine. Există o problemă cu tema mea, încât atunci când pun un cod din editorul de blocuri, tema îl afișează cu culoarea de fundal, deci este imposibil de văzut codul. Sunt un mare fan al WpBegginer!
Suport WPBeginner
Ne bucurăm că ghidul nostru v-a fost de ajutor, ar trebui să puteți contacta tema pentru asistență cu această problemă.
Admin
Manju
Poți sugera o modalitate de a afișa codul dintr-un repo Github în postările Wordpress?
Suport WPBeginner
Puteți plasa codul așa cum îl avem în acest articol și să notați sub el de unde provine, de pe Github. Există, de asemenea, opțiuni de plugin pentru încorporarea codului direct
Admin
Kunal Mandalia
Mulțumesc pentru pontul despre etichetele „code” – a funcționat ca prin farmec.
Suport WPBeginner
You’re welcome
Admin
Mahesh
Bună... Mulțumesc pentru pont.
Suport WPBeginner
Thank you and you’re welcome
Admin
perveen
avem nevoie de codificare la wordpress credeam că nu avem nevoie de nicio codificare la wordpress.
Suport WPBeginner
Nu este obligatoriu, dar pentru site-urile care doresc să afișeze cod utilizatorilor, acestea sunt câteva metode pe care le pot folosi.
Admin
Adamu Malte
Mulțumesc @Syed pentru tutorialul tău grozav.
manasa
Blog grozav cu informații excelente. Mulțumesc, continuă să distribui.
Anh
Excelent, mă întrebam doar cum poți posta codul în interior
1-click Use in WordPress
și totuși face ca codul să arate ca text.
Îmi place cum poți posta acest cod
.entry-title { font-family:”Open Sans”, arial, sans-serif; font-size:16px; color:#272727; }1-click Use in WordPress
la postarea dvs. fără a schimba modul în care apare în postare.
Rushikesh Thawale
Thank You for this post.
Christian
There’s a typo on the word ‘Syntax’…no wonder I was getting no results when I copied paste the text on Wordpress plugin search!
Pluginul Synatx Highlighter Evolved
Ahmed
Mulțumesc Syed…. Tutorial grozav. Vreau să vă întreb cum putem schimba dimensiunea fontului codului?
Dave Mackey
Cred că există o problemă cu Syntax Highlighter Evolved în cele mai recente versiuni de WordPress. Eu și alții îl avem afișând incorect entitățile html. Vedeți forumurile de suport pentru mai multe informații.
Md Abul Bashar
Cum să afișezi codul fără plugin, doar codificare?
John D
Personal, eu folosesc WP-GeSHi-Highlight, care folosește codurile standard GeSHi. Cred că am folosit un predecesor al pluginului prezentat aici, dar am avut dificultăți în a găsi codurile de limbaj.
Ajay
Recent, am constatat că este mai ușor să folosesc GIST-uri pentru a afișa cod și apoi pur și simplu să încorporez Gist-ul în postare
Mikhail S.
@AJAY, te rog spune-mi mai multe despre utilizarea GIST pentru a afișa mostre de cod.
Mulțumesc!
Thomas A. Reinert
Sunt absolut de acord. Sunt destul de bine formatate și evidențiate sintactic, sunt forkable și sunt și versionabile. Deci WP GIST este soluția pentru mine cel puțin..