{"id":233442,"date":"2023-02-13T16:52:00","date_gmt":"2023-02-13T13:52:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233442"},"modified":"2022-11-10T23:42:56","modified_gmt":"2022-11-10T20:42:56","slug":"tutorial-sul-tema-wordpress-per-principianti-parte-6-functions-php-di-un-tema","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/tutorial-sul-tema-wordpress-per-principianti-parte-6-functions-php-di-un-tema\/","title":{"rendered":"Tutorial sul tema WordPress per principianti \u2013 Parte 6: Functions.php di un tema"},"content":{"rendered":"\n

Oggi impareremo dove e come aggiungere codice al di fuori dei modelli nel nostro tema. Lo facciamo aggiungendo il functions.php<\/code>file del tema. Lungo la strada impareremo anche come aggiungere fogli di stile e script nel modo corretto.<\/p>\n

Il file functions.php di un tema<\/h2>\n

Un tema ha bisogno di un posto dove posizionare il codice che non fa parte dei modelli. C’\u00e8 sempre un mucchio di codice che tutti i temi devono aggiungere per gestire la funzionalit\u00e0. Ad esempio, abilitando la funzione delle immagini in primo piano di WordPress (hai notato che mancava?), supporto per menu, widget, aggiunta di fogli di stile e script (nel modo corretto) e altro ancora.<\/p>\n

Quel file \u00e8 functions.php<\/code>. WordPress carica automaticamente e sempre questo file se esiste nel tuo tema. \u00c8 sempre caricato sia in admin che in frontend.<\/p>\n

Aggiunta di un file functions.php al nostro tema<\/h2>\n

Creiamo un nuovo file vuoto nella nostra cartella del tema principale e chiamiamolo functions.php<\/code>.<\/p>\n

In quel file, inizia immediatamente con un tag PHP di apertura (<?php<\/code>) e non includere il tag di chiusura<\/strong>. Il functions.php<\/code>file \u00e8 pensato per il codice PHP, non per l’HTML. Il tuo tema pu\u00f2 interrompersi (o anche solo comportarsi in modo strano) se in questo file sono presenti caratteri o nuove righe al di fuori dei tag PHP. Ovviamente puoi rompere i tag PHP per produrre HTML, ma deve essere fatto all’interno di funzioni o hook. Lascia che lo spieghi con un esperimento.<\/p>\n

Proviamo questo file per vedere come funziona. Dentro functions.php<\/code>scrivi un’eco di qualche testo fittizio:<\/p>\n

<?php\necho 'This is an experiment';<\/code><\/pre>\n
Aggiorna il tuo frontend. Viene visualizzato il testo fittizio. Ma se ispezioni o visualizzi il sorgente HTML, vedrai che il testo appare prima di aprire <html><\/code>. Questo rende HTML completamente non valido!<\/p>\n
\"Tutorial<\/a><\/p>\n
Vai al tuo pannello di amministrazione e premi Aggiorna. Fa la stessa cosa anche l\u00ec (potrebbe essere nascosto dietro la barra di amministrazione, ma \u00e8 l\u00ec nell’HTML).<\/p>\n
Come puoi vedere, qualsiasi codice nei tuoi functions.php<\/code>carichi prima di ogni altra cosa nei nostri modelli. Pertanto, di norma, qualsiasi output (HTML esterno ai tag PHP o echo<\/code>) deve essere all’interno di funzioni che verranno eseguite al momento giusto, normalmente agganciate ad azioni o filtri.<\/p>\n
Ricordiamo da quando abbiamo appreso e aggiunto hook nella parte 3<\/a> del tutorial sul tema WordPress per principianti. Il modo in cui eseguiamo il codice su un hook consiste nell’associare una funzione all’hook con add_action()<\/code>. Proviamo qualcos’altro; creiamo una funzione agganciata ad un hook che abbiamo gi\u00e0 definito nei nostri template; wp_footer<\/code>.<\/p>\n
In functions.php<\/code>rimuovi il echo<\/code>abbiamo aggiunto a scopo di test e invece scrivi:<\/p>\n
<?php\nadd_action('wp_footer', 'wptutorial_print_footer');\nfunction wptutorial_print_footer() {\n    echo 'This sentence will appear in footer!';\n}<\/code><\/pre>\n
Premi Aggiorna nel frontend e osserva che la stringa appare bene nel punto esatto che hai definito wp_footer<\/code>, subito prima della chiusura <\/body><\/code>. Inoltre, nota che questo non far\u00e0 eco a nulla in admin. Questo perch\u00e9 wp_footer<\/code>\u00e8 un hook che viene eseguito solo nel frontend.<\/p>\n
Facciamo le nostre prime operazioni corrette in functions.php<\/code>!<\/p>\n
Nota: in PHP non \u00e8 possibile avere due funzioni con lo stesso identico nome. Ci\u00f2 include i nomi delle funzioni in WordPress, il tuo tema e qualsiasi plug-in attivato! Segui le migliori pratiche e anteponi alle tue funzioni il tuo tema slug, come nell’esempio sopra: ” wptutorial_<function_name><\/code>“. Ci\u00f2 riduce notevolmente l’arresto anomalo di WordPress a causa di nomi di funzioni identici.<\/p>\n
Nota 2: non importa in quale ordine aggiungi funzioni e hook nel tuo file functions.php<\/code>. Ricorda che gli hook vengono eseguiti comunque in determinati checkpoint, non nell’ordine in cui si trovano functions.php<\/code>. L’unica eccezione \u00e8 se stai includendo altri file o inizializzando le tue classi.<\/p>\n
Il modo giusto per aggiungere stili e script rispetto al modo sbagliato<\/h2>\n
Alcuni di voi ricorderanno dalla parte 3<\/a> in cui abbiamo aggiunto l’ wp_head<\/code>hook nel nostro header.php<\/code>. Dopo averlo fatto, WordPress \u00e8 stato in grado di caricare i suoi stili e script, inclusa la barra di amministrazione. Potresti pensare che per aggiungere i nostri fogli di stile dobbiamo creare una funzione agganciata wp_head<\/code>e produrre <link><\/code>il foglio di stile … Di solito avresti ragione!<\/p>\n
Tuttavia in WordPress c’\u00e8 un modo speciale per aggiungere script e stili. Questo serve principalmente per gestire l’ordine di caricamento ed evitare di caricare librerie duplicate. Ad esempio, come autore di temi potresti voler aggiungere Javascript che dipendono dalla jQuery<\/code>libreria. Quindi devi assicurarti che jQuery<\/code>venga caricato prima dei tuoi file. Ma WordPress e qualsiasi plug-in hanno la stessa necessit\u00e0, per assicurarsi che jQuery<\/code>venga caricato anche prima dei loro script. Non \u00e8 possibile caricare la jQuery<\/code>libreria pi\u00f9 volte perch\u00e9 ci\u00f2 causa problemi. Quindi WordPress ha un modo per gestire in quale ordine<\/strong> vengono caricati gli script e i fogli di stile.<\/p>\n
Aggiunta di fogli di stile (nel modo giusto)<\/h2>\n
Per aggiungere qualsiasi stile e qualsiasi javascript, utilizziamo un hook chiamato wp_enqueue_scripts<\/code>. S\u00ec, usi questo hook anche per gli stili, nonostante il suo nome. L’aggiunta di script e stili viene definita "accodamento" – come in una coda. Mettiamo in coda (aggiungiamo) il nostro foglio di stile usando la funzione wp_enqueue_style<\/a> nel nostro functions.php<\/code>:<\/p>\n
<?php\nadd_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');\nfunction wptutorial_enqueue_scripts() {\n    wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'\/style.css');\n}<\/code><\/pre>\n
La wp_enqueue_style<\/code>funzione accetta almeno due parametri. Il primo \u00e8 un nome univoco (handle o "ID slug") e il secondo la posizione del file. L’handle deve essere univoco in quanto questo \u00e8 l’identificatore utilizzato da WordPress per determinare se sono presenti duplicati.<\/p>\n
Per quanto riguarda il ritorno del percorso al tuo tema, ci sono molte funzioni disponibili. Sopra ho usato get_stylesheet_directory_uri()<\/code>che restituisce l’URL alla cartella del tema, quindi ho aggiunto il resto del percorso al nostro foglio di stile.<\/p>\n
PS: WordPress offre una funzione separata per restituire l’URL completo al tuo tema style.css<\/code>: get_stylesheet_uri()<\/code>. Ho usato l’altra funzione sopra in quanto \u00e8 pi\u00f9 utile familiarizzare con. Lo userai per tutti gli altri file che devi accodare.<\/p>\n
La funzione wp_enqueue_style<\/code>accetta parametri pi\u00f9 utili, come le dipendenze (che altri file CSS devono essere caricati prima) e il numero di versione (utile per scopi di memorizzazione nella cache).<\/p>\n
Aggiorna il tuo frontend e vedi che il tuo foglio di stile \u00e8 caricato in <head><\/code>tag!<\/p>\n
Se sei uno di quelli che non vede l’ora di rendere il tuo tema pi\u00f9 carino durante la codifica, ecco la tua occasione. Ti incoraggio a iniziare a definire il tuo HTML, le classi e i wrapper e ad aggiungere un po’ di stile nel tuo file style.css<\/code>. Aggiungeremo pi\u00f9 contenuti che richiederanno uno stile man mano che andiamo avanti in questa serie di tutorial.<\/p>\n
Aggiunta di script (nel modo giusto)<\/h2>\n
Diamo un’occhiata a come aggiungiamo javascript al nostro tema. \u00c8 fatto usando lo stesso gancio (quindi puoi metterlo tutto all’interno di una funzione). Ma per gli script utilizziamo una funzione leggermente diversa.<\/p>\n
Per accodare uno script, utilizzare wp_enqueue_script()<\/code>. I parametri sono gli stessi di wp_enqueue_style()<\/code>. Il primo \u00e8 l’handle univoco e il secondo \u00e8 il percorso dello script. Terzo (facoltativo) \u00e8 l’array di dipendenze. Come quarto parametro (opzionale) si imposta il numero di versione. E infine quinto (opzionale) definisci se lo script deve essere caricato o meno nel <head><\/code>tag o alla fine di <\/body><\/code>.<\/p>\n
WordPress viene fornito con una vasta gamma di librerie gi\u00e0 incluse. Non sono sempre tutti caricati, ma disponibili se ne hai bisogno. Se vuoi aggiungere uno script di libreria comune, controlla prima se WordPress lo ha gi\u00e0<\/a>. Esempi sono jQuery, tutti i moduli dell’interfaccia utente di jQuery, Underscore e Backbone.<\/p>\n
Se aggiungi uno degli script inclusi in WordPress come dipendenza, non \u00e8 necessario accodare quello script! Facciamolo in pratica.<\/p>\n
Crea una cartella assets<\/code>e al suo interno una sottocartella js<\/code>nella nostra cartella del tema, quindi aggiungi un nuovo main.js<\/code>file vuoto. Diciamo che questo script richiede la jQuery<\/code>libreria, quindi lo impostiamo come dipendenza. Sappiamo che WordPress viene fornito con jQuery<\/code>bundle e l’handle \u00e8 jquery<\/code>. Accodaremo il nostro script in questo modo:<\/p>\n
<?php\nadd_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');\nfunction wptutorial_enqueue_scripts() {\n    wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'\/style.css');\n    wp_enqueue_script('theme-main-script', get_stylesheet_directory_uri().'\/assets\/js\/main.js', ['jquery']);\n}<\/code><\/pre>\n
Se aggiorni il frontend e controlli il tuo codice sorgente, dovresti vedere che il tuo script, main.js<\/code>, \u00e8 stato aggiunto, ma anche quella jQuery<\/code>libreria \u00e8 stata caricata. E jQuery<\/code>viene caricato prima del tuo file!<\/p>\n
\"Tutorial<\/a><\/p>\n
Ora hai imparato come aggiungere stili e script. Per aggiungere pi\u00f9 file, aggiungi un wp_enqueue_style()<\/code>o wp_enqueue_script()<\/code>per ogni nuovo file.<\/p>\n
Documentazione sui metodi utilizzati<\/h2>\n