CSS personalizzato: dovresti usare un tema figlio di WordPress o il Customizer?

WordPress è uno strumento dinamicamente flessibile che può essere utilizzato sia da sviluppatori web esperti che da proprietari di siti inesperti. Se non riesci a trovare un modo per dare uno stile a qualcosa di tuo gradimento, puoi aggiungere stili personalizzati, chiamati anche CSS (Cascading Stylesheets) per modificare l'aspetto del tuo sito, da layout e posizionamento a colori, caratteri e altro ancora.

Storicamente, gli utenti di WordPress hanno utilizzato temi figlio per personalizzare l'aspetto grafico di un sito Web WordPress. Un tema figlio eredita tutte le qualità di un tema padre, tuttavia ne fa un po' di più. Con l'aggiunta del Personalizzatore di WordPress, è diventato più facile aggiungere un po' di CSS per effettuare alcune delle stesse cose che abbiamo fatto tradizionalmente con i temi figlio.

Quando usi un tema figlio anziché aggiungere semplicemente CSS al personalizzatore? Ci sono casi in cui un plug-in di frammenti di codice ha più senso?

In questo post del blog, esaminiamo la personalizzazione dei tuoi temi con il tuo CSS in vari modi e discutiamo quando ha senso utilizzare un metodo piuttosto che un altro. Prima, però, chiariamo alcuni termini. Cos'è il personalizzatore, cos'è un tema figlio e quali plug-in svolgono anche questi lavori?

Che cos'è un tema figlio?

Un tema figlio è un tema WordPress che eredita tutte le qualità di un altro tema WordPress. Il tema principale, il tema principale, può essere un tema commerciale, uno che hai sviluppato tu stesso o uno qualsiasi dei temi gratuiti nella directory dei temi di WordPress.org. E sì, puoi creare un tema figlio di Kadence. Parleremo più avanti in questo post del fatto che potresti non averne bisogno o meno o dei casi in cui potresti volerlo.

Per creare un tema figlio, creerai una directory separata in wp-content/themes/ allo stesso livello del tema principale. In genere inizierà con due file, style.css e functions.php, ma puoi anche aggiungere molte altre personalizzazioni a un tema figlio che desideri. Abbiamo una guida che parla della creazione di temi figlio se ne hai bisogno. Esistono numerosi plug-in che creeranno un tema figlio per te e puoi rimuovere questi plug-in di configurazione del tema figlio una volta creato il tema figlio.

Perché le persone usano i temi figlio?

Gli utenti di WordPress creano temi figlio quando devono apportare una modifica al tema principale, ma desiderano un processo di aggiornamento semplice per il tema principale.

Ad esempio, vuoi aggiungere i tag di Google Analytics all'intestazione del tuo sito, o vuoi assicurarti che tutti i moduli, le immagini o i pulsanti abbiano uno stile in un certo modo, o forse stai apportando personalizzazioni alle e-mail di WooCommerce che devono essere salvato nella tua area tematica.

Quando crei un tema figlio, tutte le tue personalizzazioni vengono salvate e protette dalla sovrascrittura quando il tema principale richiede un aggiornamento. Per motivi di sicurezza e funzionali, è sempre importante mantenere aggiornati temi e plugin. Ma non vuoi ri-personalizzare il tuo tema ogni volta che il tuo tema richiede un aggiornamento, quindi l'aggiunta di stili a un tema figlio ha senso. In questo modo, il tema principale viene aggiornato mentre il tema figlio rimane lo stesso.

Hai bisogno di un tema figlio?

Nella storia di WordPress, l'aggiunta di un tema figlio è stata una delle personalizzazioni più importanti di un nuovo sito WordPress. Non importa cosa stai facendo con WordPress, un tema non è mai stato l'ultimo, tutto. Storicamente ci sono stati due motivi per creare un tema figlio.

1. Per aggiungere CSS aggiuntivi.
2. Per aggiungere ulteriori funzioni.

Storicamente, per la massima personalizzazione, un tema figlio è stato il modo più semplice per farlo preservando l'integrità del tema principale. Ma molto è cambiato con l'aggiunta di WordPress Customizer.

Qual è il personalizzatore?

Quando visualizzi una pagina o un post di WordPress come utente connesso con diritti di modifica o amministratore, c'è un'opzione nella barra di amministrazione per la personalizzazione di WordPress. Quando si fa clic su questo, si apre una cornice a due finestre in cui è presente un personalizzatore a sinistra e il sito stesso a destra.

Nella personalizzazione, hai accesso a tutto ciò che può essere personalizzato per un determinato sito. Ci sono alcuni controlli generali che il core di WordPress aggiunge, ma molti temi, incluso Kadence, aggiungono anche alcune opzioni di impostazione qui.

L'aggiunta del personalizzatore offre ai proprietari del sito nuovi modi per impostare qualsiasi cosa, inclusa un'opzione per aggiungere CSS aggiuntivi. In passato, l'unico modo per applicare CSS aggiuntivi a un sito WordPress era farlo tramite un tema figlio.

Le impostazioni di colori, caratteri e persino layout di intestazione/piè di pagina possono essere eseguite con il personalizzatore.

L'interpretazione di Kadence di temi, personalizzazioni e plugin per bambini

Kadence ha preso la posizione secondo cui dovresti essere in grado di personalizzare il più possibile il tuo sito WordPress tramite il Customizer. Ci sono una varietà di impostazioni disponibili nelle opzioni di personalizzazione di Kadence e puoi persino aggiungere il tuo codice di Google Analytics tramite il Customizer al tuo sito a tema Kadence usando la versione Kadence Pro.

E se aggiungi funzioni aggiuntive al tuo sito WordPress, farlo con il plug-in Code Snippets è stato il modo più semplice per farlo per la maggior parte degli utenti.

In questo modo, per la maggior parte degli utenti di WordPress, Kadence ha semplificato il modo in cui vengono aggiunti stili e funzionalità aggiuntivi a WordPress, rendendo molto più semplice la gestione di un sito WordPress.

Detto questo, non tutti i siti WordPress sono uguali, non tutti gli utenti WordPress sono gli stessi e le esigenze e l'implementazione di un sito potrebbero essere diverse da un altro. Inoltre, ci sono una miriade di metodi per fare qualcosa con WordPress.

Ecco alcune cose da considerare quando aggiungi codice personalizzato al tuo sito WordPress.

Quando dovresti usare il personalizzatore

Se stai aggiungendo solo poche righe di codice CSS, il personalizzatore sarà la soluzione migliore. Puoi facilmente aggiungere alcune righe, pubblicare e vedere come il CSS ha effetto sul tuo sito WordPress direttamente nella vista di personalizzazione.

Per la maggior parte dei proprietari di siti, il personalizzatore è tutto ciò di cui hanno bisogno.

Per gli utenti di Kadence Pro, ci sono luoghi dell'evento nel personalizzatore per aggiungere script di tag di intestazione, piè di pagina e body tag, quindi anche se stai utilizzando Google Tag Manager, Google Analytics o qualsiasi altro servizio che richieda l'aggiunta di script personalizzati, il Customizer può facilmente ospitare le tue personalizzazioni.

Quando dovresti usare il plug-in frammenti di codice

Se stai aggiungendo solo poche righe di codice PHP, il plug-in Code Snippets è un ottimo modo per aggiungere codice. Puoi facilmente attivare e disattivare il codice utilizzando il plug-in per testare e assicurarti che il codice funzioni correttamente.

Nell'esempio sopra, del codice è stato aggiunto a un sito utilizzando frammenti di codice da eseguire solo nell'area di amministrazione per far funzionare meglio LearnDash ed Elementor insieme per la modifica del corso. Questo avrebbe potuto essere fatto anche con un tema figlio, ma per questo proprietario del sito, i frammenti di codice erano un'alternativa più semplice.

