Retour à l’assistance Démarrer Didacticiel de site multilingue simple en utilisant des blocs (aucune extension)

Didacticiel de site multilingue simple en utilisant des blocs (aucune extension)

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 :

Notes et références

  • 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.
Références et informations complémentaires

Ce didacticiel utilise les fonctions suivantes :

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

1. Configurer des pages et des slugs de page

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 »

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.
Exemple – Présentation d’une structure de page
Dans l’exemple suivant, nous avons des pages de démarrage en deux langues : anglais et français. Chacune d’elles a deux pages enfants : About et Contact pour l’anglais, et À Propos et Rejoignez-nous pour le français :
Image : présentation de la structure de pages parentes et enfants.
2. Choisir la mise en page de votre menu et du sélecteur de langue

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
3. Créer le sélecteur de langue

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
Vous devriez maintenant avoir deux colonnes en attente de contenu. Cliquez sur la colonne la plus étroite et insérez un bloc de navigation :
Image indiquant le bloc de navigation dans la liste de blocs.
Sélectionnez Créer à partir de toutes les pages de niveau supérieur pour remplir automatiquement le bloc avec vos pages de démarrage dans la langue parente.

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.
Méthode 2 – Liens de texte dans un bloc de paragraphe
Vous devriez maintenant avoir deux colonnes en attente de contenu. Cliquez sur la colonne la plus étroite et ajoutez-y un bloc de paragraphe :
Image indiquant la sélection d’un bloc de paragraphe dans la liste de blocs.

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
Utilisation des abréviations de langue :
GIF animé : sélection d’un texte et définition de ce texte comme lien vers une page du site
Méthode 3 – Images en ligne
Vous devriez maintenant avoir deux colonnes en attente de contenu. Cliquez sur la colonne la plus étroite et ajoutez-y un bloc de paragraphe :
Image indiquant la sélection d’un bloc de paragraphe dans la liste de blocs.
Si vous souhaitez utiliser des images de drapeau de langue, vous pouvez utiliser la fonction d’images en ligne (disponible dans Plus d’options) pour les insérer et les lier :
Image : menu Plus d’options d’un bloc de paragraphe, avec Image en ligne sélectionné
Saisissez un espace dans votre bloc de paragraphe pour activer la barre d’outils du bloc et afficher le menu Plus d’options. Lorsque vous sélectionnez Image en ligne, la fenêtre de la bibliothèque de médias/de chargement s’ouvre automatiquement. Chargez ou sélectionnez votre drapeau. Pour plus d’informations sur le chargement ou la sélection d’une image, consultez ce document.

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.
Vous pouvez ensuite transformer l’image en lien, comme vous le faites pour un lien de texte :
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.
Répétez ce processus pour le deuxième drapeau de langue.
4. Ajouter un menu de navigation pour vos pages dans la première langue

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.

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 :

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 :

5. Enregistrer votre nouveau menu et le sélecteur de langue

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.

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.

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 !

6. Menu dans la deuxième langue

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.

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.

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
Sélectionnez le bloc de navigation avec le navigateur de blocs :
Image indiquant le navigateur de blocs et la sélection d’un bloc
Supprimez l’intégralité du bloc de navigation :
Image indiquant le menu Plus d’options sur le bloc de navigation et l’option Supprimer le bloc
Ensuite, effectuez l’étape 4 ci-dessus pour rajouter un nouveau bloc de navigation pour votre deuxième langue.
Méthode 2 : modifier les éléments de navigation
Cliquez sur l’élément que vous souhaitez modifier. Cliquez sur le bouton « lien » pour ouvrir les informations du lien, puis cliquez sur le bouton Modifier. Vous pouvez ensuite saisir et sélectionner la page de votre choix. Notez que vous devrez également modifier manuellement le texte du lien :

GIF animé : modifier un élément du bloc de navigation

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 !

7. Ajouter vos nouveaux menus aux autres pages

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.

8. Ajouter des pages supplémentaires

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.

Copied to clipboard!