Seleccionar página

Seguimos con DIVI. Hoy aprenderemos a añadir redes sociales a DIVI. DIVI por defecto solamente tiene 4 opciones: Facebook, Twitter, Google+ y RSS. Hay una red social muy importante que se han saltado y que seguro que echas de menos: Instagram. Aunque cambiando un poco este código podemos añadir cualquier red social.

Lo primero que vamos a hacer es crear la carpeta /wp-content/theme/Divi-Child/includes/ y copiar ahí el archivo social_icons.php que se ubica en /wp-content/theme/Divi/includes/ . Hará falta hacer esto mediante FTP o en el administrador de archivos que te proporcionará tu hosting.

Una vez que tengamos el archivo copiado, vamos a Apariencia>Editor y editamos el archivo en cuestión. Verás que en este documento están las redes sociales arriba mencionadas. A mí me gusta poner Instagram justo después de Facebook, dada su importancia. Por lo tanto tenemos este código:

<?php if ( 'on' === et_get_option( 'divi_show_facebook_icon', 'on' ) ) : ?>
	<li class="et-social-icon et-social-facebook">
		<a href="<?php echo esc_url( et_get_option( 'divi_facebook_url', '#' ) ); ?>" class="icon">
			<span><?php esc_html_e( 'Facebook', 'Divi' ); ?></span>
		</a>
	</li>
<?php endif; ?>

E inmediatamente después añadimos esto:

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

Además de este cambio me gusta añadir target=»_blank» también en el resto de redes sociales para que el enlace se abra siempre en una ventana diferente y no en la misma haciendo que el usuario salga de nuestra web. Pero ya depende de cada uno.

 

Con esto ya tenemos el icono y enlace de Instagram en nuestra web con DIVI. Os dejo los estilos de esta y otras redes sociales:
Instagram: et-social-instagram
Youtube: et-social-youtube
Vimeo: et-social-vimeo
Pinterest
: et-social-pinterest
Linkedin: et-social-linkedin
Tumblr: et-social-tumblr
Skype: et-social-skype
Flikr: et-social-flikr
Myspace: et-social-myspace
Dribbble: et-social-dribbble