Ajouter un lien aux icon-box de WP-Bakery

Comment rajouter un lien à l’image des icons-box ?

WP Bakery Page Builder est présent sur une multitude de thèmes premium. Un des gros désavantages des blocs, c’est qu’on ne peut que difficilement passer outre les paramètres par défaut, à gérer depuis l’interface d’édition. Dans le cas des icon-box par exemple, on n’a pas la possibilité de rendre les images cliquables. A l’insertion d’un lien via le champs prévu à cet effet, celui-ci se colle automatiquement sur les titres, alors que dans la plupart des cas, l’utilisateur cherche plutôt le lien sur l’image. S’il voit que l’image n’est pas cliquable au survol de la souris, il ne va pas forcément descendre jusqu’au titre.

Ajouter une classe à son icon-box

L’astuce consiste à ajouter une classe dans le bloc d’édition de l’icon box,  dans le champs class (voir ci-dessous).

Ajouter un cursor à l’image en css

On donne un nom de classe au hasard : .icon-box-img.

Dans notre fichier css, on va ajouter la propriété cursor:pointer, pour qu’au survol de la souris, l’utilisateur voie qu’il y a quelque chose à cliquer sur l’image. La classe attribuée ici vaut pour le bloc entier. On peut préciser davantage en ne ciblant que l’image. Par défaut, en insérant un lien via ce bloc d’édition, le curseur se fait juste sur le titre.

.icon-box-img {
cursor: pointer;
}
ou 
.icon-box-img>img{
cursor:pointer
}

Créer une action au clic sur l’image en js

Ensuite, dans un fichier js à part, on crée une fonction de clic sur l’image et on lui demande d’aller chercher l’attribut ou l’url contenu dans le lien du titre : Dans mon thème, le lien se trouve dans la div  .’icon-bot a‘.

Sachant que cette classe contenant le lien peut varier d’un thème à l’autre, il faut donc inspecter l’élément (Ctrl Maj I ou clic droit « inspecter l’élément) et chercher la classe de la div contenant le lien.
On a la div globale de l’icon box, avec la classe que l’on a crée via la fenêtre d’édition ( dans notre exemple, c’est donc la classe « icon-box-img« ), on a ensuite l’image, puis on voit que le lien <a href= » »> est contenu dans une div dont la classe est « iconbox-dot« .

<div class="theme-iconbox icon-above-title text-center icon-box-img" itemscope="" itemtype="http://schema.org/Thing">
    <div class="iconbox-icon"><img itemprop="image"></div>        
<div class="iconbox-bot">
        <a class="iconbox-title" href="">votre textes</a>        
<p class="iconbox-content" itemprop="description"></p>
    </div>
</div>

Dans le jQuery, on va donc chercher le lien contenu dans cette div.

jQuery(document).ready(function(){
	jQuery(".icon-box-img").click(function (){ 
		window.location = $(this).find('.iconbox-bot a').attr('href');
	});

Votre image est maintenant cliquable et renverra vers le lien que vous avez indiqué dans la fenêtre d’édition de l’icon-box.

Si chaque bloc contient un lien différent, on peut simplifier avec un each

jQuery(".icon-box-img").each(function(){
  jQuery(".icon-box-img").click(function (){ 
		window.location = $(this).find('.iconbox-bot a').attr('href');
	});
  
})