C’est quand même agaçant, un thème comme Divi qui permet d’afficher dans le footer seulement les icônes de Facebook, Twitter, Google+ et RSS… Et les autres réseaux sociaux alors ? N’avez-vous pas envie d’ajouter l’icône d’Instagram ou bien celui de YouTube par exemple ? Je me doute que oui, sinon vous ne seriez pas en train de lire cet article ! En effet, il est possible d’ajouter des icônes dans le footer de Divi mais pas de manière native…

Il va falloir modifier un peu le code avec l’aide d’un thème enfant. Dans cet article, nous allons détailler toutes les étapes pour y parvenir… et vous serez fier(e) de vous 😉

À lire aussi : comment dévoiler le footer au scroll de la souris ?

 

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

 

1 – Divi embarque nativement 15 icônes de réseaux sociaux

Il faut savoir que Divi est livré avec 15 icônes de médias sociaux que vous pouvez inclure dans votre pied de page ou tout autre endroit. Le fichier style.css de Divi, situé dans le répertoire du thème, nous montre exactement combien de possibilités d’icônes de médias sociaux le thème inclut par défaut :

 
 .et-social-facebook a.icon:before { content: '\e093'; }
 .et-social-twitter a.icon:before { content: '\e094'; }
 .et-social-google-plus a.icon:before { content: '\e096'; }
 .et-social-pinterest a.icon:before { content: '\e095'; }
 .et-social-linkedin a.icon:before { content: '\e09d'; }
 .et-social-tumblr a.icon:before { content: '\e097'; }
 .et-social-instagram a.icon:before { content: '\e09a'; }
 .et-social-skype a.icon:before { content: '\e0a2'; }
 .et-social-flikr a.icon:before { content: '\e0a6'; }
 .et-social-myspace a.icon:before { content: '\e0a1'; }
 .et-social-dribbble a.icon:before { content: '\e09b'; }
 .et-social-youtube a.icon:before { content: '\e0a3'; }
 .et-social-vimeo a.icon:before { content: '\e09c'; }
 .et-social-rss a.icon:before { content: '\e09e'; }

Cela signifie que ces icônes sont déjà embarqués et que ça ne sera pas compliqué de les utiliser.

 

2 – Comment ajouter des icônes dans le footer de Divi comme Instagram, Pinterest, YouTube, Linkedin etc. ?

Lors de l’article concernant les options générales de Divi, nous avions vu comment activer les icônes de Facebook, Twitter, Google+ et RSS pour votre site. Pour rajouter d’autres icônes, il va falloir mettre un peu les mains dans le code en se servant des informations vues au paragraphe précédent… Rien de bien compliqué si vous suivez ces étapes :

  1. Tout d’abord, vous allez devoir créer un thème enfant
  2. Ensuite, vous allez ouvrir le dossier de votre thème Divi (le thème original) afin de repérer le dossier nommé includes.
  3. Une fois ce dossier includes repéré, vous copierez le fichier nommé social_icons.php pour le coller dans votre thème enfant (à la racine)
  4. Éditez ce fichier nommé social_icons.php afin d’y ajouter des icônes dans le footer de Divi. Vous pourrez l’ouvrir à l’aide d’un éditeur de texte comme Brackets ou SublimText par exemple.
  5. Pour chaque réseau social que vous désirez ajouter, vous devrez insérer les lignes qui suivent sachant que chaque élément inscrit en rouge doit être modifié en fonction de vos besoins :
    <li class="et-social-icon et-social-reseaux-au-choix">
    <a href="url-de-votre-profil" class="icon">
    <span><?php esc_html_e( 'ReseauxSocial', 'Divi' ); ?></span>
    </a>
    </li>
    

