Ați încercat vreodată să copiați și să inserați fragmentul de cod în WordPress? Nu funcționează! WordPress nu poate distinge o bucată de cod pe care tocmai doriți să o demonstrați, dintr-un fragment pe care o acțiune trebuie să o îndeplinească.
Dacă de multe ori partajați fragmente de cod cu cititorii în lecțiile dvs., atunci aveți nevoie de o cale diferită. În acest articol vă vom spune despre cele mai bune instrumente și plug-in-uri care vă vor ajuta să adăugați paragrafe elegante și ușor de citit cu codul pe WordPress.
![Cum se introduce un exemplu de cod în intrările și pe wordpress 7 pagini de plugin (fragmente) Cum se introduce un eșantion de cod în intrările și pe paginile de plugin wordpress 7](https://images-on-off.com/images/146/kakvstavitprimerkodavzapisyaxinastranits-5246a354.jpg)
Built-in modul WordPress pentru a partaja codul
Să începem de la început:
WordPress are mai multe metode integrate pentru afișarea fragmentelor de cod. Ele nu sunt întotdeauna frumoase, dar funcționale. Cele două metode de bază sunt etichete și
.
Ambele vor afișa fragmentele de cod, diferențele sunt în design, care depinde de tema dvs.
De exemplu, iată ce arată aceste etichete în tema standard WordPress Twenty Sixteen:
![Cum se introduce un exemplu de cod în intrările și pe wordpress 7 pagini de plugin (dezvoltare) Cum se introduce un eșantion de cod în intrările și pe paginile de plugin wordpress 7](https://images-on-off.com/images/146/kakvstavitprimerkodavzapisyaxinastranits-0e8f9688.png)
Dar aceste etichete au probleme:
- Trebuie să notați eșantionul de cod ca un șir înainte de afișarea acestuia. Pentru a face acest lucru, trebuie să introduceți codul în codificator, de exemplu, Codul de înfrumusețare. apoi introduceți rezultatul între etichete
și
.
- Nu există nicio linie de numerotare pentru a simplifica citirea codului.
- Nu există nici o evidențiere a sintaxei. Sintaxa care evidențiază culori diferite elemente de cod în diferite culori, ceea ce face codul mai ușor de citit.
Să începem acum metodele de adăugare a fragmentelor de cod în WordPress, ceea ce va simplifica procesul de introducere a fragmentelor și utilizatorii le vor citi.
1. SyntaxHighlighter Evolved
![Cum să inserați un exemplu de cod în intrările și în paginile plugin (cod) wordpress Cum se introduce un eșantion de cod în intrările și pe paginile de plugin wordpress 7](https://images-on-off.com/images/146/kakvstavitprimerkodavzapisyaxinastranits-14cf58f5.png)
SyntaxHighlighter Evolved este un plugin popular pentru inserarea fragmentelor numerotate cu sintaxă evidențiată în WordPress. Tot ce trebuie să faceți este să înfășurați codul în codul scurt și apoi să afișați ceva de genul:
![Cum să inserați un exemplu de cod în intrările și pe paginile de plugin wordpress 7 (evidențierea codului) Cum se introduce un eșantion de cod în intrările și pe paginile de plugin wordpress 7](https://images-on-off.com/images/146/kakvstavitprimerkodavzapisyaxinastranits-346b8a90.png)
De asemenea, puteți utiliza diferite stiluri pentru a afișa codul, de exemplu, înfășurarea în linie, însă utilizatorii vor găsi dificultăți în copierea și inserarea codului:
![Cum se introduce un exemplu de cod în intrările și pe wordpress 7 pagini de plugin (formatare) Cum se introduce un eșantion de cod în intrările și pe paginile de plugin wordpress 7](https://images-on-off.com/images/146/kakvstavitprimerkodavzapisyaxinastranits-541d36b2.png)
- Adăugarea numerotării rândului pentru fragmente de cod
- Adăugarea evidențierii sintaxei
- Setări diferite de culoare
- Poate adăuga clase personalizate CSS pentru un aspect mai frumos
2. Marcatorul de sintaxă pentru pastel
![Cum se introduce un exemplu de cod în intrările și pe wordpress 7 pagini de plugin (wordpress setting) Cum se introduce un eșantion de cod în intrările și pe paginile de plugin wordpress 7](https://images-on-off.com/images/146/kakvstavitprimerkodavzapisyaxinastranits-77bae6fb.png)
Creionul de sintaxă pentru creion este un alt plugin popular care adaugă numerotarea liniilor și sintaxa evidențiind fragmentul dvs. de cod. În comparație cu SyntaxHighlighter Evolved, creatorul de sintaxă pentru creioane are mai multe setări. Puteți configura aproape totul în fila Setări.
![Cum se introduce un exemplu de cod în intrări și pe wordpress 7 pagini de plugin (design) Cum se introduce un eșantion de cod în intrările și pe paginile de plugin wordpress 7](https://images-on-off.com/images/146/kakvstavitprimerkodavzapisyaxinastranits-9b30d8f0.png)
3. Baza estimativă
![Cum să introduceți un exemplu de cod în intrările și pe wordpress 7 pagini wordpress Cum se introduce un eșantion de cod în intrările și pe paginile de plugin wordpress 7](https://images-on-off.com/images/146/kakvstavitprimerkodavzapisyaxinastranits-41644136.png)
oEmbed este un plugin simplu care vă permite să introduceți un fișier (fragment și scurtă explicație). Pentru a utiliza acest plugin, trebuie doar să introduceți codul în editorul de bază și să creați un conținut public:
![Cum să inserați un exemplu de cod în intrările și pe wordpress 7 pagini de plugin (cod) Cum se introduce un eșantion de cod în intrările și pe paginile de plugin wordpress 7](https://images-on-off.com/images/146/kakvstavitprimerkodavzapisyaxinastranits-da642ea3.png)
Apoi introduceți URL-ul de bază în WordPress Editor, iar pluginul va introduce automat codul de fragment:
- Depășește GistHub Gist
- Include un conținut prin introducerea unei adrese URL
- Poate introduce un fișier dintr-un fișier cu mai multe fișiere
4. WP-GeSHi-Highlight
![Cum se introduce un exemplu de cod în intrări și pe wordpress 7 pagini de plugin (design) Cum se introduce un eșantion de cod în intrările și pe paginile de plugin wordpress 7](https://images-on-off.com/images/146/kakvstavitprimerkodavzapisyaxinastranits-fdb02feb.png)
utilizați etichete regulate
, În timp ce definiți limba de programare.WP-GeSHi-Highlight este un plug-in ușor, în ceea ce privește funcționalitatea și codul de ieșire:
- Explicarea sintaxei cu GeSHi
- Adăugarea unei numerotări suplimentare a liniei
- Lipiți codul cu etichetele standard
și o anumită limbă
- Ușor - adaugă o singură cerere HTTP
5. Pastebin
![Cum să inserați un exemplu de cod în intrările și pe wordpress 7 pagini de plugin (exemplu) Cum se introduce un eșantion de cod în intrările și pe paginile de plugin wordpress 7](https://images-on-off.com/images/146/kakvstavitprimerkodavzapisyaxinastranits-5810b69d.png)
Pastebin este un alt site web pentru partajarea de fragmente de cod. Lucrarea sa este similară cu munca instrumentului GitHub Gist, pe care v-am arătat-o mai devreme. Și ca și GitHub Gist, acest plugin face foarte ușor introducerea codului Pastebin în site-ul dvs. WordPress.
Afișarea numerotării rândului sau nu depinde de setările Pastebin.
- Introducerea codului direct de la Pastebin
- Numerotarea liniilor și evidențierea sintaxelor sunt disponibile.
- Doar inserați URL-ul în WordPress Editor
- De asemenea, puteți introduce coduri scurte și identificare Pastebin
6. Pastacod
![Cum să inserați un exemplu de cod în intrările și pe wordpress 7 pagini de plugin (instrumente) Cum se introduce un eșantion de cod în intrările și pe paginile de plugin wordpress 7](https://images-on-off.com/images/146/kakvstavitprimerkodavzapisyaxinastranits-d3de552c.png)
Pastacode vă va ajuta să inserați codul de fragment utilizând biblioteca populară PrismJs. Puteți evidenția linii speciale de cod și puteți schimba stilul folosind una dintre temele disponibile. Pastacode acceptă, de asemenea, introducerea codului de la GitHub, Gist, Pastebin, BitBucket sau BitBucket.
![Cum să introduceți un exemplu de cod în intrările și pe wordpress 7 pagini wordpress Cum se introduce un eșantion de cod în intrările și pe paginile de plugin wordpress 7](https://images-on-off.com/images/146/kakvstavitprimerkodavzapisyaxinastranits-2eaa9871.png)
- Adăugarea de linii numerotate la un fragment de cod
- Adăugarea evidențierii sintaxei pentru fragmente de cod
- Folosind biblioteca PrismJs
- Abilitatea de a încorpora coduri de la GitHub, Gist, Pastebin, etc.
- Abilitatea de a evidenția linii speciale de cod
7. Codul Prettify
![Cum se introduce un exemplu de cod în intrările și pe wordpress 7 pagini de plugin (formatare) Cum se introduce un eșantion de cod în intrările și pe paginile de plugin wordpress 7](https://images-on-off.com/images/146/kakvstavitprimerkodavzapisyaxinastranits-2f542df2.png)
Codul Prettify folosește biblioteca Google Code Prettify pentru a adăuga în mod automat evidențierea dvs.
și . Cu acest plugin, codul dvs. de fragment va arăta mai jos, și nu așa cum am arătat la începutul acestui articol:
- Funcționează cu etichetele standard
și
- Folosește biblioteca Google Code Prettify
- Reduce corect și cozi
Aceste pluginuri vă vor ajuta să inserați un fragment de cod direct în intrare sau să adăugați cod de la un instrument terț, cum ar fi GitHub sau Pastebin. Dacă ar fi trebuit să alegeți un favorit, acesta ar fi Crayon Syntax Highlighter pentru o varietate de teme și stiluri pe care le puteți utiliza.
Și fără plug-in există o opțiune.
Permiteți-mi să iertăm, dacă nu subiectul. Întrebarea despre introducerea corectă a codurilor în Wordpress.
Întrebarea este: există un "antidot" pentru această rușine?
Încercați să adăugați următoarea linie la sfârșitul fișierului functions.php:
remove_filter ('the_content', 'wptexturize');
"Antidotul" a lucrat! Verificat pe două site-uri diferite. Metoda este perfectă! Mulțumesc pentru sfat!