Cum să afișați cu ușurință codul pe site-ul dvs. WordPress

Doriți să afișați cod în postările de pe blogul dvs. WordPress? Dacă ați încercat să adăugați cod ca textul obișnuit, atunci WordPress nu îl va afișa corect.


WordPress rulează conținutul prin mai multe filtre de curățare de fiecare dată când salvați o postare. Aceste filtre sunt acolo pentru a vă asigura că cineva nu injectează cod prin intermediul editorului de poștă pentru a vă hack site-ul.

În acest articol, vă vom arăta căile potrivite de a afișa cu ușurință codul pe site-ul dvs. WordPress. Vă vom arăta diferite metode și o puteți alege pe cea care se potrivește cel mai bine nevoilor dvs..

Cum să afișați cu ușurință codul în postările WordPress

Metoda 1. Afișați codul folosind editorul implicit din WordPress

Această metodă este recomandată pentru începători și utilizatori care nu au nevoie să afișeze codul foarte des.

Pur și simplu editați postarea sau pagina de blog unde doriți să afișați codul. Pe ecranul de editare a postării, adăugați un nou bloc de cod la postarea dvs..

Adăugați bloc de cod la postările dvs. WordPress

Acum puteți introduce fragmentul de cod în zona de text a blocului.

Adăugați cod la postarea dvs. de blog

După aceea, puteți salva postarea dvs. de blog și previzualizați-o pentru a vedea blocul de cod în acțiune.

Cod PHP afișat în WordPress

În funcție de tema WordPress, blocul de cod poate arăta diferit pe site-ul dvs. web.

Metoda 2. Afișați codul în WordPress folosind un plugin

Pentru această metodă, vom folosi un plugin WordPress pentru a afișa cod în postările de pe blog. Această metodă este recomandată utilizatorilor care afișează adesea 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 sintaxelor și numere de linie
  • Utilizatorii dvs. pot studia cu ușurință codul și îl pot copia

În primul rând, 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 merge mai departe și puteți edita postarea blogului unde doriți să afișați codul. Pe ecranul de editare a postării, adăugați blocul „Codul de sintaxă mai mare” la postarea dvs..

Bloc de cod SyntaxHighlighter

Acum veți vedea un nou bloc de cod în editorul de post, unde puteți introduce codul dvs. După adăugarea codului, trebuie să selectați setările blocului din coloana din dreapta.

Setări de bloc de cod SyntaxHighlighter

În primul rând, trebuie să selectați limba pentru codul dvs. După aceea, puteți dezactiva numerele de linie, puteți furniza numărul de primă linie, evidențiați orice linie doriți și opriți funcția pentru a face legături cu clic.

După ce ați terminat, salvați-vă postarea și faceți clic pe butonul de previzualizare pentru ao vedea în acțiune.

Cod afișat cu evidențierea sintaxei

Pluginul vine cu o serie de scheme de culori și teme. Pentru a schimba tema culorii, trebuie să vizitați Setări »SyntaxHighlighter pagină.

Setări SyntaxHighlighter

Din pagina de setări, puteți selecta o temă de culoare și puteți modifica setările SyntaxHighlighter. Puteți salva setările pentru a vedea o previzualizare a blocului de cod din partea de jos a paginii.

Previzualizare bloc bloc

Utilizarea SyntaxHighlighter cu Classic Editor

Dacă utilizați în continuare vechiul editor WordPress clasic, atunci iată cum ați utiliza SyntaxHighlighter plugin pentru a adăuga cod la postările dvs. de pe blogul WordPress.

Pur și simplu înfășurați codul în paranteze pătrate cu numele limbii. De exemplu, dacă veți adăuga cod PHP, atunci îl veți adăuga astfel:

[Php]
<?php
funcție privată get_time_tags () {
$ time = get_the_time (‘d M, Y’);
returna timp $;
}
?>
[/ Php]

În mod similar, dacă doriți să adăugați un cod HTML, atunci îl veți înfășura în jurul codului scurt HTML astfel:

[Html]
O legătură de probă
[/ Html]

Metoda 3. Afișați codul manual în WordPress manual (Fără plugin sau bloc)

Această metodă este destinată utilizatorilor avansați, deoarece necesită mai multă muncă și nu funcționează întotdeauna așa cum este prevăzut.

Este potrivit pentru utilizatorii care utilizează încă vechiul editor clasic și doresc să afișeze cod fără a utiliza un plugin.

În primul rând, trebuie să treceți codul printr-un instrument de codificare online a entităților HTML. Acesta vă va schimba marcarea codului î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 înfășurați-l și etichetați.

Adăugarea manuală a codului în editorul clasic

Codul dvs. ar arăta astfel:

Acesta este un link de exemplu

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.

Afișarea manuală a codului în WordPress

Sperăm că acest articol v-a ajutat să învățați cum să afișați cu ușurință codul pe site-ul dvs. WordPress. De asemenea, poate doriți să vedeți lista noastră finală cu cele mai căutate sfaturi, trucuri și hack-uri WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map