L’éditeur de blocs WordPress offre continuellement de nouvelles possibilités de personnalisation de site. Dans ce didacticiel, nous verrons comment utiliser des blocs pour créer des menus de site en deux langues et un sélecteur de langue pour permettre à vos visiteurs de changer la langue de votre site.
Vous pouvez en voir une démo ici :
Dans ce guide
- Notes et références
- Méthode
- 1. Configurer des pages et des slugs de page
- 2. Choisir la mise en page de votre menu et du sélecteur de langue
- 3. Créer le sélecteur de langue
- 4. Ajouter un menu de navigation pour vos pages dans la première langue
- 5. Enregistrer votre nouveau menu et le sélecteur de langue
- 6. Menu dans la deuxième langue
- 7. Ajouter vos nouveaux menus aux autres pages
- 8. Ajouter des pages supplémentaires
- Ce sélecteur de langue ne traduira pas vos pages, mais il vous permettra de présenter votre site aux visiteurs en deux langues ou plus. Vous devrez traduire les pages vous-même !
- Ce sélecteur de langue redirigera uniquement les utilisateurs vers la page de démarrage de chaque langue.
- Vous devrez également mettre à jour vos menus si vous ajoutez des pages supplémentaires à votre site.
- La configuration initiale prend un peu de temps, mais une fois qu’elle est terminée, les ajustements et les mises à jour sont rapides.
Ce didacticiel utilise les fonctions suivantes :
- Slugs de page
- Pages parentes et enfants
- Page d’accueil statique
- Bloc de colonnes
- Bloc de paragraphe
- (Facultatif) Images en ligne (disponibles dans la barre d’outils du bloc de paragraphe)
- Bloc de navigation
- Blocs réutilisables
1. Configurer des pages et des slugs de page
2. Choisir la mise en page de votre menu et du sélecteur de langue
3. Créer le sélecteur de langue
4. Ajouter un menu de navigation
5. Enregistrer votre nouveau menu et le sélecteur de langue
6. Menu dans la deuxième langue
7. Ajouter vos nouveaux menus aux autres pages
8. Ajouter des pages supplémentaires
Pour que ce didacticiel fonctionne le plus efficacement possible, nous vous recommandons d’utiliser l’un de nos thèmes compatibles avec l’éditeur de blocs, répertoriés ici.
Accédez à Mon site > Site > Pages. Commencez par créer une page de démarrage pour chaque langue que vous souhaitez avoir sur votre site. Vous n’avez pas besoin d’ajouter beaucoup de contenu à ce stade ; un titre de page suffira pour le moment.
Publiez chaque page pour qu’elle soit mise à jour, puis modifiez le Slug de page de chaque page pour qu’il référence sa langue. Dans cet exemple, la page de démarrage en français est intitulée Accueil et son slug de page est /fr/
:
![Image : affichage d’un titre de page en français « Accueil » et du réglage Slug de page défini sur « fr »](https://en-support.files.wordpress.com/2019/12/frslug.png?w=1024)
Attribuez la page de démarrage dans votre langue préférée en tant que page d’accueil statique de votre site. Cela garantira que les visiteurs qui viennent sur votre site verront d’abord le site dans une langue et pourront passer à l’autre.
Une fois que vous avez toutes les pages de démarrage dont vous avez besoin, créez d’autres pages de contenu pour les différentes langues. Il n’est toujours pas nécessaire d’ajouter du contenu. Vous pouvez publier la page avec un titre uniquement pour l’instant.
Lors de la création de ces pages, attribuez-les en tant que Pages enfants des pages de démarrage de votre langue, à l’aide de la section Attributs de page :
![Image indiquant le titre de page et la section Attributs de page où vous pouvez définir une page parent.](https://en-support.files.wordpress.com/2019/12/parentpagesetting.png?w=1024)
Exemple – Présentation d’une structure de page
![Image : présentation de la structure de pages parentes et enfants.](https://en-support.files.wordpress.com/2020/04/parentchildstructure.png)
Dans Mon site > Site > Pages, cliquez sur le titre de la page de démarrage dans votre langue principale pour l’ouvrir dans l’éditeur WordPress.
Sous le titre de la page dans l’éditeur, ajoutez un bloc de colonnes et choisissez une mise en page à deux colonnes. Si vous changez d’avis sur la mise en page, vous pouvez la modifier dans les réglages du bloc. Consultez le guide Bloc de colonnes pour plus d’informations sur la façon de procéder.
Nous vous suggérons d’utiliser une mise en page avec une colonne plus large que l’autre. La colonne plus étroite contiendra votre sélecteur de langue et la colonne plus large contiendra votre menu.
Définissez le bloc de colonnes sur Grande largeur ou Pleine largeur :
![Image indiquant l’alignement de la largeur pour le bloc de colonnes](https://en-support.files.wordpress.com/2019/12/columnalignment.png?w=1024)
Selon l’emplacement que vous choisissez pour le sélecteur de langue, il existe deux méthodes : vous pouvez saisir le nom des langues ou utiliser des images en ligne pour afficher des drapeaux.
Remarque : nous vous déconseillons d’utiliser des drapeaux pour représenter les langues pour deux raisons :
1. C’est moins accessible pour les visiteurs qui pourraient ne pas voir les images des drapeaux
2. Cela peut être source de confusion selon les drapeaux que vos visiteurs associent à une langue spécifique, tout le monde ne pense pas de la même manière !
Pour plus de clarté, nous vous recommandons d’utiliser des liens de texte (méthode 1 ou 2).
Méthode 1 – Liens de texte dans un bloc de navigation
![Image indiquant le bloc de navigation dans la liste de blocs.](https://en-support.files.wordpress.com/2019/12/navlang1.png)
Vous pouvez ensuite modifier le texte de chaque élément par le nom de sa langue (ou la version raccourcie.) :
![GIF animé : modification du texte de chaque lien dans un bloc de navigation.](https://en-support.files.wordpress.com/2019/12/navlang2.gif)
Méthode 2 – Liens de texte dans un bloc de paragraphe
![Image indiquant la sélection d’un bloc de paragraphe dans la liste de blocs.](https://en-support.files.wordpress.com/2019/12/addparagraph.png?w=1024)
Saisissez les noms de langue dans le format de votre choix, par exemple « EN » et « FR » ou « Anglais » et « Français ».
Sélectionnez chaque nom de langue et cliquez sur le bouton Insérer un hyperlien pour lier ce nom de langue à sa page de démarrage. Exemple :
![GIF animé : sélection d’un texte et définition de ce texte comme lien vers une page du site](https://en-support.files.wordpress.com/2019/12/textlink1.gif)
![GIF animé : sélection d’un texte et définition de ce texte comme lien vers une page du site](https://en-support.files.wordpress.com/2019/12/textlink2.gif)
Méthode 3 – Images en ligne
![Image indiquant la sélection d’un bloc de paragraphe dans la liste de blocs.](https://en-support.files.wordpress.com/2019/12/addparagraph.png?w=1024)
![Image : menu Plus d’options d’un bloc de paragraphe, avec Image en ligne sélectionné](https://en-support.files.wordpress.com/2019/12/inline1.png)
Lorsque l’image est ajoutée, vous pouvez cliquer dessus pour la redimensionner :
![GIF animé : sélectionnez l’image en ligne et le sélecteur de taille s’affiche.](https://en-support.files.wordpress.com/2019/12/resizeflag.gif)
![GIF animé : cliquez sur l’image en ligne pour la sélectionner, puis cliquez sur le bouton « lien ». Vous pouvez ensuite sélectionner la page que vous souhaitez lier.](https://en-support.files.wordpress.com/2019/12/linkimg.gif)
Sur la colonne opposée à votre nouveau sélecteur de langue, il est temps d’ajouter un bloc de navigation. Cliquez sur la colonne vide pour ouvrir le menu du bloc et recherchez Navigation ou recherchez cette option dans la section Mise en page :
![Image indiquant la sous-section Mise en page de la liste de blocs, avec le bloc Navigation en haut à droite de cette section.](https://en-support.files.wordpress.com/2019/12/navblock1.png?w=1024)
Le bloc apparaîtra avec deux options. Choisissez Créer un menu vide. Le bloc sera prêt et vous pourrez y ajouter vos pages :
![](https://en-support.files.wordpress.com/2019/12/navblock2.png?w=1024)
Ajoutez un lien pour chaque page dans votre première langue. Cliquez sur le bouton Ajouter un bloc (bouton + noir) à droite du bloc de navigation pour ajouter un lien supplémentaire :
![](https://en-support.files.wordpress.com/2019/12/navblock3.gif?w=1024)
Utilisez le bouton Navigation de blocs en haut de l’éditeur pour sélectionner vos colonnes :
![GIF animé : utilisation de Navigation de blocs pour sélectionner le bloc de colonnes contenant le menu de navigation et le sélecteur de langue.](https://en-support.files.wordpress.com/2019/12/selectcolumns.gif?w=1024)
Utilisez la barre d’outils du bloc de colonnes pour voir plus d’options et choisissez Ajouter aux blocs réutilisables :
![Image indiquant la barre d’outils du bloc et l’option Ajouter aux blocs réutilisables.](https://en-support.files.wordpress.com/2019/12/addtoreusable.png?w=1012)
Donnez à votre nouveau bloc réutilisable un nom qui le rend facilement identifiable, comme Menu – Anglais. Vous pouvez en savoir plus sur le fonctionnement des blocs réutilisables dans ce guide.
N’oubliez pas de mettre à jour votre page pour enregistrer également les modifications apportées à la page. Félicitations, votre premier menu et le sélecteur de langue sont terminés !
Pour créer le menu pour la deuxième langue, vous pouvez à nouveau effectuer les étapes 1 à 5 ou vous pouvez utiliser un raccourci :
Ouvrez l’une de vos pages dans la deuxième langue dans l’éditeur WordPress. Cliquez sur le bouton Ajouter un bloc (bouton + noir) pour ajouter un nouveau bloc à la page. Faites défiler la liste de blocs jusqu’en bas pour trouver la catégorie des blocs réutilisables, où votre menu est enregistré. Vous pouvez également utiliser le champ de recherche pour la trouver.
![GIF animé : utilisation du menu de bloc pour trouver un bloc réutilisable.](https://en-support.files.wordpress.com/2019/12/findblock.gif?w=1024)
Une fois le bloc de menu ajouté à cette page, ouvrez le menu Plus d’options et sélectionnez Convertir en blocs normaux :
![Image indiquant le menu Plus d’options et l’option Convertir en blocs normaux.](https://en-support.files.wordpress.com/2019/12/converttoregular.png?w=928)
Une fois que les blocs apparaissent comme des blocs normaux plutôt que comme un bloc réutilisable, vous pouvez mettre à jour le bloc de navigation pour qu’il lie les pages dans votre deuxième langue.
Méthode 1 : supprimer et rajouter un nouveau bloc de navigation
![Image indiquant le navigateur de blocs et la sélection d’un bloc](https://en-support.files.wordpress.com/2019/12/blocknavigator2.png)
![Image indiquant le menu Plus d’options sur le bloc de navigation et l’option Supprimer le bloc](https://en-support.files.wordpress.com/2019/12/removenavblock.png)
Méthode 2 : modifier les éléments de navigation
![GIF animé : modifier un élément du bloc de navigation](https://en-support.files.wordpress.com/2019/12/changenavitem.gif)
Une fois les modifications apportées, enregistrez ce nouveau bloc de colonnes en tant que nouveau Bloc réutilisable comme à l’étape 5 ci-dessus et donnez-lui un nom clair indiquant qu’il s’agit du menu pour votre deuxième langue.
N’oubliez pas de mettre à jour votre page pour enregistrer également les modifications apportées à la page. Félicitations, votre deuxième menu et le sélecteur de langue sont terminés !
Vos menus et le sélecteur de langue sont prêts. Vous pouvez désormais ajouter vos deux menus de langue aux autres pages pour ces langues respectives, comme décrit à l’étape 6 ci-dessus. Notez que, une fois les blocs réutilisables enregistrés, vous pouvez simplement les ajouter à d’autres pages, mais vous n’avez pas besoin de les convertir en blocs normaux.
Vous avez créé plus de pages pour chaque langue et devez les ajouter à votre menu ? Ne vous inquiétez pas, vous pouvez modifier vos blocs réutilisables et ils seront mis à jour sur toutes les pages auxquelles ils ont été ajoutés. Vous trouverez plus de détails ici.