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.
