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?