Come visualizzare il codice in WordPress: 3 metodi (con e senza plug-in)

Vuoi visualizzare frammenti di codice sul tuo sito ma non sei sicuro del modo migliore per farlo? Questo post è per te. In questa guida, ti mostreremo diversi metodi per visualizzare facilmente il codice in WordPress .

Perché è difficile visualizzare il codice in WordPress?

Se hai un sito in cui pubblichi guide utili per i tuoi utenti, potresti dover mostrare frammenti di codice nei post del tuo blog. Il fatto è che non è semplice come incollare il codice. In realtà, se incolli uno snippet HTML nel tuo post sul blog, ad esempio, non funzionerà. Come sai, l'editor di testo di WordPress è un editor basato su HTML, quindi elabora automaticamente il codice e lo stampa.

Allo stesso modo, se copi e incolli uno shortcode, WordPress visualizzerà la funzione invece di mostrare semplicemente lo shortcode scritto.

Questo non è l'ideale se vuoi visualizzare il codice e può portare a una formattazione scadente. Ad esempio, se desideri incorporare del codice HTML nel tuo articolo tramite l'editor classico di WordPress, l'editor elaborerà il codice e lo visualizzerà all'interno del contenuto.

Il modo migliore per risolvere questo problema è utilizzare uno stile dedicato per i frammenti di codice. Ed è quello che ti mostreremo in questo articolo.

Come visualizzare il codice in WordPress

Esistono 3 metodi principali per visualizzare il codice in WordPress :

1. Utilizzando l'editor di WordPress
   1. Gutenberg
   2. Editore classico
2. Utilizzo di un plugin WordPress dedicato
3. Inserimento manuale del codice

Diamo un'occhiata a ciascun metodo e ti mostriamo come visualizzare il codice sul tuo sito passo dopo passo.

1) Utilizzo dell'editor di WordPress

Il modo più semplice per visualizzare il codice in WordPress è utilizzare l'editor di WordPress. In questa sezione, ti mostreremo come farlo usando sia Gutenberg che l'editor classico.

1.1) Gutenberg

Innanzitutto, accedi al tuo sito Web WordPress e apri il post in cui desideri visualizzare il codice. Cerca un blocco chiamato Codice e selezionalo.

Puoi iniziare a scrivere il tuo codice lì e, una volta terminato, pubblicare il post. Nel front-end vedrai il codice.

Ecco come puoi utilizzare l'editor Gutenberg per visualizzare il codice sul tuo sito.

1.2) Editor classico

Se stai ancora utilizzando l'editor classico, puoi anche visualizzare frammenti di codice utilizzando l'opzione di testo preformattato. Per prima cosa, apri il post in cui vuoi includere il codice utilizzando l'editor classico.

Quindi, seleziona lo snippet di codice e scegli l'opzione di testo preformattato dal menu a discesa.

Vedrai come cambia il testo. Quindi, pubblica l'articolo e controlla la pagina dal front-end e vedrai il codice all'interno di una casella personalizzata come mostrato di seguito.

In questo modo, puoi visualizzare qualsiasi codice sul tuo sito Web WordPress.

Come puoi vedere, utilizzare l'editor di WordPress è semplice e diretto. Tuttavia, se desideri che più opzioni visualizzino diversi tipi di codice, avrai bisogno di qualcos'altro.

2) Visualizza il codice con un plugin per WordPress

Un altro modo per visualizzare il codice in WordPress è utilizzare un plug-in dedicato. Ci sono molte opzioni là fuori, ma per questa dimostrazione useremo uno strumento gratuito chiamato SyntaxHighighter Evolved.

Innanzitutto, devi installare il plug-in, quindi dopo aver effettuato l'accesso al tuo sito, vai su Plugin> Aggiungi nuovo . Cerca il plug-in SyntaxHighlighter Evolved, installalo e attivalo.

Nella sezione Impostazioni di WordPress, vedrai le opzioni di configurazione del plugin.

