Introduction

WordPress est le système de gestion de contenu (CMS) le plus répandu au monde, alimentant tous types de sites web: des blogs personnels aux sites d'entreprises en passant par les sites gouvernementaux de grande envergure. À l'instar d'autres systèmes de gestion de contenu, il propose une structure adaptable pour concevoir, administrer et diffuser du contenu digital sans avoir besoin de compétences techniques poussées.

Les icônes jouent un rôle essentiel dans l'amélioration de l'intuitivité de la navigation et de la lisibilité du contenu à travers les systèmes de gestion de contenu (CMS). Ils optimisent l'ergonomie, augmentent l'attrait visuel et véhiculent des informations en un instant. Même si WordPress ne dispose pas encore de bloc d'icônes intégré, différents plugins sont disponibles pour pallier ce manque. Le Icon Block plugin est l'un des plus polyvalents.

Ce plugin est simple d'utilisation dès l'installation—il comprend des icônes par défaut issues de la bibliothèque d'icônes de WordPress, vous donne la possibilité d'ajouter vos propres SVGs et propose des options pour la rotation, la couleur, l'alignement et bien plus. Ce guide vous expliquera comment concevoir votre propre collection d'icônes sur mesure, l'associer à votre thème et charger même des icônes dynamiquement pour des projets WordPress évolutifs et faciles à maintenir.

 

Image de l'interface de la collection d'icônes de WordPress. Les icônes sont disposées en grille et comprennent des catégories telles que Commodités, Lit, Affaires, Liste de contrôle, Concierge, Contact, Éducation, Facebook, Installations, Fitness, Chapeau de diplomation, Monument, LinkedIn, Emplacement, Carte des offres, Services de navette, Twitter, Parapluie. Valeurs et WiFi. Sur le côté gauche, une barre de recherche et des options de filtrage sont affichées.
La bibliothèque d'icônes WordPress fournit aux concepteurs et aux éditeurs de contenu un ensemble cohérent de symboles visuels, tels que des icônes représentant des cartes, des services, le fitness et les réseaux sociaux, qui peuvent être redimensionnés, personnalisés et réutilisés sur l'ensemble d'un site.

Construisez votre propre bibliothèque d'icônes

Les icônes standards de WordPress peuvent être pratiques, mais généralement, il serait préférable d'ajouter les vôtres. Pour une utilisation ponctuelle, il est possible d'insérer le code SVG directement dans l'option Icône sur mesure. Toutefois, si vous requérez des icônes sur diverses pages, l'élaboration d'une bibliothèque d'icônes sur mesure s'avère plus bénéfique.

Consultez les étapes ci-après pour constituer votre propre collection d'icônes :

  1. Dans votre thème, créez un fichier registerIcons.js et insérez le code ci-dessous.
  2. Placez le fichier JS dans la file d'attente de votre fichier functions.php.
  3. Incorporez un fichier JSON au thème pour une gestion dynamique des icônes (optionnel). 

Phase 1 : Générer le fichier registerIcons.js et intégrer le code ci-dessous

// Add custom icons to the Icon Block.
wp.domReady( () => {

	const { __ } = wp.i18n;
	const { addFilter } = wp.hooks;

	function addCustomIcons( icons ) {

		const customIcons = [
			{
				isDefault: true,
				name: 'bookmark',
				title: __( 'Bookmark', 'icon-block' ),
				icon: '<your svg code>',
				categories: [ 'category-one' ],
			},
			{
				name: 'cloud',
				title: __( 'Cloud', 'icon-block' ),
				icon: '<your svg code>',
				categories: [ 'category-two' ],
			},
		];

		const customIconCategories = [
			{
				name: 'category-one',
				title: __( 'Category One', 'your-theme' ),
			},
			{
				name: 'category-two',
				title: __( 'Category Two', 'your-theme' ),
			},
		];

		const customIconType = [
			{
				isDefault: true,
				type: 'example-icons',
				title: __( 'Example Icons', 'your-theme' ),
				icons: customIcons,
				categories: customIconCategories,
			},
		];

		// append custom icons to WordPress icons
		const allIcons = [].concat( icons, customIconType );

		return allIcons;
	}

	addFilter(
		'iconBlock.icons',
		'your-theme/example-custom-icons',
		addCustomIcons
	);
});

Phase 2 : Ajoutez le fichier JS à la file d'attente dans votre fichier functions.php

function theme_enqueue_scripts() {
    wp_enqueue_script(
        'theme-script', // Handle
        get_template_directory_uri() . '/assets/js/registerIcons.js', // File path
        '1.0.0', // Version (optional)
        true // Load in footer (true) or head (false)
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

Les procédures susmentionnées introduiraient un nouveau lot d'icônes nommé Icônes d'exemple, ainsi que deux catégories dans leur structure. En plus des icônes WordPress, ceux-ci seraient proposés également. Si vous souhaitez uniquement les icônes sur mesure, il est possible d'éviter concat et de renvoyer directement customIconType au lieu de allIcons.

Chargez les icônes de manière dynamique à partir de vos fichiers de thème

Afin de faciliter son utilisation dans divers projets, nous avons conçu un petit module qui collecte les icônes intégrées dans un fichier JSON pour rendre le processus plus dynamique et fluide.

Voici la structure du module complémentaire :

1) Insérez le code ci-dessous dans le fichier PHP de votre extension
 

/**
 * Enqueue the editor script and pass custom icons from JSON.
 */
function theme_custom_icons_script(): void {
	// Path to the custom-icons.json file in the active theme directory.
	$json_path = get_stylesheet_directory() . '/custom-icons.json';
	$json_data = [];

	if ( file_exists( $json_path ) ) {
		$json_content = file_get_contents( $json_path );
		$json_data = json_decode( $json_content, true );
	}

	wp_enqueue_script(
		'custom-icon-loader-editor',
		plugin_dir_url( __FILE__ ) . 'build/editor.js',
		['wp-blocks', 'wp-element', 'wp-hooks', 'wp-i18n'],
		1,
		true
	);

	// Pass the decoded JSON icons to JavaScript as a global variable.
	wp_localize_script('custom-icon-loader-editor', 'CustomIcons', [
		'icons' => $json_data
	]);
}

add_action( 'enqueue_block_editor_assets', 'theme_custom_icons_script' );

2. Générer le fichier editor.js

// Add custom icons to the Icon Block.
wp.domReady( () => {
	const { __ } = wp.i18n;
	const { addFilter } = wp.hooks;

	function addCustomIcons( icons ) {
		const customIcons = (CustomIcons && Array.isArray(CustomIcons.icons)) ? CustomIcons.icons : [];

		// Create Icons array from localized custom-icons.json file.
		const formattedIcons = customIcons.map(icon => ({
			isDefault: icon.isDefault || false,
			name: icon.name,
			title: icon.title,
			icon: icon.svg,
			categories: icon.categories
		}));
		// Create Icon categories array from localized custom-icons.json file.
		const customIconCategories = [
			...new Set(CustomIcons.icons.flatMap(item => item.categories))
		].map(category => ({
			name: category,
			title: category[0].toUpperCase() + category.slice(1)
		}));

		const customIconType = [
			{
				isDefault: true,
				type: 'custom-icons',
				title: 'Custom Icons',
				icons: formattedIcons,
				categories: customIconCategories,
			},
		];

		return [].concat( icons, customIconType );
	}

	addFilter(
		'iconBlock.icons',
		'custom/custom-icons',
		addCustomIcons
	);
} );

3. Générer un fichier custom-icons.json dans votre thème actif en suivant la structure ci-dessous

[
	{
		"isDefault": true,
		"name": "mail",
		"title": "Mail",
		"svg": "<your svg code>",
		"categories": [ "category-1" ]
	},
	{
		"isDefault": true,
		"name": "search",
		"title": "Search",
		"svg": "<your svg code>",
		"categories": [ "category-2" ]
	},
]

Et voilà ! Vous disposez désormais d'un système d'icônes dynamique qui peut être mis à jour simplement en modifiant le fichier JSON.

Exemple en Action

1. Page d’orientation du Collège Loyalist

Sur la page d’orientation du Collège Loyalist (incluse dans la section « La vie à Loyalist »), des icônes SVG sur mesure sont judicieusement exploitées, afin d'optimiser la navigation visuelle. Par exemple, des symboles sont disposés à proximité des en-têtes « Programme d'orientation », « Introduction aux services aux étudiants » et « Événements à venir », fournissant des repères visuels qui assistent le lecteur dans la navigation des événements à venir et des informations générales. Cela aide à maintenir l’intérêt pour la page, mais améliore aussi l'accessibilité en liant des images aux données essentielles.

Page d'accueil du Loyalist College : une série de grandes icônes circulaires colorées représentant le calendrier d'orientation (icône de calendrier), l'introduction aux services pour les étudiants (icône de presse-papiers), les renseignements pour le début du semestre (icône de journal), l'orientation pour les étudiants internationaux (icône de globe) et les événements futurs (icône des masques du théâtre).
Le Collège Loyalist emploie des icônes audacieuses et colorées pour rendre le contenu d'orientation facile à parcourir et divertissant. Les icônes soulignent les besoins essentiels des étudiants—emplacements, services, renseignements sur le semestre, orientation internationale et manifestations—capturant l'enthousiasme du début de la vie universitaire.

 

2. Université de Géorgie – Centre de Formation Continue, Hôtel & page des Commodités

Sur la page des commodités et avantages de l'hôtel de l'Université de Géorgie, nous avons incorporé des illustrations de type icône (par exemple, à proximité de catégories comme « Centre d'affaires », « Salle de fitness sur place » et « Transport gratuit en ville ») afin d'enrichir le contenu textuel et d'améliorer sa clarté. Ces symboles contribuent à la séparation des sections, à mettre en valeur les propositions principales et à conférer une allure épurée et digne d'un hôtel.

Une élégante sélection d'icônes monochromes accompagnées de brèves descriptions textuelles, comprenant des icônes pour le Business Center (symbole wifi), le Centre de fitness sur place (verre à martini avec haltère), les Commodités en chambre (valise). Louez nos bicyclettes (vélos), Navette sans frais (indicateur de point d'arrêt), Localisation idéale (marqueur de carte), Des remises spéciales au club de golf (golf), un accès privilégié au centre des étudiants (haltère) et l'accès saisonnier à la piscine (nageur) sont disponibles.
L'Hôtel de l'Université de Géorgie utilise des icônes monochromes élégantes sur son site web pour orienter les visiteurs vers ses équipements. Chaque symbole—wifi, fitness, navette, vélos, golf, piscine et autres—transmet les services disponibles d'un simple regard, soulignant le caractère accueillant de la marque.

Pourquoi les icônes sont-elles si efficaces ?

Dans les deux projets, l'expérience utilisateur est nettement améliorée grâce à l'utilisation d'icônes. Ils instaurent une hiérarchie visuelle distincte, facilitant la navigation rapide du contenu pour les utilisateurs. Au Loyalist College, les symboles joyeux et dynamiques capturent l'ambiance divertissante de la semaine d'intégration, alors qu'à l'University of Georgia Hotel, les symboles raffinés correspondent au style professionnel d'accueil du lieu, consolidant l'identité propre à chaque marque. Ces icônes, en complément du texte, améliorent aussi l'accessibilité en rendant la compréhension plus aisée pour les lecteurs visuels et en assurant un rendu clair et adaptable via les SVG. Finalement, en conservant une apparence d'icône uniforme sur l'ensemble des éléments, les deux sites web obtiennent un aspect contemporain et homogène qui valorise leur conception générale.

Réflexions finales

Le module Icon Block est un outil performant permettant d'élargir l'éditeur WordPress avec des icônes personnalisables et adaptatives. Il supporte diverses méthodes, telles que la saisie manuelle, l'intégration de thèmes et le chargement dynamique de JSON, ce qui lui confère une capacité d'adaptation à différents scénarios d'application. 

Toutefois, il convient de mentionner certaines limitations :

  • Limitation multisite : Dans le cadre des installations multisites de WordPress, seules les modifications ou ajouts d'icônes sur les pages peuvent être effectués par un super administrateur. Les administrateurs et utilisateurs habituels du site ne sont pas en mesure d'insérer ou de changer les icônes, car cela entraîne une rupture du bloc étant donné qu'il tente d'inclure du HTML (SVG) qui n'est pas permis dans les paramètres multi-sites. Il se pourrait que vous rencontriez une erreur de récupération de bloc lors de l'ouverture de la page.
  • Gestion dynamiquement la collection d'icônes : Les icônes doivent être préenregistrées soit dans le code, soit en JSON. Actuellement, à partir de l'interface d'administration de WordPress, il n'existe pas d'autre méthode pour intégrer des icônes sans apporter des modifications aux fichiers JSON. Il serait idéal de disposer d'une interface utilisateur qui permettrait cela.
  • Problèmes en attente : Consultez l'incident GitHub numéro 36 pour une discussion en cours.

Besoin d’assistance avec votre développement sur Wordpress?

La personnalisation de WordPress dépasse souvent ce que les extensions proposent par défaut. Si vous avez besoin d'expertise pour la création de blocs sur mesure, l'optimisation de votre thème ou l'établissement de systèmes d'icônes progressifs, notre équipe est à votre disposition.

N'hésitez pas à nous joindre pour échanger sur votre projet WordPress et découvrir comment nous pouvons améliorer la performance, la souplesse et l'ergonomie de votre site.

Category
Drupal et développement web
Tags
WordPress
Web Development