Guida per principianti all’incollaggio di snippet dal Web in WordPress

Volete imparare a incollare snippet dal web in WordPress?

Pubblichiamo molti tutorial di WordPress che chiedono agli utenti di aggiungere snippet di codice a WordPress.

Copiare e incollare il codice nei file dei temi di WordPress può sembrare facile per gli utenti esperti, ma può intimidire i principianti.

In questo articolo vi mostreremo come copiare e incollare frammenti di codice dal web in WordPress senza rompere il vostro sito.

Perché aggiungere i Code Snippet al vostro sito WordPress?

WordPress è il miglior sito web al mondo per la flessibilità che offre. È facilissimo aggiungere nuove caratteristiche e funzionalità al sito e può aiutare a costruire quasi ogni tipo di sito web.

Condividiamo tutti i tipi di suggerimenti e trucchi che potete utilizzare per migliorare il vostro sito web. Alcuni di questi suggerimenti richiedono l’aggiunta di codice a WordPress.

Anche se l’aggiunta di snippet di codice personalizzati al sito web è facoltativa e spesso si possono trovare plugin che svolgono lo stesso compito, a volte un semplice snippet è più efficiente.

Spesso l’aggiunta di snippet di codice può essere un modo semplice per correggere molti errori comuni di WordPress, migliorare la sicurezza di WordPress e aggiungere nuove caratteristiche al sito web.

Detto questo, vediamo come aggiungere snippet di codice al vostro sito web WordPress in modo sicuro.

Quali sono i modi migliori per aggiungere Code Snippet in WordPress?

Importa ricordare che prima di iniziare ad aggiungere snippet di codice al vostro sito web WordPress, dovreste installare e utilizzare un plugin per il backup di WordPress.

In questo modo il vostro sito WordPress è al sicuro e potete sempre ripristinarlo da un backup nel caso in cui qualcosa vada storto.

Quando si aggiungono gli snippet a WordPress, si possono trovare istruzioni per aggiungerli ai template dei temi di WordPress, come index.php, single.php e altri.

Questi snippet sono utili solo per quei file di temi specifici, quindi dovrete aggiungerli direttamente o creare un tema child di WordPress.

Tuttavia, la maggior parte dei frammenti di codice sarà aggiunta al file functions.php del tema WordPress. Alcuni tutorial consigliano di aggiungerli direttamente al file, ma esistono alternative migliori che consentono di proteggere le modifiche in futuro.

In questo modo, se si cambia tema, le funzionalità personalizzate non vengono rimosse.

Esistono diversi modi per modificare i file di WordPress, a seconda del metodo scelto per add-on al vostro blog o sito web WordPress.

Detto questo, diamo un’occhiata ad alcuni dei modi più semplici per aggiungere snippet di codice personalizzati in WordPress.

Metodo 1: Aggiunta di codice personalizzato con il plugin WPCode (facile)

L’uso di un plugin per gli snippet di codice è il modo più sicuro e adatto ai principianti per aggiungere codice a WordPress.

Il plugin WPCode consente di add-on e di gestire facilmente gli snippet di codice personalizzati sul sito web, senza dover modificare i file del tema.

È dotato di una valida funzione di convalida degli snippet di codice che aiuta a prevenire i più comuni errori di codice. In questo modo si evita di rompere il sito web quando si aggiungono gli snippet di codice.

WPCode dispone anche di una libreria di codice integrata che consente di trovare facilmente tutti i più popolari snippet di codice di WordPress. È possibile aggiungere questi snippet di codice scritti da esperti facendo solo pochi clic.

La parte migliore è che consente di gestire tutti gli snippet di codice da un unico schermo centrale e di organizzarli utilizzando i tagga.

Nota: il metodo WPCode è utile per gli snippet che devono essere aggiunti al file functions.php. Se viene richiesto di aggiungere uno snippet di codice in altri file del tema, questo metodo non funzionerà.

Come modificare e aggiungere codice a WordPress con WPCode

Se utilizzate il plugin WPCode per aggiungere codice a WordPress, allora aggiungerete il codice direttamente nella dashboard di amministrazione di WordPress.

Per prima cosa, è necessario installare e attivare il plugin gratuito WPCode. Per maggiori dettagli, consultate la nostra guida per principianti su come installare un plugin di WordPress.

