Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Accueil » Wordpress » Enlever l’apparition du nom de l’image, au survol des images

Enlever l’apparition du nom de l’image, au survol des images

Temps de lecture : 2 mn

Lorsque vous survolez une image sur votre site Divi, une infobulle affichant le titre de l’image peut apparaître, ce qui peut être gênant pour l’expérience utilisateur. Heureusement, il existe des méthodes simples pour supprimer cette infobulle, avec ou sans l’utilisation d’une extension.

Pourquoi ces infobulles apparaissent-elles ?

Les infobulles au survol des images sont générées par l’attribut title présent dans le code HTML de l’image. Cet attribut est souvent ajouté automatiquement lors de l’insertion d’images dans WordPress. Bien qu’il puisse être utile pour le référencement et l’accessibilité, son affichage au survol peut perturber la navigation.

Méthode 1 : Supprimer l’infobulle avec une extension

L’utilisation d’une extension comme Code Snippets facilite l’ajout de code personnalisé à votre site sans modifier directement les fichiers du thème.

Étapes à suivre :

  1. Installer et activer l’extension Code Snippets :
    • Dans votre tableau de bord WordPress, allez dans « Extensions » > « Ajouter ».
    • Recherchez « Code Snippets ».
    • Installez et activez l’extension.
  2. Ajouter un nouveau snippet :
    • Accédez à « Snippets » > « Ajouter ».
    • Donnez un titre à votre snippet, par exemple « Supprimer infobulle des images ».
    • Dans le champ de code, collez le script suivant :
add_action( 'wp_head', function () { ?>
<script>
 
 jQuery(document).ready(function($) {
    $("img").mouseenter(function() {
        let $ld_title = $(this).attr("title");
        $(this).attr("ld_title", $ld_title);
        $(this).attr("title", "");
    }).mouseleave(function() {
        let $ld_title = $(this).attr("ld_title");
        $(this).attr("title", $ld_title);
        $(this).removeAttr("ld_title");
    });
});
 
</script>
<?php } );
  • Sélectionnez l’option « Exécuter uniquement sur le site public ».
  • Enregistrez et activez le snippet.

Ce script utilise jQuery pour supprimer temporairement l’attribut title lors du survol de l’image, empêchant ainsi l’affichage de l’infobulle.

Méthode 2 : Supprimer l’infobulle sans extension

Si vous préférez ne pas utiliser d’extension, vous pouvez ajouter le script directement dans le fichier functions.php de votre thème enfant.

Étapes à suivre :

  1. Allez à l’onglet Divi > Options du thème > Intégration
    • Dans l’encart « Ajouter ligne de code à la <head> de votre blog », copiez et collez le code qui suit.
    • Sauvegardez vos modifications.

Le code est le suivant :

<script>
jQuery(document).ready(function($) {
    $("img").mouseenter(function() {
        let $ld_title = $(this).attr("title");
        $(this).attr("ld_title", $ld_title);
        $(this).attr("title", "");
    }).mouseleave(function() {
        let $ld_title = $(this).attr("ld_title");
        $(this).attr("title", $ld_title);
        $(this).removeAttr("ld_title");
    });
});
</script>

Quelle méthode choisir ?

L’utilisation de l’extension Code Snippets est recommandée pour les utilisateurs qui ne sont pas à l’aise avec la modification des fichiers du thème. Elle offre une interface conviviale pour gérer vos scripts personnalisés en toute sécurité.

Cependant, si vous ne souhaitez pas ajouter de plugin supplémentaire, préférez la seconde méthode !.

En appliquant l’une de ces méthodes, vous améliorerez l’expérience utilisateur sur votre site Divi en supprimant les infobulles indésirables lors du survol des images.

Continuer la lecture

Intégrer la balise Google analytics à son site

Intégrer la balise Google analytics à son site

Google Analytics est un outil indispensable pour suivre les performances de votre site web et comprendre le comportement de vos visiteurs. Si vous utilisez WordPress et le thème Divi, vous avez de la chance, car l’intégration de Google Analytics est à la fois simple...

lire plus
Des effets d’ombre sympas pour votre site !

Des effets d’ombre sympas pour votre site !

Les effets d’ombre sont un excellent moyen d’ajouter de la profondeur, de l’élégance et du dynamisme à votre site WordPress. Qu’il s’agisse de mettre en valeur un bouton, de faire ressortir une image ou de donner une sensation de modernité à votre design, les ombres...

lire plus