Salve a tutti
Ebbene si, come avrete sicuramente capito dall’eloquente titolo, sono qui a presentarvi un altro tutorial della serie Mangiare WordPress a Colazione (e non sentirsi affaticato durante il giorno).
Dopo il successo del precedente articolo che mostrava un rapido metodo per dividere gli articoli dell’home page in due colonne, questa volta si esagera e le colonne in questione sono tre. Ma come specificato nel titolo, il numero delle colonne è solo indicativo, perchè con il seguente metodo vi risulterà semplicissimo gestire i loop dei post e modificare tutte le informazioni per creare home page da due, tre, quattro colonne o anche più stili nella stessa pagina. Come fare? Lo vediamo subito.
Partiamo, come al solito, dall’esempio dell’home page di Project EYE.
Analizzando un attimo gli elementi da mostrare possiamo notare che sono molto pochi. Abbiamo una Featured Image, il titolo, le informazioni di pubblicazione, il baloon dei commenti ed il riassunto. Essendo il codice di wordpress usato per visualizzare gli articoli un loop, non dobbiamo fare altro che impostare questo tipo di visualizzazione una volta sola, ed il programma, automaticamente, stamperà a video gli articoli seguenti tutti nella stessa maniera. Vediamo con quante poche righe di codice si può ottenere questo risultato.
Prima di tutto dobbiamo controllare se ci sono degli articoli inseriti, in modo tale da evitare di richiamare una funzione che non stampa nulla ed evitare quindi sprechi di risorse.
<?php if(have_posts()): ?> <?php endif; ?>
Questo codice chiama una funzione di controllo che legge la presenza o meno di articoli. Se la risposta è SI, allora il programma farà vedere tutto quello che decidiamo di scrivere all’interno dei due tag php. A questo punto dobbiamo chiamare il loop necessario per far stampare in sequenza tutti gli articoli che abbiamo scritto.
<?php while ( have_posts() ) : the_post(); ?> <?php endwhile; ?>
Questa funzione potrebbe essere tradotta semplicemente con “fintanto che ho degli articoli, fammi vedere gli articoli”. Facile no? A questo punto non ci resta che usare le funzioni predefinite di wordpress per richiamare tutte le sezioni dell’articolo e quindi useremo:
- the_post_thumbnail() per la featured image;
- the_title() per il titolo
- twentyeleven_posted_on() per la data e la categoria
- the_excerpt() per il riassunto
- comments_popup_link() per visualizzare i commenti
Tutti questi elementi ovviamente vanno richiamati all’interno di tag php <?php ?> altrimenti non funzionerebbero. Se provassimo ora a vedere la nostra pagina probabilmente vedremmo una serie scombinata di informazioni senza ordine e le featured image enormi. Dobbiamo quindi ordinare i contenuti ed assegnargli dimensioni e spaziature.
Per fare questo mi piace usare gli elenchi puntati ul e li ed i div per gestire i vari elementi.
Inoltre, cosa molto importante, dobbiamo tenere sotto controllo le dimensioni della Featured image, e per farlo dobbiamo usare questa semplice funzione.
<?php set_post_thumbnail_size(275,999); ?>
Inserendo questa funzione una sola volta prima del loop while di visualizzazione post, diciamo a wordpress di ridimensionare le featured image a 275px di larghezza. Il valore di altezza è impostato a 999px per lasciare a wordpress il compito di ridimensionarle mantenendo le proporzioni.
Quindi, sistemando il nostro codice ed avvalendoci dell’ausilio di alcune funzioni del tema Twenty Eleven, il nostro codice attualmente dovrebbe essere così.
<?php if ( have_posts() ) : ?>
<?php set_post_thumbnail_size(275,999); ?>
<ul id="article-home">
<?php while ( have_posts() ) : the_post(); ?>
<li>
<article id="post-<?php the_ID(); ?>" <?php post_class( $feature_class ); ?>>
<div>
<span id="feature"><a href="<?=get_permalink($post->ID)?>">
<?php if (has_post_thumbnail()) {the_post_thumbnail();}?></a></span>
<header>
<h1><a href="<?php the_permalink(); ?>"
title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ),
the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
<?php the_title(); ?></a></h1>
<div>
<?php twentyeleven_posted_on(); ?>
<?php if ( comments_open() && ! post_password_required() ) : ?>
<span>
<?php comments_popup_link( '<span>'
. __( 'Reply', 'twentyeleven' ) . '</span>', _x( '1',
'comments number', 'twentyeleven' ), _x( '%', 'comments number',
'twentyeleven' ) ); ?>
</span>
<?php endif; ?>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<?php the_excerpt(); ?>
<?php echo'<a href="'. get_permalink($post->ID) .
'" id="more">' . 'LEGGI TUTTO' . '</a>'; ?>
</div><!-- .entry-content -->
<footer>
<?php edit_post_link( __( 'Edit', 'twentyeleven' ),
'<span>', '</span>' ); ?>
</footer><!-- .entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
A questo punto abbiamo definito i div e gli span con i loro nomi univoci. Non ci resta che creare un foglio di stile personalizzato per gestire font, colori, bordi, ecc. Se, come me, anche voi siete particolarmente pigri, potete usare il mio codice css per queste sezioni
#article-home {
margin:0;
padding:0;
list-style: none outside none;
width: 950px;
}
#article-home li {
float: left;
height: 420px;
padding: 0;
width: 285px;
}
#article-home li.centrale {
padding: 0 47px;
}
#feature img {
border: 5px solid #DBDBDB;
box-shadow: 0 1px 2px #666666;
}
#more {
background: none repeat scroll 0 0 #EEEEEE;
border-radius: 0.3em 0.3em 0.3em 0.3em;
box-shadow: 0 1px 1px #999999;
color: #666;
font-size: 10px;
margin-top: -1em;
padding: 5px 6px;
text-shadow: 0 1px 0 #FFFFFF;
}
#more a {
color: #666;
font-size: 10px;
}
#more a:hover, #more a:active, #more a:focus {
color: #FFF;
text-decoration:none!important;
text-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0;
box-shadow: 0 1px 1px #666;
}
#more:hover, #more:active, #more:focus {
background: none repeat scroll 0 0 #1982D1;
color: #FFF;
text-decoration:none!important;
text-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0;
box-shadow: 0 1px 1px #666;
}
Gli altri stili, come entry-meta o article sono predefiniti di wordpress, quindi dovrete modificare i vostri per adattarli ai vostri gusti.
ATTENZIONE! Piccolo trucco in arrivo. Come avrete notato nel css ho impostato una spaziatura (padding) a zero per tutti i li che contengono gli articoli, ma subito dopo ho impostato una classe centrale ad un li dandogli una spaziatura. In poche parola ho creato lo stile per fare in modo che l’articolo in mezzo abbia una spaziatura orizzontale, mentre gli articoli a destra e sinistra no. Ma come faccio ora a dire a wordpress di applicare tale stile solo agli articoli che si ritrovano nella colonna al centro?
Semplice, utilizzo un contatore, ovvero una variabile che parte da 1 ed ogni volta che un articolo viene visualizzato aumenta. Con questo posso sapere esattamente quale articolo sarà al centro, perchè avrà sempre un numero multiplo di 3. Semplice matematica, parto da i=1, stampa il primo articolo e i=2, stampa il secondo articolo che è al centro ed i=3, stampa il terzo che è a destra ed i=4, stampo il quarto articolo che va a capo e si trova a sinistra ed i=5, stampo il quinto articolo che s ritrova al centro ed i=6. Andando avanti avrò i che sarà sempre multiplo di 3 e quindi non mi resta che usare questo semplice controllo.
<li <?php if ( ($i % 3)==0 ) : echo 'class="centrale"'; endif; ?>>
Dentro al li degll’articolo dico wordpress che, se la la variabile i risulta essere multiplo di 3, assegnami la classe centrale. Tutto qui!
Per dare una bella sistemata e per non confonderci con le varie implementazioni fatte strada facendo, ecco di seguito il codice completo da copiare ed incollare nella vostra pagina index.php
<?php $i=1; if ( have_posts() ) : ?>
<?php set_post_thumbnail_size(275,999); ?>
<ul id="article-home">
<?php while ( have_posts() ) : the_post(); $i++; ?>
<li <?php if ( ($i % 3)==0 ) : echo 'class="centrale"'; endif; ?>>
<article id="post-<?php the_ID(); ?>" <?php post_class( $feature_class ); ?>>
<div class="entry-summary">
<span id="feature"><a href="<?=get_permalink($post->ID)?>">
<?php if (has_post_thumbnail()) {the_post_thumbnail();}?></a></span>
<header class="entry-header">
<h1 class="entry-title"><a href="<?php the_permalink(); ?>"
title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ),
the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
<?php the_title(); ?></a></h1>
<div class="entry-meta">
<?php twentyeleven_posted_on(); ?>
<?php if ( comments_open() && ! post_password_required() ) : ?>
<span class="commento">
<?php comments_popup_link( '<span class="leave-reply">'
. __( 'Reply', 'twentyeleven' ) . '</span>', _x( '1',
'comments number', 'twentyeleven' ), _x( '%', 'comments number',
'twentyeleven' ) ); ?>
</span>
<?php endif; ?>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<?php the_excerpt(); ?>
<?php echo'<a href="'. get_permalink($post->ID) .
'" id="more">' . 'LEGGI TUTTO' . '</a>'; ?>
</div><!-- .entry-content -->
<footer class="entry-meta">
<?php edit_post_link( __( 'Edit', 'twentyeleven' ),
'<span class="edit-link">', '</span>' ); ?>
</footer><!-- .entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
Spero che il tutorial vi sia utile e vi aiuti a comprendere meglio come funzionano i loop e come richiamare le varie parti di un articolo all’interno di essi. Per il resto, di seguito vi riporto l’utile link dalla pagine ufficiali dei Loop della guida di WordPress.
Come sempre, per qualsiasi dubbio o richiesta non esitate a commentare.
Alla prossima!
DOWNLOAD .BLEND
