Come mo­di­fi­ca­re un footer su WordPress

Tra la mol­ti­tu­di­ne di sistemi di gestione dei contenuti WordPress è pro­ba­bil­men­te il CMS più uti­liz­za­to. Un sito web su WordPress è co­sti­tui­to da diversi com­po­nen­ti:

• WordPress Core: l’in­stal­la­zio­ne di WordPress
• Tema: un quadro di base per vi­sua­liz­za­re contenuti dinamici
• Plugin: per estendere le fun­zio­na­li­tà di base di WordPress
• Contenuto: creato dal pro­prie­ta­rio e me­mo­riz­za­to nella libreria mul­ti­me­dia­le

Per creare un sito web di successo su WordPress, di solito è ne­ces­sa­rio ef­fet­tua­re delle piccole modifiche. L’in­te­gra­zio­ne di script esterni è uno dei cam­bia­men­ti più comuni eseguiti dagli utenti. Spesso, questi script devono essere integrati nel footer WordPress. In questo articolo vi mo­stre­re­mo come funziona il processo e a cosa prestare at­ten­zio­ne.

Ge­ne­ral­men­te, un footer si trova in fondo a una data pagina web. Il footer segnala al vi­si­ta­to­re che è arrivato alla fine del contenuto della pagina. Un footer WordPress contiene due tipi di elementi, che di­scu­te­re­mo più in dettaglio qui di seguito.

1. Elementi visibili
2. Elementi in­vi­si­bi­li

A dif­fe­ren­za di un header WordPress, un footer WordPress di solito contiene degli elementi visibili secondari e meno pro­mi­nen­ti. Questo è giu­sti­fi­ca­to dal fatto che l’header agisce come la prima im­pres­sio­ne visiva di una pagina. Un’header ben costruito può anche agire da “calamita” per i vi­si­ta­to­ri, man­te­ne­do­li sulla pagina più a lungo. Il footer di solito contiene i seguenti elementi:

• Link ad altre pagine con­te­nen­ti in­for­ma­zio­ni riguardo alla politica sulla privacy, i dettagli di contatto, ecc.
• Nota sul copyright
• Link “Scorri verso l’alto”

A dif­fe­ren­za del footer WordPress, l’header include diversi meta tag. La maggior parte di questi devono essere inclusi nell’elemento HTML head. Tuttavia, i metadati moderni tendono ad essere uti­liz­za­ti al di fuori della testata HTML. Si tende ad uti­liz­za­re so­prat­tut­to vari elementi script. Questi sono integrati nel footer WordPress.

Una ca­rat­te­ri­sti­ca par­ti­co­la­re dei file di script esterni è che, quando integrati nella testa HTML, i file di script bloccano il ca­ri­ca­men­to della pagina. Proprio per questa ragione, in un primo momento, si suggeriva di po­si­zio­na­re gli elementi script esterni prima del tag di chiusura </body> quando possibile. Su WordPress questo cor­ri­spon­de a in­te­grar­li nel footer.

Bisogna però tenere in conto alcune dif­fe­ren­ze quando si parla di script. Infatti, gli script possono essere caricati da un file esterno, ma possono anche essere in­cor­po­ra­ti in una pagina. Inoltre, gli elementi script sono ora uti­liz­za­ti per una gamma di scopi molto più ampia. L’attributo “type” è usato per de­scri­ve­re il tipo di dati in­cor­po­ra­ti. In questo modo, i dati e i metadati dell’ap­pli­ca­zio­ne possono essere in­cor­po­ra­ti in una singola pagina. Di seguito ri­por­tia­mo una pa­no­ra­mi­ca degli elementi script usati fre­quen­te­men­te:

Esistono due modi per inserire dei codici ad­di­zio­na­li in un footer WordPress:

1. Uti­liz­za­re un plugin
2. Mo­di­fi­ca­re il codice tema

Entrambi i metodi pre­sen­ta­no vantaggi e svantaggi che rias­su­mia­mo di seguito:

Un tema di WordPress è la struttura di base per mostrare il contenuto di un sito su WordPress. La modifica del tema permette un controllo completo dei footer; gli elementi visibili e in­vi­si­bi­li possono essere aggiunti, rimossi e mo­di­fi­ca­ti.

Qui di seguito, ci con­cen­tre­re­mo sugli elementi in­vi­si­bi­li, poiché le modifiche agli elementi visibili di solito dipendono dal tema usato, il che ri­chie­de­reb­be l’in­clu­sio­ne di fogli di stile nelle nostre spie­ga­zio­ni. Vi è tuttavia un’eccezione: se siete esperti di HTML e PHP, potete fa­cil­men­te rimuovere un elemento visibile.

Quando si vuole apportare delle modifiche a un tema, vale la pena creare un a href="t3://page?uid=2815">tema child che ga­ran­ti­sce che le modifiche siano al sicuro dagli ag­gior­na­men­ti e possano essere annullate in qualsiasi momento. I benefici ripagano lo sforzo leg­ger­men­te maggiore.

È possibile mo­di­fi­ca­re il footer WordPress tramite le seguenti opzioni:

1. Mo­di­fi­ca­re il codice nel file template footer.php
2. Creare funzioni ag­giun­ti­ve in functions.php

Per prima cosa, diamo un’occhiata alla struttura generale di una moderna pagina HTML. Molti temi di WordPress seguono questo schema, anche se con leggere va­ria­zio­ni. Se­gna­lia­mo i template specifici di WordPress nei commenti:

