Modificare l’aspetto di ogni singolo post WordPress con i CSS

Esistono due funzioni in WordPress che compiono in maniera elegante e raffinata una piccola magia che ti permetterà di personalizzare ogni singolo post o aspetto di WordPress con un minimo sforzo dal lato PHP per lasciare tutto il divertimento ai CSS.

Queste due funzioni si chiamano post_class() e body_class(), sono state introdotte in WordPress rispettivamente dalla versione 2.7 e 2.8, di seguito vedrai in dettaglio cosa possono fare queste due funzioni se aggiunte ad un tema.

Post Class

La funzione post_class() deve essere aggiunta all’interno di un loop e di un elemento HTML che identifica e racchiude gli elementi HTML del post stesso,quindi è perfetto da usare nei classici file index.php o single.php, ecco un ipotetico esempio:

<div id="posts"> // Div generale che contiene tutti i post
 
  <?php if ( have_posts( ) )  : while ( have_posts() ) : the_post(); ?> // Inizio loop
 
     <div <?php post_class(); ?> > // Inserimento della funzione post_class
 
        <h1 class="post-title">
          <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a>
        </h1> 
 
        <div class="excerpt"> <?php the_excerpt(); ?> </div>
 
     </div> // Fine div con post_class 
 
  <?php endwhile; else: ?> 
  <?php endif; ?> // Fine loop
 
</div> // Fine div con id posts

La funzione post_class() creerà una serie di classi nell’oputput HTML che ti permetteranno di personalizzare con i CSS l’aspetto del post, prova a salvare e visualizzare l’HTML per vedere il risultato, qui sotto un esempio del risultato usando Firebug:

Nel mio caso le classi che sono state aggiunte sono:

Utilizzando quindi una o più di queste classi nel tuo file CSS puoi praticamente modificare il tuo post come preferisci, per esempio se volessi modificare solamente l’aspetto del post n°8207 potrei creare una regola CSS del genere nel foglio di stile:

.post-8207 { background: red; width:100%; etc... }

Inoltre, potresti andare ancora più a fondo, specificando altri selettori CSS contenuti dentro il div in cui è inserita la funzione post_class(), per esempio:

.post-8207 .excertp { ...proprietà CSS per formattare l'estratto del post n°8207... }

Circa la setssa cosa viene fatta dalla classe body_class()

<body <?php body_class(); ?> >
...
</body>

citata all’inizio, con la differenza che, grazie a questa funzione, vengono aggiungere diverse classi partendo da un livello più alto del tema WordPress, il tag body appunto, e quindi sarà facile modifcare l’intero assetto della pagina web.

Info sull' autore:
Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di

Ancora nessuna risposta per Modificare l’aspetto di ogni singolo post WordPress con i CSS

Lascia un commento

Trackbacks