Come utilizzare il blocco di codice di WordPress

La visualizzazione del codice nelle pagine e nei post di WordPress può essere complicata. La semplice pubblicazione del codice all'interno del contenuto può avere risultati interessanti, soprattutto se WordPress lo visualizza in modo errato o se la tua sicurezza ti blocca per attività dannose. Fortunatamente, il Blocco codice di WordPress semplifica la visualizzazione di frammenti di codice. Sapere come utilizzare questo blocco ti aiuterà a visualizzare il codice all'interno dei tuoi contenuti nel modo migliore sia per il tuo sito web che per i tuoi lettori.

In questo articolo, esamineremo il Blocco codice WordPress e vedremo cosa fa. Vedremo come aggiungerlo ai tuoi post e pagine e esamineremo le sue impostazioni e opzioni. Resta fino alla fine per vedere suggerimenti e best practice su come usarlo e vedere le domande frequenti.

Iscriviti al nostro canale Youtube

Come aggiungere il blocco codice al tuo articolo o pagina

Per aggiungere il Blocco codice alle tue pagine e ai tuoi post, seleziona lo strumento di inserimento blocchi accanto all'area del contenuto in cui desideri posizionare il blocco, oppure seleziona l'inseritore nell'angolo in alto a sinistra della pagina. Inserisci il nome del blocco e selezionalo quando appare o scorri i blocchi per vedere cosa c'è.

Se preferisci, puoi digitare /code nell'area in cui vuoi che appaia il blocco. Quindi, premi invio o seleziona il blocco dalle opzioni visualizzate.

Ora hai un Blocco codice all'interno del tuo contenuto in cui puoi aggiungere qualsiasi tipo di codice che desideri visualizzare. Il codice viene contrassegnato automaticamente con tag di codice, quindi viene visualizzato correttamente come codice. Questo aiuta a fornire esempi per i lettori da cui imparare o utilizzare nei propri progetti. In questo esempio, sto usando lo pseudo-codice dalla pagina di supporto di WordPress (perché) lazy.level = advanced.

Impostazioni e opzioni del blocco di codice

Il Blocco codice ha due posizioni in cui troverai impostazioni e opzioni. Il primo è la barra degli strumenti del codice sopra il blocco. Il secondo sono le opzioni nella barra laterale destra. Guarderemo entrambi.

Barra degli strumenti del blocco di codice

Fare clic in un punto qualsiasi del blocco per visualizzare la sua barra degli strumenti. Se non vedi tutti gli strumenti, posiziona il mouse sotto il blocco in una nuova posizione del blocco e quindi fai clic sul blocco. Appariranno tutte le impostazioni.

Cambia tipo di blocco di codice o stile

La prima impostazione utilizza le frecce sinistra e destra. Questo cambia il blocco in un Blocco HTML personalizzato, Blocco preformattato, cambia le colonne e ti consente di creare un gruppo in modo da poter regolare il colore di sfondo, scegliere i bordi e regolare altre opzioni. Passando sopra di loro ti dà un'anteprima di come apparirebbero. Sto passando con il mouse sull'opzione HTML personalizzato.

Lagna

Lo strumento di trascinamento include sei punti. Afferra questi punti per trascinare il blocco dove vuoi. Viene visualizzata una linea blu dove verrà posizionata in ogni posizione possibile quando si passa con il mouse sulle diverse aree.

Quando lo rilasci, il blocco verrà posizionato nella nuova posizione.

Spostare

Le frecce di spostamento su e giù spostano il blocco in alto o in basso di un blocco all'interno dei blocchi di contenuto ogni volta che si fa clic su di essi.

grassetto e corsivo

Le impostazioni in grassetto e corsivo si applicano al codice che hai evidenziato. Puoi usarli insieme o singolarmente. Sto usando entrambi insieme e indipendentemente in questo esempio. È un buon modo per attirare l'attenzione su determinate righe o comandi nel codice.

Collegamento

Il collegamento ti consente di rendere qualsiasi codice un collegamento cliccabile. Puoi cercare o inserire l'URL per la parte di codice che hai evidenziato. Questo è utile se vuoi collegarti a tutorial per ciascuno dei comandi, altri esempi, da dove proviene il codice, ecc. Puoi avere il collegamento aperto nella stessa scheda o in una nuova scheda.

Più configurazioni

Altre impostazioni del Blocco codice apre una casella a discesa con diverse opzioni. Ho applicato ciascuna delle opzioni in questo esempio.

Codice in linea : mostra il testo formattato come codice. Posiziona il testo su una riga da solo. Poiché tutto è formattato come codice, il carattere ha lo stesso aspetto.

Immagine in linea : posiziona un'immagine all'interno del testo in cui hai posizionato il mouse. Apre il Catalogo multimediale in cui è possibile selezionare un'immagine. Se fai clic sull'immagine, vedrai una casella a discesa in cui puoi modificarne la larghezza.

Input da tastiera : aggiunge i tag della tastiera al codice che hai selezionato. Il codice viene visualizzato nel carattere monospazio predefinito del browser.

Barrato : aggiunge una riga al codice che hai evidenziato.

Pedice : formatta il codice come pedice.

Apice : formatta il codice come apice. Puoi usare pedice e apice insieme. Ciò riduce la dimensione del carattere e centra orizzontalmente il codice.

