Come visualizzare facilmente il codice sul tuo sito WordPress

Vuoi visualizzare il codice nei post del tuo blog WordPress? Se hai provato ad aggiungere codice come il testo normale, WordPress non lo visualizzerà correttamente.


WordPress esegue i tuoi contenuti attraverso diversi filtri di pulizia ogni volta che salvi un post. Questi filtri sono lì per assicurarsi che qualcuno non inserisca codice tramite l’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 più adatto alle tue esigenze.

Come visualizzare facilmente il codice nei post di WordPress

Metodo 1. Visualizza codice utilizzando l’editor predefinito in WordPress

Questo metodo è consigliato ai principianti e agli utenti che non hanno bisogno di visualizzare il codice molto spesso.

Modifica semplicemente il post o la pagina del blog in cui desideri visualizzare il codice. Nella schermata di modifica dei post, aggiungi un nuovo blocco di codice al tuo post.

Aggiungi il blocco di codice ai tuoi post di WordPress

Ora puoi inserire lo snippet di codice nell’area di testo del blocco.

Aggiungi il codice al tuo post sul blog

Successivamente, puoi salvare il tuo post sul blog e visualizzarne l’anteprima per vedere il blocco di codice in azione.

Codice PHP visualizzato in WordPress

A seconda del tema di WordPress, il blocco di codice potrebbe apparire diverso sul tuo sito web.

Metodo 2. Visualizza codice in WordPress usando un plugin

Per questo metodo, utilizzeremo un plug-in di WordPress per visualizzare il codice nei post del tuo blog. Questo metodo è consigliato agli utenti che visualizzano spesso codice nei loro articoli.

Ti offre i seguenti vantaggi rispetto al blocco di codice predefinito:

  • Ti consente di visualizzare facilmente qualsiasi codice in qualsiasi linguaggio di programmazione
  • Visualizza il codice con l’evidenziazione della sintassi e i numeri di riga
  • I tuoi utenti possono facilmente studiare il codice e copiarlo

Innanzitutto, è necessario installare e attivare il plug-in SyntaxHighlighter Evolved. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l’attivazione, puoi andare avanti e modificare il post sul blog in cui desideri visualizzare il codice. Nella schermata di modifica dei post, aggiungi il blocco “SyntaxHighlighter Code” al tuo post.

Sintassi Blocco di codice dell'evidenziatore

Ora vedrai un nuovo blocco di codice nell’editor dei post in cui puoi inserire il tuo codice. Dopo aver aggiunto il codice, è necessario selezionare le impostazioni del blocco dalla colonna di destra.

Sintassi Impostazioni blocco codice evidenziatore

Innanzitutto, devi selezionare la lingua per il tuo codice. Successivamente, è possibile disattivare i numeri di riga, fornire il numero della prima riga, evidenziare qualsiasi riga desiderata e disattivare la funzione per rendere selezionabili i collegamenti.

Al termine, salva il tuo post e fai clic sul pulsante di anteprima per vederlo in azione.

Codice visualizzato con l'evidenziazione della sintassi

Il plugin viene fornito con una serie di combinazioni di colori e temi. Per cambiare il tema del colore, devi visitare Impostazioni »Sintassi Evidenziatore pagina.

Sintassi Impostazioni dell'evidenziatore

Dalla pagina delle impostazioni, è possibile selezionare un tema colore e modificare le impostazioni di SyntaxHighlighter. È possibile salvare le impostazioni per visualizzare un’anteprima del blocco di codice nella parte inferiore della pagina.

Anteprima del blocco di codice

Utilizzo di SyntaxHighlighter con Editor classico

Se stai ancora usando il vecchio classico editor di WordPress, ecco come useresti il ​​plugin SyntaxHighlighter per aggiungere codice ai tuoi post sul blog di WordPress.

Basta racchiudere il codice tra parentesi quadre con il nome della lingua. Ad esempio, se stai per aggiungere il codice PHP, lo aggiungerai in questo modo:

[Php]
<?php
funzione privata get_time_tags () {
$ time = get_the_time (‘d M, Y’);
ritorno $ time;
}
?>
[/ Php]

Allo stesso modo, se si desidera aggiungere un codice HTML, lo si avvolgerà attorno allo shortcode HTML in questo modo:

[Html]
Un link di esempio
[/ Html]

Metodo 3. Visualizza il codice in WordPress manualmente (nessun plug-in o blocco)

Questo metodo è per utenti esperti perché richiede più lavoro e non funziona sempre come previsto.

È adatto per gli utenti che utilizzano ancora il vecchio editor classico e desiderano visualizzare il codice senza utilizzare un plug-in.

Innanzitutto, è necessario passare il codice tramite uno strumento di codifica di entità HTML online. Cambia il markup del codice in entità HTML, che ti permetterà di aggiungere il codice e bypassare i filtri di pulizia di WordPress.

Ora copia e incolla il codice nell’editor di testo, avvolgilo e tag.

Aggiunta manuale di codice nell'editor classico

Il tuo codice sarebbe simile al seguente:

Questo è un link di esempio

Ora puoi salvare il tuo post e visualizzare l’anteprima del codice in azione. Il tuo browser convertirà le entità HTML e gli utenti saranno in grado di vedere e copiare il codice corretto.

Visualizzazione manuale del codice in WordPress

Speriamo che questo articolo ti abbia aiutato a imparare come visualizzare facilmente il codice sul tuo sito WordPress. Potresti anche voler vedere il nostro ultimo elenco dei suggerimenti, trucchi e hack più richiesti di WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me