Come creare una libreria di frammenti di post da utilizzare nei tuoi post e pagine

Molti siti Web WordPress utilizzano codice o funzioni personalizzati da qualche parte all'interno dei loro post e delle loro pagine. La piattaforma semplifica l'aggiunta di questo codice, ma se hai intenzione di riutilizzare gli snippet in tutto il tuo sito, può essere un problema aggiungere il codice manualmente ogni volta che è necessario.

Invece di dover inserire manualmente i frammenti di codice ogni volta che sono necessari, ha più senso organizzarli e salvarli utilizzando i plug-in. In questo articolo, parleremo dei vantaggi di mantenere organizzati i frammenti di codice, quindi ti mostreremo come farlo utilizzando il plug-in Code Snippets Extended in due passaggi. Andiamo a lavorare!

Perché dovresti organizzare i tuoi frammenti di codice?

Anche se non sei uno sviluppatore, è probabile che dovrai aggiungere manualmente del codice al tuo sito web.

Molti utenti di WordPress aggiungono frammenti di codice personalizzati ai loro post e pagine. Indipendentemente dalla tua nicchia e dalle tue dimensioni, ci sono molte situazioni in cui dovrai aggiungere un piccolo codice al tuo sito. Prendi ad esempio Google Adsense o Facebook Pixel, che richiedono entrambi di aggiungere alcune righe di JavaScript al tuo sito web prima che possano funzionare. Molti plug-in di WordPress richiedono anche l'utilizzo di shortcode, quindi le possibilità di aggiungere codice personalizzato al tuo sito Web sono elevate.

Detto questo, è un'ottima idea trovare un modo per salvare tutti quei frammenti di codice che stai utilizzando sul tuo sito. Ecco perché:

• Puoi fare riferimento al tuo codice ogni volta che è necessario. A volte, potresti dimenticare quali righe di codice personalizzato hai aggiunto ai tuoi file, quindi è utile organizzare i frammenti utilizzando una libreria.
• Sarai in grado di riutilizzare più facilmente i frammenti di codice. Se è necessario utilizzare lo stesso codice più volte, ha senso memorizzarlo per un uso successivo.

Ovviamente potresti semplicemente salvare quei frammenti di codice usando normali file di testo sul tuo computer o nel cloud. Tuttavia, l'utilizzo del plug-in WordPress giusto può fornirti un modo più adatto per memorizzarli nel tuo sito. In questo modo, saprai quale codice hai aggiunto a ciascun sito Web specifico con cui lavori.

Presentazione del plug-in esteso Code Snippets

Il plug-in Code Snippets Extended è uno strumento interessante che ti consente di impostare una semplice libreria di codici all'interno di WordPress. Ti consente di salvare il codice personalizzato, identificarlo utilizzando il nome che desideri, quindi aggiungerlo a qualsiasi post e pagina con pochi clic.

Inoltre, il plug-in ti consente anche di visualizzare in anteprima gli effetti dei tuoi frammenti di codice, purché siano semplici JavaScript o CSS. Supporta anche PHP, ma di solito questi frammenti non vengono visualizzati altrettanto bene utilizzando la funzionalità di anteprima dello strumento.

Sebbene il plug-in funzioni bene con Divi Builder nel complesso, c'è un problema che richiede una soluzione alternativa. Per impostazione predefinita, lo strumento aggiunge un nuovo pulsante all'editor, che ti consente di aggiungere uno qualsiasi degli snippet della tua libreria al tuo post o pagina. Tuttavia, il pulsante scompare quando si passa a Divi Builder. La correzione è semplice, tuttavia, e la esploreremo di più tra un minuto.

Caratteristiche principali:

• Salva tutti i tuoi frammenti di codice personalizzati in una libreria centralizzata all'interno della tua dashboard.
• Identifica ogni frammento utilizzando un nome univoco.
• Assegna shortcode facili da usare a ogni elemento della tua libreria.
• Aggiungi frammenti ai tuoi post e alle tue pagine utilizzando una nuova opzione nell'editor di WordPress, senza dover toccare il codice.

Prezzo: GRATIS | Maggiori informazioni

Come creare una libreria di frammenti di post da utilizzare nei tuoi post e pagine (in 2 passaggi)

