Come aggiungere snippet di codice in WordPress

Pubblicato: 2024-01-18

Se desideri aggiungere snippet di codice al tuo sito Web WordPress, sei nel posto giusto.

Di solito, le persone copiano i codici e li incollano nei file dei temi WordPress. È un processo semplice ma questo processo è per utenti esperti.

Per gli utenti principianti e intermedi, copiare e incollare può sembrare intimidatorio. Ecco perché sto scrivendo questo post.

Inoltre, gli utenti esperti possono ottenere vantaggi perché ti mostrerò come aggiungere facilmente snippet di codice.

Cominciamo!

Motivi per aggiungere snippet di codice al tuo sito WordPress

Prima di tutto, WordPress è il costruttore di siti Web più popolare grazie alle sue impostazioni adatte ai principianti e alle funzionalità incentrate sull'utente.

Tuttavia, l'aggiunta di alcuni codici personalizzati può estendere la potenza del tuo WordPress senza danneggiare il tuo sito web.

Diciamo che in qualche modo hai dei codici che possono essere implementati sul tuo sito web. Ma dove e come li pubblicherai?

È qui che entra in gioco l'opzione per incollare il codice. È un ottimo modo per potenziare il tuo sito web con elementi innovativi.

Un altro motivo per utilizzare il codice personalizzato è che è un modo efficace per estendere la potenza del tuo WordPress.

Quasi per ogni necessità troverai un plugin per WordPress. Ma è saggio installare plugin per tutte le esigenze e appesantire il proprio sito?

Se riesci a gestire il problema con un piccolo set di codice, dovresti farlo.

Detto questo, diamo un'occhiata al processo di aggiunta del codice personalizzato al tuo sito Web WordPress.

Modi per aggiungere codici personalizzati

Esistono diversi modi per aggiungere codici personalizzati al tuo sito Web WordPress. Prima di parlare di questa parte, voglio che tu installi un plugin di backup di WordPress in modo che i tuoi nuovi codici non danneggino nulla nel tuo sito.

Se va storto, puoi ripristinare la versione precedente dal backup e riportare il tuo sito alla fase precedente. Detto questo, un altro aspetto dell’aggiunta di frammenti di codice è dove aggiungerli.

Di solito, puoi aggiungere codici ai file dei modelli di temi, come index.php. Esistono altri file PHP in cui puoi incollare direttamente i tuoi codici.

Il metodo più popolare, immagino, è l'aggiunta di snippet a Functions.php. Almeno, questo è ciò che vedrai nella maggior parte dei tutorial disponibili là fuori.

Ma mostrerò il metodo migliore che ti aiuterà di più quando cambi il tema o desideri interrompere la funzionalità in un momento.

Tuttavia, ecco alcuni dei metodi che puoi utilizzare per aggiungere il tuo codice personalizzato al tuo sito WordPress.

Come aggiungere snippet di codice in WordPress (FluentSnippets)

Il primo passo è aggiungere codice personalizzato con un plugin chiamato FluentSnippets. A proposito, questo plugin è stato sviluppato da noi (il tuo WPManageNinja preferito). Se sei già un utente Fluent (utilizzando qualsiasi prodotto Fluent), sai quanto mantengono la grande qualità dei nostri plugin.

Passo uno: installazione del plugin gratuito

Vai su Plugin > Aggiungi nuovo plugin e cerca FluentSnippets.

Aggiungi nuovo plug-in

Fare clic sul pulsante Installa ora .

Ora fai clic sul pulsante Attiva e il tuo plugin verrà attivato.

FluentSnippets: attiva il plug-in

Torna alla dashboard di WordPress e individua FluentSnippets dal pannello di sinistra. Vedrai un pulsante che dice Crea il tuo primo snippet . In alternativa, puoi sempre premere il pulsante Nuovo snippet in alto a destra.

Crea il tuo primo frammento

Passaggio due: incollare i frammenti di codice

Ora incolla il tuo snippet e dagli un nome. Puoi scrivere qualche descrizione se vuoi. Dopotutto, digli dove eseguire e fai clic sul pulsante Crea snippet .

Incolla il tuo snippet di codice personalizzato

Puoi anche impostare una certa priorità con i numeri, più basso è il numero maggiore sarà la priorità.

Quando hai più snippet, puoi organizzarli in gruppi. Puoi anche assegnare alcuni tag per trovare facilmente i tuoi snippet.

C'è un'opzione chiamata Logica condizionale avanzata. Se lo abiliti, puoi filtrare i tuoi snippet e lasciarli eseguire quando soddisfano la condizione.

A proposito, puoi scrivere script per PHP, PHP + HTML, CSS e JS.

Il modo più semplice per copiare e incollare il codice viene eseguito qui. Puoi andare a vedere le Impostazioni anche se non c'è molto da fare lì.

Incolla il codice nel file del tema

WordPress, per impostazione predefinita, è dotato di numerose funzionalità da applicare al tuo sito. I temi hanno spesso funzionalità avanzate e opzioni di personalizzazione. Ma quando hai bisogno di qualcosa di esatto, potresti aggiungere alcuni codici scritti da te.

Ecco il file function.php per salvarti la schiena. Bene, puoi trovare il file all'interno di ogni tema, ma voglio che tu segua la strada più sicura. Ecco perché ti suggerisco di creare un tema figlio.

Non lasciarti sopraffare. Un tema figlio risiede sotto il tema principale e funziona come i genitori. E il vantaggio è che, se qualcosa va storto, verranno colpiti solo i brunch e non l'albero (tema principale).

Passo uno: crea un tema figlio

Per creare un tema figlio, devi accedere alle cartelle del tuo sito tramite un client FTP come FileZilla. Puoi anche accedere utilizzando il file manager da cui è ospitato il sito.

Una volta effettuato l'accesso con successo, vai su wp-content > temi . Quando navighi lì, puoi vedere le cartelle per tutti i temi installati sul tuo sito web.

Ora devi creare una cartella per il tema figlio che desideri creare. Dai un nome alla cartella. Ti consiglio di scrivere un nome descrittivo per evitare confusione in futuro. Supponiamo che il nome del tuo tema sia tropica, puoi nominare il tema child come tropica_childtheme.

Passaggio due: aggiungi un file CSS

Dopo aver creato la cartella, aggiungi un file style.css al suo interno. Nel tuo editor di testo, incolla il seguente codice:

 /* Theme Name: My Child Theme Theme URI: https: //mysite.com/ Description: This is a new child theme I have created for experimentation. Author: Your Name Author URI: https: //mysite.com/ Template: parenttheme Version: 0.1 */

Non dimenticare di sostituire le tue informazioni con il contenuto fittizio. Assicurati di scrivere correttamente il nome del tema principale (qui è tropica). Un'altra cosa importante è che devi chiamare il CSS del tema genitore all'interno del file style.css del tema figlio.

Puoi farlo semplicemente aggiungendo il seguente codice:

 @import url("../parenttheme/style.css");

Qui il “tema principale” è tropica. Giusto?

Quindi, non dimenticare di scrivere correttamente il nome del tema principale. Una volta terminato, salva il file come style.css nella cartella del tema figlio.

Passaggio 3: crea un file Functions.php

La prossima cosa è che devi creare un file Functions.php per il tuo tema figlio. Apri il tuo editor di testo e incolla il seguente tag PHP:

 <?php //* Write your code here

Ora salva questo file come Functions.php e aggiungilo alla cartella del tema figlio. Inoltre, trascina questa cartella nella directory dei temi del tuo sito utilizzando il tuo client FTP.

Passaggio quattro: attiva il tuo tema

È ora di attivare il tuo tema. Per fare ciò, vai su Aspetto > Temi dal pannello di sinistra della dashboard di WordPress. Puoi vedere il tema figlio che hai creato lì. Fai clic sul pulsante Attiva e il tema figlio inizierà a funzionare.

Passaggio cinque: aggiungi i tuoi snippet di codice

Qui per svolgere il compito principale. Per aggiungere snippet di codice al tema secondario, vai su Aspetto > Editor file tema . Ora seleziona Functions.php o qualsiasi altro file che desideri personalizzare.

esempio di Functions.php

Ecco un esempio di Functions.php

Una volta terminato, fai clic su Aggiorna file e le modifiche verranno implementate sul tuo sito web. Ricarica il sito e controlla tu stesso!

Conclusione

Ora sai come aggiungere snippet di codice personalizzati ai tuoi siti WordPress. Utilizziamo la conoscenza e rendiamo il tuo sito più potente che mai con i tuoi codici personalizzati. Spero che non sia più un compito difficile aggiungere codici.