Dans ce post
A sélecteur de langue du site Web pourrait être l'un des outils les plus importants que vous puissiez ajouter à votre site web. Si vous souhaitez toucher un public mondial avec votre contenu et lui offrir la meilleure expérience utilisateur possible, vous devez d'abord vous assurer qu'il peut consulter votre site dans la bonne langue.
Les outils de sélection de langue se présentent sous différents formats. Vous pouvez ajouter un lien textuel à votre site, un bouton ou un menu déroulant, selon vos préférences. Généralement, vous trouverez les outils de sélection de langue WordPress situés dans le en-tête ou pied de page d'un site.
Essentiellement, ce que font ces outils, c'est permettre à vos utilisateurs de traduire instantanément votre contenu dans leur langue préférée. Que vous gériez une boutique de commerce électronique ou un blog, votre outil de sélection de langue améliorera l'expérience utilisateur de vos clients.
Dans le tutoriel d'aujourd'hui, nous allons voir comment vous pouvez ajouter un sélecteur de langue de site web à WordPress et comment utiliser cet outil efficacement.
Les avantages d'utiliser un sélecteur de langue de site Web
Le bénéfice le plus évident d'un sélecteur de langue de site Web est qu'il permet à votre utilisateur d'adapter son expérience sur votre site à ses besoins. Dans n'importe projet de conception ou de développement web, votre objectif principal en tant que propriétaire d'entreprise doit être de fournir une expérience utilisateur extraordinaire. Plus l“” UX » de votre site Web est bonne, plus vos clients sont susceptibles de revisiter vos pages et d'interagir avec votre marque.
Avec un sélecteur de langue WordPress, vous pouvez créer un site mondial qui offre aux clients une expérience locale. Ils pourront choisir dans quelle langue ils souhaitent voir vos pages en un clic. Dans certains cas, vous pouvez même utiliser sélection automatique de la langue fonctionnalités sur vos pages. Cela permet au site de détecter l'emplacement d'un utilisateur et de convertir votre langue automatiquement.
Par exemple, les utilisateurs de Google disposant d'un compte Google verront automatiquement tout le contenu présenté dans la langue qui leur correspond en fonction de leurs paramètres.
Comment ajouter un sélecteur de langue WordPress à votre site : 3 méthodes
Si vous disposez de votre propre site WordPress, le moyen le plus simple d’ajouter un sélecteur de langue est d’utiliser un plugin. Le meilleur plugin disponible à ce jour est, de loin, TranslatePress. Il vous offre toute une gamme de possibilités pour ajouter des outils de sélection de langue à vos pages, que nous aborderons ci-dessous.
Voici un bref résumé :
Étape 1 : Installer TranslatePress
Avant de commencer à apporter des modifications à votre site, vous devrez bien sûr ajouter l'extension. Connectez-vous à votre compte WordPress et cliquez sur Plugins. Dans la barre de recherche, saisissez “ TranslatePress ” puis cliquez Installer suivi par Activer.
Une fois votre nouveau plugin activé, vous pourrez traduire facilement l'intégralité de votre site WordPress grâce à une interface visuelle intuitive. Le plugin TranslatePress prend en charge la traduction de tous les éléments, depuis types de publications personnalisées, aux formulaires de contact, et images contenant du texte.
Cet outil convivial fonctionne également sans problème avec d'autres plugins populaires comme Élémentor ou WooCommerce. Cette solution utilise DeepL ou Google Translate pour traduire automatiquement le contenu. Vous pouvez également modifier vos traductions une fois qu'elles ont été générées.
Étape 2 : Choisissez vos langues
Tout d'abord, vous devrez décider quelles langues vous souhaitez ajouter à votre site Web. Rendez-vous dans votre WordPress Paramètres page, puis cliquez sur TranslatePress. Dans le Général page des réglages, vous pourrez sélectionner votre langue principale, puis toutes les autres langues que vous souhaitez ajouter à vos pages WordPress.
Dans cet exemple, j'utilise l'espagnol, mais vous pouvez ajouter autant de langues que vous le souhaitez avec la version premium de TranslatePress.
Voici les différentes possibilités qui s'offrent à vous pour configurer l'une des trois options de sélection de la langue du site proposées par TranslatePress.
Étape 3 : Choisissez votre sélecteur de langue
Une fois que vous avez défini vos langues, faites défiler vers le bas de Général page jusqu'à ce que vous voyiez le Sélecteur de langue section. C'est ici que vous pouvez choisir comment vous allez ajouter un sélecteur de langue à votre site. Il y a trois options :
- Code courtCeci affiche un sélecteur de langue sur n'importe quelle page ou widget.
- Élément du menu : Cela vous permet d'ajouter un élément de menu à votre site avec plusieurs langues au choix.
- Sélection de langue flottante : Cela ajoute un menu déroulant flottant qui apparaît sur toutes les pages de votre site Web.
Examinons de plus près chaque option.
1. Sélecteur de langue par code court
Le sélecteur de langue par code court vous permet d'ajouter un sélecteur de langue WordPress à n'importe quelle partie de votre site qui accepte les codes courts. Pour accéder à cette fonctionnalité, faites défiler vers le bas jusqu'à Sélecteur de langue section de la Général page pour TranslatePress et cochez la case à côté de Code court.
Dans le menu déroulant ci-dessous, vous pourrez déterminer l'apparence de votre sélecteur de langue. Par exemple, vous pouvez utiliser des drapeaux avec des noms de langues courts ou longs, ou simplement les noms.
Sélectionnez votre option et cliquez Enregistrer les modifications. Next, use the
On the front-end, your site should show a new language button that opens a dropdown list on hover:
2. Menu Item Language Selector
The menu item option will allow you to add language options to the navigation menu on your site. There are a few different options again for what the WordPress language selector will display. You can choose to show only flags, flags with long or short names, or just long or short names.
Select one of these options, then head into the Apparence → Menus to add the navigation option to your site. In the Modifier les menus tab, just click on Sélecteur de langue to check all the boxes for the languages you want. Next, click Add to Menu.
Adding the Current language item and the language items you’ve chosen for your menu will display a classic language switcher that opens up on hover.
You can also add the Opposite language option which will display a button for the secondary language only. For instance, if the primary website is in English, the button will only display “Spanish” and there will be no dropdown. This only works if your website is bilingual.
On the front-end of your website, you should see a new language switcher menu item, placed alongside your existing menu items.
3. Floating Language Selector
Floating dropdowns on your store provide a convenient way for users to access their preferred language. They appear on every page of your website. With TranslatePress, you can choose how your floating selector is going to work and appear.
You’ll be able to pick whether you want to show the full language name, a short name, and a flag. Plus, you can opt for dark or light themes depending on your website’s design. There’s also an option to determine where exactly your language bar will be depicted.
Make your choices, and click Save Changes.
Once you’re done, refresh the front-end of your site, and you’ll see what the floating bar looks like for your visitors:
Pretty simple right?
No matter which of the three options you choose, you’re guaranteed to give your website visitors a better experience. Remember, you can also configure the rest of the settings in the Translate Press plugin. This will allow you to decide whether you want to use automatic machine translation or not. To do this go to Settings → Automatic Translation.
One your setup is complete, all you need to do is browse through your site, one page at a time, and they will be automatically translated. You’ll also be able to use the visual translation editor to select a certain piece of text and edit it if you’re not happy with the automatic translation. You can find more tips on how to create a multilingual WordPress site in this guide.
Meilleurs conseils pour utiliser un sélecteur de langue WordPress
TranslatePress makes it easy to create the ultimate multilingual website in no time. However, there are still some extra steps you might want to take to ensure your website language selector is as effective as possible. Here are some quick tips to get you on the right track.
1. Choose the Right Placement
TranslatePress gives you full freedom over where you’re going to place your website language selector. The best thing you can do is make sure it’s easy for your customers to find the tool. If your customers can’t find the language selector, they may just hit the back button.
Most of the time, website users will expect to see language options at the top or bottom of their pages. Adding a language selector to your footer or header is usually a good idea. From a discoverability perspective, the bottom right of the page is usually the best option. However, there are no hard and fast rules here. It all depends on what works for your customers.
HubSpot has put their language selector on their top navigation bar.
2. Make Sure the Style Matches Your Site
Remember, every new widget or tool you add to your website should match your site design. From a UI perspective, it’s important to ensure everything is consistent. Pay attention to the colors, fonts, and overall appearance of your buttons and menus.
Some WordPress language selector tools require you to edit the CSS file for your website, or the theme to configure the button’s appearance. TranslatePress, on the other hand, uses your site’s existing design to generate a complementary language button. This means you don’t have to tweak any code yourself.
You could also consider adding a language button icon to your site, such as a globe or a speech bubble. However, if you’re showing a flag with the TranslatePress plugin, you shouldn’t need an extra icon to improve discoverability.
3. Display Language Names and Initials Correctly
After you add a language selector to your site, you’ll have the option to display a full name, or the abreviation of the language. Either option should be relatively simple for your visitors to navigate. But what is more important, is the option to list each language in its native format. For instance, instead of Spanish, you would use Español.
Readers that use a different alphabet, like Russian speakers for example, wouldn’t necessarily recognize the English versions of their languages immediately. Using the right format is key to improving user experience.
4. Keep it Simple
If you’re trying to develop a global website, it might be tempting to add as many languages as possible to your pages. TranslatePress does give you the option to add unlimited languages with the pro plans. However, it’s worth remembering a complex menu or button can negatively influence usability.
The more languages you include on your language selector, the longer the menu or button dropdown is going to be. Stick to just the languages you know your customers use at first. Remember, you can always add more languages into the mix later on, based on user feedback.
5. Try Automatic Language Detection
One of the best ways to improve the user experience on your site for your visitors is to reduce the amount of work they need to do. Implementing automatic language detection means they won’t have to worry about clicking buttons or finding selectors.
Automatic language redirection allows the site to automatically perceive where the user is based on IP or browser settings. This way, the solution can translate the language without any further actions by the user.
ASOS is a great example of a brand that has leveraged this automatic approach. The store will automatically detect your location, and serve you content based on where you are.
If you want to do the same thing on your site, you can implement it with the TranslatePress Automatic Language Detection function.
Ajoutez facilement un sélecteur de langue WordPress à votre site dès aujourd'hui
Adding a website language selector to your website is an excellent way to improve user experience. You can ensure every visitor to your site, wherever they come from, can customize their experience to suit them. The result can be more sales and a better brand reputation.
Fortunately, TranslatePress makes it quick and simple to add language selectors to your site in no time. You can choose from a range of different options. Plus, you can customize your language selector however you choose.
TranslatePress Multilingue
Do you still have any questions about website language selectors? Let us know in the comments section below!
