Si vous utilisez le menu avec le logo centré de Divi, votre menu mobile sera un peu différent du menu standard.

En effet, vous aurez un libellé « Sélectionner une page » affiché juste à côté de l’icône Hamburger pour ouvrir le menu.

Ce libellé n’étant ni utile, ni très esthétique, nous allons voir deux manières de le modifier ou le supprimer.

La photo du coupable

Modifier le libellé du menu avec du code PHP

On va pouvoir modifier ce texte directement en PHP avec la fonction str_ireplace() qui permet de remplacer une expression par une autre.

Pour ceci, copiez-collez le code suivant dans le fichier functions.php de votre thème enfant :

function dc_modif_expression($texte) { 
	$texte = str_ireplace('Sélectionner une page', 'Mettez ici la phrase que vous voulez afficher', $texte); 
	return $texte; 
} 

add_filter('gettext', 'dc_modif_expression'); 
add_filter('ngettext', 'dc_modif_expression');

La première expression correspond à celle que vous souhaitez remplacer et la deuxième par le texte à afficher à la place de la première.

Voici le code utilisé pour l’exemple :

Et le résultat obtenu :

Attention cependant si vous utilisez ce code, car l’expression que vous allez remplacer avec cette fonction le sera PARTOUT sur le site. Donc si dans un article ou une page vous utilisez exactement le même libellé que le menu, alors il sera également remplacé.

Modifier le libellé du menu avec du code CSS

Si vous n’avez pas trop envie de toucher au PHP, il est également possible d’y arriver en CSS.

Vous pouvez par exemple très simplement supprimer le libellé du menu mobile afin de ne laisser apparaître que l’icône hamburger à vos visiteurs.

Pour ceci copiez-collez le code suivant dans le fichier style.css de votre thème enfant ou dans Apparence -> Personnaliser -> CSS additionnel :

.select_page {
	display:none!important;
}

.select_page est la classe CSS qui permet de cibler justement le libellé.

Ce code nous donne ceci :

Et si vous souhaitez modifier le texte par une phrase de votre choix, par exemple « blablabla », utilisez plutôt le code suivant :

.select_page {
	font-size:0px!important;
}

.select_page:before {
	content:"blablabla";
	font-size: 14px;
} 

Voici ce que l’on fait ici :

• on donne une taille de 0px au libellé d’origine, ce qui fait qu’on le voit plus
• on insère en CSS un contenu avec pour valeur notre chaine de caractère à laquelle on attribut la même taille de texte que le libellé original.

Et le résultat :

Si vous êtes assidu vous avez surement remarqué qu’on utilisait la même technique pour traduire l’expression “Share This” du plugin Monarch 😉

Modifier le libellé du menu avec jQuery

Dernière méthode, cette fois on va modifier le libellé en utilisant un petit bout de code jQuery.

Rendez-vous dans Divi -> Options du thème -> Intégration -> Ajouter du code dans le < head > de votre blog et copiez-collez le code suivant :

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".select_page").text("Nouveau texte");
});
</script>

Remplacez simplement “Nouveau texte” par celui que vous voulez afficher et sauvegardez.

Vous savez maintenant tout ce qu’il y a à savoir pour modifier le libellé du menu mobile sur votre site ou ceux de vos clients.
À vous de jouer !

Partager