La home page

WordPress offre la possibilità di personalizzare la pagina iniziale di un sito Web (home page) scegliendo tra un elenco di articoli (come in un comune blog) ed una pagina statica. L'impostazione predefinita è quella del blog, ma dal menu "Impostazioni → Lettura" è possibile cambiare il tipo di pagina, scegliendo tra le seguenti alternative:

• gli ultimi articoli del blog;
• una pagina statica;
• una pagina statica contenente gli ultimi articoli del blog;
• una combinazione di una pagina e una serie di contenuti dinamici (dynamic front page).

Home page statica

Nel caso in cui si decida di impostare una pagina statica, WordPress utilizzerà, se esiste, il template front-page.php; in sua assenza WordPress seguirà una propria linea gerarchica:

1. template pagina personalizzato (impostato nel box "Attributi pagina" della scheda di creazione/modifica delle pagine;
2. page-{id}.php;
3. page-{slug}.php;
4. page.php;
5. index.php.

Le fasi da seguire per creare una home pagina statica sono in sostanza le seguenti:

1. creare una nuova pagina;
2. selezionare, se si desidera, un un template di pagina specifico (impostazione sovrascritta da WordPress nel caso esista il template front-page.php);
3. aggiungere i contenuti e pubblicare la pagina;
4. selezionare "Una pagina statica" nella pagina delle impostazioni di lettura;
5. selezionare la pagina dal menu a tendina "Pagina iniziale".

È opportuno ricordare che ai template pagina non va mai assegnato il nome home.php.

Home page dinamica

Quando, nelle impostazioni di lettura del sito, l'amministratore seleziona "Gli ultimi articoli" o "Una pagina statica → Pagina articoli", allora l'ordine gerarchico diventa:

1. home.php;
2. index.php.

Si avrà quindi a disposizione la seguente procedura:

1. creare una nuova pagina statica con un nome appropriato ("Blog", "Notizie", "Articoli"..);
2. non aggiungere contenuto: ogni contenuto sarà ignorato;
3. selezionare "Una pagina statica" nella pagina delle impostazioni di lettura;
4. Selezionare la pagina dal menu a tendina "Pagina articoli".

In questo caso è opportuno sottolineare che non va mai impostato un template pagina per la pagina che ospita gli articoli, altrimenti il Loop non funzionerà correttamente.

Front page integrata

La terza soluzione è la più complessa. Si tratta di una combinazione di contenuti statici e dinamici, che deve essere specificamente supportata dal tema. In quest'ultimo caso, la home page è formata da una parte statica e da una serie di articoli del blog. Entrambe le componenti della pagina sono individuate dalle pagine selezionate nelle impostazioni di lettura del sito. Questa funzionalità permette di sviluppare delle home page dalle caratteristiche avanzate, come uno slider inserito in una pagina statica, più un certo numero di articoli, aggiunti dinamicamente man mano che vengono pubblicati. Potrebbe, ad esempio, trattarsi degli ultimi articoli in evidenza (sticky posts).

Conditional tag e home page

Prima di presentare il codice, è opportuno analizzare i conditional tag associati alla home page. is_front_page() verifica se la pagina corrente è la home page del sito, indipendentemente dal tipo di pagina. Il valore true, infatti, non dipende dal tipo di pagina selezionato nelle impostazioni di lettura del sito.

is_home() restituisce true in caso di pagina dinamica. È evidente che, nel caso in cui sia impostata una home page dinamica, sia is_front_page() che is_home() restituiranno true.

Il template file front-page.php

Quando viene caricata la pagina iniziale del sito, il template front-page.php è il file che ha la precedenza rispetto a tutti gli altri, sia che si tratti di una pagina statica, che delle ultime notizie del blog.

Affinché un tema fornisca supporto per entrambe le opzioni di lettura, si può includere nel file front-page.php una condizione che verifichi se la pagina iniziale sia statica o dinamica. Il primo metodo suggerito è il seguente:

if ( 'posts' == get_option( 'show_on_front' ) ) {
	include( get_home_template() );
} else {
	// Custom content markup goes here
}

Qualora la pagina iniziale non sia una pagina del blog, allora viene inserito direttamente il codice all'interno del file front-page.php. Il parametro show_on_front, passato come argomento di get_option, restituisce posts in caso di pagina dinamica, page in caso di pagina statica. La funzione get_home_template() restituisce l'indirizzo del file home.php o, in sua mancanza, del file index.php.

In alternativa è possibile includere il template della pagina corrente:

if ( 'posts' == get_option( 'show_on_front' ) ) {
	include( get_home_template() );
} else {
	include( get_page_template() );
}

La funzione get_page_template() restituisce il percorso del template specifico della pagina impostata come home page, oppure, nel caso in cui questo non sia previsto, il percorso del template page.php.

In entrambi i casi, il file front-page.php permetterà di selezionare template distinti a seconda che la pagina iniziale sia una pagina di blog o una pagina statica. Infine, ed in alternativa alle due soluzioni appena viste, si può pensare di dotare il tema di una funzionalità più avanzata.

Front page integrata

Una pagina iniziale integrata permette di creare soluzioni complesse gestibili dall'amministratore del sito con pochi click dalla pagina delle impostazioni di lettura di WordPress. La semplicità di gestione, però, è resa possibile da un lavoro abbastanza complesso di progettazione, che si concentra essenzialmente sul file front-page.php. Per ottenere una front page integrata, il file dovrà essere opportunamente progettato con due diversi Loop, il primo dei quali visualizza la home page statica, il secondo gli articoli del blog.

Quello che segue è il primo Loop della front-page.php del tema Seventyone:

<?php
/**
 * @package WordPress
 * @subpackage Seventy-One-WordPress-Theme
 * @since Seventy One 1.0
 */
 get_header(); ?>
 	<div id="main-content" class="main-content">
 		<div id="content" class="content-area" role="main">
	<?php
	if (have_posts()) :
		// Start the Loop.
		while (have_posts()) : the_post();
	?>
			<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<header class="entry-header">
					<?php the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' ); ?>
				</header>
				<div class="entry-content">
					<?php the_content(); ?>
				</div>
			</article>
	<?php endwhile; ?>
	<?php
	else:
		get_template_part( 'content', 'none' );
	endif;

Questo Loop manderà a video la pagina statica. Per generare i post successivi, bisognerà creare un nuovo Loop. Per prima cosa, creiamo una nuova istanza dell'oggetto WP_Query:

$latest_blog_posts = new WP_Query( array( 'posts_per_page' => 3 ) );

Il parametro posts_per_page stabilisce il numero di post da visualizzare con il secondo Loop. Questo è strutturato come segue:

if ( $latest_blog_posts->have_posts() ) :
	while ( $latest_blog_posts->have_posts() ) : $latest_blog_posts->the_post();
?>
  	<div class="column3">
		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<header class="entry-header">
				<?php the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' ); ?>
			</header>
			<div class="entry-summary">
				<?php
					if ( has_post_thumbnail() ){
						?>
						<div class="post-thumbnail"><?php the_post_thumbnail( 'thumbnail' ); ?></div>
						<?php
					}
				?>
				<?php the_excerpt(); ?>
			</div><!-- .entry-summary -->
		</article>
  	</div>
<?php
	endwhile;
endif;
wp_reset_query();
?>
	</div><!-- #content -->
</div><!-- #main-content -->
<?php get_footer(); ?>

Si noti che non è stata invocata la funzione get_sidebar(). Ciò in quanto la home page non conterrà la sidebar principale. Il contenuto di ogni post sarà ospitato in una div di classe column3. Nel foglio di stile si aggiungerà questo primo blocco CSS:

.home #main-content {
    margin: 0 1.04167%;
    padding-top: 2.76596%;
    width: 97.9167%;
}

In questo modo la div che ospita il contenuto principale della pagina verrà adattata alle stesse dimensioni dell'header. Si definisce, poi, il layout delle colonne che ospitano le notizie del blog:

.column3 {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 33.333333%;
	float: left;
	padding: 1em .5em;
}
.home .post-thumbnail img[class^="attachment"]{
	float: none;
}

La figura che segue mostra la nuova home page del tema.

Riferimenti

In questo capitolo si è fatto riferimento alle seguenti risorse:

• Settings Reading Screen
• Creating a Static Front Page
• Template Hierarchy
• Page Templates
• Option Reference
• The Loop