Come creare un tema WordPress – il file Functions.php

Questa è la terza parte della serie dedicata alla creazione di temi WordPress. In questo articolo scriveremo le prime funzioni all’interno del file functions.php, il vero e proprio “motore” di un tema WordPress. Vi ricordo che questa guida si basa sul tema Mymagazine, liberamente scaricabile dalla directory dei temi di WordPress.org, e che per seguire la spiegazione è necessario avere:

  • una installazione di WordPress funzionante;
  • una conoscenza almeno di base di html, css, jQuery e php.

Il file functions.php del tema WordPress

Nel precedente articolo abbiamo notato come nel file header.php non vi sia traccia dei link ai fogli di stile, presenti invece sella sezione <head> del codice html utilizzato come punto di partenza della guida. Questo perchè il modo corretto di inserire file css all’interno di un tema è l’utilizzo della funzione wp_enqueue_style().

Inseriamo all’interno del file functions.php il codice seguente:

function mymagazine_theme_styles() {
 wp_enqueue_style( 'mymagazine_google_fonts', '//fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,300italic' );
 wp_enqueue_style( 'mymagazine_main_css', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'mymagazine_theme_styles' );

Abbiamo così creato la prima funzione, chiamandola mymagazine_theme_styles. È sempre meglio anticipare il nome delle funzioni con un prefisso univoco che eviti possibili conflitti con i plugin, perciò le funzioni che creeremo all’interno dei file saranno precedute dal prefisso mymagazine. Questa pratica peraltro è appositamente richiesta nel procedimento di revisione del tema, come spiegato chiaramente in questo articolo sui prefissi di Justin Tadlock.

All’interno della funzione ho utilizzato una funzione interna di WordPress, wp_enqueue_style(), che ha lo scopo di inserire dinamicamente un link ad un file css contenuto all’interno del tema. Questa funzione accetta diversi parametri ma io ne ho inserito solo due, separati da una virgola:

  • il nome da assegnare come handle  per richiamare successivamente il file; nel nostro caso ho utilizzato ‘mymagazine_google_fonts’ e ‘mymagazine_main_css’. I nomi non sono casuali, oltre ad inserire il prefisso mymagazine, per gli stessi motivi visti prima, ho cercato di dare un nome già di per sè esplicativo del file che si intende richiamare;
  • l’indirizzo url del file css. Nel primo caso abbiamo utilizzato l’url del sito Google Fonts dal quale abbiamo richiamato il carattere “Source Sans Pro”. Se non avete mai utilizzato caratteri tipografici forniti da Google Fonts, sappiate che è il sito stesso ad indicarvi l’url da utilizzare dopo avere selezionato quelli che vi servono; se preferite un altro tipo di carattere è sufficiente fare un copia e incolla sostituendo l’url contenuto all’interno degli apici. Nel caso in cui dobbiate richiamare un file compreso all’interno del tema, piuttosto che utilizzare url statici del tipo “http://www.miodominio.com/style.css” WordPress fornisce le funzioni get_template_directory_uri() e get_stylesheet_directory_uri() che forniscono il link alla cartella del tema. In particolare è richiesto che il foglio di stile principale del tema sia richiamato specificamente dalla funzione get_stylesheet_directory_uri().

 

Adesso tornate alla cartella del tema e create una sottocartella denominata css.

immagine cartella css di un tema wordpress

 

Per i miei temi WordPress utilizzato quasi sempre un layout a griglie basato sul noto framework Zurb Foundation. Foundation è un framework veramente completo, ma in questo caso ho preferito utilizzarlo soltanto per la gestione della griglia. In questa pagina è possibile customizzare le parti del framework che si intendono utilizzare, evitando così di includere file css o javascript di dimensioni maggiori rispetto alle esigenze del sito. Un file relativo alla sola griglia, nella versione minimizzata, pesa 15 kbites, una dimensione più che accettabile che non allunga di molto i tempi di caricamento della pagina. All’interno del file zip contenente i file utilizzati in questa guida troverai il file denominato “foundation.min.css”, salvalo all’interno della cartella “css” che hai creato pocanzi ed aggiorna la funzione mymagazine_theme_styles() inserendo un nuovo link, questa volta al file foundation.min.css, utilizzando la stessa procedura vista per l’inclusione del file style.css. Inserisci quindi questa riga di codice appena sopra a quella utilizzata prima:

wp_enqueue_style( 'mymagazine_foundation', get_template_directory_uri() . '/css/foundation.min.css' );

Una piccola precisazione: se non avete mai utilizzato Foundation e non avete intenzione di imparare ad utilizzarlo adesso, potete  certamente continuare a seguire questa guida. L’utilizzo di Foundation serve semplicemente ad ottenere un layout responsivo, ma non ostacola assolutamente l’apprendimento delle conoscenza necessarie alla creazione di temi WordPress, che è lo scopo di questa guida.

Bene, abbiamo la funzione per richiamare i file css all’interno del tema, ma come facciamo a richiamare la funzione?

Prima di rispondere a questa domanda dobbiamo concentrarci su un argomento decisivo per lo sviluppo di plugin e temi WordPress: Hooks, Actions & Filters. Vista la complessità dell’argomento, preferisco trattarlo per intero nel prossimo articolo. Nel frattempo, se avete dubbi o considerazioni da proporre scrivete un commento qui sotto; se l’articolo vi è piaciuto, non dimenticate di condividerlo!