Avrai sicuramente visto frammenti di codice in diversi post del blog di WPBeginner che creiamo per aiutare i nostri lettori a risolvere problemi. Tuttavia, visualizzare quel codice non è semplice.
Questo perché se provi ad aggiungere codice come testo normale, WordPress non lo visualizzerà correttamente. WordPress elabora il tuo contenuto attraverso diversi filtri di pulizia ogni volta che salvi un post. Questi filtri servono a garantire che nessuno possa iniettare codice tramite un editor di post per hackerare il tuo sito web.
In questo articolo, ti mostreremo i modi corretti per visualizzare facilmente il codice sul tuo sito WordPress. Ti mostreremo diversi metodi e potrai scegliere quello che meglio si adatta alle tue esigenze.
Perché visualizzare il codice su un sito WordPress?
Se stai scrivendo post del blog su argomenti tecnici o creando documentazione per i tuoi prodotti, mostrare frammenti di codice è davvero utile. I tuoi utenti possono semplicemente copiare il pezzo di codice e aggiungerlo al loro sito web.
Tuttavia, visualizzare il codice su un sito web WordPress non è così semplice.
WordPress interpreterà gli snippet come codice funzionale e tenterà di implementarlo sul tuo sito web invece di visualizzarlo come testo. Inoltre, non mostrerebbe il codice in modo accurato, il che causerebbe errori quando gli utenti lo inseriscono sui loro siti web.
Inoltre, WordPress utilizza più filtri come misure di sicurezza. Filtra il contenuto per impedire agli hacker di iniettare codice dannoso nell'editor di contenuti e di violare il tuo sito web.
Detto questo, ci sono diversi modi per mostrare codice in WordPress. Puoi fare clic sui collegamenti sottostanti per passare alla sezione preferita:
Metodo 1. Mostrare codice utilizzando l'editor predefinito in WordPress
Questo metodo è consigliato per i principianti e gli utenti che non hanno bisogno di mostrare codice molto spesso.
Modifica semplicemente il post del blog o la pagina in cui desideri mostrare il codice. Nella schermata dell'editor di contenuti di WordPress, aggiungi un nuovo blocco Codice al tuo post.
Ora puoi inserire lo snippet di codice nell'area di testo del blocco.
Il blocco di codice mostrerà un'anteprima del tuo codice.
Dopodiché, puoi salvare il tuo post del blog e visualizzarlo in anteprima per vedere il blocco di codice in azione.
Una volta soddisfatto dell'aspetto del tuo codice, procedi e pubblica il tuo post del blog.
A seconda del tuo tema WordPress, il blocco di codice potrebbe apparire diverso sul tuo sito web.
Metodo 2. Mostrare codice in WordPress utilizzando un plugin
Per questo metodo, utilizzeremo un plugin WordPress per mostrare codice nei tuoi post del blog. Questo metodo è consigliato per gli utenti che mostrano spesso codice nei loro articoli.
Ti offre i seguenti vantaggi rispetto al blocco di codice predefinito:
- Ti consente di mostrare facilmente qualsiasi codice in qualsiasi linguaggio di programmazione.
- Mostra il codice con evidenziazione della sintassi e numeri di riga.
- I tuoi utenti possono studiare facilmente il codice e copiarlo.
Innanzitutto, è necessario installare e attivare il plugin SyntaxHighlighter Evolved. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin di WordPress.
Dopo l'attivazione, puoi procedere a modificare il post del blog in cui desideri visualizzare il codice. Nella schermata di modifica del post, aggiungi il blocco 'SyntaxHighlighter Code' al tuo post.
Ora vedrai un nuovo blocco di codice nell'editor del post dove puoi inserire il tuo codice.
Dopo aver aggiunto il codice, devi selezionare le impostazioni del blocco dalla colonna di destra.
Innanzitutto, devi selezionare la lingua del tuo codice, come PHP, CSS, Java, ecc. Dopodiché, puoi disattivare i numeri di riga, fornire il numero della prima riga, evidenziare qualsiasi riga desideri e disattivare la funzionalità per rendere i link cliccabili.
Una volta terminato, salva il tuo post e fai clic sul pulsante di anteprima per vederlo in azione.
Il plugin è dotato di una serie di schemi di colori e temi.
Per cambiare il tema colore, devi visitare la pagina Impostazioni » SyntaxHighlighter.
Dalla pagina delle impostazioni, puoi selezionare un tema colore e modificare le impostazioni di SyntaxHighlighter.
Puoi salvare le tue impostazioni per vedere un'anteprima del blocco di codice in fondo alla pagina.
Utilizzo di SyntaxHighlighter con l'editor classico
Se stai ancora utilizzando il vecchio editor classico di WordPress, ecco come utilizzeresti il plugin SyntaxHighlighter per aggiungere codice ai tuoi post del blog di WordPress.
Racchiudi semplicemente il tuo codice tra parentesi quadre con il nome della lingua. Ad esempio, se stai per aggiungere codice PHP, lo aggiungerai in questo modo:
<?php
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
Allo stesso modo, se vuoi aggiungere un codice HTML, lo racchiuderai nel codice breve HTML in questo modo:
<a href="example.com">A sample link</a>
Metodo 3. Visualizza codice in WordPress manualmente (nessun plugin o blocco)
Questo metodo è per utenti avanzati perché richiede più lavoro e non sempre funziona come previsto.
È adatto per gli utenti che utilizzano ancora il vecchio editor classico e desiderano visualizzare codice senza utilizzare un plugin.
Innanzitutto, devi passare il tuo codice attraverso uno strumento online di codificatore di entità HTML. Questo cambierà il markup del tuo codice in entità HTML, il che ti permetterà di aggiungere il codice e aggirare i filtri di pulizia di WordPress.
Ora copia e incolla il tuo codice nell'editor di testo e racchiudilo tra i tag <pre> e <code>.
Il tuo codice dovrebbe apparire così:
<pre><code>
<p><a href="/home.html">Questo è un link di esempio</a></p>
</pre></code>
Ora puoi salvare il tuo post e visualizzare il codice in azione.
Il tuo browser convertirà le entità HTML e gli utenti saranno in grado di vedere e copiare il codice corretto.
Speriamo che questo articolo ti abbia aiutato a imparare come visualizzare facilmente il codice sul tuo sito WordPress. Potresti anche voler consultare la nostra guida su come consentire PHP nei post e nelle pagine di WordPress e la nostra selezione di esperti dei migliori strumenti di sviluppo WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Olaf
Come sviluppatore PHP, ho un piccolo blog dove occasionalmente pubblico varie tecniche e flussi di lavoro per la programmazione in PHP, oltre a condividere i miei snippet. È fantastico che WordPress consenta nativamente la visualizzazione del codice. Tuttavia, personalmente uso un plugin, poiché a volte ho bisogno che il codice mostri che è in CSS, altre volte in PHP e molto raramente in JavaScript. È vantaggioso quando il codice è ben formattato e, idealmente, colorato per funzione, ecc. È anche utile considerare una funzione di copia in modo che gli utenti possano facilmente copiare l'intero snippet di codice negli appunti. Ecco perché preferisco un plugin rispetto all'editor a blocchi.
Dennis Muthomi
Penso che il plugin sia ottimo per il suo scopo, ma...
una funzionalità che mi piacerebbe vedere aggiunta è un pulsante di copia.
Attualmente, gli utenti devono evidenziare e copiare manualmente l'intero blocco di codice, il che può essere noioso, specialmente per snippet più lunghi.
Un'opzione di copia con un clic migliorerebbe enormemente l'esperienza utente.
In questo modo, i lettori potrebbero facilmente acquisire il codice senza perderne accidentalmente alcuna parte quando lo evidenziano.
Supporto WPBeginner
Thank you for sharing that recommendation
Amministratore
Jiří Vaněk
C'è la possibilità di avere un pulsante di copia del codice nel plugin in modo che l'utente non debba copiare il codice negli appunti manualmente?
Supporto WPBeginner
Not at the moment but we will keep an eye out for a method we would recommend
Amministratore
Jiří Vaněk
Grazie per la risposta. È un vero peccato, perché rende molto più facile il lavoro. A volte capita che anche i numeri di riga vengano copiati nel codice usando il metodo manuale. Elementor ha un widget per il codice che ha il pulsante copia ed è fantastico. Seguirò l'aggiornamento dell'articolo se necessario.
Sig.ra Gray
Salve,
Il codice può essere inserito nelle pagine aggiunte da plugin di terze parti come Woocommerce?
Supporto WPBeginner
Sì, potresti inserire il codice in quelle pagine.
Amministratore
Ravish
Ciao, prima di tutto, grazie per questo blog.
Voglio aggiungere codici per qualsiasi problema in diverse lingue (ad es. Python e C++). Come possiamo farlo?
Supporto WPBeginner
Questo plugin dovrebbe funzionare anche per quelle lingue
Amministratore
Nimesh
Questo è fantastico.
Se non fosse stato per questo, avrei usato un plugin separato per gli snippet di codice di input.
Sto ancora usando l'editor classico di WordPress e aggiungerò gli snippet di codice ai miei post come menzionato in questo.
Grazie per questa incredibile condivisione!
Supporto WPBeginner
Glad our guide was able to help
Amministratore
Induwara
Grazie,
Questo articolo è molto utile. Ho installato il plugin e funziona bene. C'è un problema con il mio tema che quando inserisco un codice dall'editor a blocchi, il tema lo visualizza con il colore di sfondo, quindi è impossibile vedere il codice. Sono un grande fan di WpBegginer!
Supporto WPBeginner
Siamo lieti che la nostra guida sia stata utile, dovresti essere in grado di contattare il tuo tema per assistenza con quel problema.
Amministratore
Manju
Puoi suggerire un modo per visualizzare il codice da un repository Github nei post di WordPress?
Supporto WPBeginner
Potresti inserire il codice come abbiamo fatto in questo articolo e annotare sotto dove proviene da Github. Potrebbero esserci anche opzioni di plugin per incorporare direttamente il codice.
Amministratore
Kunal Mandalia
Grazie per il suggerimento sui tag "code" – ha funzionato alla grande.
Supporto WPBeginner
You’re welcome
Amministratore
Mahesh
Bella idea.. Grazie per il suggerimento.
Supporto WPBeginner
Thank you and you’re welcome
Amministratore
perveen
abbiamo bisogno di codifica su wordpress, pensavo non avessimo bisogno di codifica su wordpress.
Supporto WPBeginner
Non è richiesto, ma per i siti che desiderano mostrare codice ai propri utenti, questi sono alcuni metodi che possono utilizzare.
Amministratore
Adamu Malte
Grazie @Syed per il tuo fantastico tutorial.
manasa
Bel blog con informazioni eccellenti. Grazie, continua a condividere.
Anh
Ottimo, mi chiedo solo come si possa pubblicare il codice all'interno
1-click Use in WordPress
e far sì che il codice appaia ancora come testo.
Come si può pubblicare questo codice
.entry-title { font-family:”Open Sans”, arial, sans-serif; font-size:16px; color:#272727; }1-click Use in WordPress
nel tuo post senza cambiare come appare nel post.
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!
Plugin Synatx Highlighter Evolved
Ahmed
Grazie Syed... Ottimo tutorial. Voglio chiederti come possiamo cambiare la dimensione del carattere del codice?
Dave Mackey
Penso ci sia un problema con Syntax Highlighter Evolved nelle ultime versioni di WordPress. Io, e altri, lo stiamo riscontrando che visualizza in modo errato le entità html. Vedi i forum di supporto per maggiori dettagli.
Md Abul Bashar
Come mostrare codice senza plugin, solo codice?
John D
Personalmente, uso WP-GeSHi-Highlight, che utilizza i codici GeSHi standard. Penso di aver usato un predecessore del plugin qui presentato, ma ho avuto difficoltà a trovare i codici dei linguaggi.
Ajay
Ultimamente, ho trovato più facile usare GIST per visualizzare il codice e poi semplicemente incorporare il Gist nel post
Mikhail S.
@AJAY, per favore, dimmi di più sull'uso di GIST per visualizzare esempi di codice.
Grazie!
Thomas A. Reinert
Sono assolutamente d'accordo. Sono ben formattati e con evidenziazione della sintassi, sono forkabili e anche versionabili. Quindi WP GIST è la strada da percorrere almeno per me.