Aggiungere un “box autore” alla fine di ogni articolo

Come realizzare in maniera semplice un box con le informazioni relative all'autore su WordPress ed aggiungerlo sotto ad ogni articolo.

Scritto il 19 novembre 2012 in Guide WordPress

Vuoi promuovere la tua immagine personale ed il tuo lavoro online? Un buon inizio potrebbe essere inserire il tuo nome sotto agli articoli che pubblichi. Inoltre potresti aggiungere una foto o un’immagine rappresentativa, una breve descrizione e magari anche dei contatti.

Ecco uno screenshot di esempio, preso da giapox.it, uno dei blog di cui sono l’autore.

Aggiungere un box autore ai tuoi articoli è una modifica abbastanza semplice su qualsiasi blog WordPress. Di seguito, ti mostrerò come farlo in meno di 10 minuti.

<div id="authorbox">
    <?php if (function_exists('get_avatar')) {
             echo get_avatar( get_the_author_email(), '80' );
             }?>
    <div class="authortext">
       <h4>About <?php the_author_posts_link(); ?></h4>
       <p><?php the_author_description(); ?></p>
    </div>
</div>

Tutto quello che viene visualizzato nel box autore viene caricato automaticamente da fonti esterne. Questo rende l’aggiornamento e la manutenzione sorprendentemente semplice e veloce. Il blocco di codice riportato qui sopra carica un Gravatar tramite l’indirizzo e-mail dell’autore, il nome con un link agli altri articoli che l’autore ha pubblicato, e la descrizione caricata dal profilo dell’utente all’interno del pannello di controllo di WordPress.

Una volta realizzato il codice, non resta che implementare il foglio di stile che permette di posizionare bene gli elementi nella pagina e di formattare il testo a proprio piacimento.

Di seguito un esempio di CSS per il nostro box autore.

Il foglio di stile presentato di seguito controlla l’allineamento, il colore di sfondo, la larghezza del box e la formattazione del testo. Modificare la larghezza del box e le combinazioni di colori a seconda delle tue esigenze. Se modifichi la larghezza, ricordati di dare un margine sufficiente al testo per impedire che si sovrapponga con il Gravatar.

#authorbox {
  background: #EFEFEF;
  border: 1px solid #CECFD0;
  width: 638px;
  margin: 0 auto;
  margin-bottom: 10px;
  overflow: hidden;
}
#authorbox h4 {
  font-size: 16px;
  color: #191919;
  margin: 0;
  padding: 10px 10px 5px 10px;
}
.authortext {
  padding-left: 100px;
}
#authorbox img {
  margin: 0;
  padding: 10px;
  float: left;
}
#authorbox p {
  color: #191919;
  margin: 0;
  padding: 0px 10px 10px 10px;
}
#authorbox h4 &gt; a {
  text-decoration: none;
}
#authorbox p {
  color: #191919;
}

Da tenere presente che il div con classe “authortext” serve ad evitare che il testo si sovrapponga all’icona Gravatar.

Se vuoi includere informazioni aggiuntive sull’autore, puoi utilizzare il Codex WordPress come riferimento per le variabili necessarie.

Condividi Questo Articolo
Google+
Autore:   

Etichette: