Inserire box autore WordPress alla fine dei post

By  /  Seguimi su:            

Come aggiungere il Box Autore su WordPress alla fine di ogni articolo.

Stai cercando di capire come inserire un box autore su WordPress, magari alla fine dei post? Aggiungerlo è importante perché riuscirà a dare una impronta più personale al tuo blog, permetterà ai tuoi lettori di conoscerti meglio e se inserirai i link ai tuoi profili social, potrà consentire loro di contattarti con facilità.

Sul sito ufficiale di WordPress sono a tua disposizione moltissimi plugin per autori gratuiti, che ti permetteranno in pochi minuti di inserire biografia e contatti tuoi e dei tuoi collaboratori. Aggiungere un box autore su WordPress alla fine di ogni articolo è utile soprattutto nel caso di un blog con molti autori e quindi multi-utenza.

Essere riconoscibili nel web, infatti è un elemento molto importante per chi vuole emergere dalla massa e lo è ancora di più per chi gestisce un blog o un sito web.

Nasce così l’esigenza (se non è nata, falla nascere subito! ) di creare una sorta di brand/indicatore di qualità da associare al frutto del duro lavoro che fai per creare i post. Come fare? Semplice, basta associare il box dell’autore (comprensivo possibilmente di immagine, nome e cognome e info biografiche) ad ogni post che è stato pubblicato.

Ma quali sono i metodi per inserire un box autore in ogni post di WordPress? Bene sei nel posto giusto perchè in questa guida ti illustrerò come mettere il box dell’autore in ogni post di WordPress con e senza plugin modificando il file del tema WordPress.

Ti consiglio prima di iniziare con la procedura indicata in questa articolo o in generale con la modifica dei temi WordPress, di leggere anche questa guida: come creare un tema child WordPress.

Ecco una lista dei migliori plugin per box autore su WordPress

Come inserire il box autore su WordPress tramite Authors box plugin

Ti propongo qui di seguito alcuni tra i più popolari plugin per inserire un box autore sul tuo sito WordPress, che considero strumenti davvero validi, flessibili e facili da utilizzare. Vediamoli insieme.

Fancier Author Box by ThematoSoup

Fancier Author Box è il plugin gratuito per inserire il box autore su WordPress  che si inserisce tra quelli più scaricati dagli utenti. Utilizzando questo plugin potrai inserire per ciascuno dei tuoi autori una breve biografia, i link ai loro profili social (Twitter, Facebook, Google+, ecc.), dettagli sul ruolo svolto e link a siti web.
Inoltre, potrai inserire i link agli ultimi articoli pubblicati da ciascun autore e sarai in grado di personalizzare il colore degli elementi grafici del box.

Starbox – the Author Box for Humans

Starbox ti permette di generare box autore su WordPress piacevolissimi sotto l’aspetto grafico. Offre una vasta gamma di impostazioni personalizzabili per singoli autori. È possibile impostare i temi e colori diversi per i diversi autori . Inoltre è anche possibile scegliere di non visualizzare certe info per autori particolari. Qui sotto l’immagine di anteprima del box autore creato con Starbox plugin.

WP About Author

WP About Author è un altro plugin per inserire box autore su WordPress molto popolare e che ho utilizzato frequentemente.
Offre opzioni di personalizzazione similari a Fancier Author Box e permette di inserire il box autore sulla homepage, sulle pagina archivio, sulle pagine che mostrano i risultati delle ricerche degli utenti, su post e pagine statiche.
Hai la possibilità di scegliere tra tre diversi stili di bordo, cambiare il colore di sfondo della sezione autore, mostrare icone o link che colleghino direttamente ai profili social degli autori. Inoltre, puoi modificare la dimensione e la forma del tuo avatar con pochi click.

Simple Author Box (consigliato)

Simple Autore Box è responsive (compatibile con dispositivi mobili) e supporta fino a 30 diversi profili di social media, può essere impostato per avere un effetto di rotazione al passaggio del mouse su sull’immagine dell’autore . Con questo plugin è semplice inserire un box Autore su WordPress,  con gravatar e breve biografia .

Inoltre è completamente personalizzabile ( compreso il colore, le dimensioni, caratteri e stili) in modo da poter abbinare rapidamente e facilmente i box autore con il tema del tuo sito WordPress.

Come aggiungere il box autore su WordPress manualmente tramite codice php e senza usare plugin

Ecco la guida WordPress per creare un box autore alla fine di ogni post senza usare plugin specifici solo tramite codice php.

