Uno dei dubbi essenziali per chi si muove nel mondo del web writing e della scrittura online: come mostrare codice nei testi WordPress. Infatti, l’editor di questo CMS ha dei problemi con qualsiasi tipo di linguaggio e markup che aggiungi nella pagina web. Per un motivo molto semplice: tende a interpretare le stringhe che magari tu inserisci in un post a scopo dimostrativo come dei comandi. Questo porta a risultati diversi.
In alcuni casi non vedrai assolutamente niente, in altri troverai una formattazione diversa. Le opzioni sono diverse e cambiano in base al tipo di codice che vuoi mostrare. Esistono delle soluzioni specifiche? Certo, ecco come scrivere passaggi di HTML, PHP, CSS e altro ancora in un post o una pagina WordPress.
Argomenti
Esistono delle condizioni prestabilite per operare su questo fronte? In realtà la soluzione migliore è quella di avere un WordPress già pronto e aggiornato nella versione attuale. Ovvero quella che utilizza l’editor Gutenberg che si basa sulla possibilità di comporre la pagina web con i blocchi.
Come vedremo nei prossimi passaggi, è proprio questo il metodo per gestire al meglio il codice nei testi.
Se vuoi iniziare con il piede giusto c’è l’hosting con WordPress preinstallato. Basta un click per avviare il tuo sito web con tutto quello che serve per avere una piattaforma pronta e aggiornata, ovviamente con l’editor Gutenberg ma anche altri plugin necessari all’ottimizzazione e al buon funzionamento del sito.
Hosting WordPress preinstallato e gestito
Il metodo principale per mostrare codice nei testi WordPress: sfruttare le potenzialità dell’editor e aggiungere un blocco specifico. Si chiama Codice e ha come simbolo le parentesi che comprendono i tag HTML.
Questo è l’elemento decisivo per inserire e scrivere qualsiasi tipo di linguaggio tecnico nelle pagine web senza influenzare l’output. Come si procede? Una volta aperto il tuo documento – pagina o post, è indifferente – puoi cliccare sul simbolo (+) che serve a inserire nuovi blocchi. Cerchi quello relativo al codice e lo selezioni.
A questo punto devi solo procedere. Unica attenzione: non confondere il block code con quello dell’HTML personalizzato. Quest’ultimo serve a mettere del codice da embeddare nella pagina web, ad esempio se vuoi aggiungere un lettore podcast o un video da YouTube o qualsiasi altra piattaforma di contenuti online.
Una soluzione alternativa e molto semplice per inserire e mostrare codice nei testi WordPress: vai nell’editor HTML e inserisci il tag specifico per lo scopo. In effetti, il blocco Gutenberg appena citato non fa altro che intervenire in questo modo. Comprendendo tutto quello che scrivi nel tag <code>. Sei di fronte a una soluzione semplice ma efficace per intervenire sulla scrittura del codice senza perdere tempo prezioso.
Una necessità semplice ma che può portare dei grattacapi: come faccio a mettere codice nei testi WordPress se la parte interessata è compresa in un paragrafo di testo ordinario?
Per intenderci: il blocco code di Gutenberg è perfetto per inserire interi blocchi illustrativi di codice, dalla programmazione alla formattazione.
Ma come posso inserire una stringa di HTML in un blocco ordinario? C’è sempre WordPress Gutenberg ad aiutarti con la funzione Codice inline.
La trovi nel menu di formattazione cliccando sulla freccia in basso che apre il menu a tendina con una serie di funzioni accessorie come la possibilità di aggiungere apici o testo barrato. Seleziona il contenuto che vuoi trasformare in codice e clicca.
Da leggere: come inserire tag alt nelle immagini WordPress
Forse tutto ciò non ti basta, non è sufficiente. In diversi casi puoi aver bisogno di evidenziare alcuni elementi del codice con colori differenti oppure ti serve una griglia numerata per citare stringhe di codice con una precisione differente. In questi casi, per mostrare codice nei testi WordPress puoi utilizzare un plugin specifico per il tuo compito: Enlighter – Customizable Syntax Highlighter è quello che ti serve. Il motivo?
Così puoi inserire il codice mettendo in evidenza ciò che serve. Qualcosa del genere lo ottieni con SyntaxHighlighter Evolved anche se uno dei plugin migliori su questo fronte si chiama Code Block Pro – Beautiful Syntax Highlighting che serve proprio a gestire il codice mettendo in evidenza alcuni elementi.
