WordPress: Alterare il layout durante un loop

Scritto il 22 ottobre 2010 da Maurizio Pelizzone

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”)

1
2
3
4
5
6
7
8
9
10
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.

1
2
3
4
5
6
7
8
9
10
11
  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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div id="post-<?php the_ID(); ?>" <?php post_class( "tipo_libro " . $post_class_position ); ?> >

  <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute( )  ?>" rel="bookmark">
  <?php the_title(); ?></a>
  </h2>

  <div class="entry-meta">
    <?php
    custom_posted_on(); // meta information (post—date/time and author)
    ?>
  </div><!-- .entry-meta -->

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

  <div class="entry-content">
    <?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"
     }
    ?>
  </div>

  <div class="entry-info">
    <?php
      the_terms( $post->ID, 'autore', "Autore: " ); //tassonomia personalizzata
      custom_posted_in();  //meta information (category, tags and permalink)
      ?>
  </div><!-- .entry-info -->

</div>

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.

Questo articolo è stato pubblicato il 22 ottobre 2010 alle 1:46 pm ed è stato letto
Archiviato sotto featured, tutorial, wordpress.
Se questo post ti è piaciuto puoi iscriverti al mio Feed Rss e ricevere direttamente gli aggiornamenti di questo blog sul tuo FeedReader oppure puoi decidere di offrirmi un caffè.
Se ti va puoi lasciare un commento e leggere quelli degli altri, ma se preferisci puoi passare direttamente al .


Un Commento per “WordPress: Alterare il layout durante un loop”

  1. Luca
    8 novembre 2010

    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.

Lascia un messaggio