Un documento HTML consiste di due elementi: <head> e <body>. Nel nostro esempio, l’elemento <body> contiene gli elementi <header>, <main> e <footer>. In un tema WordPress, questa struttura di elementi è di­stri­bui­ta in diversi file template. Quasi tutti i temi usano i file header.php e footer.php per co­di­fi­ca­re l’header o il footer.

Il modo più veloce per mo­di­fi­ca­re il footer WordPress è con molta pro­ba­bi­li­tà quello di mo­di­fi­ca­re il file template “footer.php”. Diamo un’occhiata al tema ufficiale WordPress “Twen­tyT­wen­ty” per esem­pli­fi­ca­re la struttura di un tipico file footer.php. È ne­ces­sa­rio tenere a mente che il codice qui riportato è ab­bre­via­to.

1. Il footer.php inizia con un tag di apertura
2. Questo è seguito da elementi visibili e dal tag di chiusura .
3. Poi viene inserito l’hook di WordPress wp_footer.

Gli elementi ag­giun­ti­vi vengono inseriti in maniera dinamica (come vedrete più avanti nella nostra guida).

1. Infine, seguono i tag di chiusura </body> e </html>.

Il footer WordPress nel tema Twen­tyT­wen­ty contiene il testo “Powered by WordPress”. Ri­muo­via­mo questo elemento dal footer.php mo­di­fi­can­do il file con il seguente codice:

Can­cel­lan­do le linee di codice per­ti­nen­ti e salvando il file, il testo della pagina non viene più vi­sua­liz­za­to. Ma bisogna fare at­ten­zio­ne, poiché il footer WordPress è integrato in ogni pagina e di con­se­guen­za gli errori commessi durante l’adat­ta­men­to del codice possono in­fluen­za­re tutto il sito web. As­si­cu­ra­ta­vi pertanto di eseguire una copia del file prima di iniziare.

Spesso, è più facile e meno rischioso ag­giun­ge­re una linea di CSS invece che mo­di­fi­ca­re il codice PHP. Tuttavia, questo funziona solo se il codice del tema è ordinato. Per il tema Twen­tyT­wen­ty, è possibile na­scon­de­re il testo con il seguente codice CSS:

Il file functions.php è un file di tema speciale che contiene un codice per per­so­na­liz­za­re sia il tema che il sito web su WordPress. Tra le altre cose, serve come punto di ingresso per l’in­ser­zio­ne dinamica di un codice nel footer WordPress. L’hook wp_footer è collegato a funzioni ap­po­si­ta­men­te definite: se l’hook funziona, le funzioni vengono eseguite. Vediamo alcuni esempi.

Per prima cosa, in­cor­po­ria­mo un blocco con i metadati dello script markup nella homepage di WordPress. Per fare ciò, ag­giun­gia­mo il seguente codice in formato JSON-LD a functions.php:

Nell’esempio seguente, vogliamo ag­giun­ge­re un elemento script con dati JSON solo sulle pagine dove i commenti sono attivati. Sup­po­nia­mo che si desideri na­scon­de­re i commenti di utenti specifici o relativi a un de­ter­mi­na­to periodo di tempo. Ag­giun­gia­mo quindi il nome dell’utente e l’anno sulle pagine come segue:

L’in­te­gra­zio­ne di script esterni è una delle modifiche più comuni apportate a un footer WordPress. So­li­ta­men­te non è una buona idea includere file di script esterni tramite un plugin o mo­di­fi­can­do il footer.php. Invece, si consiglia di uti­liz­za­re la fun­zio­na­li­tà specifica fornita da WordPress. La funzione wp_enqueue_script () e l’hook wp_enqueue_scripts sono uti­liz­za­ti per ef­fet­tua­re delle modifiche su functions.php.

Uti­liz­za­re le funzioni spe­ci­fi­che di WordPress per integrare script esterni ha diversi vantaggi:

• Potete spe­ci­fi­ca­re che lo script A venga caricato solo dopo che lo script B è stato caricato. Questo passo assicura che le di­pen­den­ze siano sod­di­sfat­te.
• Potete spe­ci­fi­ca­re che uno script deve essere pub­bli­ca­to nel footer WordPress. In al­ter­na­ti­va, lo script finisce nella testata HTML.
• È possibile ag­giun­ge­re un numero di versione esplicito per uno script. Questo viene aggiunto all’URL dello script. Se la versione cambia, allo script viene assegnato un nuovo URL. Questo forza lo script a ri­ca­ri­car­si piuttosto che usare la vecchia versione da una cache.
• Potete definire quali script integrare e come. WordPress si occupa del resto. Questo è un passo es­sen­zia­le per ot­ti­miz­za­re le pre­sta­zio­ni. Ad esempio, un plugin di caching può prendere in consegna l’elenco degli script da integrare ed ela­bo­rar­li. Tecniche di ot­ti­miz­za­zio­ne fre­quen­te­men­te uti­liz­za­te come la “mi­ni­fi­ca­zio­ne” e la “con­ca­te­na­zio­ne” sono basate su questo mec­ca­ni­smo.

Diamo un’occhiata più da vicino alla struttura della funzione wp_enqueue_script (). Di seguito troverete lo script di base per ri­chia­ma­re la funzione con tutti i suoi parametri:

Qui sotto ri­por­tia­mo un riassunto della funzione wp_enqueue_script (), le spie­ga­zio­ni dei suoi parametri e un esempio:

Infine, ci con­cen­tria­mo su come l’esempio riportato nella tabella viene tradotto in codice. Se mettiamo il seguente codice nel file functions.php, il nostro script sarà caricato come di­pen­den­te da jQuery. Il numero di versione dell’in­stal­la­zio­ne di WordPress viene aggiunto come versione all’URL dello script. Lo script viene quindi integrato nel footer WordPress: