Dans ce post
TranslatePress propose de nombreuses possibilités pour personnaliser d'emblée le sélecteur de langue de votre site web. Cela permet de l'intégrer harmonieusement au design de votre site et de garantir la cohérence de votre image de marque. De plus, vous pouvez le personnaliser davantage à l'aide de code et même créer votre propre sélecteur sur mesure à partir de zéro.
Alors, dans cet article, je vais vous montrer comment en créer un de 3 manières distinctes, en commençant par l'option sans code la plus facile, et en allant jusqu'à la création de zéro avec PHP.
Mais commençons par passer en revue les avantages liés à la modification de la conception de votre sélecteur de langue. Ensuite, je vous présenterai les options disponibles dans les paramètres de TranslatePress, ainsi que la manière de modifier votre sélecteur à l'aide du balisage.
Pourquoi créer un sélecteur de langue personnalisé dans TranslatePress ?
Personnaliser votre sélecteur de langue peut contribuer à améliorer le design, l'ergonomie, l'accessibilité, la crédibilité et l'efficacité de votre site web multilingue:
- Il garantit que cette partie nécessaire de votre interface utilisateur s'accorde bien avec le reste de votre conception de site web, ce qui conduit à une image de marque cohérente, une expérience utilisateur agréable et une impression professionnelle.
- Les visiteurs peuvent accéder plus facilement au contenu dans la langue de leur choix, ce qui augmente la probabilité qu'ils restent plus longtemps sur votre site web. Cela renforce également la confiance et rend votre site web plus attrayant.
- Vous pouvez faire des choix de conception appropriés pour visiteurs en situation de handicap, tels qu'un contraste de couleurs suffisant et des boutons suffisamment grands.
Enfin, la possibilité de modifier le design de votre sélecteur de langue vous offre plus de liberté et de contrôle sur l'apparence de votre site. Vous avez la possibilité d'expérimenter différentes positions, formes, couleurs et aspects de sélecteurs, polices, et même des conceptions mobiles personnalisées.
Bon, passons maintenant aux trois méthodes qui vous permettront d'ajouter un sélecteur de langue personnalisé à votre site si vous utilisez TranslatePress, de la plus simple à la plus complexe.
Méthode simple : options de personnalisation intégrées de TranslatePress
Commençons par la méthode la plus simple (et la meilleure, si vous voulez mon avis). Simple, rapide, sans code, mais avec de nombreuses options de personnalisation.
Le plugin TranslatePress propose de nombreuses options intégrées pour personnaliser le sélecteur de langue intégré, ce qui vous permet d'effectuer des modifications en profondeur en quelques clics seulement. Vous les trouverez toutes dans votre tableau de bord WordPress, sous Paramètres → TranslatePress → Sélecteur de langue.
Le sélecteur de langue TranslatePress par défaut existe en trois versions :
- sous forme de bouton flottant
- le
- ou comme option de menu
Chacun d'eux offre ses propres options de personnalisation. Passons-les en revue un par un.
Le sélecteur de langue flottant
Vous pouvez activer le sélecteur flottant à l'aide de l'interrupteur sur la droite. Un aperçu dans le coin supérieur gauche vous permet de voir à quoi il ressemblera sur la page. Ce sélecteur restera au premier plan de votre site et suivra vos visiteurs sur chaque page qu'ils consultent.
Sous Type de commutateur, Vous pouvez d'abord décider si vous souhaitez que vos langues apparaissent sous forme de menu déroulant ou, si vous proposez exactement deux langues sur votre site, vous pouvez les afficher côte à côte. En dessous se trouvent un certain nombre de préréglages de design. Activez-les en un seul clic.
De plus, le Conception personnalisée section contient des dizaines d'options pour ajuster presque toutes les parties du commutateur, telles que :
- Couleur de fond et couleur de survol
- Couleur du texte (normale et au survol)
- Couleur, largeur et rayon de la bordure (ce qui signifie la courbure des coins)
- Animations de mouvement du menu déroulant
- Taille du drapeau et du texte (normale ou grande)
- Icône de drapeau forme (rectangle ou carré)
Vous avez également la possibilité d'insérer du CSS personnalisé, mais nous y reviendrons plus tard.
Sous Personnaliser la mise en page, vous pouvez ajuster la position et d'autres aspects de l'apparence de votre sélecteur de langue.
Plus précisément, vous pouvez :
- Placez-le dans les coins inférieur ou supérieur gauche et droit de l'écran
- Ajuster le largeur du bouton
- Personnalisez le rembourrage (c'est-à-dire l'espace interne autour du texte)
- Placez les drapeaux de langue avant ou après le nom, ou masquez-les complètement
- Afficher les noms complets des langues, leur code ISO (EN, DE, etc.), ou rien
Remarquez que vous pouvez également avoir des paramètres différents pour le bureau et visiteurs sur mobile.
Enfin, il y a Paramètres supplémentaires.
Il n'a que deux réglages :
- Lorsque vous avez exactement deux langues sur votre site, vous pouvez décider que le sélecteur affiche toujours la langue opposée à celle qui est active pour le moment.
- Vous pouvez afficher une petite mention “ Powered by TranslatePress ” dans le menu flottant de sélection de la langue (nous vous remercions de cette mention si vous le faites ☺️).
Enregistrez vos modifications pour les rendre permanentes. Utilisez le Annuler les modifications bouton pour rétablir les paramètres par défaut.
Le sélecteur de langue par code court/bloc
Les paramètres du code court offrent des options similaires à celles du sélecteur de langue flottant. Une différence principale est que vous pouvez placer ce sélecteur à des endroits spécifiques de votre site — comme le pied de page, ou une page spécifique.
Vous pouvez le copier et le coller n'importe où sur votre site pour que le sélecteur apparaisse à cet endroit précis.
Cependant, le shortcode est principalement destiné au mode classique thèmes. Pour les thèmes « block », TranslatePress propose une section dédiée Sélecteur de langue bloc.
Vous pouvez modifier le design du bouton de pratiquement la même manière que le sélecteur flottant.
Sous Paramètres supplémentaires, il y a une option supplémentaire pour que le sélecteur de langue s'ouvre au clic et non au survol.
Le changeur d'élément de menu
Enfin, vous avez la possibilité d'ajouter le sélecteur de langue comme menu élément à votre menu WordPress.
Ce type de sélecteur est également très utile pour les thèmes classiques. Pour les thèmes utilisant des blocs, il est peut-être plus facile d'utiliser celui mentionné précédemment Sélecteur de langue bloquer à la place.
Celui-ci est un peu plus restrictif en matière de personnalisation, car la conception du menu est liée à celui de votre thème. Par conséquent, les seules options de personnalisation ici sont les positions des icônes de drapeau et les noms des langues. Vous trouverez également un paramètre pour contrôler la forme de l'icône du drapeau (rectangle, carré, arrondi).
La partie délicate ici est que vous devrez également ajouter manuellement vos langues dans le menu depuis vos paramètres de menu. Cela implique de naviguer vers Apparence → Menus, et en sélectionnant le menu spécifique auquel vous souhaitez ajouter votre sélecteur.
Ensuite, à partir du Ajouter des éléments de menu section à gauche, ouvrez la Sélecteur de langue onglet, et ajoutez les langues que vous souhaitez dans votre menu, en les plaçant comme sous-éléments sous Langue actuelle. Cela créera un sélecteur de type menu déroulant, où les utilisateurs pourront sélectionner leur langue préférée.
Modification des drapeaux de langue par défaut
La dernière option intégrée que je souhaite aborder pour créer un sélecteur de langue personnalisé est la manière de modifier les drapeaux de langue par défaut.
Si vous souhaitez utiliser une icône de drapeau différente pour n'importe quelle langue, la première chose à faire est de télécharger le fichier sur votre site WordPress via Médias → Ajouter un fichier média.
Quand vous avez terminé, ouvrez l'image dans la médiathèque et copiez le lien vers son emplacement.
Ensuite, allez à Paramètres → TranslatePress → Avancé → Langue personnalisée. Ici, entrez Code ISO de la langue dont vous souhaitez modifier l'icône de drapeau sous Code de langue, puis fournissez le lien vers votre fichier de drapeau nouvellement téléchargé dans le URL du drapeau champ et cliquez Ajouter, puis enregistrez.
Vous pouvez faire cela pour autant de langues que vous utilisez. Lorsque vous enregistrez, la nouvelle icône de drapeau apparaîtra sur l'interface publique de votre site.
Méthode avancée : comment personnaliser le sélecteur de langue TranslatePress via CSS
Bien que les paramètres que je vous ai déjà présentés offrent de nombreuses options de personnalisation sans utiliser une seule ligne de code, il peut arriver que vous souhaitiez aller un peu plus loin.
Pour personnaliser encore plus le sélecteur de langue que ne le permettent les paramètres intégrés, vous avez toujours la possibilité d'utiliser du CSS personnalisé.
Comme mentionné précédemment, le menu déroulant de changement de langue dispose d'un(e) CSS personnalisé option. Vous pouvez l'activer et saisir votre propre balisage pour modifier davantage le design du sélecteur.
Examinons ce qui est possible. Juste après un cours intensif pour débutants en CSS.
Une courte introduction au CSS
Dans le cas où vous seriez un débutant absolu, le CSS est le langage de balisage qui détermine une grande partie de l'apparence, de la mise en page et du comportement des sites web. Alors que les éléments HTML fournissent la structure, le CSS est ce qui décide :
- quelle est la taille de ces éléments
- Quelles couleurs ont-ils
- quelle police ils utilisent
- comment ils sont positionnés
- l'espace dont ils disposent autour d'eux
- et bien plus encore
Voici à quoi ressemble un morceau de code CSS typique (appelé “ ensemble de règles ”) :
.button {
background-color: #0073aa;
color: #ffffff;
font-size: 16px;
}Il se compose de plusieurs parties :
- Sélecteur En haut, avant les accolades ouvrantes, se trouve ce qu'on appelle le sélecteur. Il porte ce nom parce qu'il détermine ou sélectionne quel élément du site Web le CSS va modifier. Dans ce cas, il s'agit d'un élément doté d'une classe appelée “ button ”, donc probablement d'un vrai bouton sur la page.
- Propriété C'est la partie qui détermine quel attribut de l'élément sélectionné est ciblé par l'ensemble de règles. Dans ce cas, il s'agit de la couleur d'arrière-plan, de la couleur de police et de la taille de police de l'élément. Mais il existe de nombreuses propriétés CSS, notamment la largeur (width), la hauteur de ligne (line-height) ou l'alignement du texte (text-align).
- Valeur Les propriétés doivent être associées à une valeur ; c'est cette valeur qui détermine la qualité attribuée à la propriété concernée. Par exemple, dans ce cas, la taille de la police est définie sur 16 pixels et la couleur de la police sur #ffffff, qui correspond au code hexadécimal du blanc. Un couple propriété-valeur s'appelle une déclaration. Comme vous pouvez le constater, un ensemble de règles peut contenir plusieurs déclarations.
La dernière partie importante est la syntaxe. Les déclarations CSS ont besoin d'un point-virgule à la fin, et les ensembles de règles nécessitent des accolades ouvrantes et fermantes. Bien sûr, il y a beaucoup plus à apprendre, mais cela suffira pour l'instant.
Trouver les bons sélecteurs
Comme vous pouvez l'imaginer, pour apporter des modifications via le CSS, il faut cibler les bons sélecteurs. Vous pouvez les trouver à l'aide des outils de développement du navigateur. Il suffit de faire un clic droit sur n'importe quel élément d'une page Web dans votre navigateur, puis de choisir Inspecter.
Les outils de développement du navigateur vous permettront de visualiser la structure HTML de la page ainsi que le code CSS de l'élément sélectionné. Il faut un peu de pratique pour savoir sur quelles zones intervenir, mais vous prendrez rapidement le coup de main.
Les sélecteurs importants permettant de personnaliser le sélecteur de langue TranslatePress sont les suivants :
.trp-language-switcherC'est la classe de l'élément de changement de langue lui-même..trp-language-switcher-inner: L'élément conteneur de la liste des langues..trp-switcher-dropdown-list: Vous permet de personnaliser la liste déroulante des langues..trp-language-item: Pour chacune des langues figurant dans votre liste..trp-language-item__current: La classe correspondant à la langue actuellement sélectionnée dans votre liste..trp-flag-image: Cible les images des drapeaux de langue.
Les différentes variantes du sélecteur de langue peuvent également comporter des classes supplémentaires. Par exemple, le bloc du sélecteur de langue comporte un élément conteneur portant la classe .trp-block-container. Ces classes peuvent vous aider à distinguer le code destiné exclusivement à un type particulier de sélecteur de langue. De plus, plusieurs éléments possèdent plusieurs classes ou identifiants, ce qui peut vous aider à créer un sélecteur plus précis afin d'écraser d'autres balises.
Ne vous inquiétez pas si vous ne comprenez pas encore tout cela. Cela deviendra plus clair une fois que j'aurai examiné les exemples.
Modifier la position du sélecteur de langue
Le sélecteur de langue flottant dispose de quatre emplacements par défaut. Si vous souhaitez le placer ailleurs, vous devrez le faire via le code.
La méthode la plus simple consiste à remplacer le code CSS existant. Lorsque vous placez le sélecteur de langue dans le coin inférieur droit via ses paramètres et que vous l'examinez dans les outils de développement du navigateur, vous pouvez voir ces deux déclarations qui y sont associées :
--bottom: 0px;
--right: 10vw;(Si vous trouvez qu'elles ne ressemblent pas aux autres propriétés CSS que j'utilise, c'est parce qu'elles sont propriétés ou variables personnalisées.)
Vous pouvez les remplacer par .trp-language-switcher comme ceci :
.trp-language-switcher {
right: 0px;
bottom: 50%;
}Lorsque vous insérez le code ci-dessus dans le CSS personnalisé champ dans les paramètres du sélecteur de langue et enregistrez, vous obtenez le résultat suivant (j'ai également désactivé les noms de langues pour améliorer l'apparence).
Notez que si vous avez défini une position différente pour le sélecteur de langue dans les paramètres (par exemple, en haut à gauche au lieu d'en bas à droite), vous devrez peut-être remplacer différentes déclarations CSS pour le déplacer.
Personnaliser la forme et le style
Vous pouvez également utiliser CSS pour modifier l'apparence du sélecteur de langue. Par exemple, dans ce cas, je veux transformer le sélecteur et la liste des langues en cercles. Il est déjà positionné là où je le souhaite ; j'ai juste besoin d'un peu d'espace à sa droite. C'est possible avec ce code CSS :
.trp-language-switcher {
bottom: 50%;
right: 1.5vw;
}Pour rendre les modifications suivantes visibles, nous devons d'abord remplacer la couleur d'arrière-plan et la couleur de bordure par transparent dans les paramètres.
Ensuite, nous pouvons transformer le sélecteur de langue en cercle et lui redonner un peu de couleur :
.trp-language-switcher .trp-language-item {
background-color: rgb(181, 11, 62);
border-radius: 50%;
padding: 16px;
}Cela arrondit les coins et ajoute également de l'espace interne pour rendre chaque bouton de langue parfaitement rond. Le résultat final ressemble à ceci :
Maintenant, je veux des espaces entre les champs de langue :
.trp-language-switcher-inner,
.trp-language-switcher .trp-switcher-dropdown-list {
gap: 5px;
}
La mise en page est terminée, il ne reste plus qu'à ajouter un peu de style et quelques ajustements à la façon dont elle s'ouvre :
.trp-language-switcher {
box-shadow: none;
pointer-events: none;
}
.trp-language-switcher .trp-language-item {
border: none;
pointer-events: auto;
}
.trp-language-switcher .trp-language-item:hover,
.trp-language-switcher .trp-language-item:focus-visible,
.trp-language-item:has(.trp-language-item__current:hover),
.trp-language-item:has(.trp-language-item__current:focus-visible) {
background-color: rgb(160, 8, 55);
}Le code ci-dessus :
- Ajoute une nouvelle couleur d'arrière-plan
- Permet de modifier la couleur d'arrière-plan au survol
- Déplace le déclencheur du menu déroulant vers les éléments de la liste
Voici le résultat.
Voici tout le code réuni en un seul bloc :
.trp-language-switcher {
bottom: 50%;
box-shadow: none;
pointer-events: none;
right: 1.5vw;
}
.trp-language-switcher-inner,
.trp-language-switcher .trp-switcher-dropdown-list {
gap: 5px;
}
.trp-language-switcher .trp-language-item {
background-color: rgb(181, 11, 62);
border: none;
border-radius: 50%;
padding: 16px;
pointer-events: auto;
}
.trp-language-switcher .trp-language-item:hover,
.trp-language-switcher .trp-language-item:focus-visible,
.trp-language-item:has(.trp-language-item__current:hover),
.trp-language-item:has(.trp-language-item__current:focus-visible) {
background-color: rgb(160, 8, 55);
}Ajuster le design mobile
La dernière chose que je souhaite aborder en matière de CSS est la manière de personnaliser le design mobile de votre sélecteur de langue. Cela peut s'avérer nécessaire pour adapter le design aux écrans de plus petite taille.
Vous pouvez introduire des modifications de conception spécifiques aux mobiles via des “ media queries ” (requêtes de médias). Celles-ci introduisent des conditions dans le code CSS. Elles signifient fondamentalement “ n'utilisez ce code que lorsque l'écran est inférieur ou supérieur à une certaine taille ”. En voici un exemple :
@media (max-width: 480px) {
.trp-language-switcher {
bottom: 1.5vw;
}
}La première ligne indique simplement “ les ensembles de règles suivants s'appliquent uniquement aux écrans d'une largeur maximale de 480 pixels. ” En dessous se trouve une variante du balisage de positionnement que nous avons utilisé précédemment. Cela replace le sélecteur de langue personnalisé en bas de l'écran.
Notez que vous devez uniquement inclure les déclarations que vous souhaitez remplacer. Ici, nous modifions seulement bas propriété de .trp-language-switcher. Tout le reste reste tel que nous l'avons configuré plus tôt.
Enfin, il est important de placer les requêtes media à la fin de votre code CSS. Les navigateurs traitent le CSS du haut vers le bas. Ainsi, si vous souhaitez écraser des déclarations ou des ensembles de règles précédents, votre nouveau code doit apparaître après l'original.
Méthode professionnelle : Comment créer un sélecteur de langue en utilisant PHP
Cette section s'adresse aux utilisateurs avancés. Si, pour une raison particulière, vous souhaitez aller encore plus loin, vous pouvez également créer de toutes pièces un sélecteur de langue TranslatePress personnalisé.
Cela, par exemple, vous évite d'avoir à écraser le balisage CSS existant. Au lieu de cela, vous pouvez avoir un contrôle total sur la structure, la mise en page, l'interactivité et le style de votre sélecteur de langue dès le départ.
Pour vous montrer comment cela fonctionne, nous allons créer un sélecteur horizontal minimaliste, composé uniquement de drapeaux, qui peut facilement s'intégrer dans différentes zones de votre site Web.
1. Découvrir la fonction PHP
TranslatePress propose une fonction personnalisée permettant de créer votre propre sélecteur de langue. Elle renvoie les paramètres correspondant à toutes les données importantes relatives aux langues actives sur votre site :
- Nom de la langue Le nom complet de la langue (par exemple, “ anglais ”).
- code de langue Le code de la langue (par exemple, “ EN ”).
- nom_abrégé_de_la_langue : Le libellé de langue utilisé dans les URL.
- lien_drapeau : L'URL de l'image du drapeau de la langue.
- URL de la page actuelle : L'URL de la page sur laquelle se trouve le visiteur, mais dans cette langue.
Vous pouvez l'utiliser pour créer votre propre sélecteur de langue avec votre propre balisage. Une option consiste à le placer directement dans un fichier de thème à l'intérieur d'un répertoire de thème enfant (et non dans le thème principal, car vos modifications seraient écrasées si vous mettez à jour le thème). Vous pouvez également créer un code court dans fonctions.php, un plugin d'extraits de code, ou avec votre propre plugin personnalisé et utilisez le code court pour placer le sélecteur de langue sur votre site.
Nous opterons pour la deuxième option ici.
2. Créer le shortcode
La première chose que nous allons faire est de mettre en place l'infrastructure pour le code court que nous allons créer. Placez ceci à l'intérieur de votre fonctions.php ou un fichier PHP dans votre plugin personnalisé :
<?php
function my_custom_language_switcher() {
// le code du sélecteur de langue va ici
}
add_shortcode( 'my_language_switcher', 'my_custom_language_switcher' );Cela configure la fonction PHP qui finira par enregistrer et afficher le shortcode dans WordPress.
3. Créer le HTML du sélecteur de langue
Ensuite, nous voulons créer la structure de base pour le sélecteur de langue. Comme nous optons pour le minimalisme, c'est relativement simple.
<div class="my-language-switcher">
<ul>
<li class="language-item">
<a href="#"><img src="flag.png" alt="Drapeau de la langue"></a>
</li>
</ul>
</div>Il s'agit fondamentalement d'un élément conteneur contenant une liste non ordonnée. Chaque élément de la liste contient un lien vers la langue, qui intègre l'image du drapeau.
4. Ajouter des données PHP dynamiques
Nous allons maintenant ajouter la structure HTML à notre fonction de code court et ajouter les données de langue via PHP.
<?php
function my_custom_language_switcher() {
// Get all active languages
$languages = trp_custom_language_switcher();
// If no languages, return empty
if ( empty( $languages ) ) {
return '';
}
// Start capturing HTML
ob_start();
?>
<div class="my-language-switcher" data-no-translation>
<ul>
<?php foreach ( $languages as $language ) : ?>
<li class="language-item <?php echo !empty($language['current_language']) ? 'current' : ''; ?>">
<a href="<?php echo esc_url( $language['current_page_url'] ); ?>"><img src="<?php echo esc_url( $language['flag_link'] ); ?>" alt="<?php echo esc_attr( $language['language_name'] ); ?> flag"></a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php
// Renvoyer le HTML pour le code court
return ob_get_clean();
}
// Enregistrer le code court
add_shortcode('my_language_switcher', 'my_custom_language_switcher');Cela crée le même balisage HTML que nous avons vu plus tôt, mais pour chaque langue active sur votre site. Il remplit également l'URL de la langue, le lien vers l'image du drapeau, et le nom de la langue comme balise ALT de l'image. De plus, il ajoute une classe supplémentaire à la langue actuellement active au cas où vous souhaiteriez ajouter un style supplémentaire.
5. Testez le résultat sur votre site
Cela fonctionne déjà. Vous pouvez utiliser le code court [my_language_switcher] pour placer le sélecteur personnalisé où vous voulez sur votre site, par exemple, via le Code court bloc dans l'éditeur de blocs WordPress. Sinon, placez-le dans un fichier tel que en-tête.php ou footer.php en utilisant cette ligne de code :
<?php echo do_shortcode('[my_language_switcher]'); ?>Vous devriez déjà voir votre liste de langues, mais sans aucun style.
La dernière étape est de changer cela.
6. Ajouter des styles via CSS
La dernière étape de la création de votre sélecteur de langue TranslatePress personnalisé consiste à lui donner un aspect esthétique. Pour obtenir le résultat présenté précédemment, ajoutez ce code à votre thème enfant, à la feuille de style de votre plugin ou au fichier CSS additionnel champ dans l'éditeur WordPress :
.my-language-switcher {
display: inline-block;
}
.my-language-switcher ul {
list-style: none;
display: flex;
gap: 8px;
padding : 0 ;
margin : 0 ;
}
.my-language-switcher li a {
display : block ;
overflow : hidden ;
}
.my-language-switcher li a img {
width: 100%;
height: 100%;
display: block;
}
Créez votre propre sélecteur de langue personnalisé dès aujourd'hui
La personnalisation du sélecteur de langue TranslatePress permet de l'harmoniser avec le reste du design de votre site web et d'offrir la meilleure expérience possible à vos utilisateurs.
Ci-dessus, j'ai passé en revue plusieurs façons de personnaliser son apparence, depuis les paramètres intégrés au plugin, très simples d'utilisation, jusqu'aux personnalisations CSS, en passant par un sélecteur entièrement créé de toutes pièces via PHP. J'espère que vous vous sentez désormais prêt à intégrer pleinement TranslatePress à la conception de votre propre site web.
Comme vous pouvez facilement le constater, une option se démarque clairement en termes de praticité et de rapidité. TranslatePress offre d'emblée de nombreuses options de personnalisation ; vous n'avez donc pas besoin d'être un expert en programmation pour disposer d'un sélecteur de langue parfaitement fonctionnel et personnalisé.
TranslatePress Multilingue
Essayez-le aujourd'hui et installez votre sélecteur de langue en quelques minutes !