Dopo l’attivazione, è sufficiente andare su Code Snippets ” + Add Snippet nella dashboard di amministrazione di WordPress. Quindi, fare clic sul pulsante Aggiungi nuovo.

Si accede così a uno schermo in cui è possibile scegliere uno snippet dalla libreria predefinita o aggiungere il proprio codice personalizzato.

Per aggiungere codice personalizzato, fare clic sul pulsante Usa snippet sotto l’opzione “Aggiungi codice personalizzato (nuovo snippet)”.

Sullo schermo successivo, iniziate a dare un nome al vostro snippet per aiutarvi a ricordarlo. Quindi, incollare il codice nella casella. Assicuratevi di scegliere il tipo di codice corretto dal menu a discesa sulla destra.

Quindi, scorrere verso il basso fino alla sezione “Pannello di inserimento”. Qui si può scegliere di utilizzare lo snippet di codice come shortcode da copiare e incollare manualmente in qualsiasi punto del sito.

In alternativa, è possibile selezionare il metodo “Inserimento automatico” per scegliere una posizione (funzione di WordPress) in cui inserire automaticamente lo snippet di codice.

È possibile scegliere posizioni come Esegui ovunque, Solo frontend, Solo amministratore, Header del sito, Dopo l’articolo, Tra gli articoli, Prima del paragrafo e altro ancora.

La parte migliore di WPCode è che, oltre alle varie opzioni di inserimento automatico, è dotato anche di opzioni di logica condizionale adatte ai principianti. Ciò consente di selezionare quando il codice deve essere caricato.

Una volta terminata l’aggiunta del codice, spostare l’interruttore da “Inattivo” ad “Attivo” in alto a destra.

Quindi, fare clic sul pulsante Salva snippet.

Una volta che lo snippet è attivo, verrà add-on automaticamente o visualizzato come shortcode, a seconda del metodo di inserimento scelto.

Per istruzioni dettagliate, consultate la nostra guida su come add-onare facilmente gli snippet di codice personalizzati in WordPress.

Come aggiungere codice all’ header e al footer di WordPress

A volte è sufficiente aggiungere codice ai file header.php o footer.php del tema. Anche il plugin WPCode può aiutarvi a farlo facilmente.

È utile quando si deve aggiungere al proprio sito web un codice di tracciamento per Google Analytics, Google AdSense, Facebook Pixel, TikTok Pixel e altro ancora.

Inoltre, consente di gestire tutti i codici di header e footer in un unico posto, evita errori manuali e permette di aggiornare o cambiare il tema senza preoccupazioni.

Nota: questo metodo funziona meglio per gli script di tracciamento, i CSS personalizzati e il codice JavaScript.

Andare su Code Snippets ” Header & Footer e inserire lo snippet di codice nella sezione header, contenuto o footer del sito web.

Fai clic sul pulsante “Salva modifiche” e i tuoi snippet di codice saranno disponibili sul tuo sito web.

Per maggiori dettagli, consultare la nostra guida su come add-on il codice header e footer in WordPress.

Metodo 2: Aggiunta di codice personalizzato nel plugin WordPress specifico del sito

Un’altra opzione flessibile è quella di utilizzare un plugin WordPress specifico per il sito. Si tratta di un plugin personalizzato che si può creare per il proprio sito web e utilizzare per salvare tutto il codice personalizzato.

Il vantaggio di questo metodo è che il codice non dipende dal tema e rimane attivo anche quando si cambia tema. Inoltre, non è influenzato da eventuali aggiornamenti di WordPress sul sito web.

Nota: questo metodo è applicabile solo ai frammenti di codice che devono essere aggiunti al file functions.php.

Se si utilizza un plugin specifico per il sito, è possibile utilizzare l’editor del codice di WordPress integrato per aggiungere il codice personalizzato.

Per prima cosa, dovete andare su Plugin ” Editore di plugin e selezionare il vostro plugin dal menu a discesa con l’etichetta “Seleziona il plugin da modificare:”.

L’editore caricherà il plugin specifico del sito. A questo punto, è possibile aggiungere semplicemente del codice alla pagina.

Una volta terminato, fate clic sul pulsante “Aggiorna file” per salvare le modifiche.