Naturalmente, per i minimalisti di plug-in che desiderano eseguire i propri siti con il minor numero possibile di plug-in, il plug-in Code Snippets potrebbe essere un grande passo avanti. Bilanciare meno plugin con le funzionalità necessarie è qualcosa che deve essere fatto caso per caso.

Quando dovresti usare un tema figlio

Se stai aggiungendo più di poche righe di codice CSS o estendendo la funzionalità del sito con codice PHP aggiuntivo, un tema figlio potrebbe essere il modo migliore per farlo. L'area CSS del Customizer è piuttosto piccola, quindi l'aggiunta di molti CSS potrebbe essere opprimente o confondere la gestione. In un caso come questo, un tema figlio sarà più semplice. Inoltre, se stai aggiungendo funzioni personalizzate che sono più di quelle che il plugin Code Snippets può gestire facilmente, un tema figlio può farlo facilmente.

Un tema figlio consente di aggiungere più righe di CSS e gestirlo con il file system anziché avere CSS archiviati nel database e aggiunti a ogni singola pagina. Tramite un tema figlio, CSS viene caricato tramite un file style.css, che può essere memorizzato nella cache dai browser fornendo un piccolo vantaggio in termini di prestazioni. Se stai aggiungendo un po' di codice personalizzato o funzioni personalizzate, un tema figlio è il modo migliore per farlo.

Problemi di prestazione

Quando si utilizza la funzione CSS aggiuntiva del personalizzatore, gli stili aggiunti aggiungeranno il codice in linea in un tag <style> all'inizio di ogni pagina. Ciò significa che se hai molti CSS, aumenterai le dimensioni di tutte le tue pagine individualmente. Il browser del visitatore del tuo sito scaricherà i tuoi stili personalizzati più volte.

D'altra parte, mentre aggiungere CSS a un file di foglio di stile significa che il browser deve scaricare un foglio di stile aggiuntivo, significa anche che il browser può memorizzare nella cache il file in modo che gli stili aggiuntivi non debbano essere scaricati di nuovo per ogni singola pagina.

Problemi di manutenzione

L'aggiunta di CSS a CSS aggiuntivi significa che è necessario utilizzare l'editor nel Customizer, che è piuttosto stretto e non adatto a grandi quantità di CSS. Tuttavia, se li aggiungi in un foglio di stile, puoi utilizzare l'editor di testo che preferisci, a una dimensione più comoda. Puoi persino utilizzare l'editor del tema in wp-admin per modificare il file CSS direttamente all'interno del browser. Puoi trovare l'editor del tema in Aspetto > Editor del file del tema . Assicurati di passare al tema corretto durante la modifica e ti consigliamo vivamente di eseguire un backup del tuo sito prima di apportare modifiche ai file del tema figlio.

Modifica dei file del tema

Ti consigliamo vivamente di utilizzare uno di questi metodi elencati invece di modificare i file del tema principale principale, indipendentemente dal fatto che tu stia utilizzando Kadence o qualsiasi altro tema. La modifica dei file del tema non solo può danneggiare il tuo sito, ma perderai quelle personalizzazioni al prossimo aggiornamento del tema.

O peggio, quando aggiungi codice o modifichi il codice all'interno dei file del tuo tema, sarai messo nella posizione di cercare di capire come mantenere le tue personalizzazioni mentre aggiorni il tuo tema per nuove funzionalità o per risolvere un problema di sicurezza.

Conclusione

Ci auguriamo che questo sguardo ai temi figlio sia stato utile per capire quando utilizzare un tema figlio, quando non farlo, e nuovi modi per personalizzare il sito per prestazioni ottimali quando si aggiungono personalizzazioni. Se tutte queste cose sembrano troppo da considerare, probabilmente al momento stai bene con gli strumenti del Customizer.