En este post vamos a ver cómo hacer que se muestren o no los iconos de redes sociales en el header y en el footer con la plantilla Divi. Así como la manera de añadir iconos de redes sociales diferentes a Facebook, Twitter y Google +

COMPRAR DIVI CON DESCUENTO + REGALO COMPRAR DIVI BOOSTER

Veremos como añadir nuevos iconos de redes sociales con un plugin y añadiendo código. La ventaja del plugin es que lo instalas configuras y te olvidas, mientras que con el código tendrás que volverlo a añadir cada vez que actualices Divi.

Además con el plugin podrás añadir hasta 160 iconos de redes sociales diferentes, mientras que con el código nos tendremos que limitar a las más conocidas.

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

 

 

 

 

1.- MOSTRAR ICONOS DE REDES SOCIALES EN LA PLANTILLA DIVI

 

La plantilla Divi por defecto nos permitirá mostrar las redes sociales de Twitter, Facebook y Google +. Para añadir otras redes sociales tendremos que modificar un archivo de la plantilla que veremos en el punto 2.

En primer lugar vamos a ver cómo configurar estas tres redes sociales desde el panel de administración de WordPress.

 

curso online wordpress con la plantilla Divi

CURSO ONLINE WORDPRESS + DIVI 3.0

Curso WordPress online + Divi

 

1.1.- Configurar redes sociales en Divi

 

Para configurar las redes sociales en la plantilla Divi iremos a: “panel de administración > Divi > Opciones del tema”.

De las diferentes pestañas que aparecen nos quedamos en la pestaña: “general” y haremos scroll hasta llegar a la etiqueta: “Mostrar icono de Facebook”.

 

Configurar redes sociales en Divi

Opciones de configuración de Redes Sociales en la plantilla Divi

 

Las opciones que tenemos son las siguientes:

 

  • Mostrar icono de Facebook: con este selector activamos o desactivamos la visualización del icono de Facebook en la plantilla wordpress Divi.
  • Mostrar icono de twitter: con este selector activamos o desactivamos la visualización del icono de Twitter en la plantilla.
  • Mostrar iconos de Google +: con este activamos o desactivamos la visualización el icono de la red social Google +
  • Mostrar iconos de RSS: con este selector activamos o desactivamos el icono RSS.
  • Dirección perfil de Facebook: Aquí debemos poner la URL de nuestra página de Facebook.
  • Dirección perfil de twitter: Aquí pondremos la URL de nuestro perfil de twitter.
  • Dirección perfil de Google +: En este campo pondremos la URL de nuestra página de Google +
  • Dirección de RSS: Aquí pondremos la URL de los RSS de nuestro blog. Normalmente será http://midominio.com/feed

 

 

1.2.- Mostrar redes sociales en el header de la plantilla Divi

 

Para mostrar los iconos de redes sociales en el encabezamiento o header de Divi debemos haber activado y configurado previamente dichos perfiles como he indicado en el apartado 1.1

Ahora iremos a: “panel de administración > Divi > Personalizador de temas > Cabecera y navegación > Elementos de cabecera”. Aquí marcaremos el checkbox con el texto: “Mostrar iconos sociales”. A continuación pulsa el botón “Guardar y publicar”.

 

mostrar iconos redes sociales en el encabezamiento

Mostrar iconos de redes sociales en el header de la web

 

Los iconos de redes sociales aparecerán en lo que se conoce como barra de menú secundario. Dicha barra de menú aparecerá situada por encima de la barra de menú principal.

 

 

1.3.- Mostrar redes sociales en el footer de la plantilla Divi

 

Para mostrar las redes sociales en el footer de la plantilla Divi debemos haber activado y configurado previamente dichos perfiles como he indicado en el apartado 1.1

Ahora iremos a: “panel de administración > Divi > Personalizador de temas > pie > Elementos del pie”. Aquí marcaremos el checkbox con el texto: “Mostrar iconos sociales”. A continuación pulsa el botón “Guardar y publicar”.

