I template tag nei temi di WordPress
I template tag sono funzioni definite nel core di WordPress che prelevano informazioni dal database e generano dinamicamente un output, quest’ultimo può essere mandato direttamente a video o restituito come valore di una variabile.
Molti template tag generano informazioni relative a post e pagine, come il titolo, l’autore, la data di pubblicazione, etc. Questi tag vanno utilizzati all’interno del Loop. Altri tag generano informazioni di carattere generale e possono essere utilizzati al di fuori del Loop.
Tag frequentemente utilizzati
Tra i tag di utilizzo più frequente, bloginfo() fornisce un semplice esempio di come restituire a video informazioni sul sito Web corrente:
<h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
L’argomento individua il tipo di informazione richiesta e la funzione invia direttamente l’output al browser. Il codice precedentemente proposto manda a video il seguente testo:
<h2 class=”site-description”>Un nuovo sito targato WordPress</h2>
Spesso l’output restituito a video non è costituito da una semplice stringa di testo, ma da un frammento di codice HTML:
<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
the_ID() restituisce l’ID del post corrente in forma di stringa; post_class(), invece, restituisce un frammento di codice HTML, sicché l’output a video sarà:
<article id=”post-90″ class=”post-90 post type-post status-publish format-standard hent
Tra le molte decine di tag, è possibile individuare due sottogruppi che si presentano con caratteristiche omogenee: i tag con prefisso the_ e i tag con prefisso get_.
I tag the_
Il prefisso the_ individua un tag che manda a video un output. the_title() e the_permalink(), ad esempio, restituisce a video il titolo e il permalink di un post (o di una pagina) e deve necessariamente essere utilizzato all’interno del Loop. Si consideri questo esempio:
<h2><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h2>
Con questa istruzione vengono stampati a video il permalink e il titolo di un post all’interno di un titolo delimitato da h2. Altri tag the_ di impiego comune sono:
I tag get_
Se i tag the_ stampano un output a video, i tag get_ restituiscono una stringa da gestire via PHP. Il framework dispone, per molti tag the_, di un corrispondente tag get_. Così i tagget_permalink() e get_the_title() permettono di ottenere lo stesso risultato dell’esempio precedente:
<a href=”<?php esc_url( get_permalink() ); ?>”><?php echo get_the_title(); ?></a></h2>
get_permalink() e get_the_title() possono essere utilizzati al di fuori del Loop, e quindi si prestano ad una molteplicità di impieghi. Altri tag di uso comune
sono get_bloginfo(),get_the_author(), get_the_author_meta(), get_the_time(), get_the_date(),get_the_excerpt() e get_the_content() i cui nomi rendono facilmente intuibile la funzione svolta.
Tag condizionali
Sono funzioni che permettono di testare una condizione. Grazie a questi tag, è possibile generare un output alternativo a seconda del valore TRUE o FALSE restituito. is_single(), ad esempio, restituisce TRUE al caricamento di una pagina singola:
Altri tag condizionali di uso corrente sono is_home() e is_front_page(), che testano se la pagina corrente sia la Home Page del sito Web corrente (blog o pagina statica); is_page(), che verifica che l’utente si trovi in una pagina statica; is_category(), che verifica la categoria del post corrente.
Include tags
Gli Include Tags, di cui si è già parlato nei capitoli precedenti, sono funzioni che includono il contenuto di specifici template. Si tratta dei seguenti template tags:
– get_header()
– get_footer()
– get_sidebar()
– get_template_part()
– get_search_form()
– comments_template()
Anche in questo caso i nomi dei tags rendono facilmente intuibile la funzione svolta
I parametri
Come tutte le funzioni PHP, i template tag possono accettare o meno argomenti. bloginfo(), ad esempio, accetta una stringa che individua il tipo di dato da mandare a video. Nel caso non venisse passato alcun argomento, bloginfo() stamperà il nome del sito Web corrente. Alcuni tag accettano argomenti come ogni funzione PHP; a tal proposito si consideri la seguente istruzione:
<?php single_post_title( ‘Title: ‘, TRUE ); ?>
Qui il primo argomento è un testo da visualizzare prima dell’output, il secondo stabilisce se la funzione deve mandare a video il testo, o restituirlo in una variabile PHP. Infine, alcuni tag accettano argomenti nella forma di array o di querystring:
<?php wp_list_categories( ‘orderby=name&exclude=4,5&title_li=<h2>’ . __(‘Events’) . ‘</h
L’argomento passato alla funzione consiste in una querystring che imposta i valori di quattro parametri: orderby, exclude, title_li e taxonomy. In alternativa alla querystring, gli stessi parametri avrebbero potuto essere trasmessi come elementi di un array.
La gerarchia dei template in WordPress
Si è più volte fatto riferimento alla gerarchia dei template. Si tratta della gerarchia in base alla quale WordPress individua il template con cui viene generata ogni singola pagina del sito. L’informazione relativa al tipo di pagina viene trasmessa tramite le querystring e la selezione del template avviene in base ai nomi dei file disponibili.
Tra tutti i template file, l’unico indispensabile è il file index.php, utilizzato da WordPress qualora manchino template più specifici per la pagina richiesta dall’utente.
La pagina iniziale
Per restituire la pagina iniziale di un sito Web basato su WordPress sono previsti due template: home.php e front-page.php. Il primo viene utilizzato quando la pagina iniziale mostra gli ultimi articoli del blog; il secondo quando viene impostata una pagina statica nel menu “Impostazioni lettura” del pannello di amministrazione.
In mancanza del file home.php, viene caricato il file index.php, in mancanza del file front-page.php, invece, WordPress cercherà il template page.php, nel caso in cui la pagina iniziale sia una pagina statica; in alternativa, qualora la pagina iniziale sia un elenco di articoli, WordPress cercherà di nuovo il template home.php.
Pagine singole
Per rendere singoli post e pagine statiche sono disponibili due template generali: single.php per gli articoli e page.php per le pagine statiche. Prima di questi due template, però, WordPress ne cercherà di più specifici. Quella che segue è la gerarchia prevista per articoli, tipi di post personalizzati e allegati:
Nel caso dei Post avremo:
single-post.php
single.php
Nel caso dei Custom post types avremo invece:
single-$posttype.php
single.php
Infine, nel caso degli allegati:
$mimetype.php
$subtype.php
$mimetype_$subtype.php
attachment.php
single.php
Le pagine statiche possono avere un template specifico per la singola pagina:
$custom.php
page.php
Oppure seguire lo schema della gerarchia:
page-$slug.php
page-$id.php
page.php
Come sempre, ogni qual volta manchino tutti i template della gerarchia, WordPress cercherà il file index.php.
Pagine di archivio
Una pagina di archivio è una pagina che ospita un elenco di notizie. Può trattarsi delle notizie di una specifica categoria, etichettate con un certo tag o con una determinata tassonomia, appartenenti ad un tipo di post personalizzato, create da un certo autore, o, infine, pubblicate in una certa data.
In tutti questi casi, WordPress cercherà template specifici per il tipo di archivio, secondo il seguente schema:
Commenti, 404 e risultati di ricerca
Gli ultimi template generano il pop-up dei commenti (comments-popup.php), la pagina di errore 404 (404.php) e la pagina che mostra i risultati di una ricerca interna al sito (search.php).
Nell’immagine conclusiva di questo capitolo viene mostrata un’infografica dell’intera struttura gerarchica dei template.
Il file style.css: intestazione e layout della pagina
Il file style.css non è solo il foglio di stile principale del tema, è anche il file che fornisce a WordPress tutte le informazioni necessarie al corretto funzionamento del tema stesso. Queste informazioni sono contenute in un’intestazione sotto forma di commento e sono strutturate come coppie chiave/valore, definite seguendo le regole indicate nella File Header Specification.
La seconda parte del file contiene le dichiarazioni CSS che permettono di creare la veste grafica del sito. WordPress genera numerosissimi nomi di classi CSS che vengono assegnati automaticamente agli elementi che compongono le pagine del front-end. Una volta noti i nomi delle classi, sarà agevole definire con precisione le caratteristiche grafiche di ogni elemento della pagina.
L’intestazione del file
Quelli che seguono sono i metadati che possono comporre l’intestazione del file style.css:
La lista proposta non è tassativa e altre coppie chiave/valore possono essere aggiunte all’elenco. Quello che segue è invece un esempio di intestazione:
/*
Theme Name: Seventy One Theme
Theme URI: http://example.com
Description: A basic theme for HTML.it readers
Author: Carlo Daniele
Author URI: https://www.linkedin.com/in/carlodaniele
Version: 0.1
*/
Queste stesse informazioni saranno visibili nel pannello di amministrazione, nella scheda “Dettagli Tema” della pagina “Aspetto > Temi”.
Si passa poi alla dichiarazione degli stili. Non è strettamente necessario, ma, prima di creare i propri stili, è una buona abitudine azzerare gli stili predefiniti dei browser. A tal scopo, in questa guida si è fatto ricorso al Reset CSS di Eric Meyer.
Il layout delle pagine
Dopo aver azzerato gli stili predefiniti, si passa alla progettazione della presentazione del sito, con la creazione del layout. Si vedrà più avanti come generare il markup, ma già da ora si può definire il seguente schema:
La div#page esterna costituisce il contenitore generale. I blocchi interni sono costituiti dall’elemento header, contenente il titolo del sito e il menu principale di navigazione, dalla div#main-content, che ospita i contenuti, dall’elemento aside, che ospita la sidebar principale e, infine, dall’elemento footer, che ospiterà una diversa sidebar e le informazioni di copyright.
Definita la struttura, si può procedere alla creazione del layout. Nel foglio di stile andranno aggiunte le seguenti istruzioni:
Come è possibile notare, sono state utilizzate unità di misura relative per fare in modo che il layout sia flessibile e si adatti alla dimensione dello schermo. Il blocco #main-content occupa il 72% circa dell’area disponibile, mentre la barra laterale occupa il 22%. Le proporzioni vanno ora adattate agli schermi di dimensioni inferiori:
I like it!
I tһink tһiѕ is among the most important info for me. And i am glad reading your article.
But wanna remark on sօme general things, The web site style is great, the articles is really excellent : D.
Good job, cheers
Ι really love your site.. Very niϲe colors & theme. Did
you make this website yourself? Please reply back as I’m trying to create my own personal blog and
woulԁ love to learn where you got this fгom or ԝhat
the thеme is named. Many tһanks!
I am ѕսгe thiѕ article has touched all the internet users, its really really pleasant post on buildіng up new
blog.
____
TY
Βecaսse the admin of tһis site is working, no
doubt very quіckly it will be famous, due to its quaⅼity contents.
Wow, aᴡesome blog ⅼayout! Hoѡ long have you been blogging for?
you maԀe blogging look easy. The overall look of your web site
is fantastic, let aⅼone the content!
If you deѕire to grow your familiɑrity simply keep visiting this web site and be updаted with the most up-to-date information posted here.