Anche se WordPress permette di creare e gestire un sito web anche a chi non ha esperienze di codice, probabilmente arriverà un momento in cui vorrete modificare il codice in WordPress per avere un maggiore controllo sul modo il vostro sito appare o funziona.
Per aiutarvi, questo post vi mostrerà come modificare il codice in WordPress in modo sicuro:
- Modificare il Codice HTML di WordPress per Singoli Post o Pagine
- Modificare il Codice HTML/PHP del Tema
- Aggiungere CSS Personalizzati al Sito
Se sapete già cosa volete fare, potete cliccare su uno dei link qui sopra e saltare direttamente alla sezione specifica. Altrimenti, passiamo alle modifiche!
Preferisci guardare la versione video?
Come Modificare il Codice di WordPress:
Per avere un maggiore controllo sull’aspetto e sul funzionamento del sito, è possibile modificare il codice di WordPress per personalizzare diverse aree:
- Il nuovo editor di blocchi e l’editor classico consentono di modificare il codice HTML di singoli post o pagine.
- Se si vuole modificare il codice sorgente del tema di WordPress, è meglio utilizzare un child theme.
- Valutare l’utilizzo di un plugin per gestire gli snippet di codice da aggiungere alla sezione <head> o al file functions.php del tema.
- Se si vuole solo aggiungere codice CSS personalizzato, è possibile utilizzare l’area CSS aggiuntivo del Customizer di WordPress o un plugin come “Simple CSS”.
Modificare il Codice HTML di WordPress per Singoli Post o Pagine
Cominciamo con il modo più semplice per modificare il codice HTML di WordPress: accedere al codice sorgente per i singoli post, pagine o altri tipi di post di WordPress.
Lo si può fare sia con il nuovo editor di blocchi di WordPress (Gutenberg), sia con il vecchio editor classico TinyMCE.
Come Modificare il Codice HTML di WordPress nell’Editor dei Blocchi (Gutenberg)
Ci sono diversi modi in cui è possibile lavorare con l’HTML in Gutenberg.
In primo luogo, se volete solo aggiungere il vostro codice HTML ad un contenuto, consigliamo di non cercare di modificare l’intero codice sorgente del vostro post, perché questo rende le cose inutilmente complicate.
Al contrario, potete semplicemente usare il blocco HTML personalizzato dedicato e incollare lì dentro il codice HTML che volete usare:
Tuttavia, potrebbe anche arrivare un momento in cui è necessario modificare direttamente l’HTML di un blocco diverso. Per esempio, se si vuole aggiungere un tag nofollow ad un link nell’editor dei blocchi, sarà necessario modificare l’HTML di quel blocco.
Ci sono due modi per farlo…
In primo luogo, potete cliccare sulle opzioni di un singolo blocco e scegliere l’opzione Modifica come HTML:
Questo vi permetterà di modificare l’HTML solo per quel singolo blocco:
Oppure, se si desidera modificare l’HTML per l’intero post, è possibile accedere all’Editor del codice dal menu principale Strumenti e opzioni. Oppure, potete anche usare questa scorciatoia da tastiera per passare dall’editing del codice a quello visivo – Ctrl + Shift + Alt + M:
Tenete presente che, nell’editor del codice completo, dovrete lavorare con tutti quei markup dei blocchi – ad esempio <!-- wp:paragraph -->.
Come Modificare il Codice HTML di WordPress nell’Editor Classico (TinyMCE)
Se usate ancora l’editor classico di WordPress (TinyMCE), potete modificare l’HTML dell’intero post andando nella scheda Testo:
Come Modificare il Codice Sorgente del Tema di WordPress
Ora, passiamo all’argomento principale: come modificare il codice nel tema di WordPress. La posta in gioco è un po’ più alta, quindi abbiamo bisogno di rispondere ad alcune domande preliminari prima di entrare nel merito.
Perché la posta in gioco è più alta? Beh, molto semplicemente, perché, se si rovina qualcosa qui, si può rompere l’intero sito!
Nelle ultime uscite, WordPress ha reso molto più difficile farlo accidentalmente, ma modificare il codice sorgente del sito aprirà sempre la porta ai problemi, quindi dovrete essere sicuri di farlo in modo sicuro.
Usate un Child Theme per Qualsiasi Modifica Diretta del Codice
Se si prevede di modificare direttamente il codice nei file del tema, è necessario utilizzare un child theme invece di modificare il tema “genitore”.
Senza un child theme, qualsiasi modifica del codice sarà sovrascritta la volta successiva che si aggiorna il tema. Quando usate un child theme, tuttavia, sarete in grado di aggiornare prontamente il tema genitore senza perdere le modifiche che avete fatto nel vostro child theme.
Se volete saperne di più sui vantaggi dei child theme e su come crearne uno, consultate la nostra guida completa ai child theme di WordPress.
Considerate la Possibilità di Usare un Plugin Invece di Modificare il Codice nel Child Theme
Se state pensando di modificare il funzionamento del vostro tema, probabilmente dovrete modificare direttamente il codice sorgente del vostro child theme.
Tuttavia, se volete modificare il codice in WordPress per un motivo diverso – come aggiungere uno script di tracciamento alla sezione <head> del vostro sito o un frammento al file functions.php del tema – è meglio utilizzare un plugin.
Ad esempio, iniezioni nell’Head, nel Footer e nel Post permettono di inserire frammenti di codice dove necessario. E dato che questi frammenti di codice sono tutti segregati nell’interfaccia del plugin, è anche più facile gestirli in seguito.
Allo stesso modo, se si aggiunge un frammento di codice che potrebbe andare nel file functions.php del child theme, il plugin gratuito Code Snippets è un’ottima opzione.
In sintesi, se desiderate modificare il codice in WordPress per aggiungere frammenti…
- nella sezione
<head> - nel file functions.php
…allora dovreste valutare l’uso di un plugin invece di modificare direttamente i file del vostro tema, in quanto renderà più semplice la gestione di questi frammenti e farà in modo che non vengano sovrascritti quando aggiornate il tema.
Se avete bisogno di fare altre modifiche, cerchiamo di capire come modificare il codice sorgente del tema.
Utilizzate l’Editor di Codice nella Bacheca di WordPress
Se avete intenzione di modificare direttamente il codice del vostro tema, consigliamo vivamente di fare un backup del sito prima di procedere (sia dell’intero sito, che del file che state modificando).
Una volta fatto, potrete accedere all’editor del codice del tema presente nella bacheca andando su Aspetto → Editor del Tema. Qui, WordPress vi darà prima un avvertimento simile a quello che avete imparato sopra:
Poi, potrete usare la barra laterale destra per navigare tra i diversi file del tema e l’editor di codice stesso per effettuare le vostre modifiche:
Utilizzare SFTP per Modificare il Codice in WordPress
In alternativa all’editor di codice in-dashboard, è possibile modificare i file dei temi anche tramite SFTP. Questo approccio presenta due vantaggi:
- Potete utilizzare il vostro editor di codice preferito.
- Se accidentalmente si rompe qualcosa, si può risolvere subito il problema. Al contrario, se si modifica il codice tramite il cruscotto di WordPress, c’è sempre la possibilità che si possa rompere qualcosa che vi blocca fuori dal cruscotto di WordPress, il che significa che è necessario collegarsi tramite SFTP per risolvere il problema (anche se, ancora una volta – questo è meno probabile grazie alle recenti modifiche).
Ecco come collegarsi al sito via FTP.
Una volta fatto questo, navigate nella cartella del vostro tema – …/wp-content/themes/child-theme-name. Cercate il file che volete modificare e cliccate con il tasto destro del mouse. La maggior parte dei programmi FTP vi darà la possibilità di modificare il file e lo ricaricherà automaticamente una volta apportate le modifiche.
Tuttavia, raccomandiamo vivamente di scaricare una versione originale del file sul vostro desktop prima di effettuare qualsiasi modifica. In questo modo, è possibile ricaricare la versione originale nel caso in cui si rompa qualcosa accidentalmente:
Aggiungere CSS Personalizzati a WordPress
Se, invece di modificare il codice HTML o PHP, si desidera aggiungere solo CSS personalizzati a WordPress, non è necessario utilizzare l’editor di codice in-dashboard o SFTP.
In questo caso è possibile utilizzare il Customizer di WordPress. Oltre ad essere un’opzione più semplice, un altro vantaggio di questo approccio è la possibilità di visualizzare in anteprima le modifiche in tempo reale.
Per iniziare, andate su Aspetto → Personalizza nella bacheca di WordPress:
Quindi, cercate l’opzione CSS aggiuntivo nel Customizer:
Questo aprirà un editor di codice dove potrete aggiungere il vostro CSS. Man mano che aggiungete i CSS, l’anteprima live del vostro sito si aggiornerà automaticamente in base a tali modifiche:
Un’altra buona opzione per aggiungere CSS è il plugin Simple CSS di Tom Usborne. Questo plugin fornisce una soluzione simile al Customizer di WordPress e permette anche di aggiungere CSS personalizzati a singoli post o pagine tramite un meta-box.
Infine, se si desidera aggiungere una tonnellata di CSS personalizzati – come centinaia o migliaia di righe – un’altra opzione è quella di creare il proprio foglio di stile CSS personalizzato e utilizzare wp_enqueue_scripts per aggiungerlo al tema.
Riepilogo
Se si desidera modificare il codice di un singolo post o pagina di WordPress, sia il nuovo editor di blocchi che l’editor classico vi danno la possibilità di modificare direttamente l’HTML.
Se invece volete modificare il codice sorgente del vostro tema WordPress, ci sono alcune cose da considerare:
- Utilizzare sempre un child theme invece di effettuare modifiche al codice direttamente sul tema genitore.
- Valutate un plugin per gestire gli snippet che da aggiungere al file functions.php, in quanto questi plugin possono offrire un approccio più semplice e gestibile.
Se dopo queste considerazioni avete ancora bisogno di effettuare modifiche dirette del codice, potete modificare il codice sorgente del vostro child theme dalla bacheca di WordPress andando su Aspetto → Editor dei Temi. Oppure, potete connettervi al sito tramite SFTP e modificare il codice in questo modo.
Infine, se si vuole solo aggiungere qualche CSS personalizzato, non è necessario modificare il codice del tema direttamente. Invece, è possibile utilizzare l’area CSS aggiuntivo nel Customizer di WordPress o un plugin come Simple CSS.
Avete domande su come modificare il codice in WordPress? Chiedete nei commenti!
