E gli snippet di codice di WordPress sono una parte importante di questo.<\/p>\n\n
Continua a leggere per saperne di pi\u00f9 sugli snippet di codice personalizzati e su alcuni dei migliori snippet da aggiungere al tuo sito web.<\/p>\n\n
Cosa sono gli snippet di codice di WordPress?<\/h2>\n\n
Gli snippet di codice di WordPress<\/strong> sono piccoli pezzi di codice che ti consentono di aggiungere funzioni specifiche o nuove funzionalit\u00e0 al tuo sito web. Pensali come scorciatoie. Non \u00e8 necessario essere un esperto di codifica o assumere uno sviluppatore per apportare piccole modifiche o aggiungere funzionalit\u00e0 uniche al tuo sito web. <\/p>\n\n 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. <\/p>\n\n Gli snippet di codice aiutano il tuo sito web a riflettere la tua visione senza rimanere impigliato nelle complessit\u00e0 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\u00e0 di fare ci\u00f2 che vuoi. <\/p>\n\n 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\u00e0 come vendite flash o modifiche al layout. Inoltre, aiutano a creare la personalit\u00e0 unica del tuo sito web<\/a>, aiutando la tua attivit\u00e0 a distinguersi. <\/p>\n\n Non vuoi un sito Web WordPress<\/a> 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. <\/p>\n\n 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\u00e0 del tuo sito web<\/a>, un’altra area in cui brillano gli snippet di codice.<\/p>\n\n Sebbene i plugin di WordPress siano utili, possono mettere molte richieste aggiuntive del server sul tuo sito web, causandone un caricamento pi\u00f9 lento.<\/p>\n\n Supponiamo che tu voglia aggiungere un pulsante di condivisione sui social. Un plug-in progettato per questo scopo potrebbe essere dotato di altre funzionalit\u00e0 di cui non hai bisogno, rallentando cos\u00ec il tuo sito web. <\/p>\n\n 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.<\/p>\n\n Gli snippet di codice offrono anche la flessibilit\u00e0 di sperimentare. Sebbene gli snippet utilizzino codice CSS, HTML, JavaScript e PHP, non \u00e8 necessaria alcuna esperienza di codifica precedente per utilizzarli: sono adatti ai principianti. <\/p>\n\n 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\u00f9 o offra un’esperienza di scorrimento unica. Questi piccoli interruttori contribuiscono alla tua UX e rendono il tuo sito web memorabile. <\/p>\n\n Per non parlare del fatto che la tua UX influisce direttamente sul tuo posizionamento nell’ottimizzazione dei motori di ricerca<\/a> (SEO), secondo Google.<\/p>\n\n La parte migliore degli snippet di codice di WordPress \u00e8 che non \u00e8 necessario essere un esperto di codifica per farli funzionare.<\/p>\n\n Vediamo come aggiungere questi snippet al tuo sito web, passo dopo passo:<\/p>\n\n Prima di iniziare ad aggiungere frammenti, considera il risultato finale. Vuoi personalizzare il tuo pi\u00e8 di pagina o aggiungere un nuovo <\/a>widget<\/a> WordPress alla barra laterale? Ognuno richiede un codice diverso e conoscere il tuo obiettivo ti aiuter\u00e0 a trovare lo snippet appropriato. <\/p>\n\n 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.<\/p>\n\n Ecco alcune opzioni:<\/p>\n\n L’utilizzo di un plug-in \u00e8 il modo pi\u00f9 semplice per aggiungere frammenti: non devi preoccuparti di problemi tecnici e puoi facilmente richiedere supporto in caso di problemi. <\/p>\n\n E se non desideri plug-in aggiuntivi, utilizza la ricerca speciale di Google nel passaggio successivo.<\/p>\n\n Successivamente, otterrai lo snippet di codice che desideri utilizzare tramite un plug-in o la Ricerca Google.<\/p>\n\n Se utilizzi Google, digita questo nella barra di ricerca:<\/p>\n\n [Tipo di personalizzazione sul tuo sito web] “Frammento di codice” di WordPress<\/strong><\/p>\n\n Ad esempio, se stavate cercando una casella per la biografia dell’autore, ecco come apparirebbe:<\/p>\n\n Il codice che trovi dovrebbe avere un aspetto diverso dai normali caratteri. In genere, il codice contiene un carattere a spaziatura fissa<\/a> (vedi sotto), con una doppia barra (\/\/) che indica cosa fa ogni riga di codice. <\/p>\n\n Una volta copiato il codice (il “\/\/” non influir\u00e0 sul risultato), \u00e8 il momento di aggiungerlo al tuo sito web. Se stai utilizzando un plug-in di snippet di codice come Code Snippets Pro<\/a>, segui le indicazioni del plug-in. <\/p>\n\n Se lo stai aggiungendo manualmente, tutto ci\u00f2 che devi fare \u00e8 incollare lo snippet nella parte inferiore del file functions.php<\/strong> .<\/p>\n\n Per accedere a questo file, vai semplicemente alla dashboard del tuo hosting e fai clic su Avanzate<\/strong>.<\/p>\n\n Questo ti porter\u00e0 al tuo cPanel, dove puoi accedere a tutti i tuoi file.<\/p>\n\n Scorri verso il basso fino alla sezione File <\/strong>e fai clic su Gestisci file<\/strong>.<\/p>\n\n Una volta aperta una nuova scheda, fai semplicemente clic sul pulsante Cerca<\/strong> nell’angolo in alto a destra e digita “functions.php<\/strong>“.<\/p>\n\n 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. <\/p>\n\n Assicurati di rinominare il file con l’esatto nome originale e trascinalo di nuovo nel tuo file manager<\/strong> cPanel<\/strong>.<\/p>\n\n Una volta aggiunto lo snippet al tuo sito web, \u00e8 possibile che non funzioni. Ecco perch\u00e9 ti consigliamo di creare una copia del tuo file functions.php <\/strong>prima di apportare modifiche: in questo modo, il tuo sito web sar\u00e0 sempre in grado di tornare al suo aspetto originale. <\/p>\n\n Inoltre, prendi in considerazione l’utilizzo di un sito Web o di un ambiente di staging<\/a> per testare la funzione dello snippet e vedere come apparir\u00e0 sul front-end. Il tuo sito web non si aggiorner\u00e0 in tempo reale. E nel caso in cui lo snippet non funzioni correttamente, la tua UX in tempo reale non ne risentir\u00e0. <\/p>\n\n Se stai modificando il tema, ti consigliamo di utilizzare un tema figlio, aggiungendo frammenti di codice al file functions.php<\/strong> del tema.<\/p>\n\n Infine, verifica la presenza di funzionalit\u00e0, problemi di compatibilit\u00e0 e altri bug o problemi. \u00c8 importante verificare che il frammento di codice sia privo di errori e faccia esattamente ci\u00f2 che intendevi. <\/p>\n\n 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<\/a>, saprai se vale la pena mantenere il tuo snippet. <\/p>\n\n Ad esempio, monitora statistiche come la velocit\u00e0 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.<\/p>\n\n 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. <\/p>\n\n Il cambiamento di colore potrebbe rendere il pulsante visivamente pi\u00f9 accattivante e evidente, aumentando potenzialmente i tassi di conversione. Oppure potrebbe diventare una distrazione, abbassando i tassi. <\/p>\n\n Infine, \u00e8 essenziale monitorare la velocit\u00e0, in quanto \u00e8 un fattore significativo per il posizionamento su Google<\/a>. Se noti cali costanti nella velocit\u00e0 del tuo sito web, potresti voler eliminare lo snippet. <\/p>\n\n Ora, tuffiamoci in alcuni degli snippet di codice WordPress pi\u00f9 utili per aggiungere nuove funzionalit\u00e0.<\/p>\n\n Una casella personalizzata per la biografia dell’autore pu\u00f2 arricchire il contenuto del post del blog fornendo un contesto sullo scrittore. Sebbene sia possibile utilizzare plugin come Simple Author Box<\/a>, un frammento di codice leggero pu\u00f2 ottenere lo stesso risultato senza alcun sovraccarico aggiuntivo. <\/p>\n\n Questo frammento aggiunge una sezione bio dell’autore sotto ogni tipo di post personalizzato, che pu\u00f2 essere personalizzata per includere link ai social media, una breve biografia e un’immagine dell’autore.<\/p>\n\n Ottieni il frammento (con tutorial).<\/strong><\/a><\/p>\n\n La tua pagina di accesso \u00e8 la porta d’accesso al tuo sito web ed \u00e8 spesso una delle prime impressioni che i clienti e i membri del team ottengono del tuo marchio. Plugin come LoginPress<\/a> modificano la schermata di accesso, ma un frammento di codice pu\u00f2 ridisegnare la pagina in modo che corrisponda al tuo marchio. <\/p>\n\n Cambia il logo, lo sfondo e gli stili dei moduli per offrire un’esperienza coerente e brandizzata fin dall’inizio.<\/p>\n\n Ottieni il codice<\/strong><\/a>.<\/p>\n\n La navigazione breadcrumb non \u00e8 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<\/a>. Se desideri che un plug-in lo faccia per te, Yoast SEO<\/a> pu\u00f2 visualizzare i breadcrumb insieme ad altre funzionalit\u00e0 di miglioramento SEO. <\/p>\n\n Ma puoi anche aggiungere uno snippet per visualizzare una traccia breadcrumb, eliminando la necessit\u00e0 di un altro plug-in.<\/p>\n\n Ottieni il codice (con tutorial).<\/strong><\/a><\/p>\n\n Sebbene i commenti siano eccellenti per il coinvolgimento, ci sono momenti in cui potresti volerli disabilitare su determinati post. S\u00ec, potresti usare un plugin come Disable Comments<\/a>, ma solo poche righe di codice possono gestire il lavoro. <\/p>\n\n 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.<\/p>\n\n Ottieni il codice (con tutorial).<\/strong><\/a><\/p>\n\n 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\u00e0. <\/p>\n\n 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.<\/p>\n\n Ottieni il codice (con tutorial).<\/strong><\/a><\/p>\n\n Un plug-in come Social Media Share Buttons & Sharing Icons<\/a> pu\u00f2 aggiungere icone pertinenti, ma potrebbe essere dotato di funzionalit\u00e0 non necessarie. E in tal caso, l’utilizzo di un frammento di codice pu\u00f2 aggiungere icone senza ulteriori fronzoli. Inoltre, puoi specificare se vuoi che le tue icone siano nell’intestazione, nel pi\u00e8 di pagina o nella barra laterale. <\/p>\n\n Ottieni il codice (con tutorial).<\/strong><\/a><\/p>\n\n 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. <\/p>\n\n Ecco come gestire sei degli errori pi\u00f9 comuni:<\/p>\n\n 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\u00f9 o anche di un nome di funzione con errori di ortografia. Quando ci\u00f2 accade, WordPress potrebbe visualizzare direttamente un messaggio di errore o il tuo sito web potrebbe diventare inaccessibile. <\/p>\n\n Rimedio<\/strong>:<\/p>\n\n Per risolvere questo problema, dovrai accedere al file functions.php<\/strong> 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. <\/p>\n\n Suggerimento<\/strong>: convalida sempre la sintassi del codice prima di distribuirlo per evitare questo problema utilizzando un validatore di codice come FreeFormatter<\/a>.<\/p>\n\n 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, \u00e8 perch\u00e9 il plugin e lo snippet stanno tentando di modificare o controllare la stessa funzione. <\/p>\n\n Rimedio<\/strong>:<\/p>\n\n Il modo pi\u00f9 semplice per identificare quale plugin sta funzionando \u00e8 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\u00f9 in conflitto con il plug-in. <\/p>\n\n Occasionalmente, l’inserimento di uno snippet pu\u00f2 causare l’interruzione o il comportamento imprevedibile del tema WordPress<\/a> . Questo accade quando lo snippet di codice \u00e8 in conflitto con il codice su cui si basa il tema. <\/p>\n\n Rimedio<\/strong>:<\/p>\n\n Sfortunatamente, dovresti rimuovere immediatamente lo snippet di codice, poich\u00e9 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. <\/p>\n\n Gli errori di autorizzazione si verificano quando l’autorizzazione del file o della cartella del tuo sito WordPress \u00e8 configurata in modo errato. L’aggiunta di uno snippet di codice in queste condizioni pu\u00f2 causare un errore o addirittura rendere il tuo sito web pi\u00f9 vulnerabile ai rischi per la sicurezza. <\/p>\n\n Rimedio<\/strong>:<\/p>\n\n 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<\/a> su 755<\/strong> e le autorizzazioni dei file su 644<\/strong>. Se non ti senti a tuo agio nel farlo da solo, prendi in considerazione la possibilit\u00e0 di chiedere assistenza al tuo provider di hosting. <\/p>\n\n In alcuni casi, \u00e8 possibile che un frammento di codice non venga eseguito. Ci\u00f2 potrebbe essere dovuto a un posizionamento errato, a conflitti con altro codice o a codice difettoso. <\/p>\n\n Rimedio<\/strong>:<\/p>\n\n Inizia confermando di aver posizionato lo snippet nella posizione corretta all’interno del file functions.php<\/strong> . Puoi trovare la posizione giusta eseguendo una rapida ricerca su Google o YouTube per vedere se altre persone hanno utilizzato lo stesso snippet. <\/p>\n\n Se la posizione del file \u00e8 corretta, risolvi il problema rimuovendo temporaneamente altri snippet o plug-in aggiunti di recente per vedere se c’\u00e8 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. <\/p>\n\n I problemi di sicurezza sono il risultato di snippet mal codificati, motivo per cui \u00e8 sempre necessario ottenerli da fonti affidabili. Qualsiasi codice aggiuntivo aggiunto a un sito Web introduce<\/em> pi\u00f9 vulnerabilit\u00e0, ma se fatto nel modo giusto, non comporter\u00e0 problemi di sicurezza. <\/p>\n\n Rimedio<\/strong>:<\/p>\n\n Ancora una volta, prova a ottenere frammenti da fonti verificabili. Inoltre, \u00e8 possibile eseguire il codice tramite uno strumento di scansione di sicurezza<\/a> per rilevare potenziali vulnerabilit\u00e0. E per sicurezza, esegui il backup del tuo sito web o del tuo file functions.php<\/strong> per assicurarti che i tuoi dati siano al sicuro. <\/p>\n\n Gli snippet di codice offrono un modo potente per migliorare e personalizzare il tuo sito web, il tutto migliorando l’UX. Tuttavia, le difficolt\u00e0 di inserimento del codice, soprattutto senza un plug-in, possono sembrare schiaccianti. <\/p>\n\n Fortunatamente, i provider<\/a> di hosting WordPress<\/a> 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.<\/p>\n\nPerch\u00e9 utilizzare gli snippet di codice in WordPress?<\/h2>\n\n
![\"Che](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/09\/website-personality.png\")
<\/figure>\n\n![\"Perché](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/09\/why-use-code-snippets.png\")
<\/figure>\n\n<\/a>Come utilizzare e aggiungere frammenti di codice di WordPress<\/h2>\n\n
<\/a>1. Identifica ci\u00f2 che vorresti ottenere<\/h3>\n\n
\n
<\/a>2. Ottieni lo snippet di codice e incollalo nel tuo sito web<\/h3>\n\n
![\"Risultati](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/09\/custom-author-bio-box.png\")
<\/figure>\n\n![\"Esempio](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/09\/code-snippet-example.jpg\")
![\"Screenshot](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/09\/Bluehost-advanced-section.jpg\")
<\/figure>\n\n![\"Screenshot](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/09\/Bluehost-file-manager.jpg\")
<\/figure>\n\n![\"Screenshot](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/09\/find-functions_php-file.jpg\")
<\/figure>\n\n<\/a>3. Testa il tuo frammento di codice<\/h3>\n\n
<\/a>4. Analizza la velocit\u00e0 e altre metriche e modificale quando necessario<\/h3>\n\n
![\"Quali](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/09\/KPIs.png\")
<\/figure>\n\nI migliori frammenti di codice per WordPress <\/h2>\n\n
\n
<\/a>Casella bio dell’autore personalizzata<\/h3>\n\n
![\"Screenshot](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/09\/author-bio-box-code-snippet.jpg\")
Pagina di accesso personalizzata<\/h3>\n\n
![\"Screenshot](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/09\/custom-login-page-code.jpg\")
Briciole di pane SEO<\/h3>\n\n
![\"Screenshot](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/09\/SEO-breadcrumbs-custom-code.jpg\")
Disabilita i commenti su post specifici<\/h3>\n\n
![\"Screenshot](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/09\/custom-code-for-disabling-comments.jpg\")
Personalizza la dashboard per i clienti<\/h3>\n\n
![\"Parte](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/09\/custom-code-for-customizing-WP-dashboard.jpg\")
Aggiungi icone dei social media<\/h3>\n\n
![\"Screenshot](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/09\/code-for-adding-social-icons.jpg\"){kind=icon}
Potenziali errori e come gestirli<\/h2>\n\n
<\/a>Errore di sintassi<\/h3>\n\n
![\"Screenshot](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/09\/FreeFormatter-tool.jpg\")
Conflitto con i plugin<\/h3>\n\n
<\/a>Il tema si interrompe dopo l’aggiunta di uno snippet<\/h3>\n\n
<\/a>Errori di autorizzazione<\/h3>\n\n
<\/a>Il frammento di codice non viene eseguito<\/h3>\n\n
![\"Perché](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/09\/Why-snippets-dont-execute.png\")
<\/figure>\n\n<\/a>Problemi di sicurezza<\/h3>\n\n
<\/a>Considerazioni finali: La guida definitiva agli snippet di codice di WordPress: 6 esempi<\/h2>\n\n