Configurer 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 possibilité de basculer entre plusieurs langues de manière transparente 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 les classements des moteurs de recherche et peut renforcer la confiance de la marque à l'échelle 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 Craft CMS site web.
Importance de la configuration d'un sélecteur de langue sur Craft CMS
Avant de nous pencher sur la façon de configurer un sélecteur de langue sur Craft CMS, discutons d'abord de l'importance de la configuration d'un sélecteur de langue. En voici quelques-uns.
- 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, améliorant ainsi leur compréhension et leur engagement avec le site web.
- Réduire les taux de rebond : Les visiteurs qui ne peuvent pas trouver 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 : Comprendre les détails des produits, les politiques et le 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 rendant plus facile l'accès au contenu dans leur langue pour les visiteurs. Traduire correctement le 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 commutateur de langue sur Craft CMS
Après avoir compris l'importance d'utiliser un sélecteur de langue sur un site web multilingue Craft CMS , discutons de la façon de procéder. 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 sélecteur de langue facilement personnalisable et convivial. Par conséquent, il est important de choisir un service de traduction automatique compatible avec divers 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 et peut être bien intégrée avec 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 sélecteur 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
Inscrivez-vous pour un compte Linguise gratuit et profitez d'une période d'essai gratuite d'un mois pour démarrer. Entrez simplement votre adresse e-mail pour générer un nom d'utilisateur et un mot de passe.
Pendant la durée de l'essai, vous aurez accès à toutes les fonctionnalités convaincantes proposées par Linguise . Vous serez redirigé 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 redirigé vers le tableau de bord pour saisir votre domaine de site web Craft CMS. Sélectionnez « Ajouter un domaine » et complétez 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 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 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 inclure des URL alternatives dans vos en-têtes HTML pour les avantages SEO.
Pour obtenir le lien du 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 à l'index de votre 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 votre 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 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, accédez à la “Paramètres” > “Affichage des drapeaux de langue” section dans le Linguise tableau de bord.
Dans cette section, vous pouvez personnaliser plusieurs paramètres. Tout d'abord, il y a les paramètres d'affichage principaux, où vous pouvez modifier divers éléments tels que.
- Style d'icône de drapeau : Vous pouvez choisir entre un affichage côte à côte, un menu déroulant ou une fenêtre contextuelle.
- 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 les visiteurs.
#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 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é profite 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 du drapeau, ronde ou 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 langue : Sélectionnez la couleur de texte par défaut pour afficher le nom.
- Couleur de la langue dans le popup : Définissez la couleur du texte du titre de la langue dans la zone de popup ou de liste déroulante.
- Taille du drapeau : Modifiez la taille des icônes de drapeau.
- Couleur de survol du nom de la langue : 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é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 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 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 Craft CMS site Web dans d'autres langues comme l'allemand.
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, il est important de comprendre les meilleures pratiques pour concevoir un sélecteur de langue et ses performances pour profiter à la fois à votre site et à vos visiteurs.
Utilisez 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 couleur 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 leur version linguistique 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 envisager d'incorporer à la fois des drapeaux et les noms de langue d'origine. 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 leur 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 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 lors de la recherche d'options linguistiques.
Un placement cohérent sur toutes les pages garantit que les visiteurs peuvent facilement accéder au commutateur 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 commutateur de langue responsive
Assurez-vous que le bouton de commutateur 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 responsive garantit que les visiteurs peuvent facilement accéder aux options linguistiques à partir de n'importe quel appareil qu'ils utilisent, améliorant ainsi l'accessibilité et la commodité lors du changement de langue.
Assurez-vous que le commutateur de langue est cohérent sur toutes les pages
Assurez-vous que le commutateur de langue maintient une apparence et un comportement cohérents sur 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 fournit non seulement une expérience utilisateur cohérente, mais renforce également l'accessibilité et la disponibilité des options linguistiques, en renforçant 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 incitant 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 . 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.
L'optimisation du commutateur 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 commutateur de langue pour améliorer encore l'expérience utilisateur.