Pour mieux comprendre, voici les codes associés à chaque réseau social :

  • Pour ajouter l’icône Instagram au footer de Divi :
    <li class="et-social-icon et-social-instagram">
    <a href="https://www.instagram.com/?hl=fr" class="icon">
    <span><?php esc_html_e( 'Instagram', 'Divi' ); ?></span>
    </a>
    </li>
    
  • Pour ajouter l’icône Pinterest au footer de Divi :
    <li class="et-social-icon et-social-pinterest">
    <a href="https://www.pinterest.fr/" class="icon">
    <span><?php esc_html_e( 'Pinterest', 'Divi' ); ?></span>
    </a>
    </li>
    
  • Pour ajouter l’icône Linkedin au footer de Divi :
    <li class="et-social-icon et-social-linkedin">
    <a href="https://www.linkedin.com/" class="icon">
    <span><?php esc_html_e( 'Linkedin', 'Divi' ); ?></span>
    </a>
    </li>
    
  • Pour ajouter l’icône YouTube au footer de Divi :
    <li class="et-social-icon et-social-youtube">
    <a href="https://www.youtube.com/" class="icon">
    <span><?php esc_html_e( 'YouTube', 'Divi' ); ?></span>
    </a>
    </li>
    
  • Pour ajouter l’icône Viméo au footer de Divi :
    <li class="et-social-icon et-social-vimeo">
    <a href="https://vimeo.com/fr/" class="icon">
    <span><?php esc_html_e( 'Vimeo', 'Divi' ); ?></span>
    </a>
    </li>
    
  • Et ainsi de suite…

 

Je veux en savoir plus sur ce thème Divi…

 

3 – À quel endroit insérer le code de chaque réseau social dans le fichier social_icon.php ?

Vous devrez insérer les codes de chaque réseaux impérativement entre les balises <ul> et </ul>. Sachez que l’ordre dans lequel vous insèrerez vos icônes sera l’ordre dans lequel ils apparaitront dans le pied de page de votre site.

Où ajouter les nouveaux icônes dans le footer de Divi

Où ajouter les nouveaux icônes dans le footer de Divi ? Faites attention à ne pas casser le code existant

Dans la capture d’écran ci-dessus, je vous ai indiqué avec des flèches les endroits où vous pouvez ajouter le code des icônes supplémentaires.

Par exemple, si vous désirez que vos nouveaux icônes s’ajoutent après l’icône du RSS, il faudra ajouter le code entre la ligne 35 et la ligne 37.

De même que si vous souhaitez qu’ils apparaissent avant celui de Facebook, vous devrez insérer le code entre la ligne 1 et la ligne 3.

Dans la capture d’écran suivante, j’ai inséré le code à la fin du fichier, juste avant la fermeture de la balise </ul> :

ajouter des icônes dans le footer de Divi

Ajouter des icônes dans le footer de Divi, juste après l’icône RSS

 

4 – Dernière étape : modifiez le fichier footer.php

Pour l’instant, le code a été ajouté pour vos nouveaux icônes. Maintenant, il faut les faire apparaitre. Pour cela vous allez devoir effectuer une dernière petite modification :

  1. Dans le fichier de votre thème parent Divi, copiez le fichier nommé footer.php
  2. Collez ce fichier dans votre thème enfant (c’est la même manip que pour le fichier social_icons.php)
  3. Éditez ce fichier à l’aide d’un éditeur de texte
  4. À la ligne 44 (depuis la version 3.18.2 de Divi), vous devrez modifier le chemin pour atteindre le fichier social_icons.php que vous venez d’insérer dans votre thème enfant
  5. Le nouveau chemin devra être ‘social_icons’ au lieu de ‘includes/social_icons’
  6. Pour mieux comprendre, regardez la capture d’écran ci-dessous :

Divi footer icons

Voilà, à présent vos nouveaux icônes devraient apparaitre dans le footer de votre site Divi.

Résultat côté Front-End d'ajout d'icône Divi

Côté Front-End, voici le résultat de l’ajout d’icônes

 

En conclusion…

Le thème Divi est polyvalent et facile à modifier, vous l’avez vu, il a été très facile d’ajouter des icônes dans le footer de Divi. Il existe toujours une solution lorsque les customisations ne sont pas proposées depuis les options disponibles dans la partie administrateur. Certains autres thèmes WordPress sont beaucoup plus compliqués à modifier – croyez-moi – c’est aussi l’une des raisons pour lesquelles j’aime utiliser Divi… Si vous voulez d’autres astuces pour customiser votre thème Divi, je vous donne RDV ici !

 

Comment ajouter des icônes dans le footer de Divi

Comment ajouter des icônes dans le footer de Divi – Dites-le sur Pinterest !

Comment ajouter de nouveaux icônes sociaux dans le footer de Divi ?
4.4 pour 7 votes

D'autres Tips pour Divi :

Pin It on Pinterest

Shares
Share This