La mise en place d'un sélecteur de langue sur Craft CMS est une fonctionnalité essentielle pour tout site web cherchant à toucher un public mondial. À l'ère de la mondialisation actuelle, la capacité de basculer entre plusieurs langues de manière fluide est un besoin pressant.
Configurer un sélecteur de langue sur Craft CMS améliore l'accessibilité pour les visiteurs de différents pays, peut améliorer le classement dans les moteurs de recherche et renforcer la confiance envers votre marque à l'échelle mondiale. Bien que cela puisse sembler complexe, ce guide étape par étape vous aidera à le faire en toute simplicité et efficacement sur votre site Craft CMS .
Importance de configurer un sélecteur de langue sur Craft CMS
Avant d’expliquer comment configurer un sélecteur de langue sur Craft CMS, commençons par discuter de l’importance de mettre en place un sélecteur de langue. En voici quelques-unes.
- Meilleure expérience utilisateur : Un sélecteur de langue permet aux visiteurs d'accéder facilement au contenu dans leur langue préférée, ce qui améliore leur compréhension et leur engagement envers le site web.
- Réduire le taux de rebond : Les visiteurs qui ne trouvent pas la langue souhaitée risquent de quitter immédiatement votre site web. Un sélecteur de langue proposant plusieurs langues peut les empêcher de quitter le site.
- Augmenter les conversions : Comprendre les détails du produit, les politiques et le processus d'achat dans leur langue peut encourager les visiteurs à acheter ou à effectuer d'autres actions.
- Optimisation du référencement multilingue : Les moteurs de recherche prennent en compte les facteurs d'expérience utilisateur lors du classement des sites web. Un sélecteur de langue convivial peut améliorer votre référencement multilingue en facilitant l'accès des visiteurs au contenu dans leur langue. La traduction correcte du contenu envoie également des signaux positifs aux moteurs de recherche indiquant que votre site est pertinent pour diverses requêtes dans différentes langues.
Comment configurer un sélecteur de langue sur Craft CMS
Après avoir compris l’importance d’utiliser un sélecteur de langue sur un site Craft CMS multilingue, voyons comment procéder. Généralement, les services de traduction de sites web proposent cette fonctionnalité, qui peut être personnalisée selon vos besoins.
Cependant, tous les services de traduction ne proposent pas un sélecteur de langue facilement personnalisable et convivial. Par conséquent, il est important de choisir un service de traduction automatique compatible avec différents frameworks et offrant une fonctionnalité de sélecteur de langue flexible.
Un service qui répond à ces critères est Linguise. Linguise propose une fonctionnalité de sélecteur de langue facilement personnalisable et conviviale, qui peut être bien intégrée à Craft CMS.
En utilisant l'intégration transparente de Linguise avec le framework Craft CMS , vous pouvez facilement ajouter un sélecteur de langue à votre application multilingue. Grâce aux fonctionnalités avancées et à l'interface conviviale de Linguise, la configuration et la maintenance d'un sélecteur de langue sur votre site Craft CMS seront beaucoup plus simples.
Voici les étapes pour installer Linguise sur un site Craft CMS multilingue et configurer le sélecteur de langue.
#1 : Créer un compte Linguise gratuit
Créez un compte Linguise gratuit et profitez d'un essai gratuit d'un mois pour commencer. Il vous suffit de saisir votre adresse e-mail pour générer un nom d'utilisateur et un mot de passe.
Tout au long de la période d'essai, vous bénéficierez d'un accès à toutes les fonctionnalités attrayantes qu' Linguise a à offrir. Vous serez redirigé vers le tableau de bord Linguise à la fin de l'essai.
#2 : Ajout du site web de domaine Craft CMS
Une fois votre Linguise créé, vous serez redirigé vers le tableau de bord pour saisir le domaine de votre Craft CMS . Sélectionnez « Ajouter un domaine » et remplissez les champs requis :
- Compte
- URL
- Plateforme utilisée (Craft CMS)
- Langue par défaut
- Langues de traduction
- Traduire les URL
- Traduction du contenu dynamique
Vous pouvez obtenir la clé API, que vous devrez coller à l'étape suivante.
#4 : Téléversez le script Linguise
Ensuite, vous devrez télécharger le script de traduction Linguise sur votre serveur où Craft CMS est installé.
Téléchargez le script de traduction PHP-JS, décompressez-le et téléversez-le dans le répertoire racine de votre installation Craft CMS .
Assurez-vous que le script est placé dans le répertoire racine de votre site web, là où se trouvent vos fichiers Craft CMS , et que le dossier conserve son nom d’origine, «linguise. »
Ensuite, insérez la clé API Linguise dans le fichier Configuration.php que vous avez téléchargé sur votre serveur. Ouvrez le fichier pour le modifier et collez votre clé API entre les guillemets, en remplaçant le texte REPLACE_BY_YOUR_TOKEN.
#5 : Activer et personnaliser le sélecteur de langue
Le lien du script JS Linguise doit être intégré dans toutes les pages de votre Craft CMS pour afficher le sélecteur de langue avec des drapeaux et inclure des URL alternatives dans les en-têtes HTML de votre site à des fins de référencement.
Pour obtenir le lien du script, accédez aux paramètres de domaine dans le tableau de bord Linguise et copiez-y le lien du script fourni.
Un moyen simple d'intégrer ce code dans Craft CMS consiste à l'ajouter à l'index de votre template. Accédez au dossier /template et modifiez le fichier index pour inclure le lien du script dans la section d'en-tête.
Pour afficher le sélecteur de langue, représenté par la fenêtre contextuelle de drapeaux permettant de sélectionner la langue souhaitée, vous pouvez le charger en copiant le code fourni à la fin de la configuration du site web et en le collant dans l'en-tête de votre page HTML. Cette action activera le chargement automatique du sélecteur de langue à drapeaux.
Le sélecteur de langue s'affichera initialement dans son format par défaut, mais vous pouvez le personnaliser. Pour ce faire, Linguise accédez à Paramètres > Affichage des indicateurs de langue. Cette section propose diverses options de personnalisation, notamment l'affichage principal, les noms des langues et les éléments graphiques.
#6 Configurer l'écran principal
Pour lancer la configuration du sélecteur de langue, accédez à la « Paramètres » > « Affichage des indicateurs de langue » du Linguise .
Dans cette section, vous pouvez personnaliser plusieurs paramètres. Tout d'abord, il y a les paramètres d'affichage principal, où vous pouvez modifier divers éléments tels que.
- Style de l'icône de drapeau : Vous pouvez choisir entre un affichage côte à côte, un menu déroulant ou une fenêtre popup.
- Position : Ce paramètre détermine l'emplacement du sélecteur de langue sur votre site web. Plusieurs options de position sont disponibles, veillez donc à en choisir une qui soit facilement accessible pour les visiteurs.
#7 Définir le design du drapeau
Une fois que vous avez ajusté les principaux paramètres d'affichage, vous pouvez personnaliser le design des drapeaux affichés.
- Affichage du nom de la langue : Vous pouvez afficher le nom de la langue en fonction du nom du pays ou de la langue elle-même. Par exemple, vous pouvez afficher « French » ou « Français ».
- Type de drapeau anglais : Cette fonctionnalité est utile pour les langues comportant plusieurs variantes, comme l’anglais américain ou britannique. Elle s’applique également à l’espagnol, au taïwanais, à l’allemand et au portugais.
- Style du drapeau : Cette option vous permet de choisir la forme de l'icône du drapeau, ronde ou rectangulaire.
#8 Définissez la couleur et la taille
Une fois la configuration du design des drapeaux terminée, vous pouvez personnaliser la couleur et la taille des drapeaux. Voici quelques paramètres disponibles pour ajustement.
- Rayon de bordure du drapeau : Ajustez le rayon de bordure pour le style de drapeau rectangulaire, mesuré en pixels.
- Couleur du nom de la langue : Sélectionnez la couleur de texte par défaut pour afficher le nom.
- Couleur de la langue dans la fenêtre contextuelle : Définissez la couleur du texte du titre de la langue dans la fenêtre contextuelle ou la zone déroulante.
- Taille du drapeau : Modifier la taille des icônes de drapeau.
- Couleur du nom de la langue au survol : Spécifiez la couleur du texte qui apparaît lorsque l'utilisateur survole le nom de la langue.
- Couleur de survol de la langue du popup : Définissez la couleur du texte qui apparaît lorsque l'utilisateur survole le titre de la langue dans la zone de popup ou de menu déroulant.
#9 Configurer l'ombre portée
Enfin, vous pouvez ajuster les paramètres d'ombre de la boîte de drapeau. L'option initiale vous permet d'ajouter un effet d'ombre à chaque icône de drapeau affichée sur votre site web. L'option suivante gère l'effet d'ombre lorsque les utilisateurs survolent les drapeaux de langue avec leur souris.
Une fois que vous avez effectué tous les ajustements nécessaires, cliquez sur le bouton Enregistrer pour appliquer les modifications de personnalisation. Ensuite, rendez-vous sur votre site Craft CMS pour confirmer que la configuration a bien été appliquée. Voici à peu près comment le sélecteur de langue s'affichera.
Après avoir terminé le processus de configuration, vous pouvez observer le fonctionnement du sélecteur de langue sur votre site web multilingue Craft CMS .
Nous allons ensuite traduire automatiquement le site Craft CMS dans d'autres langues comme l'allemand.
5 conseils pour optimiser le sélecteur de langue sur Craft CMS
Une fois que vous avez mis en place le sélecteur de langue sur votre Craft CMS site web multilingue, il est important de comprendre les meilleures pratiques pour concevoir un sélecteur de langue et ses performances afin de bénéficier à la fois à votre site et à vos visiteurs.
Utilisez un logo de drapeau linguistique facilement reconnaissable
L'utilisation d'icônes ou de drapeaux de langue universellement reconnus est essentielle pour que les visiteurs puissent identifier et sélectionner rapidement leur option de langue préférée. Assurez-vous que les icônes ou drapeaux utilisés sont clairs, présentent un bon contraste de couleurs et sont largement compris dans différentes cultures afin d'éviter toute confusion ou ambiguïté.
Des symboles ou des icônes familiers contribuent à créer une expérience intuitive et conviviale, permettant aux visiteurs de naviguer facilement vers la version linguistique souhaitée. Il est très important de choisir des icônes ou des drapeaux universellement reconnus pour éviter les malentendus ou la confusion.
Utilisation des noms de langues et des drapeaux
Au lieu d'utiliser uniquement des drapeaux, il est conseillé d'envisager d'associer à la fois les drapeaux et les noms des langues d'origine. Cette approche peut aider à éviter toute confusion, car certaines langues sont parlées dans plusieurs pays avec des drapeaux différents.
L'utilisation directe des noms de langues élimine toute ambiguïté et garantit que les visiteurs peuvent identifier et sélectionner clairement la langue souhaitée sans malentendu. De plus, l'utilisation des noms de langues peut être plus inclusive et respectueuse de la diversité culturelle.
Placez le bouton de sélection de langue de manière stratégique
Positionnons le bouton de sélection de langue dans une zone bien visible et facilement accessible de votre site web. Les emplacements standards incluent l'en-tête, le pied de page ou le menu de navigation principal. Ces emplacements sont intuitifs pour la plupart des internautes et correspondent à leurs attentes lorsqu'ils recherchent des options de langue.
Un placement cohérent sur toutes les pages garantit que les visiteurs peuvent facilement accéder au sélecteur de langue, quel que soit leur point d'entrée ou la page spécifique qu'ils visitent. Ce placement cohérent contribue à créer une expérience utilisateur fluide et prévisible.
Mettre en œuvre un design de sélecteur de langue responsive
Assurez-vous que le bouton de sélection de langue est réactif et fonctionne correctement sur divers appareils et tailles d'écran, y compris les ordinateurs de bureau, les tablettes et les smartphones. Testez-le sur différents appareils et résolutions d'écran pour garantir une expérience utilisateur fluide, sans éléments coupés ni chevauchants.
Un design réactif garantit que les visiteurs peuvent facilement accéder aux options de langue depuis n'importe quel appareil qu'ils utilisent, améliorant ainsi l'accessibilité et la commodité du changement de langue.
Assurez la cohérence du sélecteur de langue sur toutes les pages
Assurez-vous que le sélecteur de langue conserve une apparence et un comportement cohérents sur l'ensemble de votre site web. Les utilisateurs doivent pouvoir changer de langue en toute fluidité, quelle que soit la page sur laquelle ils se trouvent ou le contenu qu'ils consultent. La cohérence offre non seulement une expérience utilisateur harmonieuse, mais renforce également l'accessibilité et la disponibilité des options linguistiques, ce qui instaure la confiance dans votre site web multilingue.
Toute incohérence dans le sélecteur de langue peut dérouter et frustrer les utilisateurs, les amenant potentiellement à quitter votre site web.
Configurez le sélecteur de langue sur Craft CMS avec Linguise!
À ce stade, vous devez comprendre que vous configurez le sélecteur de langue pour un site web multilingue Craft CMS . La mise en place d'un sélecteur de langue peut offrir divers avantages et peut être affinée en fonction des points mentionnés précédemment.
Optimiser le sélecteur de langue peut considérablement améliorer l'expérience utilisateur globale. Ensuite, inscrivez-vous pour un compte Linguise , intégrez-le à votre site Craft CMS et peaufinez le sélecteur de langue pour améliorer encore davantage l'expérience utilisateur.
