Si vous utilisez le thème Divi, vous avez remarqué que les options ne permettent que d’ajouter son adresse e-mail et son numéro de téléphone dans la barre supérieure située au dessus du menu principal.

barre supérieure avec le thème Divi

Rappelons que dans Divi, l’activation de la barre de menu supérieure passe par la création d’un menu secondaire.

Cependant, il est parfois utile de renseigner également son adresse.

Pour remédier à cela, dans l’interface d’administration, allez dans Divi > Options du thème > Intégration > Ajoute du code dans la balise <body>.

Pour ajouter l’adresse AVANT le téléphone + mail

Pour ajouter l’adresse au début de la barre supérieure, entrez dans le champ le code suivant :

<script>
 jQuery(function($){
  if (!$('#et-info').length) { $('#top-header .container').prepend(''); }
    $('#et-info').prepend(
      '<span style="margin:0 10px" id="top-address"> 69 Grande Rue, 78550 Houdan</span>'
    );
  });
</script>

Pensez à remplacer l’adresse par la vôtre.

Si vous souhaitez en même temps créer un lien vers la page associée Google Maps associée, écrivez plutôt :

<script>
 jQuery(function($){
  if (!$('#et-info').length) { $('#top-header .container').prepend(''); }
    $('#et-info').prepend(
    '<span style="margin:0 10px" id="top-address">
     <a href="https://www.google.fr/maps/..." target="_blank"> 69 Grande Rue, 78550 Houdan</a>
     </span>'
    );
  });
</script>

Pour faire apparaître l’icône  de localisation, il faut préciser dans l’éditeur de CSS les instructions suivantes :

#top-address:before{
  font-family: "ETmodules" !important;
  content: "\e081";
}

La liste des icônes installées par défaut ainsi que des codes associés est disponible sur cette page. Il est aussi possible d’utiliser la bibliothèque d’icônes Font Awesome mais cette dernière nécessite l’installation d’un plugin.

La fonction prepend() ajoute du contenu (ici l’adresse) au début de l’élément sélectionné (la barre supérieure dans notre cas).

Le résultat est le suivant :

Ajout du texte dans la barre supérieure avec le thème Divi de WordPress

Pour ajouter l’adresse APRÈS le téléphone + mail

Si vous souhaitez afficher votre adresse APRÈS l’e-mail et le téléphone, copiez-collez plutôt ce code au même endroit. Il suffit simplement de remplacer la fonction prepend() par la fonction append() :

<script>
 jQuery(function($){
  if (!$('#et-info').length) { $('#top-header .container').append(''); }
    $('#et-info').append(
    '<span style="margin:0 10px" id="top-address">
     <a href="https://www.google.fr/maps/..." target="_blank"> 69 Grande Rue, 78550 Houdan</a>
     </span>'
    );
  });
</script>

La fonction append() ajoute du contenu à la fin de l’élément sélectionné.

Attention toutefois si vous décidez d’afficher les icônes des réseaux sociaux. L’adresse sera insérée après…

 

Merci au site de la Marmite pour l’aide à ce sujet…