Personnalisez le sélecteur de langue WPML avec le fichier de configuration

WPML vous permet de personnaliser le sélecteur de langue pour répondre à vos besoins spécifiques en configurant les paramètres dans le fichier wpml-config.xml.

Le fichier wpml-config.xml est un fichier de configuration qui vous permet de personnaliser l’apparence et le comportement de votre sélecteur de langue WPML sur votre site. Vous pouvez configurer un certain nombre d’attributs, tels que le style CSS, les paramètres d’affichage et les shortcodes.

Ce guide est destiné aux développeurs qui souhaitent personnaliser le sélecteur de langue intégré de WPML. Si vous souhaitez en créer un sur mesure, lisez notre page sur la création d’un sélecteur de langue personnalisé.

Vous avez besoin de générer un fichier wpml-config.xml ? Consultez notre guide étape par étape pour générer automatiquement un fichier de configuration à l’aide de l’extension Multilingual Tools.

Que puis-je personnaliser dans mon sélecteur de langue ?

WPML vous permet de personnaliser un certain nombre de variables dans votre sélecteur de langue. Cela inclut :

Styles CSS en ligne – Ajoutez du CSS personnalisé directement au sélecteur de langue
Lien vers le contenu non traduit – Décidez d’afficher ou de masquer les liens vers le contenu non traduit
Paramètres d’URL à copier – Spécifiez les paramètres d’URL qui doivent être copiés lors du changement de langue
Sélecteur de langue de la barre latérale / du pied de page – Configurez l’apparence du sélecteur de langue dans la barre latérale et le pied de page, notamment :
- S’il faut afficher les drapeaux et/ou les noms des langues
- Si la langue actuelle doit être affichée sous forme de lien
- La définition d’un titre pour le widget du sélecteur de langue
- Le choix d’un modèle pour la mise en page du sélecteur
- La personnalisation des couleurs pour le texte, l’arrière-plan et les bordures à l’aide de codes de couleur hexadécimaux

Actions des shortcodes – Définissez l’apparence des sélecteurs de langue ajoutés via des shortcodes

Exemple d’ajout d’une configuration personnalisée pour le sélecteur de langue intégré de WPML

<wpml-config>
  <language-switcher-settings>
    <key name="additional_css">{inline CSS styles}</key>
    <key name="link_empty">{0 or 1}</key>
    <key name="copy_parameters">{parameter1, parameter2}</key>
    <key name="sidebars">
        <key name="{sidebar slug}">
            <key name="display_flags">{0 or 1}</key>
            <key name="display_names_in_current_lang">{0 or 1}</key>
            <key name="display_names_in_native_lang">{0 or 1}</key>
            <key name="display_link_for_current_lang">{0 or 1}</key>
            <key name="widget_title">{widget title}</key>
            <key name="template">{template slug}</key>
            <!-- color picker keys -->
            <key name="background_normal">#{hex color}</key>
            <key name="border_normal">#{hex color}</key>
            <key name="font_current_normal">#{hex color}</key>
            <key name="font_current_hover">#{hex color}</key>
            <key name="background_current_normal">#{hex color}</key>
            <key name="background_current_hover">#{hex color}</key>
            <key name="font_other_normal">#{hex color}</key>
            <key name="font_other_hover">#{hex color}</key>
            <key name="background_other_normal">#{hex color}</key>
            <key name="background_other_hover">#{hex color}</key>
        </key>
    </key>
    <key name="statics">
        <key name="footer">
            <key name="show">{0 or 1}</key>
            <key name="display_flags">{0 or 1}</key>
            <key name="display_names_in_current_lang">{0 or 1}</key>
            <key name="display_names_in_native_lang">{0 or 1}</key>
            <key name="display_link_for_current_lang">{0 or 1}</key>
            <key name="template">{template slug}</key>
            <!-- color picker keys -->
            <key name="background_normal">#{hex color}</key>
            <key name="border_normal">#{hex color}</key>
            <key name="font_current_normal">#{hex color}</key>
            <key name="font_current_hover">#{hex color}</key>
            <key name="background_current_normal">#{hex color}</key>
            <key name="background_current_hover">#{hex color}</key>
            <key name="font_other_normal">#{hex color}</key>
            <key name="font_other_hover">#{hex color}</key>
            <key name="background_other_normal">#{hex color}</key>
            <key name="background_other_hover">#{hex color}</key>
        </key>
        <key name="post_translations">
            <key name="show">{0 or 1}</key>
            <key name="display_flags">{0 or 1}</key>
            <key name="display_names_in_current_lang">{0 or 1}</key>
            <key name="display_names_in_native_lang">{0 or 1}</key>
            <key name="display_link_for_current_lang">{0 or 1}</key>
            <key name="display_before_content">{0 or 1}</key>
            <key name="display_after_content">{0 or 1}</key>
            <key name="template">{template slug}</key>
            <key name="availability_text">{string like "See post translations: %s"}</key>
        </key>
        <key name="shortcode_actions">
            <key name="display_flags">{0 or 1}</key>
            <key name="display_names_in_current_lang">{0 or 1}</key>
            <key name="display_names_in_native_lang">{0 or 1}</key>
            <key name="display_link_for_current_lang">{0 or 1}</key>
            <key name="template">{template slug}</key>
            <!-- color picker keys -->
            <key name="background_normal">#{hex color}</key>
            <key name="border_normal">#{hex color}</key>
            <key name="font_current_normal">#{hex color}</key>
            <key name="font_current_hover">#{hex color}</key>
            <key name="background_current_normal">#{hex color}</key>
            <key name="background_current_hover">#{hex color}</key>
            <key name="font_other_normal">#{hex color}</key>
            <key name="font_other_hover">#{hex color}</key>
            <key name="background_other_normal">#{hex color}</key>
            <key name="background_other_hover">#{hex color}</key>
        </key>
    </key>
  </language-switcher-settings>
</wpml-config>

Toutes ces sections ne doivent pas nécessairement être présentes dans votre fichier de configuration. Seules celles qui s’appliquent à votre extension ou à votre thème sont nécessaires.

Réinitialiser le sélecteur de langue de WPML aux paramètres par défaut

Vous pouvez également utiliser wpml-config.xml pour réinitialiser la configuration du sélecteur de langue si elle a été modifiée depuis le back-end (par rapport à ses valeurs initiales).
Pour voir les nouvelles modifications, assurez-vous de cliquer sur le bouton Restaurer les valeurs par défaut au bas de la page WPML → Langues.

Ressources supplémentaires

Pour en savoir plus sur le fichier wpml-config.xml, consultez le guide sur les fichiers de configuration de langue.

Pour personnaliser d’autres éléments à l’aide du fichier wpml-config.xml, consultez nos guides supplémentaires :