Colore del testo : cambia il colore del codice che hai evidenziato. Seleziona dai colori predefiniti, scegli un colore nello strumento di selezione dei colori o inserisci il valore come HEX, RBG o HSL.

Opzioni

Le opzioni del Blocco codice sono posizionate all'interno dei tre punti all'estrema destra della barra degli strumenti. Le opzioni includono:

Nascondi altre impostazioni: nasconde la barra laterale destra per darti uno spazio di lavoro pulito e ampio.

Copia : copia il blocco in modo da poterlo incollare ovunque all'interno dell'area del contenuto.

Duplica – duplica il blocco e lo posiziona sotto l'originale.

Inserisci prima : aggiunge un'area di contenuto sopra il Blocco codice.

Inserisci dopo : aggiunge un'area di contenuto sotto il Blocco codice.

Sposta in : consente di spostare il blocco posizionando una linea blu che è possibile spostare in alto o in basso con i tasti freccia. Quando ottieni la linea nella posizione desiderata, premi semplicemente Invio.

Modifica come HTML : modifiche all'editor di codice per il blocco in cui è possibile modificare il codice come HTML. Selezionare Modifica visivamente per riportare il blocco in modalità visiva.

Aggiungi a blocchi riutilizzabili : aggiunge il blocco ai blocchi riutilizzabili in modo da poterlo riutilizzare su qualsiasi pagina o post.

Gruppo : aggiunge il blocco a un gruppo in modo da poter apportare modifiche ad essi come una singola unità.

Rimuovi blocco : elimina il blocco di codice.

Impostazioni blocco codice

Le impostazioni del Blocco codice si trovano nella barra laterale destra. Includono Tipografia e Impostazioni avanzate. Selezionando il blocco verranno visualizzate le impostazioni. Se la barra laterale non viene visualizzata, fai clic sull'icona a forma di ingranaggio nell'angolo in alto a destra.

Tipografia

La tipografia ti consente di selezionare la dimensione del carattere per l'intero blocco. Scegli la dimensione del carattere da una casella a discesa con 7 dimensioni o inserisci una dimensione personalizzata nel campo. Fare clic su Reimposta per riportarlo alla dimensione del carattere predefinita.

Avanzate

Le impostazioni avanzate includono un ancoraggio HTML e un campo per classi CSS aggiuntive. L'ancora è un URL solo per questo blocco, quindi puoi collegarti direttamente ad esso. Il campo Classi CSS aggiuntive consente di aggiungere una classe CSS personalizzata per definire lo stile del blocco.

Suggerimenti e best practice per l'utilizzo efficace del blocco di codice

Utilizza questo blocco ogni volta che desideri visualizzare il codice all'interno dei tuoi contenuti. Il codice stesso non ha alcun effetto sul blocco.

Formatta il codice con spazi come faresti quando crei codice con un editor di testo. Usa le impostazioni in grassetto e corsivo per attirare l'attenzione su alcuni frammenti all'interno del tuo codice.

Come con qualsiasi codice, etichettalo bene in modo che sia facile da capire. Puoi commentare il codice o aggiungere note all'interno del blocco, ma assicurati che non siano all'interno degli elementi del codice nel caso qualcuno voglia copiare il codice.

Domande frequenti sul blocco del codice

Qual è lo scopo del Blocco codice WordPress?

Per visualizzare il codice che gli altri possono vedere e utilizzare. Visualizza il codice in un layout pulito che mantiene la spaziatura.

Il Blocco codice esegue il codice?

No. Visualizza il codice formattato in modo che i tuoi lettori possano vederlo e usarlo. Il codice viene automaticamente avvolto con i tag del codice HTML.

Quali tipi di codice può visualizzare?

Visualizzerà qualsiasi codice da qualsiasi linguaggio di programmazione o scripting. La lingua non fa alcuna differenza.

Formatta il codice?

No. Non funziona come editor di codice, quindi non cambia la spaziatura, i colori, aggiunge numeri, ecc. Visualizza semplicemente il codice nel modo in cui lo digiti.

In che modo il Blocco codice è diverso dal Blocco HTML?

Il Blocco HTML ti consente di creare HTML senza dover passare alla visualizzazione dell'editor di codice della tua pagina. Verrà eseguito l'HTML sul front-end. Puoi visualizzare in anteprima i risultati dal back-end. Puoi utilizzare il Blocco codice per visualizzare l'HTML se non vuoi che venga eseguito.

In cosa differisce dal blocco preformattato?

Il Blocco preformattato visualizza il testo con i tuoi spazi in un carattere a spaziatura fissa. Aggiunge caratteri e colori di sfondo per le opzioni della barra laterale.

Conclusione

Questo è il nostro sguardo al Blocco codice WordPress. Il blocco è semplice e facile da usare. Poiché non esegue il codice, la lingua stessa non ha importanza. Questo blocco fornisce un buon modo per visualizzare qualsiasi tipo di codice che i tuoi lettori possono copiare o da cui imparare.

Vogliamo sentire da voi. Hai usato il blocco di codice di WordPress? Fateci sapere cosa ne pensate nei commenti.

Immagine in primo piano tramite Danielala / shutterstock.com