In alternativa all’installazione dei plugin, puoi modificare il codice php del file function del tema in uso per inserire il box autore e personalizzare lo stile di visualizzazione del box aggiungendo del codice CSS al file style.css.

Prima però di procedere con la modifica dei predetti file inerenti al tema in uso su WordPress, bisogna innanzitutto:

  • aggiungere la libreria delle icone FontAwesome ossia il set completo di 675 icone di Font Awesome 4.7.0
  • ampliare e personalizzare i campi di inserimento del profilo utente, aggiungendo i seguenti input all’interno del profilo utente
  • infine, inserire il codice php per poter visualizzare alla fine degli articoli il tuo box autore.

Come aggiungere manualmente le icone fontAswome 4.7.0 in WordPress da visualizzare nel box autore

Se desideri aggiungere le icone dei profili social nel box autore di WordPress hai bisogno di caricare la libreria FontAwesome nel tuo tema WordPress.

Per aggiungere manualmente le icone FontAwesome 4.7.0, da visualizzare nei menu o box autore di WordPress o in qualsiasi punto degli articoli o pagine web, devi prima caricare la libreria delle icone tramite modifica al file function.php oppure modificando il file header.php del tema child.

Per leggere in modo automatico la libreria delle icone social che puntano ai relativi profili, in questo caso all’interno del box autore, devi modificare il tuo file function.php aggiungendo questa porzione di codice:

// Aggiungere libreria icone FontAwesome 4.7.0

add_action( ‘wp_enqueue_scripts’, ‘enqueue_load_fa’ );
function enqueue_load_fa() {
wp_enqueue_style( ‘load-fa’, ‘https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’ );
}

Oppure puoi modificare il tuo file header.php inserendo trai tag <head> e </head> il seguente link:

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

 

Da questo momento il tuo tema sarà in grado di leggere le icone FontAswome senza l’uso di plugin specifici.

Come personalizzare i campi del profilo utente di WordPress per visualizzare i profili sociali nel box autore

WordPress di default espone come informazioni di contatto sul profilo utente solo email e URL del sito web. Omette invece tutte le altre informazioni inerenti ai profili sociali degli utenti.

Se desideri avere dei profili utenti WordPress completi contenenti tutte le informazioni di contatto anche quelle dei profili sociali da visualizzare nei relativi box autori allora ti basta inserire questo codice php nel file function.php del tema in uso:

/* Aggiungi metodi Contatto e profili sociali nella scheda utente di WordPress */

function add_user_contact_methods( $user_contact ) {
$user_contact[‘facebook’] = __( ‘Facebook URL’ );
$user_contact[‘skype’] = __( ‘Skype Username’ );
$user_contact[‘telegram’] = __( ‘Telegram Username’ );
$user_contact[‘whatsapp’] = __( ‘WhatsApp Username’ );
$user_contact[‘twitter’] = __( ‘Twitter Handle’ );
$user_contact[‘youtube’] = __( ‘Youtube Channel’ );
$user_contact[‘linkedin’] = __( ‘LinkedIn’ );
$user_contact[‘googleplus’] = __( ‘Google +’ );
$user_contact[‘pinterest’] = __( ‘Pinterest’ );
$user_contact[‘instagram’] = __( ‘Instagram’ );
$user_contact[‘github’] = __( ‘Github profile’ );
return $user_contact;
}
add_filter( ‘user_contactmethods’, ‘add_user_contact_methods’ );

Come visualizzare il box autore alla fine degli articoli di un blog WordPress

Ora sei pronto per inserire il codice php nel file function.php che serve ad aggiungere il box autore alla fine degli articoli di WordPress con i relativi profili social e biografia.

function wpb_author_info_box( $content ) {

global $post;

// Detect if it is a single post with a post author
if ( is_single() && isset( $post->post_author ) ) {

// Get author’s display name
$display_name = get_the_author_meta( ‘display_name’, $post->post_author );

// If display name is not available then use nickname as display name
if ( empty( $display_name ) )
$display_name = get_the_author_meta( ‘nickname’, $post->post_author );

// Get author’s biographical information or description
$user_description = get_the_author_meta( ‘user_description’, $post->post_author );

// Get author’s biographical information or description
$user_description = get_the_author_meta( ‘user_description’, $post->post_author );

// Get author’s website URL
$user_website = get_the_author_meta(‘url’, $post->post_author);

// Get author’s Facebook
$user_facebook = get_the_author_meta(‘facebook’, $post->post_author);

// Get author’s Skype
$user_skype = get_the_author_meta(‘skype’, $post->post_author);

// Get author’s Twitter
$user_twitter = get_the_author_meta(‘twitter’, $post->post_author);

// Get author’s LinkedIn
$user_linkedin = get_the_author_meta(‘linkedin’, $post->post_author);

// Get author’s Youtube
$user_youtube = get_the_author_meta(‘youtube’, $post->post_author);

// Get author’s Google+
$user_googleplus = get_the_author_meta(‘googleplus’, $post->post_author);

// Get author’s Pinterest
$user_pinterest = get_the_author_meta(‘pinterest’, $post->post_author);

// Get author’s Instagram
$user_instagram = get_the_author_meta(‘instagram’, $post->post_author);
// Get author’s Github
$user_github = get_the_author_meta(‘github’, $post->post_author);

// Get link to the author archive page
$user_posts = get_author_posts_url( get_the_author_meta( ‘ID’ , $post->post_author));

if ( ! empty( $display_name ) )

$author_details = ‘<p class=”author_name”>About ‘ . $display_name . ‘</p>’;

if ( ! empty( $user_description ) )
// Author avatar and bio

$author_details .= ‘<p class=”author_details”>’ . get_avatar( get_the_author_meta(‘user_email’) , 90 ) . nl2br( $user_description ). ‘</p>’;

$author_details .= ‘<p class=”author_links”><a href=”‘. $user_posts .'”>Tutti i post di ‘ . $display_name . ‘</a>’;

// Check if author has a website in their profile
if ( ! empty( $user_website ) ) {

// Display author website link
$author_details .= ‘ | <a href=”‘ . $user_website .'” target=”_blank” rel=”nofollow”>Website</a></p>’;

} else {
// if there is no author website then just close the paragraph
$author_details .= ‘</p>’;
}

// Display author Email link
$author_details .= ‘ <a href=”mailto:’ . $user_email .'” target=”_blank” rel=”nofollow” title=”E-mail” class=”tooltip”><i class=”fa fa-envelope-o fa-lg” aria-hidden=”true”></i> </a></p>’;

// Check if author has Facebook in their profile
if ( ! empty( $user_facebook ) ) {
// Display author Facebook link
$author_details .= ‘ <a href=”‘ . $user_facebook .'” target=”_blank” rel=”nofollow” title=”Facebook” class=”tooltip”><i class=”fa fa-facebook fa-lg” aria-hidden=”true”></i> </a></p>’;
} else {
// if there is no author Facebook link then just close the paragraph
$author_details .= ‘</p>’;
}

// Check if author has Skype in their profile
if ( ! empty( $user_skype ) ) {
// Display author Skype link
$author_details .= ‘ <a href=”‘ . $user_skype .'” target=”_blank” rel=”nofollow” title=”Username paaljoachim Skype” class=”tooltip”><i class=”fa fa-skype fa-lg” aria-hidden=”true”></i> </a></p>’;
} else {
// if there is no author Skype link then just close the paragraph
$author_details .= ‘</p>’;
}

// Check if author has Twitter in their profile
if ( ! empty( $user_twitter ) ) {
// Display author Twitter link
$author_details .= ‘ <a href=”‘ . $user_twitter .'” target=”_blank” rel=”nofollow” title=”Twitter” class=”tooltip”><i class=”fa fa-twitter fa-lg” aria-hidden=”true”></i> </a></p>’;
} else {
// if there is no author Twitter link then just close the paragraph
$author_details .= ‘</p>’;
}

// Check if author has LinkedIn in their profile
if ( ! empty( $user_linkedin ) ) {
// Display author LinkedIn link
$author_details .= ‘ <a href=”‘ . $user_linkedin .'” target=”_blank” rel=”nofollow” title=”LinkedIn” class=”tooltip”><i class=”fa fa-linkedin fa-lg” aria-hidden=”true”>></i> </a></p>’;
} else {
// if there is no author LinkedIn link then just close the paragraph
$author_details .= ‘</p>’;
}

// Check if author has Youtube in their profile
if ( ! empty( $user_youtube ) ) {
// Display author Youtube link
$author_details .= ‘ <a href=”‘ . $user_youtube .'” target=”_blank” rel=”nofollow” title=”Youtube” class=”tooltip”><i class=”fa fa-youtube fa-lg” aria-hidden=”true”></i> </a></p>’;
} else {
// if there is no author Youtube link then just close the paragraph
$author_details .= ‘</p>’;
}

// Check if author has Google+ in their profile
if ( ! empty( $user_googleplus ) ) {
// Display author Google + link
$author_details .= ‘ <a href=”‘ . $user_googleplus .'” target=”_blank” rel=”nofollow” title=”Google+” class=”tooltip”><i class=”fa fa-google-plus fal-lg” aria-hidden=”true”></i> </a></p>’;
} else {
// if there is no author Google+ link then just close the paragraph
$author_details .= ‘</p>’;
}

// Check if author has Pinterest in their profile
if ( ! empty( $user_pinterest ) ) {
// Display author Pinterest link
$author_details .= ‘ <a href=”‘ . $user_pinterest .'” target=”_blank” rel=”nofollow” title=”Pinterest” class=”tooltip”><i class=”fa fa-pinterest-p fa-lg” aria-hidden=”true”></i> </a></p>’;
} else {
// if there is no author Pinterest link then just close the paragraph
$author_details .= ‘</p>’;
}

// Check if author has Github in their profile
if ( ! empty( $user_github ) ) {
// Display author Github link
$author_details .= ‘ <a href=”‘ . $user_github .'” target=”_blank” rel=”nofollow” title=”Github” class=”tooltip”><i class=”fa fa-github fa-lg” aria-hidden=”true”></i> </a></p>’;
} else {
// if there is no author Github link then just close the paragraph
$author_details .= ‘</p>’;
}

// Pass all this info to post content
$content = $content . ‘<footer class=”author_bio_section” >’ . $author_details . ‘</footer>’;
}
return $content;
}

// Add our function to the post content filter
add_action( ‘the_content’, ‘wpb_author_info_box’ );

// Allow HTML in author bio section
remove_filter(‘pre_user_description’, ‘wp_filter_kses’);

Infine aggiungi il codice css per la personalizzazione dello stile di visualizzazione del box autore:

.author_bio_section {
background: none repeat scroll 0 0 #fcfcfc;
padding: 15px;
border: 3px solid #f2f2f2;
box-shadow: 0 4px 20px 0 #B4BECC;
border-radius: 8px;
font-size: 15px;
padding-bottom: 0;
clear: left;
position: relative;
vertical-align: middle;
}

.author_name {
font-size: 1px;
font-weight: bold;
}
.author_details img {
border: 3px solid #D8D8D8;
border-radius: 50%;
float: left;
margin: 0 10px 10px 0;
vertical-align: baseline;
clear: left;
}

Conclusione su: come creare un box autore sui singoli articoli di un blog WordPress

Con questo articolo ti ho presentato i 4 migliori plugin gratuiti per inserire un box autore su WordPress. Ciascuno di questi plugin può permetterti di rendere il tuo sito ancora più professionale, fornendo informazioni utili su ogni autore che contribuisce alla tua piattaforma WordPress scrivendo articoli per il blog.

Ti ho pure dato istruzioni su come inserire il box autore sul tuo blog senza usare plugin semplicemente modificando il file function.php del tuo tema child. Questo metodo è molto utile per chi ha la necessità di sopperire alla mancanza del box autore nei temi gratuiti di WordPress presente nel repository ufficiale ma a volte anche in alcuni temi premium!

Utilizzi già uno di questi strumenti sul tuo sito? Altrimenti, quale risorsa utilizzi?

Ti invito a condividere la tua esperienza lasciando un commento nel box in fondo. E come sempre a condividere sui social questa guida su come inserire il box autore su WordPress se ti è piaciuta o ti è stata di aiuto!

Condividi sui social

Sostieni anche tu Creare Blog e Siti Web Wordpress con una piccola donazione con PayPal!

Donazioni sicure con PayPal
come creare un blog Wordpress

Ideatore e fondatore di Creare Blog e Siti Wordpress. Consulente Wordpress per aziende e professionisti che desiderano promuovere i loro servizi o prodotti sul web attraverso un blog, sito web o ecommerce.

Estensioni per Woocommerce

Prendi subito le estensioni premium che ti servono ad ampliare le funzionalità del tuo ecommerce con Woocommerce usufruendo dello sconto del 30% solo per oggi!

WooCommerce

Page Builder Wordpress

Se stai impazzendo per capire come creare pagine web avanzate dall'aspetto grafico accattivante e coinvolgente è perchè non usi uno di questi strumenti!

Rispondi con un commento

  Segui i nuovi commenti  
Notificami
WooCommerce