Menus et CSS additionnel dans un site WordPress FSE

Menus et CSS additionnel dans 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.

accès CSS additionnel dans un thème Full Site Editing

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.

personnaliser theme FSE

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.

customizer back for block theme extension Menus CSS additionnel

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. 😉

Apparence Menus theme FSE

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”.

modifier menu via éditeur de site FSE

À 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.

bloc navigation édition du site sans menu
bloc navigation édition du site sans menu

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

création menu classique

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”.

menu classique dans bloc navigation fse

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

Apparition menu classique dans bloc navigation FSE

Le mot de la fin

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… 💬​

Hello, moi, c'est Christine 👋. Je suis créatrice et optimisatrice de sites Web et rédactrice Web SEO. J’adore parcourir le web pour dénicher des astuces, fonctionnalités et outils gratuits qui facilitent la création numérique. Sur ce blog, je vous partage mes découvertes et espère qu’elles pourront vous être utiles.
5 2 votes
Évaluation de l'article
S’abonner
Notifier de
guest
2 Commentaires
le plus récent
le plus ancien le plus populaire
Commentaires en ligne
Afficher tous les commentaires
Retour en haut
2
0
J'aimerai bien avoir votre avis sur cet article 😉x