WordPress - Comment puis-je changer les drapeaux du bouton de langue (en utilisant ma propre image) ?

Dans cet article, vous verrez comment remplacer le drapeau dans le bouton Weglot par votre propre image.

Vous pouvez utiliser votre propre image de drapeau sur votre switcher. Vous aurez besoin de l'URL de l'image pour l'utiliser sur votre site web.

1. Inspectez l'élément sur votre navigateur

Sur votre navigateur Web, faites un clic droit sur le drapeau puis sélectionnez "Inspecter l'élément. Le drapeau devrait apparaitre surligné

Ouvrez l'élément < a > avec la fenêtre de gauche, il devrait y avoir un pseudo-élément "before"', sélectionnez-le:

Copiez la règle CSS complète qui est affichée à droite pour le drapeau que vous souhaitez éditer (ici c'est la règle qui inclut "pt" pour le drapeau portugais) :

Le code copié devrait être :

.wg-li.flag-1.pt a:before {     
    background-position: -993px 0; 
}

2. Ajouter le code CSS pour personnaliser le drapeau

Rendez-vous dans votre admin WordPress > Weglot > dans le champ "Override CSS", collez le code et remplacez la propriété CSS "background-position" par "background-image" et remplacez l'URL par l'URL réelle de votre propre image. Aussi, ajoutez "!important" à la fin de la règle

.wg-li.flag-1.pt a:before {     
    background-image: url(https://portuguese-flag.com/my-image.jpg)!important; 
} 

Une fois les modifications apportées, cliquez sur "Save Changes" :

Vous avez encore besoin d’aide? Contactez-nous Contactez-nous