Caratteristica molto apprezzata e pratica in un layout web é una homepage che offra la possibilitá di disporre alcuni su colonne.
Al di la del senso estetico individuale, un’area del genere può essere necessaria per meglio presentare le caratteristiche di un prodotto all’interno di una landing page.
Vediamo come aggiungere questa funzionalitá ad un qualsiasi tema di WordPress.
L’operazione di cui parliamo consiste fondamentalmente nell’elaborazione di uno stile e nella personalizzazione di un loop.
Nel nostro caso avremo due loop, generati utilizzando due oggetti WPQuery che punteranno alcuni contenuti creati ad hoc.
L’immagine rispecchia lo scheletro dell’area che otterremo all’interno della pagina: un box orizzontale seguito da tre colonne, dove troveranno posto i nostri articoli categorizzati come teaser (il box orizzontale) e home_col ; sfrutteremo questi stessi nomi per le pseudoclassi nel foglio di stile.
Dunque teaser e colonne saranno ugualmente post, e la differente categorizzazione ci aiuteraá a distinguerli nel loop.
Creati gli articoli ed assegnate le categorie, si può procedere alla produzione del file front-page.php, il quale verrá automaticamente considerato il file della home, come verificabile nella template hierarchy di WordPress.
Questa é la struttura del file front-page.php ricavata modificando il file “post.php” del tema “Twentyfourteen“.
<?php
$custom_query_1 = new WP_Query( ‘category_name=teaser’ ); //il primo oggetto WPQuery
if ( $custom_query_1->have_posts() ) : while ( $custom_query_1->have_posts() ) : $custom_query_1->the_post(); ?>
<div class=”teaser”>
<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<h1><a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”> <?php the_title(); ?></a>
</h1>
<?php the_content(); ?>
</article>
</div>
<?php endwhile; ?>
<?php
wp_reset_query();
wp_reset_postdata();
$custom_query = new WP_Query( ‘category_name=home_col’ );//il secondo oggetto WPQuery (contenuti delle colonne)
if ( $custom_query->have_posts() ) : while ( $custom_query->have_posts() ) : $custom_query->the_post(); ?>
<div class=”home_col”>
<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<h1><a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h1>
<?php the_content( ); ?>
</article>
</div>
<?php endwhile; ?>
<?php endif; ?>
Naturalmente quella esposta é una struttura piuttosto primitiva. Una versione più raffinata potrebbe comprendere un custom field nel quale memorizzare il link di un contenuto in particolare piuttosto che al post in sé, o circoscrivere il tutto in un custom post type per consentire una gestione separata. Sbizzarritevi.
Per ora andiamo avanti con l’esempio base e creiamo le due pseudoclassi per i loop da inserire nel foglio di stile in modo da ottenere l’effetto desiderato.
La nostra scelta per le colonne ricadrá sui box flottanti (ne avevamo parlato), quindi lo stile sará il seguente.
.teaser{
clear: both;
position: relative;
width:100%;
margin-right: 1%;
color:inherit;
padding: 2%;
}
.home_col{
float: right;
position: relative;
width: 27%;
margin-right: 1%;
color:inherit;
border:2px solid #ccc; //un bordo grigio per vedere i contorni provvisori
padding: 2%;
}
Anche lo stile é migliorabile, ma giá in queste condizioni, il tutto dovrebbe svolgere egregiamente il suo lavoro.
Questa la base: restiamo aperti ad ogni miglioria (o ce ne occuperemo più in la). Fateci sapere.
