Immagina di aver appena creato il tuo sito Web WordPress. È pieno di contenuti e fascino visivo, ma manca qualcosa. Vuoi aggiungere una casella personalizzata per la biografia dell’autore sotto ciascuno dei post del tuo blog. E senza saper programmare, il compito sembra fuori questione.
Ma con gli snippet di codice di WordPress, puoi sfruttare il codice pre-costruito per ottenere i risultati che desideri. I frammenti di codice semplificano la personalizzazione.
Non c’è da stupirsi che il 29% del milione di siti Web più importanti al mondo sia realizzato con WordPress: è il modo più semplice per creare un sito Web che sia unicamente tuo.
E gli snippet di codice di WordPress sono una parte importante di questo.
Continua a leggere per saperne di più sugli snippet di codice personalizzati e su alcuni dei migliori snippet da aggiungere al tuo sito web.
Cosa sono gli snippet di codice di WordPress?
Gli snippet di codice di WordPress sono piccoli pezzi di codice che ti consentono di aggiungere funzioni specifiche o nuove funzionalità al tuo sito web. Pensali come scorciatoie. Non è necessario essere un esperto di codifica o assumere uno sviluppatore per apportare piccole modifiche o aggiungere funzionalità uniche al tuo sito web.
Ad esempio, potresti aggiungere quella casella bio di cui abbiamo parlato prima. Oppure puoi cambiare il logo della pagina di accesso in modo che corrisponda al tuo marchio.
Gli snippet di codice aiutano il tuo sito web a riflettere la tua visione senza rimanere impigliato nelle complessità dello sviluppo web su larga scala. Che si tratti di una piccola modifica o di un cambiamento significativo, gli snippet di codice di WordPress ti danno la possibilità di fare ciò che vuoi.
Perché utilizzare gli snippet di codice in WordPress?
Gli snippet di codice sono essenziali per personalizzare il tuo sito Web WordPress, migliorarne le prestazioni riducendo il sovraccarico dei plug-in e consentendo una rapida sperimentazione di funzionalità come vendite flash o modifiche al layout. Inoltre, aiutano a creare la personalità unica del tuo sito web, aiutando la tua attività a distinguersi.
Non vuoi un sito Web WordPress di base e standard: vuoi un sito Web unico nel suo genere e personalizzato per il tuo marchio. Con gli snippet di codice, puoi raggiungere questo obiettivo facilmente senza assumere uno sviluppatore per creare un sito Web da zero.
Ad esempio, la casella della biografia dell’autore personalizzata che hai aggiunto al tuo sito web ti ha risparmiato il tempo di assumere uno sviluppatore mantenendo la velocità del tuo sito web, un’altra area in cui brillano gli snippet di codice.
Sebbene i plugin di WordPress siano utili, possono mettere molte richieste aggiuntive del server sul tuo sito web, causandone un caricamento più lento.
Supponiamo che tu voglia aggiungere un pulsante di condivisione sui social. Un plug-in progettato per questo scopo potrebbe essere dotato di altre funzionalità di cui non hai bisogno, rallentando così il tuo sito web.
Ma con uno snippet, devi solo aggiungere il codice specifico per il pulsante di condivisione, riducendo al minimo l’impatto del rumore di fondo non necessario.
Gli snippet di codice offrono anche la flessibilità di sperimentare. Sebbene gli snippet utilizzino codice CSS, HTML, JavaScript e PHP, non è necessaria alcuna esperienza di codifica precedente per utilizzarli: sono adatti ai principianti.
Infine, gli snippet migliorano l’esperienza utente (UX). Forse lo snippet cambia il colore del pulsante di invito all’azione (CTA) in modo che “risalti” di più o offra un’esperienza di scorrimento unica. Questi piccoli interruttori contribuiscono alla tua UX e rendono il tuo sito web memorabile.
Per non parlare del fatto che la tua UX influisce direttamente sul tuo posizionamento nell’ottimizzazione dei motori di ricerca (SEO), secondo Google.
Come utilizzare e aggiungere frammenti di codice di WordPress
La parte migliore degli snippet di codice di WordPress è che non è necessario essere un esperto di codifica per farli funzionare.
Vediamo come aggiungere questi snippet al tuo sito web, passo dopo passo:
1. Identifica ciò che vorresti ottenere
Prima di iniziare ad aggiungere frammenti, considera il risultato finale. Vuoi personalizzare il tuo piè di pagina o aggiungere un nuovo widget WordPress alla barra laterale? Ognuno richiede un codice diverso e conoscere il tuo obiettivo ti aiuterà a trovare lo snippet appropriato.
Sebbene non esistano piattaforme dedicate per consentire agli utenti di condividere frammenti di codice di WordPress, puoi optare per un plug-in per la libreria di frammenti con un database di frammenti collaudati e pronti all’uso.
Ecco alcune opzioni:
- WPCode (il più completo, ma costoso)
- Shortcode degli snippet (ideale per gli snippet ripetitivi, come le biografie degli autori)
- Frammenti di post (Ideale per i blog; conveniente)
L’utilizzo di un plug-in è il modo più semplice per aggiungere frammenti: non devi preoccuparti di problemi tecnici e puoi facilmente richiedere supporto in caso di problemi.
E se non desideri plug-in aggiuntivi, utilizza la ricerca speciale di Google nel passaggio successivo.
2. Ottieni lo snippet di codice e incollalo nel tuo sito web
Successivamente, otterrai lo snippet di codice che desideri utilizzare tramite un plug-in o la Ricerca Google.
Se utilizzi Google, digita questo nella barra di ricerca:
[Tipo di personalizzazione sul tuo sito web] “Frammento di codice” di WordPress
Ad esempio, se stavate cercando una casella per la biografia dell’autore, ecco come apparirebbe:
Il codice che trovi dovrebbe avere un aspetto diverso dai normali caratteri. In genere, il codice contiene un carattere a spaziatura fissa (vedi sotto), con una doppia barra (//) che indica cosa fa ogni riga di codice.
Una volta copiato il codice (il “//” non influirà sul risultato), è il momento di aggiungerlo al tuo sito web. Se stai utilizzando un plug-in di snippet di codice come Code Snippets Pro, segui le indicazioni del plug-in.
Se lo stai aggiungendo manualmente, tutto ciò che devi fare è incollare lo snippet nella parte inferiore del file functions.php .
Per accedere a questo file, vai semplicemente alla dashboard del tuo hosting e fai clic su Avanzate.
Questo ti porterà al tuo cPanel, dove puoi accedere a tutti i tuoi file.
Scorri verso il basso fino alla sezione File e fai clic su Gestisci file.
Una volta aperta una nuova scheda, fai semplicemente clic sul pulsante Cerca nell’angolo in alto a destra e digita “functions.php“.
Quindi, individua il file appropriato, fai doppio clic per scaricare il file e creane una copia. All’interno della copia, puoi incollare il tuo frammento di codice.
Assicurati di rinominare il file con l’esatto nome originale e trascinalo di nuovo nel tuo file manager cPanel.
3. Testa il tuo frammento di codice
Una volta aggiunto lo snippet al tuo sito web, è possibile che non funzioni. Ecco perché ti consigliamo di creare una copia del tuo file functions.php prima di apportare modifiche: in questo modo, il tuo sito web sarà sempre in grado di tornare al suo aspetto originale.
Inoltre, prendi in considerazione l’utilizzo di un sito Web o di un ambiente di staging per testare la funzione dello snippet e vedere come apparirà sul front-end. Il tuo sito web non si aggiornerà in tempo reale. E nel caso in cui lo snippet non funzioni correttamente, la tua UX in tempo reale non ne risentirà.
Se stai modificando il tema, ti consigliamo di utilizzare un tema figlio, aggiungendo frammenti di codice al file functions.php del tema.
Infine, verifica la presenza di funzionalità, problemi di compatibilità e altri bug o problemi. È importante verificare che il frammento di codice sia privo di errori e faccia esattamente ciò che intendevi.
4. Analizza la velocità e altre metriche e modificale quando necessario
Ora che il tuo snippet funziona, ti consigliamo di assicurarti che non influisca negativamente su altri aspetti del tuo sito web. Valutando gli indicatori chiave di prestazione (KPI), ad esempio quelli trovati su Google Analytics, saprai se vale la pena mantenere il tuo snippet.
Ad esempio, monitora statistiche come la velocità di caricamento della pagina, il coinvolgimento degli utenti e i tassi di conversione: ti daranno informazioni sul fatto che il tuo snippet di codice sia un’aggiunta preziosa.
Supponiamo che tu abbia implementato uno snippet per modificare il colore del pulsante “Aggiungi al carrello”. Ti consigliamo di monitorare l’impatto che questo ha sulle tue conversioni di vendita.
Il cambiamento di colore potrebbe rendere il pulsante visivamente più accattivante e evidente, aumentando potenzialmente i tassi di conversione. Oppure potrebbe diventare una distrazione, abbassando i tassi.
Infine, è essenziale monitorare la velocità, in quanto è un fattore significativo per il posizionamento su Google. Se noti cali costanti nella velocità del tuo sito web, potresti voler eliminare lo snippet.
I migliori frammenti di codice per WordPress
- Casella bio dell’autore personalizzata
- Pagina di accesso personalizzata
- Briciole di pane SEO
- Disabilita i commenti su post specifici
- Personalizza la dashboard per i clienti
- Aggiungi icone dei social media
Ora, tuffiamoci in alcuni degli snippet di codice WordPress più utili per aggiungere nuove funzionalità.
Casella bio dell’autore personalizzata
Una casella personalizzata per la biografia dell’autore può arricchire il contenuto del post del blog fornendo un contesto sullo scrittore. Sebbene sia possibile utilizzare plugin come Simple Author Box, un frammento di codice leggero può ottenere lo stesso risultato senza alcun sovraccarico aggiuntivo.
Questo frammento aggiunge una sezione bio dell’autore sotto ogni tipo di post personalizzato, che può essere personalizzata per includere link ai social media, una breve biografia e un’immagine dell’autore.
Ottieni il frammento (con tutorial).
Pagina di accesso personalizzata
La tua pagina di accesso è la porta d’accesso al tuo sito web ed è spesso una delle prime impressioni che i clienti e i membri del team ottengono del tuo marchio. Plugin come LoginPress modificano la schermata di accesso, ma un frammento di codice può ridisegnare la pagina in modo che corrisponda al tuo marchio.
Cambia il logo, lo sfondo e gli stili dei moduli per offrire un’esperienza coerente e brandizzata fin dall’inizio.
Briciole di pane SEO
La navigazione breadcrumb non è solo utile per i tuoi visitatori, ma migliora anche la tua SEO aiutando i motori di ricerca a comprendere la struttura del tuo sito web. Se desideri che un plug-in lo faccia per te, Yoast SEO può visualizzare i breadcrumb insieme ad altre funzionalità di miglioramento SEO.
Ma puoi anche aggiungere uno snippet per visualizzare una traccia breadcrumb, eliminando la necessità di un altro plug-in.
Ottieni il codice (con tutorial).
Disabilita i commenti su post specifici
Sebbene i commenti siano eccellenti per il coinvolgimento, ci sono momenti in cui potresti volerli disabilitare su determinati post. Sì, potresti usare un plugin come Disable Comments, ma solo poche righe di codice possono gestire il lavoro.
Con uno snippet di codice mirato, puoi specificare quali post o pagine non devono visualizzare una sezione di commento, dandoti il pieno controllo senza il sovraccarico di un plug-in.
Ottieni il codice (con tutorial).
Personalizza la dashboard per i clienti
La dashboard di WordPress funge da centro di controllo per la gestione di contenuti, temi, modelli e plugin. Tuttavia, la sua configurazione predefinita potrebbe essere eccessiva per gli altri utenti del tuo account, come gli assistenti virtuali, l’assistenza clienti o la contabilità.
Con uno snippet di codice, puoi rimuovere o aggiungere widget e personalizzare la dashboard in modo che sia semplice o complessa a seconda delle esigenze del tuo team.
Ottieni il codice (con tutorial).
Aggiungi icone dei social media
Un plug-in come Social Media Share Buttons & Sharing Icons può aggiungere icone pertinenti, ma potrebbe essere dotato di funzionalità non necessarie. E in tal caso, l’utilizzo di un frammento di codice può aggiungere icone senza ulteriori fronzoli. Inoltre, puoi specificare se vuoi che le tue icone siano nell’intestazione, nel piè di pagina o nella barra laterale.
Ottieni il codice (con tutorial).
Potenziali errori e come gestirli
Sebbene gli snippet di codice di WordPress siano strumenti eccellenti, presentano una serie di sfide e rischi. Gli errori si verificano in varie forme, ma di solito saprai che qualcosa non va quando una funzione non si materializza, il tuo sito web diventa inaccessibile o incontri un messaggio di errore esplicito.
Ecco come gestire sei degli errori più comuni:
Errore di sintassi
Un errore di sintassi deriva in genere da codice non corretto o incompleto. Potrebbe trattarsi di un punto e virgola mancante, di una parentesi quadra in più o anche di un nome di funzione con errori di ortografia. Quando ciò accade, WordPress potrebbe visualizzare direttamente un messaggio di errore o il tuo sito web potrebbe diventare inaccessibile.
Rimedio:
Per risolvere questo problema, dovrai accedere al file functions.php tramite il tuo cPanel o il pannello di controllo dell’hosting. Quindi, individua lo snippet che causa il problema, correggi l’errore e ricarica il tuo sito web con un file aggiornato.
Suggerimento: convalida sempre la sintassi del codice prima di distribuirlo per evitare questo problema utilizzando un validatore di codice come FreeFormatter.
Conflitto con i plugin
A volte, il tuo nuovo snippet di codice potrebbe entrare in conflitto con i plug-in del tuo sito web, causando il malfunzionamento di uno o entrambi. Spesso, è perché il plugin e lo snippet stanno tentando di modificare o controllare la stessa funzione.
Rimedio:
Il modo più semplice per identificare quale plugin sta funzionando è disattivare tutti i plugin, quindi riattivarli tutti, testando ogni volta per vedere quando il problema si ripresenta. Una volta identificato, puoi cercare un plug-in alternativo o modificare lo snippet in modo che non sia più in conflitto con il plug-in.
Il tema si interrompe dopo l’aggiunta di uno snippet
Occasionalmente, l’inserimento di uno snippet può causare l’interruzione o il comportamento imprevedibile del tema WordPress . Questo accade quando lo snippet di codice è in conflitto con il codice su cui si basa il tema.
Rimedio:
Sfortunatamente, dovresti rimuovere immediatamente lo snippet di codice, poiché non vuoi che questo influisca sulla tua UX. Per evitare questo problema in futuro, testa sempre i nuovi snippet su una versione di staging del tuo sito web prima di distribuirli sul sito web live.
Errori di autorizzazione
Gli errori di autorizzazione si verificano quando l’autorizzazione del file o della cartella del tuo sito WordPress è configurata in modo errato. L’aggiunta di uno snippet di codice in queste condizioni può causare un errore o addirittura rendere il tuo sito web più vulnerabile ai rischi per la sicurezza.
Rimedio:
Per risolvere i problemi di autorizzazione, accedi alla directory principale del tuo sito web utilizzando il tuo file manager cPanel. Impostare le autorizzazioni delle cartelle su 755 e le autorizzazioni dei file su 644. Se non ti senti a tuo agio nel farlo da solo, prendi in considerazione la possibilità di chiedere assistenza al tuo provider di hosting.
Il frammento di codice non viene eseguito
In alcuni casi, è possibile che un frammento di codice non venga eseguito. Ciò potrebbe essere dovuto a un posizionamento errato, a conflitti con altro codice o a codice difettoso.
Rimedio:
Inizia confermando di aver posizionato lo snippet nella posizione corretta all’interno del file functions.php . Puoi trovare la posizione giusta eseguendo una rapida ricerca su Google o YouTube per vedere se altre persone hanno utilizzato lo stesso snippet.
Se la posizione del file è corretta, risolvi il problema rimuovendo temporaneamente altri snippet o plug-in aggiunti di recente per vedere se c’è un conflitto. E se questo non funziona, prova a eseguire il tuo frammento attraverso uno strumento di convalida del codice per vedere se ci sono errori.
Problemi di sicurezza
I problemi di sicurezza sono il risultato di snippet mal codificati, motivo per cui è sempre necessario ottenerli da fonti affidabili. Qualsiasi codice aggiuntivo aggiunto a un sito Web introduce più vulnerabilità, ma se fatto nel modo giusto, non comporterà problemi di sicurezza.
Rimedio:
Ancora una volta, prova a ottenere frammenti da fonti verificabili. Inoltre, è possibile eseguire il codice tramite uno strumento di scansione di sicurezza per rilevare potenziali vulnerabilità. E per sicurezza, esegui il backup del tuo sito web o del tuo file functions.php per assicurarti che i tuoi dati siano al sicuro.
Considerazioni finali: La guida definitiva agli snippet di codice di WordPress: 6 esempi
Gli snippet di codice offrono un modo potente per migliorare e personalizzare il tuo sito web, il tutto migliorando l’UX. Tuttavia, le difficoltà di inserimento del codice, soprattutto senza un plug-in, possono sembrare schiaccianti.
Fortunatamente, i provider di hosting WordPress come Bluehost semplificano questo processo offrendo piani che vengono forniti automaticamente con ambienti di staging, consentendoti di testare gli snippet prima di andare in diretta.
E se dovessi rimanere bloccato, il servizio ProDesign Live di Bluehost offre supporto in tempo reale per aiutarti a superare qualsiasi sfida.
Scrivi un commento