Acquisire la capacità di mostrare il codice in modo efficace in WordPress è della massima importanza per i blogger e i creatori di contenuti che pubblicano costantemente codice online affinché il loro pubblico possa utilizzarlo. Il codice del computer, come previsto, genera un nuovo output visivo sul front-end di un sito Web, distinto dai tag, dalle barre e dalle parentesi presenti nei frammenti di codice effettivi.
Tuttavia, ciò crea una situazione difficile per le persone che scrivono di sviluppo e progettazione, poiché richiedono un mezzo per presentare in modo appropriato il codice senza che esegua la funzionalità prevista, come la generazione di un pulsante o l'applicazione di stili a un blocco di paragrafo.
In parole povere, quando si crea un post sul blog che include uno snippet di codice come esempio, è imperativo impedire l'esecuzione del codice. Questo approccio consente ai lettori di percepire il codice nella sua forma originale, visualizzarlo all'interno di un blocco ben formattato e persino copiarne il contenuto per i propri sforzi di sviluppo.
Questa guida ha lo scopo di dimostrare vari metodi per visualizzare il codice in WordPress, indipendentemente dal tema WordPress scelto. Inoltre, ti aiuterà a determinare il metodo più adatto per il tuo particolare flusso di lavoro.
Create Amazing Websites
Con il miglior generatore di pagine gratuito Elementor
Parti oraCosa succede quando aggiungi codice normale in WordPress?
Quando aggiungi un codice regolare direttamente in un post o una pagina di WordPress, senza prendere misure specifiche, il codice può causare conseguenze indesiderate. WordPress dispone di meccanismi integrati che elaborano e disinfettano automaticamente i contenuti per garantire sicurezza e funzionalità adeguate. Di conseguenza, quando viene aggiunto del codice regolare, esso può essere modificato o eliminato completamente da WordPress.
Ecco alcune cose che possono accadere quando aggiungi codice normale in WordPress:
- Alterazione del codice: WordPress potrebbe alterare il codice rimuovendo o modificando determinati elementi per prevenire potenziali rischi per la sicurezza o conflitti con le funzionalità della piattaforma. Ciò può comportare la mancata esecuzione del codice come previsto o la produzione di errori.
- Rimozione del codice: WordPress dispone di filtri e misure di sicurezza che possono rimuovere determinati tipi di codice ritenuti non sicuri o non necessari. Ciò può portare alla rimozione di frammenti di codice importanti o dell'intero blocco di codice stesso.
- Distorsione visiva: il codice in genere contiene caratteri speciali, simboli e formattazione che possono interferire con la presentazione visiva del contenuto di WordPress. Può causare problemi di formattazione, disallineamento o la visualizzazione del codice come testo normale anziché essere visualizzato come codice.
- Esecuzione del codice: in alcuni casi, se il codice non viene disinfettato o gestito correttamente, può essere eseguito ed eseguire la funzionalità prevista. Ciò può avere conseguenze indesiderate, come la creazione di pulsanti, l'alterazione dell'aspetto del contenuto o persino il funzionamento generale del tuo sito web.
Per superare questi problemi e visualizzare in modo sicuro il codice in WordPress, si consiglia di utilizzare metodi o plug-in appropriati appositamente progettati per mostrare frammenti di codice. Questi metodi assicurano che il codice sia formattato, conservato e visualizzato correttamente senza modifiche o esecuzioni indesiderate.
Qui aggiungeremo il seguente codice HTML nello snippet:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>
Questo specifico estratto di codice utilizza elementi di stile HTML per generare tre blocchi di contenuto decorati in verde, completi di intestazioni e paragrafi.
Tuttavia, la nostra intenzione è quella di presentare il codice non elaborato all'interno di un post di blog, piuttosto che consentirne il rendering nei blocchi dati.
I seguenti risultati possono essere osservati quando il codice viene incollato direttamente nell'editor a blocchi Gutenberg di WordPress:
Alla luce di quanto sopra, è evidente che WordPress si sforza di utilizzare il codice per la sua funzione primaria di generazione di contenuti. Tuttavia, rimuove lo stile dal codice, non riuscendo così a presentare ai lettori il risultato desiderato.
Per evitare tali circostanze, consigliamo vivamente l'utilizzo di uno dei metodi elencati di seguito allo scopo di visualizzare il codice.
4 modi per visualizzare il codice in WordPress
Le seguenti tecniche sono disposte in ordine crescente di difficoltà e offriamo approcci specifici su misura per le persone che traggono soddisfazione dalla composizione di codice e contenuto all'interno di editor markdown, invece che dall'utilizzo di WordPress.
Metodo 1: utilizzo dell'editor a blocchi di Gutenberg
L'editor Gutenberg include un blocco di codice preesistente che facilita la presentazione di frammenti di codice preservandone la formattazione e senza eseguire il codice.
Per iniziare, accedi a un post o a una pagina in WordPress e procedi a selezionare uno dei pulsanti Aggiungi blocco.
Seleziona uno dei pulsanti "Aggiungi blocco" per procedere.
Così facendo, verrà svelato l'assortimento di blocchi disponibili. Hai la possibilità di cercare il blocco "Codice" o inserire una parola chiave come "codice" nella barra di ricerca.
Dopo aver individuato il blocco di codice, identificabile dalle sue icone tra parentesi, procedi a cliccarci sopra per inserire una sezione di codice nel post.
Al momento, dovrebbe essere visibile un'area con l'indicazione "Componi codice…".
L'editor Gutenberg di WordPress fornisce il supporto per il markdown, consentendo la scoperta e l'inserimento di blocchi di codice attraverso l'uso di una barra (/) seguita dall'inserimento di "C" o "Codice" all'interno dell'editor. WordPress visualizzerà successivamente tutti i blocchi pertinenti, facilitando un processo di inserimento più conveniente.
È importante notare la distinzione tra il blocco Codice e il blocco HTML personalizzato. Mentre il blocco HTML personalizzato è destinato all'inclusione di codice HTML personalizzato da visualizzare sul front-end, il blocco Codice è specificamente progettato per l'aggiunta di codice non elaborato a scopo di visualizzazione.
A questo punto, è il momento opportuno per replicare il codice desiderato e inserirlo nell'apposita area denominata "Scrivi Codice..."
Il codice che hai fornito è ora racchiuso nel blocco di codice designato.
Un aspetto vantaggioso del blocco di codice è la sua aderenza alla formattazione di spazi e tabulazioni all'interno del frammento di codice originale. Di conseguenza, il codice visualizzato dovrebbe mantenere la sua coerenza visiva con la fonte da cui è stato copiato.
Per esibire il tuo codice all'interno del tuo post o della tua pagina WordPress, concludi la procedura cliccando sul pulsante "Pubblica". Inoltre, hai la possibilità di ottenere una rappresentazione visiva del suo aspetto prima della pubblicazione selezionando "Anteprima".
Dopo aver fatto clic sul pulsante "Pubblica", procedi con l'accesso alla versione live del post per verificare che lo snippet di codice venga visualizzato come codice non elaborato.
Come osservato, il blocco di codice è caratterizzato dalla sua semplicità, ma serve allo scopo essenziale di preservare la formattazione quando si presenta il codice all'interno dei post del blog.
Fare riferimento allo screenshot fornito di seguito. In questo particolare esempio, il frammento di codice originale rimane inalterato; è semplicemente presentato nella parte anteriore all'interno di una scatola grigia.
Per migliorare l'importanza del blocco di codice, è consigliabile considerare di modificarne l'aspetto predefinito.
Per accedere alle scelte di stile disponibili per il blocco, seleziona gentilmente il Blocco codice e procedi facendo clic sul pulsante Impostazioni (icona a forma di ingranaggio). Questa azione aprirà la scheda Blocco, visualizzando esclusivamente le impostazioni del blocco applicabili al blocco selezionato, vale a dire il blocco di codice in questa istanza.
Uno ha la possibilità di personalizzare il blocco di codice in base alle preferenze personali, inclusa la possibilità di modificare aspetti come il testo e i colori di sfondo.
Metodo 2: utilizzo di un plug-in
Utilizza il tuo metodo di installazione del plug-in preferito per incorporare il plug-in Evidenziatore di sintassi personalizzabile Enlighter – nel tuo sito WordPress.
Una volta attivato, il plugin sarà completamente funzionante e ti consentirà di inserire codice in qualsiasi articolo/pagina tramite il blocco Gutenberg o il pulsante Inserisci dell'editor classico.
Se stai utilizzando l'editor di blocchi Gutenberg di WordPress, accedi a un post in cui desideri mostrare il codice. Seleziona uno dei pulsanti Aggiungi blocco (identificato dal simbolo "+") per svelare l'assortimento di blocchi disponibili.
Esamina o inserisci una parola chiave relativa al blocco Enlighten Sourcecode. Procedi facendo clic sul rispettivo blocco per incorporarlo nel post.
Il blocco Evidenziatore Enlighter appare successivamente all'interno dell'interfaccia dell'Editor blocchi, con un'intestazione designata intitolata "Evidenziazione generica" e un campo di immissione testo etichettato "Inserisci codice sorgente..."
Inserisci o copia e incolla il codice desiderato destinato alla visualizzazione su WordPress nel campo di testo "Inserisci codice sorgente..." designato.
Nella sua funzione di evidenziatore di sintassi, il plug-in conserva tutte le preferenze di formattazione e le tabulazioni. Una volta raggiunta la soddisfazione per il risultato, procedi a selezionare il pulsante "Pubblica".
Utilizzando questa funzionalità, puoi accedere all'interfaccia utente del tuo post per osservare lo stesso contenuto dei visitatori del sito.
Il plug-in Enlighter fornisce un tema predefinito semplicistico per la visualizzazione del codice, accompagnato da numeri di riga che aiutano nel processo di strutturazione e riferimento.
Come accennato in precedenza, l'utilizzo di un plug-in per mostrare il codice sulla piattaforma WordPress offre vantaggi distinti rispetto a metodi alternativi. Un esempio illustrativo di tale vantaggio è la funzionalità di frontend fornita dal plug-in di sintassi Enlighter, in cui le righe di codice vengono evidenziate dinamicamente mentre l'utente scorre il contenuto.
Inoltre, all'interno della casella del codice situata nell'angolo in alto a destra, sono presenti diversi pulsanti che migliorano l'esperienza dell'utente. In particolare, uno di questi pulsanti consente la presentazione del codice in formato testo normale, privo di numeri di riga.
Il secondo pulsante, denominato "Copy To Clipboard", facilita la duplicazione istantanea di tutti i contenuti all'interno della casella del codice, consentendo agli utenti di trasferire e incollare comodamente il codice in qualsiasi programma desiderato.
Infine, il terzo pulsante apre il codice in una nuova finestra, presentandolo quindi in una finestra del browser formattata come testo normale.
Il plug-in Enlighter offre una gamma di temi e robusti strumenti di personalizzazione per personalizzare l'aspetto della casella del codice in base alle proprie preferenze. Se preferisci non utilizzare il tema predefinito, puoi tornare al tuo post all'interno di WordPress e selezionare il blocco Enlighter Sourcecode attualmente attivo.
Questa azione svelerà la barra laterale Blocca all'interno di WordPress. Nel caso in cui non appaia immediatamente, assicurati di fare clic sul pulsante Impostazioni (icona a forma di ingranaggio) situato nell'angolo in alto a destra della finestra di WordPress.
L'opzione di personalizzazione iniziale da considerare è il campo Lingua, poiché indica al plug-in quale lingua del codice visualizzare, abilitando le funzioni di formattazione ed evidenziazione appropriate.
Esiste una considerevole selezione di linguaggi di codifica da considerare, quindi sfoglia l'elenco e seleziona quello più adatto.
La funzione Speciallines enfatizza le linee designate consentendo agli utenti di inserire numeri di riga separati da virgole.
Di conseguenza, le linee designate che hai specificato sono evidenziate visivamente per tutte le persone che accedono al sito.
Il parametro Lineoffset fornisce un mezzo per iniziare lo snippet di codifica in corrispondenza di un particolare numero di riga, risultando vantaggioso quando si presenta un sottoinsieme di codice da un set di righe più ampio.
Evidentemente, inserendo il valore "10" nel campo Lineoffset, l'intera casella di codice inizia dalla riga numero 10.
Metodo 3: utilizzo di uno strumento di codifica
Si prega di visitare il sito web W3Docs HTML Encoder. Nella pagina troverai due campi box adiacenti. Quello di sinistra è designato per incollare il tuo codice, mentre quello di destra mostra la versione codificata che puoi copiare e incollare in WordPress.
Prima di procedere, è necessario specificare il tipo di conservazione del codice desiderato:
- Seleziona JavaScript Unicode se prevedi di incollare codice contenente elementi JavaScript.
- Scegli i simboli HTML se lavori con l'HTML.
Si prega di inserire il codice desiderato da visualizzare in WordPress nel campo designato a sinistra. Successivamente, individua e seleziona il pulsante Codifica situato in alto a destra.
Il risultato finale potrebbe lasciare perplessi; tuttavia, si tratta essenzialmente di una fusione di elementi HTML volta a preservare la totalità del codice inserito, evitando al contempo qualsiasi attivazione o visualizzazione involontaria di contenuti alternativi sul frontend.
Fare clic sul pulsante "Copia".
Torna a WordPress e accedi al post o alla pagina desiderata. Procedi a selezionare il menu Opzioni (rappresentato da tre punti verticali) situato nell'angolo in alto a destra. Successivamente, opta per la funzione Editor di codice.
L'interfaccia attuale presenterà l'editor di codice invece dell'editor di blocchi visivo. Individua la sezione desiderata per la visualizzazione del codice e procedi con l'inserimento dell'HTML codificato nell'editor.
Nel caso in cui utilizzi l'editor classico di WordPress, è imperativo accedere alla scheda Testo, che corrisponde all'editor di codice nell'editor di blocchi Gutenberg.
Seleziona l'opzione "Aggiorna" o "Pubblica" per finalizzare il post e procedi al front-end del post per osservarne la presentazione visiva.
Sarai in grado di osservare il codice inalterato che è stato inizialmente inserito nel codificatore, prima dell'inclusione degli elementi di codifica HTML. È importante notare che i codificatori non forniscono alcuna capacità di stile, il che rende questo approccio ideale per ottenere un'estetica ordinata e minimalista.
Metodo 4: utilizzo di uno shortcode personalizzato
La creazione di uno shortcode personalizzato assolve il compito di inserire blocchi di codice riutilizzabili senza la necessità di copiare e incollare manualmente. Questo è esattamente il motivo per cui gli shortcode personalizzati offrono una solida opportunità per la visualizzazione del codice sulla piattaforma WordPress.
I vantaggi dell'utilizzo di shortcode personalizzati per la presentazione del codice sono i seguenti:
- Gli shortcode personalizzati consentono di salvare sezioni di codice complesse per il riutilizzo futuro, eliminando la necessità di digitare ripetutamente lunghi frammenti di codice.
- È possibile definire stili CSS personalizzati per evidenziatori di codice e contenitori.
- Gli shortcode possono essere utilizzati da qualsiasi utente, consentendo ad altri contributori di sfruttare facilmente gli evidenziatori e i blocchi del codice con un semplice clic.
La creazione di uno shortcode personalizzato richiede competenza nella modifica dei file dei temi di WordPress, nell'utilizzo del codice PHP e nello sviluppo potenziale di plug-in di WordPress. Di conseguenza, la creazione di uno shortcode personalizzato per WordPress può creare difficoltà per le persone che non conoscono PHP.
Tuttavia, il risultato finale offre un approccio notevolmente più semplice alla visualizzazione del codice sulla piattaforma WordPress.
Si ha la libertà di scegliere qualsiasi nome desiderato per lo shortcode personalizzato e stabilire varie alternative, come [html] [/html] e [css] [/css], per adattarsi a diversi linguaggi di programmazione.
Tieni presente che per un'evidenziazione ottimale della sintassi, è consigliabile utilizzare codici brevi personalizzati in combinazione con l'editor di testo (in WordPress Classic) o la casella HTML personalizzata quando si lavora con l'editor di blocchi Gutenberg di WordPress.
L'obiettivo è costruire uno shortcode su misura che consenta agli utenti di inserire o inserire codice all'interno dei confini delimitati dei tag di apertura e chiusura dello shortcode.
L'obiettivo è sviluppare uno shortcode su misura che consenta agli utenti di inserire o inserire il codice all'interno dei tag di apertura e chiusura designati dello shortcode.
Avvolgendo
La visualizzazione del codice in WordPress è fondamentale per condividere i concetti di programmazione, garantire l'accuratezza, migliorare l'estetica e favorire la collaborazione. Consente agli sviluppatori di istruire il proprio pubblico, fornire prove concrete, migliorare l'esperienza dell'utente e incoraggiare il coinvolgimento della comunità. La presentazione di frammenti di codice promuove trasparenza, fiducia e informazioni affidabili. Shortcode o plug-in personalizzati possono garantire una visualizzazione del codice visivamente accattivante e ben strutturata. La condivisione del codice facilita discussioni, feedback e innovazione. Nel complesso, una visualizzazione efficace del codice in WordPress è essenziale per la diffusione delle conoscenze, la garanzia della qualità e la crescita della comunità di sviluppo di WordPress.
