Divi permet nativement d’afficher les icônes Facebook, X (Twitter), Instagram ou RSS dans la barre secondaire de son en-tête. En revanche, pour ajouter un réseau supplémentaire comme LinkedIn, il fallait jusqu’ici modifier le thème à l’aide d’un thème enfant et désactiver l’option de performance Icônes Dynamiques pour que l’icône ajoutée manuellement soit disponible.
WordPress 7.1 introduit une nouvelle API publique pour enregistrer et afficher des icônes SVG. Elle permet notamment d’enregistrer sa propre icône LinkedIn, de l’afficher directement dans l’en-tête Divi avec wp_get_icon() et de conserver le chargement dynamique des icônes de Divi.
Voyons d’abord comment nous procédions jusqu’à présent, puis ce que WordPress 7.1 permet de faire différemment.
L’ancienne méthode pour ajouter LinkedIn dans l’en-tête Divi
Par défaut, les options du thème Divi proposent notamment Facebook, X, Instagram et RSS. Lorsqu’elles sont activées, ces icônes peuvent apparaître dans la navigation secondaire de l’en-tête.
Pour ajouter LinkedIn, la documentation d’Elegant Themes recommande de surcharger le fichier social_icons.php de Divi depuis un thème enfant.
Copier social_icons.php dans le thème enfant
Le fichier original se trouve dans /wp-content/themes/Divi/includes/social_icons.php.
Il ne faut surtout pas modifier directement ce fichier : la modification disparaîtrait lors d’une mise à jour de Divi.
On le copie donc dans le thème enfant, par exemple dans /wp-content/themes/mon-theme-enfant/includes/social_icons.php.
Si le dossier includes n’existe pas encore dans le thème enfant, il suffit de le créer. Divi détecte alors automatiquement cette copie et utilise le fichier du thème enfant à la place de celui du thème parent.
Ajouter LinkedIn dans social_icons.php
Avant la fermeture de la liste </ul>, on pouvait ajouter par exemple :
<li class="et-social-icon et-social-linkedin">
<a
href="https://www.linkedin.com/company/votre-entreprise/"
class="icon"
target="_blank"
rel="noopener noreferrer"
aria-label="La page LinkedIn de notre entreprise"
>
<span><?php esc_html_e( 'LinkedIn', 'Divi' ); ?></span>
</a>
</li>
Il restait ensuite à indiquer à Divi quel glyphe de sa police d’icônes devait être utilisé. Pour LinkedIn :
.et-social-linkedin a.icon:before {
content: '\e09d';
}
C’est d’ailleurs toujours la méthode documentée par Elegant Themes pour ajouter LinkedIn au header ou au footer classique de Divi.
Le problème : il fallait désactiver Icônes Dynamiques
Divi possède une optimisation appelée Icônes Dynamiques. Elle se trouve dans Divi → Theme Options → General → Performance → .Icônes Dynamiques
Lorsqu’elle est activée, Divi divise sa police d’icônes en plusieurs sous-ensembles et ne charge que ceux nécessaires aux modules et fonctionnalités réellement utilisés sur la page. C’est une très bonne optimisation.
Mais notre LinkedIn ajouté manuellement dans social_icons.php pose problème : Divi ne peut pas déterminer de la même manière qu’un module du Builder que nous avons besoin du glyphe \e09d.
Elegant Themes demande donc explicitement de désactiver Icônes Dynamiques lorsqu’on utilise cette ancienne méthode. Cela revient à perdre une partie du bénéfice du chargement dynamique des icônes uniquement pour pouvoir afficher notre LinkedIn personnalisé. Et c’est précisément ici que WordPress 7.1 devient intéressant.
WordPress 7.1 introduit une véritable API pour les icônes SVG
WordPress 7.0 avait introduit un bloc Icône et une collection d’icônes utilisée par Gutenberg. Avec WordPress 7.1, ce système devient une API publique extensible. Un thème ou un plugin peut désormais :
- créer une collection d’icônes ;
- enregistrer ses propres fichiers SVG ;
- afficher une icône en PHP ;
- retrouver ces mêmes icônes dans le bloc Icône de Gutenberg.
Les principales fonctions qui nous intéressent sont wp_register_icon_collection(), wp_register_icon() et wp_get_icon(). Pour notre LinkedIn, nous pouvons donc complètement nous passer de la police d’icônes Divi.
Étape 1 : télécharger uniquement l’icône LinkedIn en SVG
Nous allons utiliser l’icône LinkedIn In de Font Awesome Free.
Il n’est pas nécessaire d’installer Font Awesome, son plugin WordPress, son CSS, son JavaScript ou sa webfont. Nous avons seulement besoin du fichier linkedin-in.svg, il peut être téléchargé directement depuis la page officielle LinkedIn In de Font Awesome.
Les icônes SVG distribuées dans Font Awesome Free sont placées sous licence CC BY 4.0. Les icônes de marques restent naturellement les marques de leurs propriétaires respectifs et doivent être utilisées pour représenter le service concerné.
Une fois téléchargé, je place le fichier dans mon thème enfant :
mon-theme-enfant/
├── functions.php
├── includes/
│ └── social_icons.php
└── icons/
└── linkedin-in.svg
Il n’est pas nécessaire de téléverser ce SVG dans la médiathèque WordPress, il fait parti des ressources du thème enfant.
Étape 2 : créer notre collection d’icônes WordPress
Dans le fichier functions.php du thème enfant, ajoutons :
/**
* Collection d'icônes GT.
*/
function gt_register_icons() {
wp_register_icon_collection(
'gt',
array(
'label' => 'GT Theme',
'description' => 'Icônes utilisées par le thème enfant GT.',
)
);
wp_register_icon(
'gt/linkedin',
array(
'label' => 'LinkedIn',
'file_path' => get_stylesheet_directory() . '/icons/linkedin-in.svg',
)
);
}
add_action( 'init', 'gt_register_icons' );
Nous créons d’abord une collection gt, puis nous enregistrons l’icône gt/linkedin.
Pourquoi le thème enfant reste toujours aussi important avec Divi 5
Avec l’arrivée dans WordPress de nouveaux outils de personnalisation, notamment les menus Design et Polices dans Apparence, on peut facilement se demander si le thème enfant est encore réellement utile.
Pour de simples ajustements visuels, il est vrai que WordPress permet aujourd’hui de faire beaucoup plus de choses directement depuis l’administration, sans modifier les fichiers du thème.
Mais dès que l’on souhaite intervenir sur le PHP, modifier un template du thème, ajouter des fonctions personnalisées ou conserver des fichiers qui doivent survivre aux mises à jour du thème parent, le thème enfant reste indispensable.
Notre exemple en est une parfaite illustration : social_icons.php, les fonctions ajoutées dans functions.php et notre fichier SVG font partie de la personnalisation du site et doivent rester totalement indépendants des futures mises à jour de Divi.
Étape 3 : afficher notre SVG dans social_icons.php
Nous pouvons maintenant remplacer l’ancien LinkedIn reposant sur la police Divi :
<li class="et-social-icon et-social-linkedin">
<a
href="https://www.linkedin.com/company/votre-entreprise/"
class="icon"
target="_blank"
rel="noopener noreferrer"
aria-label="La page LinkedIn de notre entreprise"
>
<span><?php esc_html_e( 'LinkedIn', 'Divi' ); ?></span>
</a>
</li>
Par :
<li class="et-social-icon et-social-linkedin">
<a
href="https://www.linkedin.com/company/votre-entreprise/"
class="gt-social-link"
target="_blank"
rel="noopener noreferrer"
aria-label="La page LinkedIn de notre entreprise"
>
<?php
echo wp_get_icon(
'gt/linkedin',
array(
'size' => 24,
'class' => 'gt-social-icon',
)
);
?>
</a>
</li>
Cette fois, nous n’avons plus besoin de la classe class="icon" ni de la règle CSS content: '\e09d';
WordPress récupère directement notre SVG enregistré sous le nom gt/linkedin et l’insère dans le HTML. wp_get_icon() renvoie en effet directement le markup SVG d’une icône enregistrée. Le navigateur reçoit donc quelque chose du type :
<a href="...">
<svg>
<path d="..."></path>
</svg>
</a>
Nous n’avons pas besoin de charger un fichier image supplémentaire dans le navigateur pour cette icône, le SVG est inline dans le HTML.
Étape 4 : gérer la couleur avec currentColor
Pour que notre SVG prenne la couleur appliquée au lien, ajoutons :
.et-social-icons .gt-social-link {
display: flex;
align-items: center;
justify-content: center;
}
.et-social-icons .gt-social-icon {
fill: currentColor;
}
Le currentColor indique au SVG d’utiliser la valeur CSS de la propriété color de son élément ou de son parent. On peut donc ensuite faire par exemple :
.et-social-linkedin .gt-social-link {
color: #ffffff;
}
et notre SVG devient blanc ou pour reprendre la couleur LinkedIn au survol :
.et-social-linkedin .gt-social-link:hover {
color: #0a66c2;
}
Cette règle fill: currentColor est particulièrement importante avec wp_get_icon(), car contrairement au rendu React des icônes WordPress, la fonction PHP n’ajoute pas elle-même fill="currentColor" sur le <svg>. WordPress recommande donc d’appliquer cette propriété via une classe CSS lorsque l’on utilise wp_get_icon() directement.
Nous pouvons maintenant réactiver Icônes Dynamiques
Notre LinkedIn ne dépend plus du tout du glyphe \e09d' de la police d’icônes Elegant Themes. Si c’était la seule raison pour laquelle Icônes Dynamiques avait été désactivé, nous pouvons retourner dans Divi → Theme Options → General → Performance et réactiver Icônes Dynamiques
Divi pourra à nouveau charger ses propres sous-ensembles d’icônes uniquement lorsqu’ils sont nécessaires. Attention toutefois, si votre thème enfant utilise ailleurs des codes de la police Divi ou d’autres icônes Divi ajoutées manuellement, il faudra vérifier ces utilisations avant de réactiver l’option. Notre nouvelle icône LinkedIn, elle, n’en dépend plus.
Une icône SVG également nettoyée par WordPress
L’intérêt de l’API WordPress 7.1 n’est pas uniquement lié aux performances. WordPress ne prend pas le contenu SVG enregistré pour le restituer aveuglément : les SVG enregistrés dans l’Icon Registry passent par un processus de sanitisation reposant sur une liste d’éléments volontairement très restrictive.
Dans WordPress 7.1, celle-ci autorise notamment les éléments <svg>, <path> et <polygon>, mais reste encore limitée. Les SVG utilisant des constructions plus complexes ou certaines icônes basées sur stroke peuvent ainsi perdre une partie de leur rendu.
C’est aussi ce qui rend une icône Font Awesome comme LinkedIn particulièrement adaptée à cette API : son dessin repose sur des formes simples. Cela ne signifie pas pour autant que n’importe quel logo ou illustration SVG complexe peut être transformé en icône WordPress. L’Icon API est avant tout destinée aux pictogrammes et icônes simples.
Notre icône LinkedIn apparaît également dans Gutenberg
C’est l’un des aspects les plus intéressants de cette nouvelle API. Notre appel à wp_register_icon_collection( 'gt', ... ); ne sert pas uniquement à wp_get_icon().
Dans WordPress 7.1, le bloc Icône de Gutenberg utilise le même registre. Lorsque nous ajoutons un bloc Icône, le sélecteur peut désormais afficher les différentes collections d’icônes enregistrées.ns. Notre collection GT Theme apparaît donc aux côtés de celles proposées par WordPress, avec notamment notre icône LinkedIn.
Nous n’avons ainsi qu’une seule source, le fichier linkedin-in.svg, enregistré dans WordPress sous le nom gt/linkedin utilisable aussi bien :
- dans un template PHP ;
- dans Gutenberg ;
- dans notre thème ;
- ou dans n’importe quel autre code utilisant l’API WordPress.
C’est nettement plus intéressant qu’un simple fichier SVG ajouté spécifiquement pour le header.
Utiliser la même icône dans Divi 5 avec un shortcode
Divi 5 ne propose pas encore directement notre collection gt dans son sélecteur d’icônes. Nous pouvons néanmoins créer un petit shortcode qui donne accès à wp_get_icon() depuis le Builder.
Ajoutons dans functions.php :
/**
* Shortcode permettant d'utiliser les icônes
* enregistrées avec l'API WordPress.
*
* Exemple :
* [wp_icon name="gt/linkedin" size="24"]
*/
function gt_wp_icon_shortcode( $atts ) {
if ( ! function_exists( 'wp_get_icon' ) ) {
return '';
}
$atts = shortcode_atts(
array(
'name' => 'gt/linkedin',
'size' => 24,
'class' => '',
'label' => '',
),
$atts,
'wp_icon'
);
$classes = array_filter(
array_map(
'sanitize_html_class',
preg_split( '/\s+/', $atts['class'] )
)
);
return wp_get_icon(
sanitize_text_field( $atts['name'] ),
array(
'size' => absint( $atts['size'] ),
'class' => implode( ' ', $classes ),
'label' => sanitize_text_field( $atts['label'] ),
)
);
}
add_shortcode( 'wp_icon', 'gt_wp_icon_shortcode' );
Nous pouvons maintenant ajouter dans un module Code de Divi 5 :
[wp_icon name="gt/linkedin" size="32" class="gt-inline-icon"]
Le module Code de Divi 5 prend officiellement en charge les shortcodes WordPress. Puis :
.gt-inline-icon {
fill: currentColor;
vertical-align: middle;
}
Nous pouvons changer la taille sans créer plusieurs SVG.
[wp_icon name="gt/linkedin" size="20"]
ou :
[wp_icon name="gt/linkedin" size="48"]
Et l’accessibilité ?
wp_get_icon() gère également ce point. Dans notre en-tête, le lien possède déjà l’attribut aria-label="La page LinkedIn de notre entreprise".
Nous n’avons donc volontairement pas donné de label à wp_get_icon(). Dans ce cas, WordPress considère le SVG comme décoratif et lui ajoute automatiquement les attributs nécessaires pour qu’il ne soit pas annoncé une seconde fois par les technologies d’assistance. À l’inverse, si une icône devait transmettre elle-même une information, nous pourrions écrire :
echo wp_get_icon(
'gt/linkedin',
array(
'size' => 24,
'label' => 'LinkedIn',
)
);
WordPress lui attribuerait alors un rôle d’image et son libellé accessible.
Pourquoi cette petite nouveauté de WordPress 7.1 me plaît
Ajouter LinkedIn dans l’en-tête de Divi n’est évidemment pas une révolution. Mais ce petit cas pratique montre bien l’intérêt de la nouvelle API. Avant, nous avions :
social_icons.php
↓
classe .icon
↓
pseudo-élément ::before
↓
code \e09d
↓
police d'icônes Divi
↓
Icônes Dynamiques désactivé
Avec WordPress 7.1 :
linkedin-in.svg
↓
wp_register_icon()
↓
gt/linkedin
↓
wp_get_icon()
↓
SVG inline
Et la même icône devient en même temps accessible à Gutenberg. C’est une approche beaucoup plus moderne, une icône est désormais une véritable ressource enregistrée auprès de WordPress, plutôt qu’un caractère caché dans une police. Dans notre exemple, nous n’avons enregistré qu’un LinkedIn. Mais rien ne nous empêche demain d’ajouter :
gt/facebook
gt/instagram
gt/envelope
gt/phone
gt/location
gt/check
gt/arrow-right
et de constituer progressivement une petite bibliothèque d’icônes correspondant exactement aux besoins du site. Sans installer une bibliothèque entière uniquement pour utiliser quelques pictogrammes. Et surtout, pour cette personnalisation précise de Divi, nous pouvons enfin laisser Icônes Dynamiques faire son travail.
