Es realmente molesto, un tema como Divi que sólo permite mostrar en el pie de página los iconos de Facebook, Twitter, Google+ y RSS... ¿Y las demás redes sociales? ¿No quieres añadir el icono de Instagram o el de YouTube, por ejemplo? Creo que sí, ¡si no, no estarías leyendo este artículo! Efectivamente, es posible añadir iconos en el pie de página de Divi pero no de forma nativa...
Tendrás que modificar un poco el código con la ayuda de un tema hijo. En este artículo te detallamos todos los pasos para conseguirlo... y te sentirás orgulloso de ti mismo 😉 .
Lea también: ¿cómo revelar el pie de página al desplazarse con el ratón?
Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los patrocinados en rosa.
1 - Divi incorpora de forma nativa 15 iconos de redes sociales
Ten en cuenta que Divi viene con 15 iconos de redes sociales que puedes incluir en el pie de página o en cualquier otro lugar. El archivo style.css de Divi, ubicado en el directorio del tema, nos muestra exactamente cuántas opciones de iconos de redes sociales incluye el tema por defecto:
.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'; }
Esto significa que estos iconos ya están incorporados y que no será complicado utilizarlos.
2 - ¿Cómo puedo añadir iconos en el pie de página de Divi como Instagram, Pinterest, YouTube, Linkedin, etc.?
En el artículo sobre opciones generales de DiviEn la sección anterior, vimos cómo activar los iconos de Facebook, Twitter, Google+ y RSS para su sitio. Para añadir otros iconos, tendrás que meter las manos en el código utilizando la información vista en el párrafo anterior... Nada demasiado complicado si sigues estos pasos:
- En primer lugar, tendrá que crear un tema hijo
- A continuación, abrirá la carpeta de su tema Divi (el tema original) para localizar la carpeta llamada incluye.
- Una vez que haya localizado esta carpeta includes, copiará el archivo llamado social_icons.php y pégalo en tu tema hijo (en la raíz)
- Edite este archivo llamado social_icons.php para añadir iconos al pie de página de Divi. Puedes abrirlo con un editor de texto como Soportes o SublimText por ejemplo.
- Para cada red social que desee añadir, tendrá que insertar las siguientes líneas, con cada elemento en rojo que deberá modificar según sus necesidades:
Para entenderlo mejor, aquí están los códigos asociados a cada red social:
- Para añadir el icono de Instagram al pie de página de Divi:
- Para añadir el icono de Pinterest al pie de página de Divi:
- Para añadir el icono de Linkedin al pie de página de Divi :
- Para añadir el icono de YouTube al pie de página de Divi :
- Para añadir el icono de Vimeo al pie de página de Divi :
- Y así sucesivamente...
Quiero saber más sobre este tema Divi...
3 - ¿Dónde se debe insertar el código de cada red social en el archivo social_icon.php?
Vous devrez insérer les codes de chaque réseaux impérativement entre les balises <strong><ul> et </ul></strong>. 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.
¿Dónde añadir los nuevos iconos en el pie de página de Divi? Tenga cuidado de no romper el código existente
En la captura de pantalla anterior, he indicado con flechas dónde puedes añadir el código para los iconos adicionales.
Por ejemplo, si quiere que sus nuevos iconos se añadan después del icono RSS, añadiría el código entre la línea 35 y la 37.
Del mismo modo, si quieres que aparezcan antes de la de Facebook, tendrás que insertar el código entre la línea 1 y la 3.
Dans la capture d’écran suivante, j’ai inséré le code à la fin du fichier, juste avant la fermeture de <strong>la balise </ul></strong> :
Añadir iconos en el pie de página de Divi, justo después del icono de RSS
4 - Último paso: modificar el archivo footer.php
Por ahora, se ha añadido el código para sus nuevos iconos. Ahora tienes que hacer que aparezcan. Para ello, tendrá que hacer un último pequeño cambio:
- En el archivo del tema principal de Divi, copie el archivo llamado pie de página.php
- Pegue este archivo en su tema hijo (esto es lo mismo que para el archivo social_icons.php)
- Edite este archivo con un editor de texto
- En la línea 44 (desde la versión 3.18.2 de Divi), tendrá que cambiar la ruta de acceso al social_icons.php que acaba de insertar en su tema hijo
- La nueva ruta debe ser social_icons' en lugar de incluye/iconos_sociales
- Para entenderlo mejor, observe la siguiente captura de pantalla:
Ahora sus nuevos iconos deberían aparecer en el pie de página de su sitio Divi.
En el Front-End, este es el resultado de añadir iconos
En conclusión...
El tema Divi es versátil y fácil de modificar, como has visto, fue muy fácil añadir iconos al pie de página de Divi. Siempre hay una solución cuando las personalizaciones no están disponibles en las opciones disponibles en el área de administración. Algunos otros temas de WordPress son mucho más complicados de modificar - créeme - esta es también una de las razones por las que es tan fácil modificar el pie de página. razones por las que me gusta usar Divi... Si quieres más ¡consejos para personalizar su tema Divi, te voy a dar aquí!
Cómo añadir iconos al pie de página de Divi - ¡Dilo en Pinterest!
Bonjour
Merci d’abord pour ces tutos bien utile pour les non initiée a la programmation.
Cependant j’ai une question:
Une fois le dossier « includes » édité faut il le redéplacer dans le thème parent ?
Car dans tous les cas je n’arrive pas à le copier, mais juste à le déplacer.
Ensuite, est ce normal que lorsque je fais une mis à jour de Divi l’icône disparait ? Faut il effectuer la manip à chaque mis à jour ?
Merci d’avance
Bonjour Fabien. Non justement le thème enfant doit vous protéger des mises à jour. Il ne faut surtout pas déplacer le dossier INCLUDES mais il faut le dupliquer et placer cette copie à l’intérieur de votre thème enfant. De ce fait ce sera ce dossier contenant le fichier édité qui sera pris en compte à la place de celui du thème parent. C’est le but du thème enfant, j’espère que ces informations complémentaires vous aideront. Bonne continuation. Lycia
Bonjour Lycia, merci beaucoup pour tous ces tutos simples et de qualité.
J’ai fait le document social_icons.php comme tu l’as expliqué, mais je me demande maintenant comment l’intégrer dans WordPress? Dois-je recharger mon thème enfant?
merci!
Bonjour Marie. En effet, le dossier Includes contenant le fichier Social Icons doit être ajouté dans ton thème enfant. Si ton thème enfant est déjà dans ton hébergement, il faudrait y rajouter ces fichiers afin d’intégrer les modifications. J’espère t’avoir aidé !
Bonjour,
Je vous remercie pour ce super tutoriel. Toutefois, il me reste une question. Comment faire pour rajouter l’icône du réseau Viadeo, celui-ci n’étant pas à priori dans la liste standard de divi ?
C’est une bonne question. Avec ce tuto ce n’est pas possible.
Et pour ceux qui souhaitent rendre modifiables les URLs de ces réseaux sociaux dans les paramètres de Divi : https://gist.github.com/MarieComet/d7852883e7a7cb8a0098c8d7091564e5
Génial Marie ! Merci ! Je vais tester !
Bonjour Lycia,
Merci pour ce tuto, juste une petite remarque, il est aussi possible de créer directement dans le child Theme un dossier includes et d’y copier uniquement le fichier social_icons.php. cela évite de transférer tout le dossier includes du parent vers le child theme. puis ajouter le code de l’icon du reseau social souhaité dans le style.css.
Bonjour David. Je comptais justement modifier l’article en ce sens là. En effet, conserver l’entièreté du dossier Includes n’est pas une bonne idée. Vous avez alors 2 solutions : soit placer le fichier social_icons.php dans un dossier includes vierge, soit changer le Path et placer le social_icons.php à la racine du thème enfant. J’espère vous avoir aidé. Bonne journée. Lycia.
Bonjour Lycia,
Mais ensuite comment fait-on pour insérer les URL correspondantes aux différents réseaux sociaux ajoutés ?
Sais-tu également comment faire pour que les liens s’ouvrent dans une nouvelle fenêtre ? 🙂
Bonsoir Eric. Oui en effet, tu peux ouvrir les icônes dans une nouvelle fenêtre comme expliqué dans ce tuto : https://astucesdivi.com/ouvrir-icones-footer-divi-nouvelle-fenetre/
Tu l’ajoutes dans le code directement 😉
Top le tuto, très facile à réaliser MERCI.
Personnellement, j’ai juste un problème , les icônes ne s’affiche pas !!
Est-ce que j’aurais un souci de cache ou de font ?
Bonsoir. Peut-être le cache ? Mais il faut surtout regarder si le code est bien écrit, des fois une petite virgule qui manque et ça marche pas…
Bonsoir,
Peut-etre suis-je le seul dans ce cas, peut-etre pas, aniway, apres la mise a jour Divi 3.18.2 et WordPress 5.0, seul l’icone Instagram ajoutee en footer a disparu. Le code y est toujours dans le fichier social_icons.php.
Une idee ?
Bonsoir,
Depuis la mise a jour Divi 3.18.2 et WordPress 5.0, les icones ajoutees par le fichier « social_icon » ne s’affichent plus !
Une idee Lycia ?
Bonsoir Jean Michel, je vais regarder…
Je pense que si vous avez suivi mon tuto, je conseillais de copier le dossier INCLUDES dans votre thème enfant et de modifier le fichier SOCIAL ICONS. Etant donné que le dossier INCLUDES contient de nombreux autres fichiers, il est possible qu’avec la mise à jour certains de ces fichiers aient été modifiés. Il faudrait voir pour recommencer l’opération avec le fichier INCLUDES de la nouvelle version de Divi. Si vous voulez, attendez un peu, je vais essayer…
Voilà Jean Michel,
Je viens de mettre l’article à jour. Les principaux changements ont été faits dans le point 2 et le point 4 de cet article. Lisez attentivement. Pour ne pas vous emmêler les pinceaux n’hésitez pas à reprendre le tuto depuis le début… 😉
Bonjour Lycia.
Je viens de decouvrir votre post et vous en remercie.
J’ai copier le fichier « footer.php » de mon theme Divi dans le dossier de mon theme enfant Divi et ai procede a la modif du code a la ligne 44 mais rien n’y fait. Enregistrement de la modif et cache du navigateur vidé.
C’est bizarre. Tout marche pour moi… vous avez bien supprimé le dossier includes du thème enfant et mis le social icons à la racine du thème enfant ?
Oui, j’ai verifie et reverifie. Je me demande si le fait d’avoir passe en 3.18.2 de DIVI APRES le passage en 5.0 de WP y est pour quelque-chose finalement. Tout le reste fonctionne apparemment correctement. Bizarre ?
Oui j’ai bien supprime le dossier includes du theme enfant et mis le social icons a la racine du theme enfant.
En fait je me demande si le passage de Divi en 3.18.2 APRES le passage de WP en 5.0 y est pour quelque-chose ? Si oui, ou cela peut-il etre cache ?
PS: desole pour les accents, je suis sur un claiver US, merci de votre aimable comprehension.
Je ne sais pas trop Jean Michel, pour moi tout marche…
Je reviens vers vous Lycia pour un feedback. Mon theme enfant Divi-child n’etait plus pris en compte, pourquoi… mystere. Divi a publie une mise a jour en 3.18.3. Je l’ai installee et tout est rentre dans l’ordre sans toucher a mon theme enfant. Conclusion, le theme enfant peut etre impacte indirectement.
ok ! tout est bien qui fini bien 😉
Bonjour Lycia,
Merci pour le tuto: je l’ai suivi à la lettre mais rien ne fonctionne pour moi. Lorsque que je colle les bouts de codes dans le style.css du thème enfant, wordpress me signale 39 erreurs « unexpected token » : je suppose que ça vient de là mais pourtant je ne fais que des copier coller…
Pouvez-vous m’aider ?
Merci d’avance
Bonjour,
Les icones apparaissent deformees sous Chromium et Opera.
Y a-t-il une astuce pour corriger ceci ?
Bonjour Jean Michel. Je trouve cela bizarre. Avez-vous un plugin de cache ? Sur les autres navigateurs ça marche ?
Bonjour,
non, je n’ai pas de plugin de cache sur les autres navigateurs. Je parle des icones des menus « Friends », « Contact », « Forum », et « Blog » par exemple. Si vous connectez a l’adresse http://www.judogokyo.com au moyen de Opera ou Chromium obtenez-vous aussi ces resultats ?
Bonsoir Jean Michel. Je vais essayer de regarder ça dans la semaine et je reviens vers vous.
Bonjour Kevin.
Lorsqu’on copie-colle des bouts de code, il arrive parfois que les apostrophes simples (‘) se transforment et altèrent le code. Les erreurs peuvent provenir de là. Il faut qu’elles soient « droites » et non « penchées ». Je ne suis certainement pas très claire dans mes explications. J’espère que depuis le temps, vous avez trouvé…
Bonjour Jean Michel. J’ai enfin eu le temps de regarder votre site et ces histoires d’icônes déformés. Effectivement, j’ai bien vu… Cela ne vient pas de Divi. Je crois que c’est une histoire d’encodage de votre base de données. Je ne voudrais pas dire de bêtises… Mais j’ai déjà vu ce genre de soucis. Selon l’hébergeur que vous utilisez, il pourra peut-être vous en dire plus. Sinon, posez la question sur un groupe Facebook dédié à WordPress. Postez une capture d’écran et voyez ce qu’ils vous répondent.
J’espère vous avoir aiguillé. A moins que vous aviez déjà résolu le problème ?
A bientôt
Lycia
Bonsoir Lycia,
merci d’y avoir jeter un coup d’oeil.
Je vais suivre votre conseil car ce n’est effectivement pas resolu. Je vais aussi voir du cote de l’encodage, « utf8mb4_unicode_ci » peut-etre que juste là… 🙂
Meilleurs voeux.
Bonne année à vous également !
Il faut copier le fichier social_icons.php dans le dossier /includes du thème enfant et non dans sa racine. Ainsi, pas besoin de modifier footer.php, qui peut être mis à jour de plus par elegants theme…
Hello Patrick. Effectivement, ta méthode était celle que je présentais dans la première version de cet article mais le dossier INCLUDES contient également de nombreux fichiers qui peuvent eux aussi faire l’objet d’une MAJ de la part de Elegant Theme. Je pense alors que remplacer un seul fichier en cas de MAJ (le footer) est peut-être plus facile…
Hi Lycia, Je ne comprend pas ta réponse. Ne remplacer aucun fichier est encore mieux que d’en remplacer un, non ? Donc pas besoin de copier et modifier footer.php ni à header.php d’ailleurs (pour avoir les icônes dans le header aussi). On pourrait également préciser quelque part que les icônes des réseaux sociaux ne s’affichent pas avec Google Chrome si AdBlock est activé sur le site.
Oui il y a aussi cette autre solution :
https://en.support.wordpress.com/add-social-media-buttons-to-your-sidebar-or-footer/
Merci !
Merci Patrick pour l’astuce AdBlock… je ne savais car je n’utilise pas de AdBlock 😉
Merci pour cet article très utiles et très bien détaillé 🙂
Merci Lycia pour ce tuto très bien réalisé 😉
Super Olivier, ça fait plaisir un peu d’encouragement 😉
Merci Lycia pour ce tuto, fonctionne très bien ! Je voulais savoir s’il y avait un moyen pour que les icones se placent au dessus des crédits, comme sur tablette ou mobile, mais aussi sur un ecran plus large? J’ai essayé de bidouiller deux trois trucs mais sans succès, donc si tu as une piste 🙂
A bientôt !
Salut Valentin, tu peux faire ça si tu utilises le Thème Builder et que tu ajoutes un module de réseaux sociaux
Bonjour,
Merci pour ces articles très complets. A la place d’icônes, je souhaiterai simplement mettre du texte (visuellement que mon site affiche « Instagram » « Twitter » et « Pinterest » et non les icônes de ces reseaux sociaux). Comment puis-je faire cela ?
Merci beaucoup pour votre aide.
Salut Elodie, il te suffit d’utiliser les crédits en pied de page : Apparence > Personnaliser > Pieds de Page > Barre inférieure > Tu ajoutes ton texte et tes liens ici (en HTML) dans le champ « Modifier les crédits de pied de page ».
Génial merci beaucoup!
Merci Sabine 😉
Bonjour Lycia !
Tout d’abord je voulais te remercier pour tous les supers conseils que tu donnes sur ton site, j’adore !!!
Je dois refaire entièrement tout mon site suite à une boulette de mon hébergeur… alors voilà, sans vouloir aller dans les détails, je suis super contente d’avoir trouver une guide !!! 😀
Par contre, étant novice en la matière, lorsque je tente de modifier le code DIVI parent, cela me met un message du style : »Impossible d’envoyer un message au site afin de vérifier l’absence d’erreurs fatales. Du coup, la modification PHP a été annulée. Vous allez devoir téléverser votre fichier PHP modifié par un autre moyen, par exemple en utilisant un client FTP. »
Que puis-je faire pour y remédier ? car sans cette manip, visiblement je ne pourrais pas inclure mon icône Pinterest qui me tient tant à coeur…
Merci encore pour tout et j’espère une réponse de ta part si tu en as le temps ! 😉
Salut Virginie ! Ouf ! Il ne faut jamais modifier le code source d’un thème parent. Comme expliqué dans cet article tu dois absolument créer un thème enfant. C’est pour cette raison que tu as eu le message d’erreur … Sinon, si tu ne veux pas coder, le mieux (et je te le recommande) est de créer un Footer Global avec le Thème Builder. Il te suffira d’y ajouter le module de Social Follow disponible dans le Builder, ce module détient l’icône Pinterest. Voilà, c’est encore plus simple que de coder!!!
Épatant, Merci beaucoup pour ces explications claires et précises. 🙂
Merci Pierre !
Bonjour Lycia ! Merci pour ce super tuto. Ça fonctionne à merveille, les nouveaux icônes apparaissent bien dans le pied de page.
Petite question : comment faire pour les avoir aussi dans la barre d’en-tête ? Dans le personnalisateur du thème Divi/ Éléments de l’en-tête, j’ai coché « afficher les icônes des réseaux sociaux », mais les nouveaux icônes n’apparaissent pas. Est-ce qu’il y aurait une solution ? Merci pour ton aide.
Merci Sandra. Il faudrait recoder un autre fichier. Peut-être le header.php mais je n’ai pas testé
Bonjour,
Je te remercie infiniment pour ce tuto facile ! Ca a marché pour moi, j’en suis très heureuse (merci aussi pour le thème enfant tout fait !)
J’aimerais pousser le vice en mettant les icons des réseaux sociaux dans la barre d’en tête. J’ai fait la même manip que pour le dossier « footer » mais dans le dossier « header » (sait-on jamais), ça n’a pas fonctionné.
Y a t-il une chance de pouvoir les insérer dans la barre d’en tête ?
Merci beaucoup 🙂
Je m’excuse, je pensais avoir lu tous les commentaires mais la question a été posée juste au dessus (trop flagrant en fin de journée !)
Donc ça ne fonctionne pas avec le header.php, dommage !
Allez, c’est ma dernière intervention !
J’ai finalement réussi !
En fait, dans le dossier ‘header’, j’avais supprimé « includes/ » seulement une fois (comme dans ton tuto), comme ça ne fonctionnait pas, j’ai essayé de le supprimer partout dans le ficher et tada, ça fonctionne (il n’y avait pas de raison) !
Merci encore et désolée pour le spam de messages 🙂
Salut Sara , super que tu aies réussi !
Bonjour Lycia,
Ce tuto est-il toujours d’actualité ? J’ai suivi la manip à la lettre et je n’arrive pas à afficher les icones sur mon footer 🙁 C’est pourtant très clair (merci d’ailleurs pour la qualité de vos explications d’une manière générale) et pourtant ça ne fonctionne pas chez moi je ne comprends pas… Quelqu’un a-t-il déjà eu une difficulté pour intégrer ses logos ?
Salut Anthony. Oui ce tutoriel devrait encore fonctionner mais avec le Thème Builder tu n’as plus besoin de coder finalement. Il suffit que tu crées un Pied de Page global et que tu ajoutes un module « suivez-nous » qui permet d’afficher n’importe quel icône 😉
Oui j’ai déjà essayé mais je ne m’en sors pas, je n’arrive pas à faire quelque chose de responsive. Je voudrais faire un footer exactement comme en ce moment avec dans une première ligne mon menu footer, dans une deuxième ligne du texte et à droite mes icones de réseaux sociaux. Ça ne me paraissait pourtant pas compliqué mais je patauge depuis hier à cause des icones de réseaux sociaux qui se baladent, que je m’y prenne d’une façon ou d’une autre. J’étais donc refait quand je suis tombé sur cet article avec tous les commentaires qui disent que chez eux ça fonctionne mais les icones ne s’affichent pas chez moi je ne comprends pas pourquoi, je vais donc réessayer ^^
D’ailleurs j’ai même essayé la méthode proposée plus haut par Marie pour ajouter une option dans le menu, j’ai remplacé instagram par linkedin, l’option a bien été rajoutée mais l’icone ne s’affiche toujours pas c’est incompréhensible… Est-ce que vous pensez que je peux contacter le support de Divi pour quelque chose comme ça ?
Je crois que le mieux est d’utiliser le Footer Global et d’insérer un module « Suivez-nous »
Non Anthony, je te conseille de ne pas coder puisque apparemment c’est un peu compliqué, utilise plutôt le Theme Builder
Bonjour,
Impossible d’insérer l’icône de LinkedIn dans ma liste des réseaux sociaux. Mon fichier style.css sur Divi Version : 4.11.3 est vide.
Je peux ajouter plusieurs fois à la suite l’icône Instagram en modifiant mon code. Il exécute bien le ::before mais impossible pour LinkedIn. Il ne rajoute jamais l’icône avant la balise
.et-social-linkedin a.icon:before { content: ‘\e09d’; }
P.S : Je viens tester avec et-social-pinterest et ça ne fonctionne pas non plus 🙁
Une idée ???
Remarque par rapport à mon post précédent. L’affichage del’icône LinkedIn fonctionne avec Chrome mais pas avec Firefox et Edge
Je me suis trompée, ça ne marchait pas non plus sur Chrome 😁
Mais j’ai trouvé la solution, j’ai ajouté le code suivant dans mon fichier style.css de mon thème enfant
.et-social-linkedin a.icon:before {
font-family: ‘ETmodules’;
content: ‘\e09d’;
}
Merci Dalida pour ton retour 😉
@Dalida : Merci pour ton astuce !!