El tema Divi contiene ajustes para tres iconos de medios sociales por defecto: Twitter, Google+ y Facebook, pero ¿y si quieres mostrar más iconos en tu cabecera o pie de página?
Afortunadamente es bastante fácil, y tenemos 2 maneras de conseguirlo.
Añadir más iconos sociales a Divi con código
Para añadir iconos sociales a Divi manualmente lo primero que debemos hacer es localizar el archivo /Divi/includes/social_icons.php. Lo ideal es que crees una carpeta /includes/ en tu tema hijo y sea ahí donde copies el archivo social_icons.php, así podrás seguir actualizando Divi sin perder los cambios que hagamos ¿vale?
Una vez creada la carpeta y copiado el archivo a tu tema hijo ábrelo con tu editor de código favorito. Una vez dentro verás el código para los tres iconos sociales por defecto…
Pues bien, será ahí donde añadiremos nuestros nuevos iconos sociales. Para poner un ejemplo vamos a añadir un icono para LinkedIn, así que el código a incluir sería este:
<li class="et-social-icon et-social-linkedin"> <a target="_blank" href="https://www.linkedin.com/"> <span><?php esc_html_e( 'Linkedin', 'Divi' ); ?></span> </a> </li>
El código lo añadiremos justo después de la línea <?php endif; ?> y antes de la etiqueta de cierre </ul>, con lo que el código resultante en tu archivo social_icons.php quedaría así:
Solo tienes que acordarte de que la URL que pongas en el código, en el ejemplo https://www.linkedin.com, sea la de tu perfil social; por ejemplo . Por supuesto, guarda los cambios al archivo.
Ahora solo nos queda añadir un poco de CSS para que se vea nuestro nuevo icono, así que ve a la hoja de estilos de tu tema hijo (el archivo style.css) y añade lo siguiente al final del archivo:
.et-social-linkedin a:before {
content: '\e09d';
}Guarda los cambios y ya verás el nuevo icono junto al resto de iconos activos previamente.
¿Que no quieres el icono de LinkedIn? Pues mira tú por donde Divi incluye los códigos para otros iconos sociales, estos:
- Dribble = e09b
- Flickr = e0a6
- Instagram = e09a
- Myspace = e0a1
- Pinterest = e095
- Skype = e0a2
- Tumblr = e097
- Vimeo = e09c
- YouTube = e0a3
Solo tienes que modificar el código o añadir nuevos, por ejemplo:
<li class="et-social-icon et-social-skype">
<a target="_blank" href="http://www.skype.com/">
<span><?php esc_html_e( 'Skype', 'Divi' ); ?></span>
</a>
</li>
.et-social-skype a:before {
content: '\e0a2';
}Añadir más iconos sociales a Divi con un plugin
Ahora bien ¿no quieres o no te atreves a tocar código? Puedes usar la joya de plugin llamada Divi Booster que, entre muchas otras personalizaciones, incluye la posibilidad de añadir todos los iconos sociales disponibles en Divi a un clic.
Simplemente instálalo, lo activas, y en el menú Divi verás un submenú nuevo llamado Divi Booster. En la sección Site-Wide Settings -> Icons tienes la posibilidad de añadir todos los iconos disponibles de la manera más fácil posible.
Ya que estás, también puedes forzar a que los enlaces a tus perfiles sociales se abran en nueva pestaña/ventana, algo que en Divi no viene por defecto.
El plugin Divi Booster es casi obligatorio si usas Divi, al menos altamente recomendable, pues incluye decenas de personalizaciones más que útiles, de las que marcan diferencias, esas pequeñas cosas que echas de menos en Divi, por solo 19$ en un único pago.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Genial Fernando, muchas gracias. Éste es uno de los incomprensibles olvidos de Divi…
Buenas Fernando:
Juraría que los iconos que mencionas en el post ya están incluidos en el style.css de divi, a pesar de que no aparezca la opción para añadirlos en el panel de ajustes de divi, por lo que el CSS que mencionas creo que no hay que añadirlo, por lo menos antes de Divi 3.0 era así.
Un saludo
No están, sí los iconos, pero no el CSS
Saludos, quiero hacer una consulta, y si alguien sabe como ayudarme le agradeceria, instale DIVI, empece a hacer un sitio, pero desde que lo instale, ya no puede acceder normalmente atravez de filezilla (solo por IP), ya no me dejo borrar los temas normalmente, y lo peor es que si hago un cambio, si tengo suerte, pasan dias para que se refleje, y los señores del foro de divi no ayudan. borre el theme y en un navegador sin cookies sigue apareciendo el theme de divi….
Me temo que esto debe tener que ver con tu servidor, es bastante raro, del tema casi seguro que no es
Buenos días. Gracias por tus aportes. Sabes si hay alguna forma de añadir el watsap, este no viene por defecto «Monarch». Lo cierto es que casi todas estas redes sociales están en este plugin, pero no tiene el watsapp. Y de meterlo como aparece en tus indicaciones, cuál sería el código. Muchas gracias.
Hola, muchas gracias, solo no me funciona con youtube. como se agregaria el de youtube.
Compre este plugin pues entendi que se podían poner los iconos en el Main Menu. En el otro menú ya trae divi para ponerlos pero en el Main no. Lo compre, intente poner los iconos y me los pone en el mismo menú que Divi!! que demonios! para que me sirve si hace lo mismo que Divi? voy a pedir un refund…
Es para añadir más iconos, como el código. Divi añade unos por defecto, el truco es para tener más iconos
Hola,
¿Cómo puedo saber cual es el código para el icono de medium?
Muchas gracias
Hola buenos dias.
Excelente artículo, como la mayoría de este blog.
Por si alguien no se atreve o no quiere tocar los archivos del tema divi, se me ha ocurrido una solución para insertar mas redes sociales en divi, utilizando unicamente el constructor de divi.
Podéis ver como he hecho para integrar mas redes sociales a divi en https://www.4simpleapps.com/anadir-mas-redes-sociales-a-divi/
Espero que os guste.
Fernando, ¿sabes si hay algún código para poner Twitch o Tik Tok?
Gracias!!
No, que yo sepa sus APIs no se dejan