Menus et CSS additionnel dans un site WordPress FSE

Alors qu’avec WordPress 5.8, l’édition complète du site n’en était qu’à ses balbutiements. Avec la version 5.9 et le thème par défaut Twenty Twenty-Two, nous sommes entrés dans le vif du sujet. Maintenant, le paramétrage des menus se fait via l’éditeur de site. Vous êtes nostalgique des menus classiques et du CSS additionnel ?

Alors, sachez que l’outil de personnalisation de WordPress, en anglais le Customizer, n’a pas été supprimé, il a simplement été masqué. 😉​

Trêve de bavardage, passons à l’action. ⚙️

Découvrez comment :

• Afficher l’outil de personnalisation pour le CSS additionnel
• Réactiver les menus classiques

Retrouver le CSS additionnel et le customizer dans un site WordPress FSE

Vous aimeriez bien ajouter du CSS additionnel dans votre site WordPress comme vous en aviez l’habitude ? Je vous comprends, perso, ça me manque aussi ! 😉

Afficher l’outil de personnalisation pour le CSS additionnel via URL

Pour faire apparaitre l’outil de personnalisation de WordPress, les menus classiques et bien entendu, la possibilité d’écrire du CSS additionnel sans modifier les fichiers de votre site, c’est simple.

Lorsque vous êtes dans votre tableau de bord WordPress, l’URL est :

https://URLdevotre site/wp-admin//index.php

Remplacez le “/index.php” par “customize.php” et hop, vous pouvez saisir votre CSS.

Ajouter l’outil de personnalisation pour le CSS additionnel via du code

Devoir saisir l’URL à chaque fois est un peu relou si l’on écrit souvent du CSS.

Alors, pour faire réapparaitre l’outil de personnalisation avec le CSS additionnel dans le thème, direction le fichier functions.php de votre thème.

Ajoutez-y le code ci-dessous et enregistrez.

add_action(
    'customize_register',
    function ( $manager ) {
    },
    10,
    1 );

C’est tout !

“Personnaliser” est réapparu et il suffit de cliquer dessus pour accéder à l’identité du site, le réglage de la page d’accueil et le CSS additionnel.

Ajouter l’outil de personnalisation pour le CSS additionnel via une extension

Si vous avez peur de mettre le nez dans les fichiers du thème, sachez qu’il existe une extension pour inscrire ce code dans le functions.php.

Il s’agit de l’extension Add Customizer Back For Block Themes.

Comme à l’accoutumée, allez dans Extensions/ajouter, tapez le mot clé “Add Customizer Back For Block Themes”, installez et activez l’extension.

Vous n’avez rien à faire, elle ajoute le code dès son activation. 😉

Retrouver les menus classiques dans un site WordPress avec l’édition complète du site

En fait, je me suis posée la question lorsque j’ai vu que certains thèmes référencés comme compatibles avec l’édition complète du site dans le répertoire des thèmes de WordPress contenaient toujours l’accès au menu classique.

Ici, je veux parler, par exemple, des thèmes VW Bakery Blocks, FSE Study Lite, Medicity, Raft ou bien encore des différents thèmes Gutenify.

Je suis donc allée jeter un coup d’œil au code contenu dans le functions.php d’un de ces thèmes et l’ai comparé à celui de Twenty Twenty-Two.

Eh bien, j’ai trouvé !

Pour retrouver le menu classique dans les options de personnalisation de votre tableau de bord… et surtout qu’il y reste, il faut juste saisir du code dans le fichier functions.php de votre thème Full Site Editing.

Vous trouverez le code pour le thème Twenty Twenty-Two ci-dessous.

// Register nav menus.
		register_nav_menus(
			array(
				'primary' => __( 'Primary Navigation', 'twentytwentytwo' ),
			)
		);

⚠️​ N’oubliez pas de remplacer twentytwentytwo par le nom de votre thème en reprenant exactement le même nom indiqué pour le dossier de votre thème.

Et voilà ce que ça donne. 😉

Voyons maintenant si tout fonctionne correctement. 😉

Test menu de navigation/menu classique dans l’éditeur de site complet (FSE)

Pour le test, j’ai créé 3 pages : Page 1, Page 2 et Page 3 et supprimé la page d’exemple du thème Twenty Twenty-Two.

Pour rappel, afin de créer/modifier un menu avec l’édition complète du site, il faut passer soit par Apparence/Éditeur à partir du tableau de bord WordPress, soit via “Modifier le site en haut de la page d’accueil ou encore via Thèmes/personnaliser.

Ensuite, il convient de cliquer sur le menu de navigation qui s’affiche en haut de l’en-tête du site Web.

💡 Je vous conseille d’afficher l’arborescence des blocs en cliquant sur le “hamburger” en haut, c’est plus pratique.

Les 3 pages créées s’affichent dans le menu et on s’aperçoit que, dans l’édition du site, le menu par défaut est défini avec le bloc “Liste des pages”.

À présent, je supprime le bloc “liste des pages” afin de créer de toutes pièces un “menu classique” et voir s’il est bien pris en compte.

Puis, je crée un menu classique en passant par Apparence/Menus.

Ensuite, je retourne sur mon site et je clique sur “Modifier le site”. Pour l’instant, il n’y a toujours pas de menu. Alors, je clique sur le bloc “Navigation”, puis sur “Sélectionner un menu”.

Vous pouvez constater qu’un nouveau choix de Menu est apparu : “Classic Menus” et aussi “Menu classique” puisque c’est le nom que j’ai donné au menu que j’ai créé.

Il suffit à présent de cliquer sur “Menu classique”.

Tout a bien fonctionné. Mon menu classique est opérationnel et présent dans l’arborescence de l’édition du site. 🎯

Réflexion finale sur le menu classique et le CSS additionnel dans un thème basé sur les blocs

Vous aviez envie de retrouver votre menu classique et la possibilité de saisir votre CSS additionnel dans votre thème basé sur les blocs, c’est chose faite.

Profitez quand même de l’édition complète du site (Full Site Editing) même si elle est encore en version Bêta. C’est l’avenir de WordPress !

Si ces astuces vous ont été utiles, n’hésitez pas à me laisser un petit commentaire…​