Nella precedente lezione abbiamo analizzato le funzionalità base del loop di WordPress, adesso vedremo come filtrare i risultati secondo determinati parametri, per esempio possiamo visualizzare tutti i post di alcuni autori piuttosto che altri oppure di una o più categorie. Questo grazie alla funzione query_post(), che dobbiamo utilizzare solamente per personalizzare il loop principale e non per creare più loop da inserire nella stessa pagina o in altri punti del sito (ad esempio un elenco di ultimi post inseriti nel footer). Se vogliamo aggiungere più loop dobbiamo utilizzare un’altra funzione di cui parlerò tra poco.
Torniamo a query_post(), i parametri vanno inseriti prima del loop. Ad esempio, per visualizzare solo 5 articoli invece del limite impostato nelle opzioni di lettura di WordPress dobbiamo scrivere:
query_posts ('posts_per_page=5');
/*INIZIO DEL LOOP */
if ( have_posts() ) : while ( have_posts() ) : the_post();
/*SERIE DI AZIONI DA ESEGUIRE*/
/*FINE DEL LOOP */
endwhile; else:
/*MESSAGGIO DI ERRORE SE NON VIENE TROVATO NESSUN CONTENUTO*/
endif;
/*ALLA FINE DEL LOOP CANCELLIAMO LA QUERY UTILIZZATA TRAMITE WP_RESET_QUERY*/
wp_reset_query ();
I tags interni del loop da utilizzare sono gli stessi visti nella precedente lezione. Ritornando a query_post(), per aggiungere nuovi parametri, bisogna separarli tramite una e commerciale ( & ), quindi per visualizzare gli ultimi 5 post della categoria avente come id 1 scriviamo:
query_posts ('posts_per_page=5&cat=1');
Se vogliamo utilizzare più valori per un parametro, ad esempio più categorie, dobbiamo separarli tramite una virgola:
query_posts ('posts_per_page=5&cat=1,2,3,4,5');
Il codice appena scritto visualizzerà gli ultimi 5 post delle categorie con ID 1,2,3,4 e 5, se invece vogliamo escludere uno o più valori di un parametro, dobbiamo aggiungere il prefisso meno prima del valore:
query_posts ('posts_per_page=5&cat=-1,-2');
Il codice appena scritto visualizzerà gli ultimi 5 post di tutte le categorie, tranne quelle aventi ID 1 e 2. Se, invece dell’ID vogliamo impostare il nome della categoria come parametro (Però in questo caso, modificando in un secondo momento il nome della categoria, la query non funzionerà più ed è quindi consigliato utilizzare l’ID come parametro) scriviamo:
query_posts ('posts_per_page=5&cat_name=nomedellacategoria');
Per visualizzare gli ultimi 5 post della categoria con ID 1 e dell’autore con ID 1 scriviamo:
query_posts ('posts_per_page=5&cat=1&author=1');
Per visualizzare gli ultimi 5 post della categoria con ID 1,2 e 3 e degli autori con ID 1,2,3 e 4 scriviamo:
query_posts ('posts_per_page=5&cat=1,2,3&author=1,2,3,4');
WP_Query()
Una lista dettagliata dei parametri che possiamo utilizzare la troviamo cliccando QUI ed è valida anche per quest’altra funzione di cui vi accennavo all’inizio della lezione, quando parlavo della possibilità di creare più loop da utilizzare nella stessa pagina, bene per fare questo dobbiamo utilizzare la funzione WP_Query:
/*QUERY*/ $the_query = new WP_Query( parametri ); /*INIZIO DEL LOOP*/ if ( $query->have_posts() ) : while ( $query-> have_posts() ) : $query->the_post(); /* AZIONI DA ESEGUIRE */ endwhile; else: /*MESSAGGIO DI ERRORE SE NON VIENE TROVATO NESSUN CONTENUTO*/ endif; /*ALLA FINE DEL LOOP CANCELLIAMO LA QUERY UTILIZZATA TRAMITE WP_RESET_QUERY*/ wp_reset_query ();
Come avrete potuto notare, anche l’inizio del loop è diverso, ma le differenze finiscono qui poiché sia i tags all’interno del loop, che l’impostazione dei parametri della query rimangono gli stessi che abbiamo già visto. Ecco qualche altro parametro che certamente ci potrà tornare utile in futuro:
$query = new WP_Query( 'p=4' );
Il parametro che abbiamo impostato visualizzerà il post con ID 4 mentre:
$query = new WP_Query( 'page_id=4' );
Visualizzerà la pagina avente 4 come ID
$query = new WP_Query( 'name = il-mio-articolo' );
Visualizzerà il post avente “il-mio-articolo” come slug, mentre
$query = new WP_Query( 'pagename = la-mia-pagina' );
Visualizzerà la pagina avente “la-mia-pagina” come slug. Un altro parametro molto utile è offset, per poter visualizzare i risultati a partire da un certo valore da noi impostato ad esempio, se il loop ci dà 10 risultati e vogliamo mostrare solo gli ultimi 5, dobbiamo scrivere:
$query = new WP_Query( 'offset = 5' );
Per combinare più parametri, dobbiamo separarli sempre da una e commerciale (&)
$query = new WP_Query( 'posts_per_page=15&offset= 10' );
Per avere al massimo quindici post partendo dall’undicesimo
orderby, serve per ordinare i risultati in base all’ id, autore, titolo, data, data di modifica, numero di commenti, ordine causale, campi personalizzati, post o pagina principale. È possibile visualizzare i risultati sia in ordine crescente (ASC), che descrescente (DESC), quest’ultimo è il valore di default.
Ad esempio, per ordinare i risultati in base al titolo e in ordine crescente, dobbiamo scrivere:
$query = new WP_Query( array ( 'orderby' => 'title', 'order' => 'ASC' ) );
Dalla versione 3.0 di WordPress è possibile creare dei custom post, ovvero dei post personalizzati, ad esempio per creare delle schede di prodotti. Se vogliamo visualizzare i post presenti in “prodotti”, che altro non è che il nome del custom post, dobbiamo utilizzare il parametro post_type, scrivendo:
$query = new WP_Query ( 'post_type=prodotti' );
Invece, per visualizzare i post per data, dobbiamo scrivere:
$query = new WP_Query ( 'year=2012&monthnum=5&day=28&hour=22&minute=30&second=11' );
E visualizzerà tutti i post scritti il 28 Maggio 2012, alle 22:30 e 11 secondi, è possibile anche impostare la settimana dell’anno, da 0 a 53. Ad esempio:
$query = new WP_Query ( 'year=2012&w=1' );
Mostrerà tutti i post scritti la prima settimana del 2012.
Vediamo anche qualche parametro di tassonomia. Quello più semplice sarà scritto in questo modo:
query = new WP_Query( array( 'colore' => 'rosso' ) );
E visualizzerà tutti i post aventi come tassonomia “colore” e valore “rosso”.
Per unire più tassonomie è necessario racchiuderle in un array:
$query = new WP_Query( array( 'colore' => 'rosso', 'materiale' => 'ferro' ) );
In questo modo visualizzeremo i post che hanno come tassonomia “colore” e valore “rosso” e tassonomia “materiale” e valore “ferro”.
Per avere risultati più complessi e utilizzare più parametri, dobbiamo utilizzare “tax_query“, inserendo i seguenti parametri all’interno di un array:
- taxonomy (stringa) – Nome della tassonomia.
- 2field (stringa) – Selezioniamo la tassonomia in base all’ id’ oppure ‘slug’.
- terms – Valore della tassonomia.
- include_children (booleano) – Includere o meno le tassonomie secondarie, se abbiamo impostato una gerarchia delle stesse. Di default è TRUE.
- operator (stringa) – Operatori. I valori sono: ‘IN’, ‘NOT IN’, ‘AND’.
$args = array( 'tax_query' => array( 'relation' => 'AND', array( 'taxonomy' => 'film', 'field' => 'slug', 'terms' => array( 'thriller', 'poliziesco' ) ), array( 'taxonomy' => 'regista', 'field' => 'id', 'terms' => array( 103, 106, 111), ) ) ); $query = new WP_Query( $args );
Abbiamo caricato tutti i parametri nella variabile $args ed abbiamo deciso di visualizzare i post aventi come tassonomia “film”, valori “thriller” e “poliziesco” e, visto che abbiamo utilizzato l’operatore AND, mostrerà i risultati solo se la seconda tassonomia è “regista” e come valore gli ID “103”, “106” e “111”.
Passiamo ora a come filtrare i post in base a dei campi personalizzati, ad esempio se vogliamo visualizzare tutti i post che hanno come valore “Roma”:
$query = new WP_Query( 'meta_value=Roma' );
Così visualizzeremo tutti i post che hanno, come valore di un qualsiasi campo personalizzato, il valore “Roma”. Se invece vogliamo cercare i post che hanno, come campo personalizzato, la parola “Città”, scriviamo:
$query = new WP_Query( 'meta_key=Città' );
Per cercare tutti i post che hanno, come campo personalizzato, “Città” e come valore “Roma”:
$query = new WP_Query( array( 'meta_key' => 'Città', 'meta_value' => 'Roma' ) );
Se invece vogliamo escludere la città Roma, dobbiamo utilizzare un operatore logico, quindi scriviamo:
$query = new WP_Query( array( 'meta_key' => 'Città', 'meta_value' => 'Roma', 'meta_compare' => '!=' ) );
Invece, per utilizzare meta_query, scriviamo:
$args = array( 'post_type' => 'prodotti', 'meta_query' => array( array( 'key' => 'colore', 'value' => 'blu', 'compare' => 'NOT LIKE' ) ) ); $query = new WP_Query( $args );
In questo modo cercheremo tutti i custom post “Prodotti”, che non hanno come valore del campo “Colore”, “Blu”. Per confrontare più campi personalizzati, dobbiamo racchiuderli in array separati:
$args = array( 'post_type' => 'prodotti', 'meta_query' => array( array( 'key' => 'colore', 'value' => 'blu', ), array( 'key' => 'taglia', 'value' => 'large', ) ) ); $query = new WP_Query( $args );
Per visualizzare i post in base al loro stato, scriviamo:
$query = new WP_Query( array( 'post_status' => array( 'publish'), 'perm' => 'readable' ) );
Come risultato otterremo tutti i post pubblicati, che possono essere modificati.
In questa lezione abbiamo visto come personalizzare il loop, filtrando i post in base ai risultati. Ricordatevi di utilizzare la funzione query_post() per personalizzare il loop principale, se dovete aggiungere più loop dovete utilizzare la funzione WP_Query.
Adesso è necessario ottimizzare il loop, creiamo un file vuoto e rinominiamolo come loop.php, copiamo il loop che abbiamo scritto in page.php e archive.php e, al loro posto, scriviamo:
get_template_part('loop');
single.php e search.php
Creiamo anche il file single.php, che gestirà la visualizzazione del singolo post e search.php che gestirà i risultati del modulo di ricerca e scriviamo anche al loro interno:
get_template_part('loop');
Se è necessario escludere alcune parti del loop, in base al template corrente, dobbiamo utilizzare i Conditional Tags
. Ad esempio, per visualizzare il riassunto solo in search.php e archive.php e il testo completo in page.php e single.php, scriviamo all’interno del loop:
if ( (is_category() ) || (is_search() ) ) {
the_excerpt();
}
if ( (is_single() ) || (is_page() ) ) {
the_content();
}
Facciamo lo stesso per quegli elementi che vogliamo includere ed escludere dal loop, in base al template corrente.
In questa lezione abbiamo visto come personalizzare il loop, in base a determinate query. L’argomento della prossima lezione sarà come visualizzare i commenti e come inserire il form che permette ai visitatori di inserirli, quindi aggiungiamo un’ulteriore riga nel file che gestisce il loop:
comments_template();
La funzione comments_template() prevede due parametri:
- $file, ovvero il nome del file che gestisce i commenti, lasciandolo vuoto verrà utilizzato comments.php.
- $separa-commenti, valore booleano che indica se vogliamo o meno separare i commenti per tipo (di default è false).
Il loop
Nelle lezioni precedenti abbiamo finalmente completato l’header del nostro tema, oggi andremo ad analizzare il loop, ovvero il sistema utilizzato da WordPress per visualizzare il contenuto della maggior parte dei template che compongono il nostro tema, ad esempio per i post, le pagine, una specifica categoria, i risultati di una ricerca ecc.
Nella precedente lezione abbiamo generato dinamicamente altri elementi del nostro tema, come i fogli di stile. Oggi completeremo finalmente l’header, aggiungendo anche un menù di navigazione personalizzato.
Collegamento ai Feed
Per inserire il collegamento ai feed Atom e Rss scriviamo, all’interno dell’head:
<!-- RSS 2.0 -->
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS" href="<?php bloginfo('rss2_url'); ?>" />
<!-- ATOM -->
<link rel="alternate" type="application/atom+xml" title="<?php get_bloginfo('name'); ?>Atom " href="<?php bloginfo('atom_url'); ?>" />
Per inserire il collegamento ai feed Atom e Rss dei commenti scriviamo, all’interno del dell’head:
<!-- RSS 2.0 -->
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> Comments RSS" href="<?php bloginfo('comments_rss2_url'); ?>" />
<!-- ATOM -->
<link rel="alternate" type="application/atom+xml" title="<?php get_bloginfo('name'); ?>Comments Atom " href="<?php bloginfo('comments_atom_url'); ?>" />
Per inserire il collegamento ai feed Atom e Rss dei commenti scriviamo, all’interno del dell’head:
<!-- RSS 2.0 COMMENT-->
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> Comments RSS" href="<?php bloginfo('comments_rss2_url'); ?>" />
<!-- ATOM COMMENT -->
<link rel="alternate" type="application/atom+xml" title="<?php get_bloginfo('name'); ?>Comments Atom " href="<?php bloginfo('comments_atom_url'); ?>" />
Collegamento ai Pingback e ultimi accorgimenti.
I Pingback sono un sistema di notifica che ci avvisa quando viene inserito un collegamento verso una pagina del nostro sito da parte di un altro sito web. Con WordPress ci viene sempre incontro la funzione bloginfo() quindi scriviamo:
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
Non dimentichiamoci di rendere dinamico anche il meta tag che si occupa di definire il contenuto e la codifica della pagina, quindi sostituiamo
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
con
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
Dopo aver terminato di rendere dinamici tutti gli elementi dell’header dobbiamo inserire, prima della chiusura del tag head, wp_head(). Ciò non è indispensabile per il corretto funzionamento del nostro tema, quanto a quei plugin di terze parti che caricano nell’header i file javascript e fogli di stile.
<?php wp_head() ?> </head>
Ora possiamo iniziare ad inserire il logo e il menù del nostro sito. Dopo aver caricato il logo in formato png all’interno della cartella images presente nella root del nostro tema, apriamo il tag body e scriviamo
<!-- inizio wrapper -->
<div id="wrapper">
<!-- start header -->
<div id="header">
<!-- start logo -->
<div id="logo">
<a href="<?php bloginfo('url') ?>" title="<?php bloginfo('name') ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="Logo" />
</a>
</div>
<!-- end logo -->
</div>
<!-- end header -->
<div class="clear"></div>
Apriamo la pagina principale del nostro tema. Ci troveremo davanti il logo che abbiamo appena caricato.
Adesso iniziamo a personalizzare lo stile del nostro tema. Apriamo il file style.css ed aggiungiamo
/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body { background:#dcdcdc; }
#header { width:940px;padding:10px;}
#logo { float:left;height:47px; }
#wrapper {width:960px; margin:auto; background:#f8f8f8; border-left:solid 5px #ccc;border-right:solid 5px #ccc;}
#content {width:640px;}
#sidebar {width:320px;}
.clear { clear: both; }
/* Menu */
#nav { float:right; height:47px; }
#nav ul { list-style:none;}
#nav li { float:left; margin:0 5px;line-height:37px; }
#nav li a{ text-decoration:none; color:#007fa6; font-family:Verdana, Geneva, sans-serif; font-size:12px; text-shadow:1px 1px 1px #fff; padding:10px }
#nav li a:hover{ color:#262626;background:#fff;background:#007fa6;color:#fff;text-shadow:1px 1px 1px #000;}
#nav li.current-menu-item a, #nav li.current-post-ancestor a, #nav li.current-menu-parent a, #nav li.current-menu-parent a { color:#fff; background:#007fa6;text-shadow:1px 1px 1px #000; }
#nav li.current-menu-item a:hover, #nav li.current-post-ancestor a:hover, #nav li.current-menu-parent a:hover, #nav li.current-menu-parent a:hover {background:#005b77;}
Aggiungiamo il menù.
Adesso dobbiamo aggiungere il menù al nostro sito, torniamo nell’header e scriviamo, prima di:
</div> <!-- end header -->
<!-- start menu --> <div id="nav"> <?php wp_nav_menu(); ?> </div> <!-- end menu -->
Grazie alla funzione wp_nav_menu(), possiamo aggiungere il menù di navigazione al nostro tema in WordPress. Quello che abbiamo integrato è il menù automatico che genera WordPress in base alle pagine presenti nel nostro sito, per aggiungere i menù personalizzati introdotti dalla versione 3.0 dobbiamo innanzitutto creare il file functions.php. Come suggerisce il nome stesso, questo file serve ad aggiungere nuove funzionalità al nostro tema, in futuro lo analizzeremo nel dettaglio man mano che andremo avanti con le lezioni. Per il momento scriviamo, al suo interno:
add_action( 'init', 'crea_menu' );
function crea_menu() {
register_nav_menu( 'menu-wip', 'Menu principale' );
}
Nella funzione register_nav_menu(), abbiamo scritto prima il nome del menù e l’etichetta che verrà visualizzata nell’amministrazione di WordPress. Ora sostituiamo, in header.php
<?php wp_nav_menu(); ?>
con
?php wp_nav_menu( array('menu' => 'menu-wip' )); ?>
Volendo, è possibile generare automaticamente la voce “Home” del nostro menù, grazie ad un filter hook. Aggiungiamo, in functions.php, il seguente codice:
add_filter( 'wp_nav_menu_items', 'home_link', 10, 2 );
function home_link($items, $args) {
if (is_home() || is_front_page())
$class = 'class="current-menu-item"';
else
$class = '';
$home = '<li '.$class.'><a href="' . get_bloginfo('url') . '">' . __('Home') . '</a></li>';
$items = $home.$items;
return $items;
}
All’inizio controlliamo la pagina corrente. Nel caso sia la home carichiamo, nella variabile $class, la classe css relativa alla pagina corrente altrimenti lasceremo la variabile vuota. Successivamente genereremo il codice html necessario per la visualizzazione della voce di menù.
Deve essere comunque presente un menù personalizzato in WordPress con almeno una voce attiva altrimenti verranno visualizzate le pagine esistenti.
Questo codice può essere ulteriormente migliorato, in base alle vostre esigenze.
Fatto questo andiamo nel backend del nostro sito, sotto “Aspetto” troveremo “Menu” che prima non era presente e creiamo il nostro meù personalizzato, io ho aggiunto un link personalizzato riprendendo l’url del sito come Home , la pagina di esempio rinominandola “Pagina” e la categoria “senza categoria” di default, rinominandola “Categoria”.
In questa lezione abbiamo scoperto l’esistenza del file functions.php ed infine siamo riusciti ad aggiungere al nostro tema il supporto ad un menù personalizzato, completando finalmente l’header del nostro tema, la prossima lezione sarà dedicata al loop.
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.
