WordPress: Utiliser Font-Awesome dans les menus

Pour ce thème, j’utilise Font-awesome pour afficher les petits icônes du site, plutôt que des images. Les icônes du menu «Social», par exemple, en font partie. Intégrer les styles d’une police de caractères du type Font-Awaseome nécessite très peu de modification, et permet ensuite de tout configurer via l’interface d’administration

Etape 1: Charger la police de caractères

La première chose à faire est de charger la feuille de styles qui va gérer la police de caractères. Plusieurs méthodes sont possibles.

  • Si vous manipulez les fichiers de votre thème, directement avec l’interface de WordPress, veillez à garder une copie de ce fichier quelque part. Si vous faîtes une erreur (faute de frappe par exemple), vous n’aurez plus accès à votre site, ni à l’interface d’administration. Vous devrez récupérer la version précédente du fichier modifié, via FTP.

La plus simple est d’ouvrir la feuille de styles du thème (Apparence > Editeur) et de placer la ligne suivante en début, ou en fin de fichier.

@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"

Fontawesome_css ( css )

Une autre méthode consiste à modifier le fichier functions.php du thème. Dans ce fichier, il faut repérer la fonction qui charge les feuilles de styles. En général, cette fonction s’occupe au minimum de la feuille de style du thème style.css.
Il faut donc, dans le fichier functions.php, repérer une séquence du type get_stylesheet_uri, ou style.css.
Une fois cette fonction repérée, il faut y ajouter la ligne de code suivant

wp_enqueue_style( 'fontawesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css', array(), '4.5.0' );

Fontawesome_enqueue ( php )

Si la fonction n’existe, pas, créer la simplement, avec les lignes suivantes:

if ( ! function_exists( 'mon_theme_scripts' ) ) :

	function mon_theme_scripts() {
		// Theme stylesheet.
		wp_enqueue_style( 'mon-theme-style', get_stylesheet_uri() );
		
		// font Awesome loading
		wp_enqueue_style( 'fontawesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css', array(), '4.5.0' );
	}
	add_action( 'wp_enqueue_scripts', 'mon_theme_scripts' );
endif;

Fontawesome: add loading script function ( php )

Une fois cette opération effectuée, la police se charge automatiquement, lors de l’affichage des pages.

Etape 2: Modifier les menus

Dans l’interface d’administration, éditez le menu ( Apparence > Menu ), et en y ajoutant les classes correspondant aux caractères que vous souhaitez ajouter. Il faut respecter la syntaxe de la police de caractères:

Ajouter une classe dans le menu
Ajouter une classe dans le menu

Si le champ Classe n’apparaît pas, vous devez le faire apparaître, via le menu Aide.

Etape 3: Ajouter une fonction au thème

Avec les modifications précédentes, le menu s’affichera de façon suivante:

Affiche du menu sans fonction
Affiche du menu sans fonction

Le code généré par la fonction wp_nav_menu est le suivant:

<ul id="menu-top" class="social-menu">
	<li id="menu-item-5099" class="fa fa-envelope menu-item menu-item-5099">
		<a href="http://localhost/wp440/contact">Contact me</a>
	</li>
	<li id="menu-item-5100" class="fa fa-rss menu-item menu-item-5100">
		<a href="http://feeds.feedburner.com/EmmanuelGeorjon">Get news with RSS feeds</a>
	</li>
	<li id="menu-item-5101" class="fa fa-twitter menu-item menu-item-5101">
		<a href="http://twitter.com/emmanuelgeorjon/">Follow me on Twitter</a>
	</li>
	<li id="menu-item-5102" class="fa fa-linkedin menu-item menu-item-5102">
		<a href="http://fr.linkedin.com/in/emmanuelgeorjon">See my profile in LinkedIn</a>
	</li>
</ul>

Fontawesome: code html sans fonction ( html )