Para configurar el color de los iconos de redes sociales iremos a: “panel de administración > Divi > Personalizador de temas > pie > barra inferior”. Aquí tenemos la opción: “Color de icono social” para seleccionar el color de los iconos.

 

Mostrar iconos de redes sociales en el footer de Divi

Mostrar redes sociales en el footer de Divi

COMPRAR DIVI CON DESCUENTO + REGALO

 

 

2.- AÑADIR NUEVAS ICONOS DE NUEVAS REDES SOCIALES EN DIVI

 

Como ya habrás visto desde el panel de administración de WordPress y Divi solo puedes configurar las redes sociales: Facebook, Twitter, Google + y RSS.

Para añadir nuevas redes sociales añadiremos un código en el archivo: social_icons.php o utilizaremos un plugin de pago (19$) Divi Booster, que nos permite añadir más redes sociales sin introducir ningún tipo de código entre otras muchísimas opciones.

Las redes sociales que podrás añadir a tu web realizada con la plantilla Divi modificando dicho archivo de manera directa o utilizando el plugin son:

Pinterest, Linkedin, Tumblr, Instagram, Skype, Flikr, Myspace, Dribble, Youtube y Vimeo

Ya que en el archivo style.css existen los códigos para estos iconos. En caso de querer añadir una red social diferente a estas, habría que añadir también su código en el archivo CSS.

Si hacemos la modificación de código de manera manual, cada vez que actualicemos la plantilla Divi tendremos que volver a hacer la módificación de código. Por el contrario, si utilizamos el plugin para añadir redes sociales a Divi nos olvidaremos ya que no tendremos que hacer nada más aunque actualicemos Divi.

 

2.0.- Añadir redes sociales utilizando el plugin Divi Booster

 

El plugin Divi Booster sirve para añadir muchas nuevas funcionalidades a la plantilla Divi. Entre estas muchas nuevas funcionalidades está la de añadir nuevas redes sociales.

El plugin tiene un coste de 29$ (aproximadamente 25 €).

 

COMPRAR DIVI BOOSTER

 

Una vez instalado y activado el plugin iremos a su configuración. Esto lo puedes hacer desde el menú lateral en: «Divi > Divi Booster» o ir a «Plugins > Plugins instalados» y en Divi Booster hacer clic en «Settings»

En el primer apartado de la configuración del plugin «Site-wide Setting» y en el sub apartado «Icons» se desplegarán las opciones para añadir nuevos iconos de redes sociales a Divi.

Marca la opción: «Add more social media icons (enter URL)» y añade las urls de las redes sociales que quieras añadir a la web.

Si quieres que los enlaces de los iconos de redes sociales se abran en una nueva pestaña marca la opción: «Open social media icons links in a new tab»

Baja a la parte inferior de la página y guarda la configuración (Guardar cambios).

 

poner más iconos de redes sociales en la plantilla Divi con plugin Divi Booster

Plugin Divi Booster para añadir iconos de redes sociales a Divi

 

Si quieres añadir una red social diferente a las anteriores, no hay problema con Divi booster tienes 160 iconos más de redes sociales. En este post puedes ver el proceso para añadir alguna de esos 160 iconos de redes sociales

Éstos los puedes añadir desde aquí: «Divi > Personalizador de temas > Divi Booster > Social Media Icons”

COMPRAR DIVI CON DESCUENTO + REGALO

 

 

2.1.- Añadir los iconos de redes sociales a Divi a través de Código

 

2.1.1- ¿Qué código hay que añadir?

 

Te pongo el ejemplo para Linkedin:

<li class="et-social-icon et-social-linkedin">
<a href="http://in.linkedin.com/in/yourusername‎" class="icon">
<span><?php esc_html_e( 'LinkedIn', 'Divi' ); ?></span>
</a>
</li>

 

Te pongo otro ejemplo para Youtube:

<li class="et-social-icon et-social-youtube">
<a href="http://youtube.com/u/yourusername‎" class="icon">
<span><?php esc_html_e( 'YouTube', 'Divi' ); ?></span>
</a>
</li>

 

Otro ejemplo para Pinterest:

<li class="et-social-icon et-social-pinterest">
<a href="http://pinterest.com/yourusername‎" class="icon">
<span><?php esc_html_e( 'Pinterest', 'Divi' ); ?></span>
</a>
</li>

 

Otro ejemplo para Instagram:

<li class="et-social-icon et-social-instagram">
<a href="http://www.instagram.com/yourusername‎" class="icon">
<span><?php esc_html_e( 'Instagram', 'Divi' ); ?></span>
</a>
</li>


Como puedes ver hay un patrón entre los diferentes códigos:

 

a.- Primera línea: en la primera línea de código siempre aparece la clase: et-social-icon y debemos añadir una clase específica para cada red social:

Pinterest: et-social-pinterest
Linkedin: et-social-linkedin
Tumblr: et-social-tumblr
Instagram: et-social-instagram
Skype: et-social-skype
Flikr: et-social-flikr
Myspace: et-social-myspace
Dribbble: et-social-dribbble
Youtube: et-social-youtube
Vimeo: et-social-vimeo

b.- Segunda línea: en la segunda línea de código debemos añadir la URL de la red social. Irá entre comillas. href=”URL de la red social”

c.- Tercera línea: en la tercera línea hay que introducir el nombre de la red social en mayúscula. Por ejemplo:

php esc_html_e( ‘Pinterest’, ‘Divi’ );

 

 

2.1.2.- ¿Dónde hay que añadir el código?

 

Ya hemos visto el código que tenemos que añadir dependiendo de la red social que queramos añadir a la web.

Ahora vamos a ver dónde tenemos que introducir dicho código.

Podemos acceder a los archivos de nuestro WordPress a través del CPanel o panel de administración del hosting en caso de estar alojado con Webempresa que es el hosting que recomiendo. También podemos acceder a los archivos de la web vía FTP. También puedes utilizar el editor de código de WordPress que lo tienes en: «panel de administración > Apariencia > Editor»

 

El archivos a modificar se denomina: “social_icons.php” y para acceder a el debemos seguir la ruta: “public_html > wp-content > themes > Divi > includes > social_icons.php”

Una vez localizado el archivo debemos editarlo con un editor de código y añadir el código de la red social al final del archivo. Ojo, al final pero antes de la etiqueta </ul>.

 

añadiendo redes sociales al archivo social-icons.php de divi

Modificando el archivo social_icons.php

 

Una vez realizado los cambios recuerda guardarlos.

COMPRAR DIVI CON DESCUENTO + REGALO

 

 

3.- COMO PONER LOS ENLACES DE LOS ICONOS DE REDES SOCIALES COMO NOFOLLOW

 

Para que los enlaces de las redes sociales sean de tipo nofollow debemos añadir el atributo rel=”nofollow” en el código. El atributo se añade a la etiqueta <a> que es donde se establece el enlace.

 

Por ejemplo:

<a href="https://www.youtube.com/channel/UCYdEAbC7JrC8fBt8OoDwoJQ" class="icon" rel="nofollow">

 

 

4.- COMO PONER LOS ENLACES DE LOS ICONOS DE REDES SOCIALES PARA QUE SE ABRAN EN UNA NUEVA PESTAÑA

 

Para que los enlaces de los iconos de las redes sociales se abran en una nueva pestaña debemos añadir el atributo target=»_blank». El atributo se añade a la etiqueta <a> que es donde se establece el enlace.

 

Por ejemplo:

<a href="https://www.youtube.com/channel/UCYdEAbC7JrC8fBt8OoDwoJQ" class="icon" target="_blank">


 

Compártelo ya!!