Font Awesome Shortcode WordPress

font awesome shortcode wordpress

Introduction

En tant qu'utilisateur de WordPress ou développeur web, vous avez probablement déjà entendu parler de Font Awesome et des shortcodes WordPress. Ces outils sont essentiels pour améliorer l'apparence et la fonctionnalité de vos sites web. Dans cet article complet et professionnel, nous allons explorer en détail comment utiliser Font Awesome avec des shortcodes WordPress pour créer un contenu attractif et performant.

Avant de plonger dans les détails techniques, il est important de comprendre pourquoi Font Awesome est si populaire parmi les utilisateurs de WordPress. Font Awesome est une bibliothèque d'icônes vectorielles qui peut être intégrée facilement dans vos projets web. La version actuelle du plugin officiel Font Awesome pour WordPress est la 4.0.0, qui inclut un Icon Chooser visuel, un support pour les Kits v5.x et v6.x, ainsi que des attributs shortcode avancés comme style, role, title, aria-hidden, aria-label et aria-labelledby.

Les shortcodes WordPress permettent de simplifier l'insertion de ces icônes directement dans vos articles ou pages sans avoir à recourir à du code HTML complexe. Cette combinaison puissante vous permettra non seulement d'améliorer l'esthétique de votre site web mais aussi d'optimiser son SEO (Search Engine Optimization). En effet, l'utilisation d'icônes pertinentes peut améliorer l'expérience utilisateur et contribuer à une meilleure indexation par les moteurs de recherche.

Concepts Clés

Qu'est-ce que Font Awesome ?

Font Awesome est une bibliothèque d'icônes vectorielles qui comprend des milliers d'icônes couvrant une gamme variée de sujets tels que les réseaux sociaux, les boutons de navigation, les pictogrammes utiles pour les sites e-commerce et bien plus encore. Par défaut, le plugin officiel charge Font Awesome v5 Free via un CDN Web Font, mais il est configurable pour utiliser des Pro Kits via un API Token.

L'un des avantages principaux de Font Awesome est qu'il utilise des polices vectorielles, ce qui signifie que les icônes restent parfaitement nettes quelle que soit la taille à laquelle elles sont affichées. Cela rend Font Awesome idéal pour les sites web responsives. De plus, avec la version 4.0.0 du plugin, vous bénéficiez d'un support étendu pour les styles Pro comme Light, Thin, Duotone et Sharp de la version 6.

Qu'est-ce qu'un shortcode WordPress ?

Un shortcode WordPress est un snippet de code court et facile à utiliser qui permet d'insérer rapidement du contenu complexe dans vos articles ou pages sans avoir à écrire du code HTML compliqué. Les shortcodes sont particulièrement utiles pour ajouter des éléments tels que des galeries d'images, des formulaires, des vidéos ou, dans notre cas, des icônes Font Awesome.

Avec le plugin Font Awesome officiel, le shortcode de base est simple : [icon name="stroopwafel"]. Par défaut, il utilise le style Solid sans le préfixe fa-. Pour des styles spécifiques, ajoutez un préfixe comme [icon name="stroopwafel" prefix="fa-sharp fa-light"].

Comment utiliser Font Awesome avec des shortcodes WordPress ?

Pour utiliser Font Awesome avec des shortcodes WordPress, vous avez plusieurs options principales. La méthode recommandée est d'installer le plugin officiel Font Awesome version 4.0.0 depuis le répertoire WordPress.

• Installation du plugin officiel : Téléchargez et activez le plugin Font Awesome. Il charge automatiquement les icônes via CDN et active le shortcode [icon]. Utilisez l'Icon Chooser intégré dans l'éditeur Gutenberg ou classique pour rechercher et insérer des icônes automatiquement.
• Shortcodes avancés : Ajoutez des attributs pour personnaliser : [icon name="rocket" prefix="fas" size="2x" class="ma-classe"]. Les attributs incluent class, style, title, aria-hidden, etc., pour l'accessibilité.
• Utilisation HTML alternative : Sans shortcode, utilisez directement qui est supporté nativement par le plugin.
• Créer vos propres shortcodes : Si vous êtes développeur, ajoutez des shortcodes personnalisés dans functions.php pour des besoins spécifiques.
• Générateurs d'icônes : Utilisez l'Icon Chooser du plugin ou visitez fontawesome.com/icons pour copier les noms d'icônes.

Note importante : Les shortcodes ne s'exécutent pas par défaut dans les widgets. Ajoutez add_filter( 'widget_text', 'do_shortcode' ); dans votre functions.php pour les activer.

Installation et Configuration du Plugin Font Awesome

Étapes d'installation

Pour commencer, accédez à votre tableau de bord WordPress, allez dans Extensions > Ajouter, recherchez "Font Awesome" et installez le plugin officiel de FortAwesome (version 4.0.0). Activez-le ensuite.

Une fois activé, le plugin charge Font Awesome v5 Free par défaut via CDN Web Font. Pour les icônes Pro (Light, Thin, Duotone, Sharp v6), créez un Kit Pro sur fontawesome.com, sélectionnez "Pro icons" dans les paramètres du Kit, récupérez votre API Token depuis votre compte Font Awesome et ajoutez-le dans les réglages du plugin WordPress.

Configuration avancée

Dans les paramètres du plugin, vous pouvez choisir la technologie (SVG ou Web Font), activer la compatibilité v4, et configurer les pseudo-éléments si nécessaire. Le plugin détecte automatiquement les conflits de version avec d'autres thèmes ou plugins.

Pour les page builders comme Elementor ou Beaver Builder, le plugin supporte les shortcodes [icon] et les balises dans la plupart des cas.