Esthétiquement, tout va bien. Techniquement, le code a un inconvénient: Nous ne pouvons pas différencier l’affichage de l’icône, et de l’intitulé. Cela veut dire que l’on ne peut pas, par exemple, cacher l’intitulé, sans faire disparaître l’icône.
Il faut donc mettre en forme ce code, pour gérer correctement l’insertion des symbôles. Nous disposons pour cela du filtre wp_nav_menu, situé à la fin de la fonction wp_nav_menu qui génère les menus. L’idée est d’intercepter le code généré, et de le « transformer ».
Le code est le suivant (à placer dans le fichier functions.php)

if ( ! function_exists( 'mon_theme_fontawesome_menu' ) ) :

	/**
	 * mon_theme_fontawesome_menu
	 *
	 */
	function mon_theme_fontawesome_menu( $nav ) {
		$menu = preg_replace_callback(
			'/<li id="([^"]+)" (class="fa (fa-[^ ]+) [^"]+)([^>]+)>(<a[^>]+>)([^<]+)/i',
			array( &$this, 'mon_theme_fontawesome_replace' ),
			$nav
		);
		return $menu;
	} // End of function mon_theme_fontawesome_menu

	/**
	 * fontawesome_replace
	 *
	 */
	function mon_theme_fontawesome_replace( $a ) {
		list($tmp1, $id, $classes, $icons, $end_of_li, $link, $link_text) = $a;
		return '<li id="'.$id.'" '.str_replace( 'fa ', '', str_replace( 'fa-', '', $classes )).$end_of_li.'>'.
			$link.
			'<i class="fa '.trim($icons).'">'.'</i><span class="menu-text"> '.$link_text.'</span>';
	} // End of function mon_theme_fontawesome_replace

	add_filter( 'wp_nav_menu', 'mon_theme_fontawesome_menu' ) );
endif;

Fontawesome: fonction de modification du menu ( php )

Ré-essayons maintenant. L’affichage est le même

Affichage du menu avec la fonction de modification du menu
Affichage du menu avec la fonction de modification du menu

Mais le code est assez différent:

<ul id="menu-top" class="social-menu">
	<li id="menu-item-5099" class="envelope menu-item menu-item-5099">
		<a href="http://localhost/wp440/contact">
			<i class="fa fa-envelope"></i>
			<span class="menu-text"> Contact me</span>
		</a>
	</li>
	<li id="menu-item-5100" class="rss menu-item menu-item-5100">
		<a href="http://feeds.feedburner.com/EmmanuelGeorjon">
			<i class="fa fa-rss"></i>
			<span class="menu-text"> Get news with RSS feeds</span>
		</a>
	</li>
	<li id="menu-item-5101" class="twitter menu-item menu-item-5101">
		<a href="http://twitter.com/emmanuelgeorjon/">
			<i class="fa fa-twitter"></i>
			<span class="menu-text"> Follow me on Twitter</span>
		</a>
	</li>
	<li id="menu-item-5102" class="linkedin menu-item menu-item-5102">
		<a href="http://fr.linkedin.com/in/emmanuelgeorjon">
			<i class="fa fa-linkedin"></i>
			<span class="menu-text"> See my profile in LinkedIn</span>
		</a>
	</li>
</ul>

Fontawesome: code html avec fonction ( html )

Ce code HTML va nous permettre de mieux formatter notre menu, en choisissant de faire apparaître, ou pas, l’intitulé des menus, en utilisant une couleur différente entre le texte, et le symbôle, …

Affichage du menu final
Affichage du menu final

Conclusion

L’avantage de la méthode décrite, est qu’une fois le morceau de code PHP mis en place, nous n’avons plus à toucher au code. Nous pouvons ajouter, supprimer, modifier les symbôles via l’interface d’administration.
Attention toutefois, à vérifier de temps en temps, que la syntaxe de la police de caractères ne change pas (c’est arrivé lors du passage de la version 3.x à la version 4.x de Fontawesome). Il faudrait dans ce cas, modifier l’expression régulière utilisée dans la fonction .

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *