Par défaut, Divi nous autorise via les Options du thème à ajouter, dans la barre de menu secondaire et dans le footer, des liens vers quelques réseaux sociaux (Facebook, Twitter et Google+) ainsi qu’un lien de flux RSS.
Mais la liste des réseaux sociaux est encore longue, quid de YouTube, Instagram… ?
Voici comment remédier à ce manque.

 

Préparez vos fichiers

Avant tout, vous devez utiliser un thème enfant pour effectuer cette modification. Si vous n’en avez pas encore, vous pouvez télécharger notre thème enfant ici.

Dans votre thème enfant, commencez par créer un dossier includes.
Rendez-vous maintenant dans le dossier du thème “Divi” situé ici : wp-content/themes/divi
Vous y trouverez un dossier includes.
Copiez le fichier social_icons.php qui s’y trouve et collez-le dans le dossier includes que vous venez de créer dans votre thème enfant.

 

Le code que nous allons utiliser

Voici un exemple de snippet pour ajouter un icone Instagram et le lien vers votre compte :

<li class="et-social-icon et-social-instagram">
  <a href="#" class="icon" target="_blank">
  <span><?php esc_html_e( 'Instagram', 'Divi' ); ?></span>
  </a>
</li>

Remarquez sur la première ligne la classe et-social-instagram qui permet d’afficher l’icone Instagram.
À la deuxième ligne, remplacez # par l’URL de votre compte.
Et enfin, à la troisième ligne, Instagram déclare de quel réseau social il s’agit.
C’est sur ces 3 lignes qu’il vous faudra intervenir pour ajouter un nouveau réseau social.

On peut donc faire la même chose pour YouTube :

<li class="et-social-icon et-social-youtube">
  <a href="#" class="icon" target="_blank">
  <span><?php esc_html_e( 'Youtube', 'Divi' ); ?></span>
  </a>
</li>

 

Modifiez le fichier social_icons.php

Il est maintenant temps d’ajouter ces lignes de code à notre fichier social_icons.php.

Vous pouvez remarquer plusieurs groupe de lignes de code commençant par <?php if et se terminant par <?php endif; ?
C’est ce qui correspond aux réseaux sociaux disponibles par défaut dans les options du thème que je citais en début d’article.
Il vous suffit simplement de coller le snippet proposé plus haut là où vous souhaitez que l’icone s’affiche.

Par exemple, si vous souhaitez ajouter un icone vers votre chaine YouTube entre un icone Twitter et un icone Facebook, voici à quoi ressemblerait le code complet de votre fichier social_icons.php

<ul class="et-social-icons">

<?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; ?>

<!-- = = = = AJOUT DE L'ICONE YOUTUBE = = = = -->
<li class="et-social-icon et-social-youtube">
  <a href="#" class="icon" target="_blank">
  <span><?php esc_html_e( 'Youtube', 'Divi' ); ?></span>
  </a>
</li>
<!-- = = = = FIN DE L'AJOUT DE L'ICONE YOUTUBE = = = = -->

<?php if ( 'on' === et_get_option( 'divi_show_twitter_icon', 'on' ) ) : ?>
	<li class="et-social-icon et-social-twitter">
		<a href="<?php echo esc_url( et_get_option( 'divi_twitter_url', '#' ) ); ?>" class="icon">
			<span><?php esc_html_e( 'Twitter', 'Divi' ); ?></span>
		</a>
	</li>
<?php endif; ?>

<?php if ( 'on' === et_get_option( 'divi_show_google_icon', 'on' ) ) : ?>
	<li class="et-social-icon et-social-google-plus">
		<a href="<?php echo esc_url( et_get_option( 'divi_google_url', '#' ) ); ?>" class="icon">
			<span><?php esc_html_e( 'Google', 'Divi' ); ?></span>
		</a>
	</li>
<?php endif; ?>

<?php if ( 'on' === et_get_option( 'divi_show_rss_icon', 'on' ) ) : ?>
<?php
	$et_rss_url = '' !== et_get_option( 'divi_rss_url' )
		? et_get_option( 'divi_rss_url' )
		: get_bloginfo( 'rss2_url' );
?>
	<li class="et-social-icon et-social-rss">
		<a href="<?php echo esc_url( $et_rss_url ); ?>" class="icon">
			<span><?php esc_html_e( 'RSS', 'Divi' ); ?></span>
		</a>
	</li>
<?php endif; ?>

</ul>

 

Et si je ne veux pas coder ?

Bien sûr, comme toujours, il existe des alternatives qui vous évitent de mettre les mains dans le cambouis.
J’en citerai deux qui restent dans l’écosystème Divi :

  • Vous pouvez utiliser le plugin Monarch (édité par Elegant Themes et donc inclus dans votre abonnement).
    Très complet, il vous autorise à ajouter moult réseaux sociaux, en divers endroits de votre site, avec une tonne de fonctionnalités (nombre de followers, type de déclencheurs, statistiques détaillées…).
  • Vous pouvez installer le plugin gratuit Divi Children (traduit en français par mes soins ; je le précise pour les anglophobes) qui permet de créer facilement un thème enfant avec plein de super options venant corriger différentes lacunes de Divi. Dont évidemment la possibilité d’ajouter d’autres icones de réseaux sociaux (vous pouvez voir ce que ça donne dans le footer de notre site de démo).
    Si vous voulez tout savoir sur Divi Children, je vous annonce dès maintenant qu’un tuto est en cours de rédaction par Julien…  😉

D'autres tutoriels pouvant vous intéresser: