in featured, tutorial, wordpress

WordPress: Alterare il layout durante un loop

Lo so. Il titolo è un po’ criptico ma provo a descrivervi lo scenario:

Installazione di WordPress. Siamo in homepage. Durante il listing dei contenuti devo gestire, a seconda del tipo e della posizione, il modo con cui i posts vengono visualizzati (es. immagini, allineamento, tassonomie ).

Mi spiego meglio. Ho registrato due nuovi tipi (ex. video e libri) ai quali ho associato delle tassonomie personalizzate (es. i video hanno i registi mentre i libri gli autori).

Nel mio loop voglio visualizzare film e libri con uno stile che indichi chiarmanete di che tipo è questo contenuto ed inoltre voglio aggiungere le informazioni reletive alla tassonomie proprietarie.

La cosa si complica ancora perchè i primi n contenuti (nel nostro caso 3) sono considerati “featured” e vanno visualizzati con thumbnail ed excerpt mentre gli altri sono con il titolo.

Partiamo dall’inizio ed iniziamo ad aggiungere i “custom type” in home:
(io questo snippet l’ho aggiunto in functions.php ed è importante farlo in quanto di default vengono visualizzati solo i tipo “post”)

add_filter( 'pre_get_posts', 'get_home_posts' );

function get_home_posts( $query ) {

if ( is_home() && !$query->query_vars['suppress_filters'] ){
$query->set( 'post_type', array( 'post', 'video', 'libri' ) );
}

return $query;
}

Ora vediamo il codice del loop nel quale ho usato get_template_part per la gestione in base al tipo.

if (have_posts()) : while (have_posts()) : the_post();

$post_index ++;

// controllo se l'articolo è tra i primi 3 e dichiaro una classe "featured"
$post_class_position = "";
if ( $post_index < 3 ) $post_class_position = "featured"; get_template_part( 'post-layout', get_post_type( $post ) ); endwhile; endif;

In questo modo a seconda del "post type" viene cercato e poi incluso un file con questo nome "post-layout-tipo.php".
Mi sono quindi creato tre file (post-layout-libri.php, post-layout-video.php, post-layout.php) nei quali sono andato a preparare del markup specifico.

Prendiamo adesso come esempio quello dei libri: (post-layout-libri.php)

>


< ?php the_title(); ?>

< ?php //funzione custom per le gestione della thumbnails if ( $post_class_position == "featured") { $args = array("class" => "alignleft", "link" => get_the_permalink() );
the_thumb( $args );
}
?>

< ?php if (is_single() ) { the_content(); // visualizzazione su pagina di dettaglio (single.php) } else if ( $post_class_position == "featured") { the_excerpt(); // visualizzo il riassunto solo se è presente la classe "featured" } ?>

La funzione principale che mi permette di gestire il layout a livello di css è post_class che aggiunge “dinamicamente” due classi le quali definiscono il “post type” e visualizzazione dei “featured”

Per la visualizzazione delle tassonomie personalizzate mi affido ad un semplice the_terms alla quale indico l’ID del post ed il nome della tassonomia.

Arrivati qui basta lavorare un po’ con i fogli di stile per avere il pieno controllo di cosa e come visualizzare i nostri contenuti.

Il codice scritto è ovviamente perfettibile e la prima cosa da fare sarebbe quella di ridurre la ridondanza di codice e fare cache dei contentuti.

Se qualcosa non fosse chiaro…. chiedete.

Nota: Al momento in questo codice non viene gestita la paginazione. Forse, magari, può darsi che sia argomento di un futuro post.

Scrivi un commento

Commento

  1. Avevi ragione che il titolo era un po critico ma sicuramente è una grande funzionalitàdi WP 3 quella dei custom post.

    Mi sto documentando su questa nuova funzionalità ma non avevo mai visto un applicazione e questa sicurametne lo è.

    Il post è scritto molto chiaro e comprensibile.