WordPress: creare una custom template

Abbiamo installato WordPress, scelto il tema che ci piace di più, siamo veramente soddisfatti e…cominciamo a scrivere i nostri post.

Ma c’è qualcosa che ci manca: vorremmo una pagina per visualizzare automaticamente gli ultimi post sotto al contenuto stesso della pagina.

Creiamo una custom template

In questo tutorial utilizzo il tema Twentytwelve, ha un codice pulito, è flessibile e si presta bene a scopo didattico.

In questo tema le custom templates sono contenute all’interno della cartella “page templates”.

La prima e più veloce cosa da fare è aprire il nostro editor “di fiducia” (io utilizzo Sublime Text 2) e copiare il file “full-width.php” all’interno di un nuovo file che chiameremo “full-width-excerpts” ovvero una pagina a larghezza piena con gli estratti dagli ultimi post pubblicati.

A questo punto dovreste trovarvi con due files identici a parte il nome.

 

Visualizzare la nuova custom template nell’elenco a fianco dell’editor

Abbiamo già creato la nostra custom template ma non è ancora visibile all’interno della lista a fianco dell’editor di WordPress.

Dobbiamo dare il nome alla pagina e per farlo riapriamo “full-width-excerpts” e in cima a tutto il codice sostituiamo “Template Name: Full-width Page Template, No Sidebar” con “Template Name: Full with excerpt” e salviamo il file.

 

Adesso, se ricaricate la vostra pagina vedrete che il menu a discesa è stato popolato con la nostra nuova custom template.

 

 

Modifichiamo il codice della custom template

Abbiamo quasi finito, manca una parte importante:
fare le modifiche necessarie al codice della nostra nuova pagina per visualizzare gli estratti dei post in aggiunta al contenuto inserito nell’editor.

Mano all’editor:

apriamo “full-width-excerpts” e, subito dopo la chiusura del tag

</div><!-- #content -->

 

aggiungiamo una semplice query per ottenere gli excerpts dei nostri post, quindi copiate ed incollate questo codice.

 

<!-- Excerpts custom template Full with excerpt-->
				<?php query_posts( 'posts' );
				 while (have_posts()) : the_post(); ?>
					<div class="panel">
					<h2><?php the_title(); ?></h2>

					<?php echo get_post_meta(get_the_ID(),'meta_name_view_count',true); ?>

					<div class="excerpt"><?php the_excerpt(); ?></div>
					<a class="readmore" href="<?php the_permalink(); ?>">Continue Reading</a>
					</div>
				<?php endwhile; wp_reset_query(); ?>

		<!-- Fine Excerpts custom template Full with excerpt-->

 

 

Salvate il file e tornate alla vostra installazione di WordPress.

Create, adesso, una semplice pagina utilizzando la nuova custom template dal menu a discesa, salvate con il nome che preferite e visualizzate la pagina nel browser:

 

 

 

con pochi, semplici passi abbiamo realizzato una template per visualizzare gli ultimi post sotto il contenuto della pagina.

Non male ma, come al solito, dobbiamo fare un po’ di make-up 🙂

 

Aggiungiamo lo stile al CSS

 

Nel foglio di stile del tema o, preferibilmente, del child theme (normalmente style.css) aggiungiamo queste poche righe:

 

div.panel {
width: 30%;
float: left;
margin-right: 30px;
}

.panel .excerpt {
	line-height: 1.8em;
}

.panel h2 {
margin: 20px 0 20px;
}

.site-content {
	width: 100%;
}

 

Salviamo tutto e visualizziamo nuovamente la nostra pagina realizzata con una nuova custom template:

 

 

 

Non è uno stile da Oscar ma abbiamo reso presentabile la nostra pagina.

E voi, come avete realizzato la vostra custom template?