Come aggiungere snippet di codice personalizzati in WordPress (metodo più semplice)

Stai cercando un modo semplice e diretto per aggiungere snippet di codice WordPress al tuo sito web?

Imparare WordPress non significa solo temi e strumenti. A volte, è il sottile potere degli snippet di codice che conferisce a un sito il suo sapore unico.

Quella personalizzazione perfetta che stai cercando? È realizzabile con il codice giusto, ma il problema è che anche il più piccolo errore può danneggiare il tuo sito web.

In questo articolo, ti mostreremo come aggiungere facilmente snippet di codice personalizzati in WordPress senza danneggiare il tuo sito web.

Cosa sono gli snippet di codice in WordPress?

Sotto l'interfaccia user-friendly di WordPress, c'è un mondo di codice che alimenta ogni sua mossa.

Questi minuscoli frammenti di codice, chiamati snippet di codice, sono strumenti compatti ma potenti che istruiscono WordPress su funzionalità specifiche.

Sfruttare la potenza di questi snippet può fare la differenza tra un sito Web WordPress generico e uno personalizzato in base alle tue precise esigenze.

Considerateli l'equivalente WordPress degli incantesimi che, se lanciati correttamente, possono portare a risultati eccellenti sul frontend.

Come aggiungere snippet di codice personalizzati in WordPress

Per aggiungere frammenti di codice personalizzati in WordPress, puoi fare affidamento sulla semplicità e sulla funzionalità di WPCode. Segui i passaggi seguenti per iniziare.

1. Installa e attiva il plug-in WPCode

WPCode è il modo migliore per gli utenti di WordPress di aggiungere snippet di codice personalizzati ai propri siti senza dover interferire con il file functions.php o preoccuparsi di danneggiare il sito con il minimo errore.

Il plug-in per gli snippet di codice semplifica l'aggiunta di snippet a qualsiasi parte del tuo sito WordPress, inclusi piè di pagina e intestazione. Puoi inserire qualsiasi codice personalizzato desideri direttamente dalla dashboard anziché modificare direttamente il file functions.php .

Per iniziare, dovrai installare e attivare il plug-in WordPress sul tuo sito web. Ciò aggiungerà il plugin al pannello del menu di sinistra della dashboard di WordPress, da dove potrai iniziare ad aggiungere rapidamente codici personalizzati.

2. Crea il codice personalizzato (PHP, CSS, HTML)

Se hai già il codice personalizzato pronto, salta questo passaggio e passa a quello successivo. Per coloro che creano il codice personalizzato da zero, ecco un esempio.

Per questa guida, creeremo un codice personalizzato che previene i conflitti di temi che causano la mancata visualizzazione corretta dei valori Radio e Casella di controllo in WPForms.

.wpforms-container input[type=radio] {
	-webkit-appearance: radio !important;
	-moz-appearance: radio !important;
	appearance: radio !important;
}

.wpforms-container input[type=checkbox] {
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
	appearance: checkbox !important;
}

.wpforms-container input[type=radio]:checked:before,
.wpforms-container input[type=radio]:before,
.wpforms-container input[type=checkbox]:checked:before,
.wpforms-container input[type=checkbox]:before,
.wpforms-container input[type=radio]:checked:after,
.wpforms-container input[type=radio]:after,
.wpforms-container input[type=checkbox]:checked:after,
.wpforms-container input[type=checkbox]:after {
	display: none !important;
}

Il codice precedente utilizza CSS per risolvere il problema del conflitto del tema, ma come accennato in precedenza, puoi creare un codice anche con PHP e HTML.

3. Aggiungi il tuo codice personalizzato (nuovo snippet)

Dalla barra del menu di amministrazione di WordPress, fai clic sull'opzione Snippet di codice e quindi sul pulsante Aggiungi nuovo . Dato che hai appena installato il plugin, la tua lista sarà vuota.

Verrai quindi indirizzato alla pagina Aggiungi snippet . Qui puoi aggiungere il tuo codice univoco o selezionare uno snippet di codice dalla libreria predefinita.

Fai clic sul pulsante Usa snippet accanto all'opzione Aggiungi il tuo codice personalizzato (nuovo snippet) per inserire il nuovo codice.

Ora, tutto ciò che devi fare è dare un nome allo snippet e semplicemente copiare e incollare il codice personalizzato che hai creato nello spazio Anteprima codice nel plug-in WPCode.

Dato che abbiamo creato il codice in CSS, nel menu a discesa Tipo di codice , abbiamo selezionato Snippet CSS . Puoi modificarlo in base al codice che hai creato.

Successivamente, scorri verso il basso fino alla scheda Inserimento . Ora seleziona Inserimento automatico e dal menu a discesa Posizione scegli l'opzione Intestazione a livello di sito .

A seconda del tipo di codice che stai creando, puoi anche scegliere di aggiungerlo come [/] Shortcode alle tue pagine/post.

Se desideri assegnare tag al tuo snippet di codice, scorri verso il basso fino alla sezione Informazioni di base . Ciò ti aiuterà a classificare i tuoi esempi di codice per argomento e funzione.

Quando desideri mostrare numerosi snippet nello stesso posto, il parametro Priorità ti consente di scegliere l'ordine in cui verranno elaborati.

Successivamente, la sofisticata funzionalità Smart Conditional Logic ti consente di rivelare o nascondere snippet inseriti automaticamente in base a una serie di criteri.

Infine, tutto ciò che devi fare è selezionare l'opzione Attivo e premere il pulsante Salva snippet prima di uscire dal plugin!

4. Gestione degli errori nel codice personalizzato

Un errore di battitura nel plug-in specifico del sito o nel file del tema potrebbe rendere immediatamente il tuo sito non disponibile ai visitatori quando utilizzi gli snippet di codice.

Sul tuo sito verrebbe visualizzato un errore di sintassi o un errore interno del server 500. Dovrai utilizzare un client FTP per annullare manualmente le modifiche.

La caratteristica unica del plugin WPCode è che identificherà e disabiliterà automaticamente qualsiasi istanza di errori di sintassi nel codice.

Verrà visualizzato un messaggio di errore utile da utilizzare nel debug degli errori. Quando aggiungi il tuo codice personalizzato, la convalida intelligente dello snippet di codice di WPCode rileverà eventuali errori.

Quando passi il mouse sul problema, verrà visualizzato un popup con le istruzioni su come risolverlo.

5. Gestire i tuoi frammenti di codice personalizzati

Se disponi di più snippet di codice, WPCode semplifica incredibilmente la loro gestione con un'interfaccia intuitiva e la libreria di snippet.

Gli snippet di codice possono essere salvati senza essere attivati ​​sul tuo sito web e potrai successivamente attivare o disattivare lo snippet ogni volta che lo desideri.

Inoltre, puoi utilizzare i tag per classificare i tuoi snippet di codice e filtrarli in base al tipo e alla posizione.

Hai anche la possibilità di esportare particolari frammenti di codice o di esportarli tutti in blocco. Basta accedere a Snippet di codice »Strumenti e selezionare l'opzione Esporta .

Il plugin ti consente anche di importare snippet se stai spostando il tuo sito web su un nuovo server. Vai a Snippet di codice »Strumenti»Importa e carica il file di esportazione.

Domande frequenti sugli snippet di codice personalizzati

L'aggiunta di frammenti di codice personalizzati è un argomento popolare di usabilità tra i nostri lettori. Ecco alcune risposte rapide ad alcune delle domande più frequenti:

Qual è il miglior gestore di snippet di codice per WordPress?

WPCode è la scelta migliore per gestire ed eseguire frammenti di codice in WordPress, offrendo un'organizzazione semplificata e funzionalità di integrazione perfetta.

Come posso aggiungere CSS allo snippet di codice in WordPress?

All'interno di WPCode, vai semplicemente alla sezione + Aggiungi nuovo , inserisci il CSS desiderato e assicurati di selezionare il tipo CSS prima di salvare e attivare.

Come posso aggiungere codice personalizzato a WordPress senza plugin?

Puoi introdurre il codice personalizzato direttamente nel file functions.php del tuo tema. Tuttavia, uno strumento dedicato come WPCode garantisce una gestione degli snippet più sicura e organizzata.

Come posso aggiungere codice php personalizzato a WordPress?

Per PHP, vai all'interfaccia di WPCode, scegli + Aggiungi nuovo , incolla il tuo codice PHP e quindi salva. Assicurati sempre che sia testato prima su un sito di temi figlio di staging.

Successivamente, scopri come richiedere un indirizzo e-mail per i download di file

Non sarebbe fantastico se gli utenti di WordPress dovessero fornirti i loro indirizzi email prima di poter scaricare un file? Scopri come convincere i visitatori del tuo sito WordPress a condividere i loro indirizzi email in modo che possano scaricare un file.

Crea ora il tuo modulo WordPress

Pronto a costruire il tuo modulo? Inizia oggi con il plug-in per la creazione di moduli WordPress più semplice. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.

Se questo articolo ti ha aiutato, seguici su Facebook e Twitter per ulteriori tutorial e guide gratuiti su WordPress.