Creare un Tema WordPress – L’header, Pt. 2
Nella lezione di oggi continueremo nella realizzazione dell’header del nostro tema WordPress. Riguardiamo il codice fin’ora scritto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
<?php
wp_title( '|', false, 'right' );
bloginfo('name');
if ( is_home() || is_front_page() ) echo ' | ' . get_bloginfo( 'description' );
?>
</title>
<link rel="stylesheet" type="text/css" href="wp-content/themes/wip_theme/style.css" media="screen" />
</head>
Colleghiamo il foglio di stile
Fino ad ora abbiamo reso dinamico solamente il title della pagina, adesso dobbiamo fare lo stesso con il collegamento al file “style.css” cosi da evitare di dover scriverne l’intero percorso, per fare questo ci viene incontro la funzione bloginfo(); di cui vi ho parlato nella lezione precedente, andiamo quindi a sostituire
<link rel="stylesheet" type="text/css" href="wp-content/themes/wip_theme/style.css" media="screen" />
con
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
Il parametro stylesheet_url che abbiamo utilizzato, andrà a richiamare il file style.css del nostro tema. Recentemente è stata aggiunta una nuova funzione get_stylesheet_uri() , ed è preferibile utilizzare ques’ultima.
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen" />
Avremmo comunque ottenuto lo stesso risultato anche utiizzando il parametro stylesheet_directory
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" media="screen" />
oppure il parametro template_directory
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" media="screen" />
Ma, come già detto, la stessa documentazione ufficiale di WordPress raccomanda di utilizzare get_stylesheet_uri().
Invece template_directory e stylesheet_directory, pur dando lo stesso risultato, non hanno la stessa funzione, ma è necessario prima accennarvi il concetto di tema padre e tema figlio. Dalla versione 3.0 di WordPress è stata introdotta la possibilità di creare un tema principale ed un relativo tema secondario che erediterà tutte le funzionalità di quello originale, in questo modo potremmo aggiungere nuove features senza stravolgere o toccare in alcun modo il tema padre. Tornando ai due parametri, template_directory serve a ricavare il percorso del tema padre , mentre stylesheet_directory il percorso del tema figlio.
Collegare correttamente i file css e i file javascript.
Visto che con bloginfo(‘template_directory ‘) è possibile ricavare il percorso del nostro tema, ci verrebbe intuitivo scrivere:
<link rel="stylesheet" type="text/css" href="bloginfo('template_directory') ?>/nomedelfile.css" />
e
<script src="<?php bloginfo('template_directory') ?>/nomedelfile.js" type="text/javascript"></script>
In realtà non è cosi semplice poichè, in questa maniera, potrebbero nascere conflitti con eventuali plugin di terze parti oppure includere i file anche dove non sono necessari. Nel Codex di WordPress viene suggerito di utilizzare wp_enqueue_style() e wp_enqueue_script() per tale scopo.
Entrambe le funzioni prevedono 5 parametri:
Per wp_enqueue_script() sono:
- $nome, Nome univoco dello stile o dello script. (Obbligatorio)
- $src, Percorso dello stile o dello script. (Opzionale)
- $deps, Dipendenze (in forma di array).(Opzionale)
- $ver, Versione.(Opzionale)
- $in_footer, Footer (Di default viene incluso nell’header, valorizzandolo con TRUE verrà incluso nel footer).(Opzionale)
Invece di bloginfo(‘template_directory’), utilizzeremo get_template_directory_uri() per ricavare il percorso del nostro tema.
Ad esempio scrivendo
wp_enqueue_script( 'nomedelfile', get_template_directory_uri().'/file.js', array('jquery') );
andremo a caricare il file contenuto nella cartella del nostro tema chiamato “file.js”, denominato “nomedelfile”. Se diamo un’occhiata al 3° parametro noteremo che è riportata la libreria Jquery. Questo perché il nostro script è dipendente da quella libreria, si può indicare anche una dipendenza verso un’altro file caricato precedentemente.
wp_enqueue_script( 'nomedelfile1', get_template_directory_uri().'/file1.js' );
wp_enqueue_script( 'nomedelfile2', get_template_directory_uri().'/file2.js', array('nomedelfile1'));
Per wp_enqueue_style() sono:
- $nome, Nome univoco dello stile o dello script. (Obbligatorio)
- $src, Percorso dello stile o dello script. (Opzionale)
- $deps, Dipendenze (in forma di array).(Opzionale)
- $ver, Versione.(Opzionale)
- $media, Media. Viene specificato per quale tipo di device il foglio di stile verrà distribuito. Di default è All.(Opzionale)
Ad esempio scrivendo
wp_enqueue_style( 'nomedelfile', get_template_directory_uri().'/file.css');
Andremo a caricare il file contenuto nella cartella del nostro tema chiamato “file.js.
Esiste anche la possibilità di memorizzare prima il file per un successivo caricamento, con la funzione wp_register_script() per gli script
wp_register_script( 'nomedelfile', get_template_directory_uri().'/file.js', array('jquery'));
e wp_register_style() per i fogli di stile.
wp_register_style ( 'nomedelfile', get_template_directory_uri().'/file.css');
Una volta memorizzato il file lo andremo a richiamare tramite le funzioni wp_enqueue_script() e wp_enqueue_style() descritte prima, indicando il nome del file impostato nel primo parametro.
wp_enqueue_script ( 'nomedelfile');
e
wp_enqueue_style ( 'nomedelfile');
wp_enqueue_script() può essere utilizzato anche per caricare una libreria o uno script già presenti nel core di WordPress come, ad esempio, il framework Prototype, Jquery o Scriptaculous. Una lista completa la possiamo trovare alla fine di questa pagina.
Per includere una di esse nel nostro tema basterà indicarne il nome, tramite la funzione wp_enqueue_script(), in questo modo:
wp_enqueue_script('jquery');
wp_enqueue_script('scriptaculous');
wp_enqueue_script('prototype');
Esiste infine un ultima funzione correlata alle due appena descritte ed è wp_deregister_script, utilizzata per rimuovere un file precedentemente memorizzato con wp_register_script.
Ad esempio, se volessimo sostituire la libreria Jquery già presente nel core di WordPress con una più recente, sarà necessario utilizzare il seguente codice
wp_deregister_script('jquery');
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', false, '1.7.1');
wp_enqueue_script('jquery');
Una piccola avvertenza, per evitare eventuali conflitti tra Prototype e Jquery, dobbiamo scrivere la forma estesa per quest’ultimo jQuery(‘elemento’), per selezionare un elemento invece che utilizzare $(‘elemento’).
Esiste anche per i fogli di stile la medesima funzione, wp_deregister_style.
In questa lezione abbiamo imparato ad integrare correttamente i fogli di stile e file javascript, nella prossima lezione completeremo l’header aggiungendo un menù di navigazione, il collegamento ai feed e ai pingback.
Commenti
Ciao, non ho capito come fare a caricare un file js, in pratica ho scritto:
Però non mi carica nulla, ho provato a mettere un alert nel file1.js per vedere se lo legge ma niente ….
Nel commento che ho inserito manca il codice che avevo scritto, non lo prende il commento ?
Ciao Marco, per inserire del codice nei commenti devi racchiuderlo, se è del php, in questo modo (la parte iniziale e finale tra parentesi tutta attaccata)
[ php ] codice [ / php ]
codice java
[ code lang=”js” ] codice [ /code ]
Comunque prova a cercare, visualizzando il codice html dal browser, il nome del file e, se lo trova, ad aprirlo cliccandoci.
Se ti da errore di contenuto non trovato devi controllare i percorsi del file.
Basta comunque questo codice, memorizzando il file in una cartella “js”
wp_enqueue_script( 'file1', get_template_directory_uri().'/js/file1.js',array('jquery') ); wp_enqueue_script('jquery');Non mi funziona. In pratica io sto provando a caricare un semplice file in js giusto per provare la nuova funzione ma non va. Se invece scrivo :
così funziona.
Forse carica comunque il file nel footer (che ancora non è presente quindi non lo visualizza). Prova ad assegnare, al 5° parametro, false (anche se dovrebbe esserlo di default:
wp_enqueue_script( 'file1', get_template_directory_uri().'/js/file1.js',array('jquery'), false ); wp_enqueue_script('jquery');Fammi sapere.
A presto.
Perfetto, con false funziona. Ma come mai in wordpress hanno stabilito che per caricare un file js bisogna scrivere tutto questo codice quando con un richiamo tradizionale in javascript ci scrivi 4 parole appena ?
Ciao ,scusami ma dove scrivo la forma estesa per jQuery ” jQuery(‘elemento’)”.
Ciao, anche quello è un esempio su come utilizzare il selettore jQuery, dalla forma contratta $(‘.menu’) alla forma estesa jQuery(‘.menu’).
L’elemento indicato tra parentesi è l’elemento che ha come classe css “menu”.
Il tutto va inserito o in un file .js o nel corpo del documento, va trattato come codice javascript.
Grazie mille!!!
Ciao complimenti per il blog davvero utile per me che voglio imparare wordpress e sono veramente alle prime armi!
ho completato la prima parte della lezione”Colleghiamo il foglio di stile” ma della seconda “Collegare correttamente i file css e i file javascript” non ho capito quale parte del codice bisogna copiare e inserire nel header.php in modo da fare correttamenti i collegamenti.
grazie.