Prima di iniziare, dovrai installare e attivare il plugin. Una volta che sei pronto, passa al passaggio numero uno!

Passaggio 1: aggiungi nuovi frammenti alla tua libreria

Dopo aver installato il plug-in, vedrai una nuova scheda chiamata Snippet sulla dashboard di WordPress. Fare clic e cercare l'opzione Aggiungi frammenti . Nella schermata successiva, sarai in grado di impostare un nome per identificare il tuo codice all'interno della libreria, nonché caricare tutti i file multimediali necessari per l'esecuzione del codice:

Tieni presente che il codice continuerà a funzionare anche se non carichi i file multimediali necessari da questa pagina, purché siano nella tua libreria. Questa funzione è disponibile solo per consentirti di visualizzare in anteprima gli effetti del tuo codice utilizzando il pulsante Test in fondo alla pagina.

Andando avanti, vedrai anche un editor in cui digiterai il tuo codice CSS, JavaScript, PHP e jQuery. Tuttavia, dovrà essere racchiuso in tag specifici per ogni lingua. Ecco alcuni rapidi esempi di riferimento:

<style>CSS goes between these tags.</style>

<?php PHP tags, on the other hand, are different, so keep that in mind. ?>
<script type="text/javascript"> Same goes for JavaScript, which uses this tag type. </script>
<script type="text/javascript"> jQuery(function($) {
$(document).ready(function(){
// jQuery uses the most complex tags – they need to be set up exactly as shown, and any code should go within this section.
});
});
</script>

Puoi fare riferimento a tutti questi tag sotto l'editor ogni volta che aggiungi un nuovo frammento e finché ricordi che ogni lingua ne richiede una diversa, non è necessario memorizzarli. Inoltre, puoi utilizzare più lingue all'interno dello stesso frammento: assicurati di avvolgerle utilizzando i rispettivi tag.

Dopo aver digitato o incollato il codice, utilizza il pulsante Salva snippet nella parte inferiore della pagina e verrà visualizzato nella scheda Snippet > Snippet sulla dashboard di WordPress:

Ora, non resta che testare il tuo nuovo frammento utilizzando sia l'editor di WordPress che Divi Builder.

Passaggio 2: inserisci i tuoi frammenti nei tuoi post e pagine Divi

Se non stai utilizzando Divi Builder, puoi semplicemente aprire uno qualsiasi dei tuoi post o pagine utilizzando il normale editor di WordPress. Nella parte superiore vedrai un nuovo pulsante Inserisci snippet :

Facendo clic su di esso verrà visualizzato un overlay che mostra tutti gli elementi nella libreria e puoi selezionare quello che desideri:

Ora il plugin aggiungerà il codice all'editor e il gioco è fatto: è così semplice. Tuttavia, se stai utilizzando Divi Builder, non sarai in grado di accedere a questa opzione. Il modo più semplice per aggirare questo problema consiste nell'aprire la scheda Snippet della dashboard in una nuova finestra e copiare lo shortcode corrispondente per il codice che si desidera aggiungere. Una volta ottenuto, torna a Divi Builder e aggiungi un modulo Codice alla pagina su cui stai lavorando:

Una volta entrato, incolla il tuo shortcode nel campo Contenuto e salva le modifiche:

Ora, il tuo frammento funzionerà come al solito. L'uso di Divi Builder aggiunge un passaggio al processo, ma puoi comunque archiviare tutti i frammenti di codice in una libreria interna di facile accesso.

Conclusione

Se sei come noi, apprezzi l'efficienza in tutti i tuoi progetti. È possibile aggiungere manualmente lo stesso codice a più pagine o post, ma non è un buon uso del tempo. Invece, è molto meglio testare il codice una volta, salvarlo nella tua libreria e poi tenerlo nella tasca posteriore virtuale per ogni volta che ne hai bisogno.

Il plug-in Code Snippets Extended ti consente di fare proprio questo. Basta installarlo e seguire questi due passaggi:

1. Aggiungi nuovi frammenti alla tua libreria.
2. Inserisci i tuoi frammenti nei tuoi post e pagine Divi.

Hai domande su come aggiungere frammenti di codice al tuo sito Divi? Chiedi via nella sezione commenti qui sotto!

Immagine in miniatura dell'articolo di Andrii Bezvershenko / shutterstock.com.