Tutorial: creare un author box in wordpress

Lo avrete sicuramente visto in moltissimi blog: alla fine di un post compare un box con le informazioni salienti dell’autore assieme ad un (gr)avatar, il link al suo sito web etc etc.
Vogliamo creare un box dello stesso tipo in pochissimi passi, utilizzando le funzionalita’ di WordPress e qualche linea di codice?
Ottimo! Mettiamoci al lavoro.
Ma prima vorrei ricordare l’autore del post originale: Chris Spooner, che lo ha pubblicato su Line25 (fatevi un giro li’ sopra e ricordate che un commento non costa niente e serve a gratificare l’autore del post =)

overview

Il primo passo da fare e’ quello di compilare i campi richiesti nella sezione User di WordPress, un campo che spesso viene tralasciato o ridotto al minimo.
Come vedete nella figura qui sotto ho compilato il mio campo “Biographical Info” con quello che piu’ mi rappresenta (soprattutto riguardo ai crostini toscani!). Ho scelto la lingua inglese perche’ il blog e’ stato concepito per essere in lingua straniera, forse prima o poi mi decidero’ a inserire il testo italiano.
Se il vostro blog e’ in due o piu’ lingue vi suggerisco di non scrivere quattro o cinque frasi per lingua, risulterebbe un pastrocchietto.. riducete a due righe per lingua, ne guadagnerete in pulizia.

WP Campo Bio

Completate tutti i campi che vi sembrano pertinenti e ricordate di specificare quale nome desiderate sia mostrato pubblicamente (admin o user1 non fanno una bella figura).
Se non avete ancora un gravatar e’ meglio provvedere, e’ facile, gratuito e ogni account puo’ accogliere diversi indirizzi email, cosi’ non correte di dover cambiare avatar ogni volta che cambiate indirizzo email.

gravatar

Adesso che abbiamo sbrigato i preliminari e’ oppurtuno munirsi di un editor HTML – io sono della vecchia scuola, evito tutte quelle cose automatiche e vado da “riga di comando”, uso Notepad++ – e andiamo ad editare la pagina single.php, ovvero la pagina che riguarda la formattazione per i singoli post.
Fate un backup per sicurezza.

Vediamo il codice di cui abbiamo bisogno:

<div id="author-info">
    <div id="author-image">
    	<a href="**Author Website**">**Author Gravatar**</a>
    </div>
    <div id="author-bio">
        <h4>Scritto da <a href="**Author Website**">**Author Name**</a></h4>
        <p>**Author Description**</p>
    </div>
</div>

In queste poche righe e’ compreso tutto quello che serve per una corretta visualizzazione, indentata in modo eccellente in modo da permettere una comprensione maggiore.
Questo e’ il concetto di HTML di base, ma non e’ sufficiente per la corretta visualizzazione, quindi proseguiamo con l’integrazione del codice PHP aggiungendo delle funzionalita’ dinamiche:

  • the_author_meta()” e’ una funzionalita’ che puo’ essere utilizzata per quasi qualsiasi cosa: dagli URI alle informazioni testuali
  • get_avatar()” fa quello che il nome promette: si occupa di prendere l’avatar (o il gravatar, in questo caso) dell’autore
  • get_the_author_meta(’user_email’)” si occupa invece di estrapolare l’email specificata nel pannello di controllo
  • the_author_link()“, anche questo e’ esplicativo: il nome dell’autore verra’ collegato all’indirizzo internet specificato

Mettiamo tutto assieme, integrando con il codice HTML visto prima:

<div id="author-info">
    <div id="author-image">
    	<a href="<?php the_author_meta('user_url'); ?>">
         <?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?>
        </a>
    </div>
    <div id="author-bio">
        <h4>Scritto da <?php the_author_link(); ?></h4>
        <p><?php the_author_meta('description'); ?></p>
    </div>
</div>

A questo punto possiamo personalizzare ancora di piu’ il nostro box inserendo qualche informazione aggiuntiva; possiamo aggiungere l’account AIM (o Yahoo! IM o Jabber/GTalk) e i tutti i post scritti (o il conteggio dei post. con la stringa: < ?php the_author_posts(); ? > ).Ma invece di creare altre due righe di testo, come fosse un elenco della spesa, possiamo integrare il tutto nel testo:

<div id="author-info">
    <div id="author-image">
    	<a href="<?php the_author_meta('user_url'); ?>">
         <?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?>
        </a>
    </div>
    <div id="author-bio">
        <h4>Scritto da <?php the_author_link(); ?></h4>
        <p><?php the_author_meta('description'); ?><br />
           Potete contattarmi attraverso il mio account AIM <?php the_author_meta('aim'); ?> e
           leggere tutti i miei post piu' recenti <?php the_author_posts_link(); ?>.</p>
    </div>
</div>

Finito? Quasi.
Ci manca un po’ di stile, quindi apriamo il nostro file .css e prendiamo spunto da questo codice:

#main div#author-info {
	background: #eaeaec; padding: 10px; margin: 0 0 15px 0;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	overflow: auto;
}

#main div#author-info div#author-image {
		float: left; margin: 0 10px 5px 0; border: 5px solid #DCDCE1;
	}

Questi sono i colori definiti da Chris, non vi sara’ difficile adattare il codice al vostro stile.
E questa volta abbiamo davvero finito =)

full-stack graphic designer | social media manager | blogger, autrice e saggista | appassionata di Giappone, poker e pianoforte | mai senza occhiali da sole | attaccabrighe per natura