Come aggiungere un link all’immagine in evidenza di WordPress

Hai trovato il tema WordPress perfetto per il tuo sito web, ma desideri integrare un link in tutte le immagini in evidenza dei tuoi articoli?

In questa breve guida vedremo come aggiungere automaticamente un collegamento all’articolo completo in ogni featured image, con un effetto in dissolvenza al passaggio del mouse.

Buona lettura.

Questa funzionalità è presente nella maggior parte dei temi, se invece il tuo template non prevede questa funzione non preoccuparti, aggiungerla è abbastanza semplice e non richiede conoscenze avanzate di programmazione.

Per fare questo puoi creare un tema child oppure scrivere da zero un nuovo plugin, ti suggerisco di utilizzare il secondo metodo per non ripetere questa procedura ogni volta che attiverai un nuovo tema.

Detto questo, il codice da utilizzare in entrambi i casi è il seguente :

function wip_featured_image( $html, $post_id, $post_image_id ) {

if ( is_single() || is_page() ) :

	return $html;

else :

	return '<div class="wip-featured-image"><a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '"></a>' . $html . '</div>';

endif;

}

add_filter( 'post_thumbnail_html', 'wip_featured_image', 10, 3 );

Per utilizzare questa modifica in un tema, puoi inserire il codice appena visto all’interno del file functions.php.

Se invece desideri creare da zero un plugin, devi aggiungere all’inizio di tutto la dichiarazione dello stesso.

/*
Plugin Name: WIP Featured Image Link
Plugin URI: https://www.themeinprogress.com/
Description: WIP Featured Image Link
Author: ThemeinProgress
Author URI: https://www.themeinprogress.com/
Version: 1.0.0
License: GPL2
*/

Successivamente crea una nuova cartella all’interno del seguente percorso, utilizzando un nome a tua scelta che vada ad identificare il plugin in uso e copia il file creato in precedenza.

/wp-content/plugins/

Se lo desideri, puoi anche aggiungere una dissolvenza al passaggio del mouse.

Per fare questo, è necessario prima integrare il foglio di stile, utilizzando la seguente funzione di WordPress

function wip_featured_image_style() {

wp_enqueue_style( 'wip-featured-image-style', plugins_url('/assets/css/style.css', __FILE__ ) );

}

add_action( 'wp_enqueue_scripts', 'wip_featured_image_style' );

Se hai deciso di creare un tema child, devi indicare il percorso corretto del file css, sostituendo

wp_enqueue_style( 'wip-featured-image-style', plugins_url('/style.css', __FILE__ ) );

con

    
wp_enqueue_style( 'wip-featured-image-style', get_template_directory().'/style.css' );

Una volta aver incluso correttamente il foglio di stile, aggiungi il seguente codice css.

.wip-featured-image {
	position: relative;
    width: 100%;
}

.wip-featured-image a {
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    position: absolute;
    top: 0;
	left:0;
    box-sizing: border-box;
    background-color: #333;
    text-align: center;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
}

.wip-featured-image:focus a, 
.wip-featured-image:hover a {
    opacity: .80;
}

.wip-featured-image img {
	margin:0 auto;
}

Conclusione

In questo breve tutorial abbiamo visto come migliorare l’usabilità del tuo sito in WordPress, con poche righe di codice, senza avere una conoscenza da sviluppatore WordPress.

Puoi anche scaricare il plugin dal seguente pulsante.