La mise en place d'un sélecteur de langue sur Craft CMS est une fonctionnalité cruciale pour tout site web visant à atteindre un public mondial. À l'ère de la mondialisation d'aujourd'hui, la capacité de basculer entre plusieurs langues de manière transparente est un besoin pressant.
Configurer un commutateur de langue sur Craft CMS améliore l'accessibilité pour les visiteurs de différents pays, peut améliorer les classements des moteurs de recherche et peut renforcer la confiance de la marque mondiale. Même si cela peut sembler complexe, ce guide étape par étape vous aidera à le faire de manière fluide et efficace sur votre site Web Craft CMS.
Importance de configurer un sélecteur de langue sur Craft CMS
Avant de nous plonger dans la configuration d'un sélecteur de langue sur Craft CMS, discutons d'abord de l'importance de la mise en place d'un commutateur de langue. En voici quelques-uns.
- Meilleure expérience utilisateur : Un commutateur de langue permet aux visiteurs d'accéder facilement au contenu dans leur langue préférée, améliorant ainsi leur compréhension et leur engagement avec le site Web.
- Réduire les taux de rebond : Les visiteurs qui ne trouvent pas leur langue souhaitée peuvent potentiellement quitter votre site Web immédiatement. Un sélecteur de langue qui propose plusieurs langues peut les empêcher de quitter le site.
- Augmentation des conversions : La compréhension des détails du produit, des politiques et du processus d'achat dans leur langue peut encourager les visiteurs à acheter ou à prendre 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 de l'utilisation d'un sélecteur de langue sur un site web multilingue Craft CMS , discutons de la façon de le faire. En général, les services de traduction de sites Web offrent cette fonctionnalité, qui peut être personnalisée en fonction de vos besoins.
Cependant, tous les services de traduction ne fournissent pas un commutateur de langue facilement personnalisable et convivial. Par conséquent, il est important de choisir un service de traduction automatique compatible avec divers frameworks et fournissant une fonctionnalité de commutateur 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 et 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. Avec les fonctionnalités avancées et l'interface conviviale de Linguise, la configuration et la maintenance d'un commutateur de langue sur votre site web Craft CMS seront beaucoup plus simples.
Voici les étapes pour installer Linguise sur un site Web multilingue Craft CMS et configurer le sélecteur de langue.
#1 : Inscrivez-vous pour un compte Linguise gratuit
Enregistrez-vous pour un compte Linguise gratuit et profitez d'un essai gratuit d'un mois pour commencer. Entrez simplement votre adresse e-mail pour générer un nom d'utilisateur et un mot de passe.
Pendant toute la durée de l'essai, vous aurez accès à toutes les fonctionnalités convaincantes qu' Linguise a à offrir. Vous serez dirigé vers le tableau de bord Linguise à la conclusion de l'essai.
#2 : Ajout d'un site web de domaine Craft CMS
Une fois votre compte Linguise créé, vous serez dirigé vers le tableau de bord pour saisir votre domaine de site Web Craft CMS. Sélectionnez “Ajouter un domaine” et remplissez les champs fournis :
- Compte
- URL
- Plateforme utilisée (Craft CMS)
- Langue par défaut
- Langues de traduction
- Traduire les URL
- Traduction de contenu dynamique
Vous pouvez obtenir la clé API, que vous devez coller à l'étape suivante.
#4 : Télécharger 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échargez-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, 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 modification 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 de script JS Linguise doit être incorporé dans toutes les pages de votre Craft CMS pour afficher le sélecteur de langue avec des drapeaux et pour inclure des URL alternatives dans vos en-têtes HTML pour les avantages SEO.
Pour obtenir le lien de script, accédez aux paramètres de domaine dans le tableau de bord Linguise et copiez le lien de script fourni à partir de là.
Un moyen facile d'incorporer ce code dans Craft CMS est de l'ajouter à votre index de modèle. Accédez au dossier /template et modifiez le fichier index pour inclure le lien de script dans la section d'en-tête.
Pour afficher le sélecteur de langue, représenté par le pop-up de drapeau pour 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 de drapeau.
Le sélecteur de langue s'affichera initialement dans son format par défaut, mais vous pouvez le personnaliser. Personnalisez le sélecteur de langue via le Linguise tableau de bord en accédant à Paramètres > Affichage des drapeaux de langue. Cette section comprend diverses options de personnalisation, notamment l'affichage principal, les noms de langue et les éléments de conception.
#6 Configurer l'affichage principal
Pour lancer la configuration du sélecteur de langue, allez dans la section «Paramètres» > «Affichage des drapeaux de langue» dans le tableau de bord Linguise.
Dans cette section, vous pouvez personnaliser plusieurs paramètres. Tout d'abord, il y a les principaux paramètres d'affichage, où vous pouvez modifier divers éléments tels que.
- Style d'icône de drapeau :
- Position : Ce paramètre détermine l'emplacement du sélecteur de langue sur votre site Web. Il existe plusieurs options de position, assurez-vous donc de sélectionner celle qui est pratique pour que les visiteurs puissent y accéder.
#7 Définir le design du drapeau
Une fois que vous avez ajusté les paramètres d'affichage principaux, vous pouvez procéder à la personnalisation de la conception 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 « Français » ou « Français ».
- Type de drapeau anglais : Cette fonctionnalité bénéficie aux langues avec plusieurs variations, comme l'anglais américain ou britannique. Cela s'applique également à l'espagnol, au taïwanais, à l'allemand et au portugais.
- Style de drapeau : Cette option vous permet de sélectionner la forme de l'icône de drapeau, soit ronde, soit rectangulaire.
#8 Définir la couleur et la taille
Une fois que vous avez terminé la configuration de la conception du drapeau, vous pouvez procéder à la personnalisation de la couleur et de la taille des drapeaux. Vous trouverez ci-dessous quelques paramètres disponibles pour ajustement.
- Rayon de bordure du drapeau : Personnalisez 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 du pop-up : Définissez la couleur du texte du titre de la langue dans la zone de pop-up ou de liste déroulante.
- Taille du drapeau : Modifier la taille des icônes de drapeau.
- Couleur du nom de 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 pop-up : Déterminez la couleur du texte qui apparaît lorsque l'utilisateur survole le titre de la langue dans la zone de popup ou de liste déroulante.
#9 Configurer l'ombre de la boîte
Enfin, vous pouvez ajuster les paramètres de l'ombre de la boîte de drapeaux. 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 mettre en œuvre les modifications de personnalisation. Ensuite, accédez à votre site web Craft CMS pour confirmer que la configuration a été appliquée avec succès. C'est à peu près comment le sélecteur de langue sera affiché.
Après avoir terminé le processus de configuration, vous pouvez observer la fonctionnalité du sélecteur de langue sur votre site web multilingue Craft CMS .
Nous allons ensuite traduire automatiquement le site Web Craft CMS dans d'autres langues comme Deutsch.
5 conseils pour optimiser le commutateur de langue sur Craft CMS
Une fois que vous avez établi 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 pour bénéficier à la fois à votre site et à vos visiteurs.
Utiliser un logo de drapeau de langue facilement reconnaissable
L'utilisation d'icônes ou de drapeaux de langue universellement reconnus est cruciale pour que les visiteurs puissent rapidement identifier et sélectionner leur option de langue préférée. Assurez-vous que les icônes ou les drapeaux utilisés sont clairs, ont un bon contraste de couleurs et sont largement compris dans différentes cultures pour éviter la confusion ou l'ambiguïté.
Des symboles ou des icônes familiers aident à créer une expérience intuitive et conviviale, permettant aux visiteurs de naviguer facilement vers la version de leur langue souhaitée. Il est très important de choisir des icônes ou des drapeaux universellement connus pour éviter les malentendus ou la confusion.
Utiliser les noms de langue et le drapeau
En plus d'utiliser uniquement des drapeaux, il est conseillé de considérer l'intégration à la fois des drapeaux et des noms de langue originaux. Cette approche peut aider à éviter la confusion puisque certaines langues sont parlées dans plusieurs pays avec des drapeaux différents.
L'utilisation directe des noms de langue élimine l'ambiguïté et garantit que les visiteurs peuvent clairement identifier et sélectionner la langue souhaitée sans méprise. De plus, l'utilisation des noms de langue peut être plus inclusive et respectueuse de la diversité culturelle.
Placez le bouton de commutation de langue de manière stratégique
Plaçons le bouton de commutation de langue dans une zone visible et facilement accessible sur votre site web. Les emplacements standards comprennent 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 lors de la recherche d'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 aide à créer une expérience utilisateur fluide et prévisible.
Mettre en œuvre une conception de sélecteur de langue responsive
Assurez-vous que le bouton de commutation de langue est réactif et fonctionne bien 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 couper ou chevaucher les éléments.
Une conception réactive garantit que les visiteurs peuvent facilement accéder aux options de langue à partir de n'importe quel appareil qu'ils utilisent, améliorant ainsi l'accessibilité et la commodité lors du changement de langue.
Ensure the language switcher is consistent across pages
Assurez-vous que le commutateur de langue maintient une apparence et un comportement cohérents sur l'ensemble de votre site web. Les utilisateurs devraient être en mesure de changer de langue en douceur, 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 cohésive, mais renforce également l'accessibilité et la disponibilité des options linguistiques, instaurant la confiance dans votre site web multilingue.
Toute incohérence dans le sélecteur de langue peut semer la confusion et frustrer les utilisateurs, les amenant potentiellement à quitter votre site web.
Configurer le sélecteur de langue sur Craft CMS avec Linguise!
À ce stade, vous devriez reconnaître que vous configurez le sélecteur de langue pour un site web multilingue Craft CMS . Établir un sélecteur de langue peut offrir divers avantages et peut être ajusté en fonction des points mentionnés précédemment.
L'optimisation du sélecteur de langue peut améliorer considérablement l'expérience utilisateur globale. Ensuite, inscrivez-vous pour un Linguise compte, intégrez-le à votre Craft CMS site Web, et ajustez le sélecteur de langue pour améliorer encore l'expérience utilisateur.