Nella pagina delle impostazioni del plug-in, vedrai diverse opzioni di personalizzazione:

• Controllo della versione
• Tema colore
• Caricamento spazzole
• Varie
• Classi CSS aggiuntive
• Numero di riga iniziale
• Riempimento del numero di riga
• Dimensione della scheda
• Titolo

Se sei un utente di base, la configurazione predefinita è abbastanza buona, mentre se sei un utente avanzato, potresti voler dare un'occhiata alle impostazioni e adattarle alle tue esigenze. Dopo aver modificato le impostazioni, salvare le modifiche. Nella sezione di anteprima dal vivo, vedrai un codice di esempio con un effetto di evidenziazione.

A questo punto, il processo varia a seconda dell'editor che stai utilizzando. Diamo un'occhiata a entrambi.

2.1) Editore Gutenberg

Dopo aver attivato il plugin, vedrai un nuovo blocco chiamato SyntaxHighlighter Code nell'editor.

Puoi utilizzare quel blocco per visualizzare diversi tipi di codice nei tuoi post. Seleziona semplicemente il blocco e nel pannello delle impostazioni vedrai l'opzione per scegliere la lingua che desideri visualizzare. Vedrai che ci sono dozzine di lingue tra cui puoi scegliere.

Per questo esempio, visualizzeremo uno snippet di codice CSS, quindi sceglieremo CSS dal menu a discesa.

Puoi anche cambiare la lingua del codice dalla sezione dei blocchi.

Dopo aver selezionato la lingua del codice, incollare lo script nel blocco.

Inoltre, puoi regolare le impostazioni predefinite del plug-in dalla sezione Avanzate nel pannello di destra e modificare lo stile.

Una volta terminato, pubblica (o aggiorna) il post e controlla il post dal front-end per vedere i risultati.

Come puoi vedere nello screenshot sopra, abbiamo evidenziato con successo il codice CSS sul nostro post. In questo modo, puoi visualizzare qualsiasi codice desideri in WordPress semplicemente selezionando la lingua del codice corretta dalle impostazioni del blocco.

2.2) Editor classico

Se non stai utilizzando l'editor Gutenberg, dovrai inserire manualmente il codice della lingua. Per visualizzare i codici Syntaxhighlighter utilizzando l'editor classico, utilizzeremo gli shortcode. Se non hai familiarità con gli shortcode, ti consigliamo di dare un'occhiata a questa guida.

Innanzitutto, apri qualsiasi post o creane uno nuovo utilizzando l'editor classico. Per visualizzare il contenuto HTML, ad esempio, utilizza lo shortcode [html] [/html] e incolla il codice tra di essi come segue e pubblica il post.

[html]
<a href="quadlayers.com">QuadLayers</a>
[/html]

Se controlli il post dal front-end, vedrai il codice HTML evidenziato.

Questo è il modo in cui puoi utilizzare la funzione di incorporamento HTML ma puoi fare lo stesso per qualsiasi altro linguaggio di codice. Ad esempio, per visualizzare uno snippet PHP, utilizzare gli shortcode [php] [/php] , gli shortcode [css] [/css] per mostrare CSS e così via.

In questo modo, puoi modificare gli shortcode e visualizzare tutti gli snippet di codice che ti piacciono. Mostriamo un esempio di frammento di codice PHP in un articolo:

[php]
<?php
?>
[/php]

Come puoi vedere, puoi modificare i codici e visualizzare qualsiasi snippet sul tuo sito WordPress.

NOTA: per modificare il carattere, la dimensione del carattere e il peso del carattere del codice, è necessario aggiungere una classe CSS personalizzata per il plug-in Syntaxhighlighter. Puoi farlo dalle impostazioni del plug-in e quindi aggiungere il codice CSS tramite il personalizzatore di WordPress o l'editor del tema per personalizzarlo.

3) Visualizzare il codice manualmente

Se hai capacità di programmazione, puoi visualizzare manualmente il codice in WordPress. Questo è un metodo più avanzato e ti offre molta flessibilità. Per questa dimostrazione, utilizzeremo i tag <pre> e <code> per visualizzare il codice in un post.

Innanzitutto, è necessario utilizzare uno strumento esterno per convertire il testo in HTML. Useremo MotherEff ma puoi usare qualsiasi altro codificatore HTML che ti piace.

Quindi, incolla il tuo snippet HTML nella casella decodificata e lo strumento ti fornirà una versione codificata.

Per questo esempio, il nostro codice è:

 <p><a href="/quadlayers">Visita il nostro portfolio</a></p>

E lo strumento lo trasforma in questo:

Il codice non sembrerà amichevole, ma farà il lavoro.

Quindi, nella dashboard di WordPress, apri l'editor classico e passa all'editor di testo.

Incolla lì il codice codificato usando i tag di apertura <pre> e <code> e </code> e </pre> per chiuderli. Ad esempio, il nostro codice di esempio sarà simile a questo:

Quindi, pubblica il post e nel front-end vedrai il codice evidenziato come mostrato di seguito.

In questo modo, puoi visualizzare manualmente il codice in qualsiasi post di WordPress.

NOTA : gli utenti di Gutenberg non saranno in grado di utilizzare questo metodo. Puoi farlo solo usando l'editor classico.

Bonus: come visualizzare il codice in un paragrafo

Oltre a visualizzare il codice in un post di WordPress, un'altra alternativa interessante è visualizzare il codice in un paragrafo. In questa sezione, ti mostreremo come farlo. Per questo, useremo un po' di CSS e HTML.

Innanzitutto, devi aggiungere un semplice codice CSS al tuo sito web. Puoi utilizzare il personalizzatore di WordPress o un plug-in specifico del sito come Code Snippets. Per questa demo, andremo su Aspetto> Personalizza> CSS aggiuntivo e incolleremo il nostro codice lì.

 codice {
 dimensione del carattere: 1,2 em;
 colore: #1e1e1e;
 posizione: relativa;
 raggio di confine: 4px;
 sfondo: #e1e1e1
 } 

Dopo aver pubblicato le modifiche, apri qualsiasi post che desideri modificare. Quindi, seleziona il contenuto che desideri evidenziare. Ad esempio, visualizzeremo la frase "s tart a blog" come codice in questo paragrafo.

Passa all'editor di testo e avvolgi il contenuto all'interno dei tag <code> e </code> . Seguendo il nostro esempio, il nostro codice sarà simile a questo:

<code>avvia un blog</code>

Quindi, pubblica o aggiorna le modifiche e controlla il front-end per vedere le modifiche.

In questo modo, puoi evidenziare parole o frasi specifiche. Se desideri modificare lo stile CSS del codice, sentiti libero di modificare lo script CSS che abbiamo utilizzato qui.

Conclusione

Tutto sommato, mostrare il codice sul tuo sito non è semplice come incollare lo script. Tuttavia, in questa guida, ti abbiamo mostrato diversi metodi per visualizzare il codice in WordPress:

1. Utilizzo dell'editor di contenuti di WordPress
2. Con un plugin dedicato
3. Manualmente

Se desideri una soluzione rapida e semplice, l'editor di contenuti di WordPress ti fornisce gli strumenti per mostrare gli script su qualsiasi post. Tuttavia, se hai bisogno di più opzioni di personalizzazione, il plug-in SyntaxHighligher Evolved è la scelta migliore. D'altra parte, se hai competenze di programmazione, puoi aggiungere manualmente i frammenti di codice e personalizzare lo stile nel frontend con un po' di CSS.

Infine, se vuoi evidenziare frasi o parole specifiche in un paragrafo, puoi avvolgere il testo nei tag <code> </code> .

Per ulteriori informazioni su come modificare il codice sul tuo sito, consulta la seguente guida per modificare l'HTML in WordPress.

Hai trovato utile questo post? Quale metodo preferisci per visualizzare il codice sul tuo sito? Fatecelo sapere nella sezione commenti qui sotto.