Se qualcosa manca nel codice o può danneggiare il sito web, l’editor del codice annullerà automaticamente le modifiche apportate.

Un altro modo per aggiungere codice personalizzato a un plugin specifico per il sito è utilizzare l’FTP. Per maggiori dettagli, consultate la nostra guida per principianti su come utilizzare l’FTP per l’uploader dei file su WordPress.

È sufficiente aprire il sito web utilizzando il client FTP preferito, quindi fare clic con il tasto destro del mouse sul file del plugin e selezionare l’opzione “Visualizza/Modifica”.

Questo aprirà il file in modo da poter aggiungere gli snippet di codice. Quando si salva e si effettua un nuovo uploader del file, le modifiche verranno visualizzate automaticamente.

Per maggiori dettagli, consultare la nostra guida su come creare un plugin specifico per il sito web.

Metodo 3: Aggiunta di codice personalizzato a Functions.php o ad altri template del tema

Infine, è possibile aggiungere gli snippet di codice direttamente al file functions.php del tema. Tuttavia, si consiglia di utilizzare le altre opzioni di cui sopra, in quanto presentano alcuni svantaggi.

Innanzitutto, se si aggiorna il tema di WordPress, tutte le modifiche apportate andranno perse.

Inoltre, il codice aggiunto funzionerà solo se si utilizza quel tema specifico.

Detto questo, vediamo come copiare e incollare correttamente gli snippet di codice per evitare di rompere il sito web.

Se si aggiungono snippet di codice direttamente al file functions.php del tema o a qualsiasi altro template di pagina, è possibile aggiungere il codice navigando in Aspetto ” Editor del codice nel pannello di amministrazione di WordPress.

Quindi, si può selezionare il file dalla colonna di destra e si aprirà nell’editore.

Il tutorial che state seguendo vi dirà dove potete aggiungere lo snippet di codice, ma se non è così, dovete aggiungere il codice in fondo al file, sotto tutto il codice presente.

Un’altra alternativa è utilizzare l’FTP del file manager del vostro hosting WordPress per aggiungere codice personalizzato ai file del tema.

Collegatevi al vostro sito web con il vostro client FTP, quindi andate in wp-content ” temi ” cartella del vostro tema e fate clic con il tasto destro del mouse sul file da modificare.

Quindi, fare clic sull’opzione “Visualizza/Modifica” per aprire il file nell’editor di testo e aggiungere il frammento di codice.

Risoluzione degli errori PHP durante l’aggiunta di codice personalizzato

Ci sono alcuni errori comuni che i principianti commettono quando aggiungono snippet di codice personalizzati ai loro siti web WordPress. Fortunatamente, la maggior parte di questi errori può essere evitata e corretta facilmente.

Vediamo questi errori e i modi migliori per correggerli.

1. Uso non corretto dei tag PHP Begin e End

WordPress è scritto principalmente nel linguaggio di programmazione PHP, che ha una sintassi specifica che indica al server che il codice seguente deve essere elaborato da PHP. Ecco come si presenta un tipico frammento di codice PHP:

// PHP Begin Tag
<?php
  
// Rest of the code goes here
  
// PHP End Tag
?>

Tutto il codice PHP deve trovarsi all’interno dei tag <?php e ?>.

Il tag PHP backend è molto importante nei file che vanno avanti e indietro tra PHP e HTML. Ciò include la maggior parte dei file dei temi di WordPress che utilizzano tag PHP insieme all’HTML.

Se si incolla il codice in una posizione in cui il tag PHP iniziale non è chiuso, è necessario aggiungere il codice senza il tag PHP iniziale.

<?php
// Some pre-existing code
 
// your custom code
 
?>

Se si incolla il codice personalizzato al di fuori o dopo il tag PHP end, è necessario aggiungere anche il tag PHP begin.

<?php
// Some pre-existing code
?> 
 
// Your custom code snippet
<?php 
 
?>

Quasi il 90% di tutti gli errori sono causati dall’errato posizionamento dei tag PHP start o end. L’esame del codice aiuterà a capire se è necessario aggiungere o meno i tag PHP start o end nel frammento di codice personalizzato.

Tuttavia, molti file dei temi di WordPress, come functions.php, potrebbero non avere alcun tagga di fine PHP. Ciò significa che è possibile aggiungere il codice in fondo al file senza i tag di inizio o fine.

Ecco un esempio di come si presenta.

<?php
// Lots of code in your theme's functions.php file
//
//
// Your custom code
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');

Ricordate che alcuni tutorial possono presupporre che sappiate già come usare i tag di inizio e fine del PHP. Quindi, potrebbero semplicemente mostrare uno snippet di codice senza questi tag.

function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');

A volte, quando vengono forniti degli snippet di codice, questi possono essere aggiunti a più posizioni, quindi i tag PHP end e start non saranno inclusi.

Quando si aggiunge uno snippet di codice nei file del tema, è necessario assicurarsi che si trovi all’interno dei tagga PHP.

2. Errori di nidificazione non corretta

PHP ha una sintassi particolare per le funzioni, la logica condizionale e i loop. Questa sintassi si basa su parentesi graffe che indicano quando una funzione inizia e quando finisce.

Ad esempio, ecco una semplice funzione PHP:

<?php
function wpbeginner_tutorial() {
echo "Hello World!";
}
?>

Ora, se si vuole aggiungere uno snippet di codice personalizzato che non ha nulla a che fare con questa funzione, è necessario inserirlo al di fuori di questa funzione, in questo modo:

// Pre-existing code in your theme file
<?php
function wpbeginner_tutorial() {
echo "Hello World!";
}
// Your custom code
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
?>

Se mancano le parentesi graffe iniziali o finali, il codice si interrompe e viene visualizzata una pagina di errore.

Capire gli errori PHP in WordPress

Gli errori causati dall’aggiunta di codice personalizzato a WordPress sono spesso accompagnati da un messaggio di errore dettagliato. La maggior parte di essi sono errori di sintassi, errori di parsing o errori irreversibili dovuti a caratteri inaspettati.

La buona notizia è che questi errori indicano quale riga del codice ha causato l’errore.

Quindi, è possibile andare alla riga esatta per rivedere il codice e capire cosa si è perso.

Per questo, si consiglia di utilizzare un editor di testo appropriato per la modifica del codice, in quanto dispone di numeri di riga e di evidenziazione della sintassi che possono aiutare a correggere facilmente il problema.

Se si utilizza il plugin WPCode, viene fornito anche con una precisa segnalazione degli errori che mostra la riga esatta in cui si è verificato un errore.

Quando WPCode rileva un errore che potrebbe impedire l’accesso all’area di amministrazione del sito web, disabilita automaticamente gli snippet in modo da poter correggere il problema in tutta sicurezza.

Cosa fare quando il sito WordPress è inaccessibile?

Prima di tutto, fate un respiro profondo e non fatevi prendere dal panico. Tutti i file del vostro sito web sono ancora lì e potete accedervi.

È sufficiente connettersi al sito web utilizzando un client FTP o l’applicazione di gestione dei file nel cPanel del vostro account di hosting WordPress.

Per maggiori dettagli, consultate la nostra guida per principianti su come utilizzare l’FTP per l’uploader dei file su WordPress.

Quindi, individuare il file in cui è stato aggiunto il codice che ha causato l’errore e aprirlo per modificarlo.

Quindi, si può provare a correggere i problemi con lo snippet di codice. Se non si riesce a correggere i problemi, è sufficiente rimuovere lo snippet di codice aggiunto e salvare le modifiche.

Ora il sito dovrebbe tornare normale. Se il sito mostra ancora qualche errore, scaricate una nuova copia del tema di WordPress ed estraete il file zip sul vostro computer.

Dopodiché, individuare il file in cui sono state apportate le modifiche e caricarlo sul server sovrascrivendo il vecchio file.

Per ulteriori modi di risolvere questi problemi, consultate la nostra guida sugli errori più comuni di WordPress e su come correggerli. Se non dovesse essere d’aiuto, seguite la nostra guida alla risoluzione dei problemi di WordPress per eseguire una diagnosi passo dopo passo.

Speriamo che questo articolo vi abbia aiutato a imparare come incollare frammenti di codice dal web in WordPress. Potreste anche consultare la nostra guida su come creare un indirizzo email aziendale gratuito e la nostra selezione dei migliori software di live chat per le piccole imprese.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.