Personnaliser le sélecteur de devises WordPress : taille, mobile, pied de page

Pour personnaliser le menu déroulant du sélecteur de devises WordPress, vous choisissez l'un des types de sélecteur de WPCS, vous réglez quelques attributs de [wpcs] et vous ajoutez du CSS pour le reste. Les attributs et le CSS qui fonctionnent dépendent du type, et c'est la raison habituelle pour laquelle une largeur ou un réglage semble sans effet. Ce guide passe en revue les types, puis la taille et l'alignement (Elementor compris), les menus mobiles, un sélecteur dans le pied de page, le bref flash au clic et la page qui remonte tout en haut après un changement de devise.

Choisissez d'abord le type de sélecteur

L'apparence de [wpcs] est définie par Affichage de la liste déroulante (Drop-down view) dans l'onglet Options de Réglages (Settings) → Currency Switcher. Deux sortes de sélecteurs ignorent ce réglage : [wpcs style=2] affiche le Style #2 pour ce seul shortcode, et [wpcs sd=3] affiche le design 3 créé dans l'onglet Concepteur (Designer). L'onglet Sélecteur latéral (Side switcher) ajoute un sélecteur distinct, fixé au bord de l'écran.

Les listes déroulantes stylisées ouvrent toujours leur liste sous le sélecteur ; seule la liste déroulante simple (simple drop-down) laisse le navigateur décider.

Attributs et texte des options

Pour les types qui acceptent des attributs :

[wpcs show_flags=0 width='150px' txt_type='code']

• show_flags : 1 ou 0. Sans cet attribut, c'est Afficher les drapeaux par défaut (Show flags by default) dans l'onglet Options qui décide.
• width : en px ou en %, par exemple '150px' ou '50%'. Sans cet attribut, le sélecteur occupe 100 % de la largeur.
• txt_type : code affiche le code, plus le symbole lorsque Afficher les symboles monétaires (Show money signs) est sur Oui (Yes) (USD, $) ; desc affiche la description de la devise.

Il n'existe que ces deux modes de texte, mais la description est un texte libre. Pour afficher $ US dollar ou simplement $, saisissez-le dans le champ de description de la ligne de la devise et utilisez txt_type='desc'. Dans un sélecteur Designer, le champ Valeur du titre (Title value) fait la même chose avec les clés __CODE__, __SIGN__ et __DESCR__ : __SIGN__ seul n'affiche que les symboles, __CODE__ - __SIGN__ affiche USD - $. Tous les attributs sont listés sur la page du shortcode [wpcs].

Largeur, hauteur et alignement, Elementor compris

Un sélecteur prend la largeur de l'endroit où vous le placez, sauf indication contraire. Dans une colonne Elementor large ou une rangée d'en-tête, il s'étire sur toute la colonne. Pour ddslick, chosen, wSelect et la liste déroulante simple (simple drop-down), l'attribut width suffit. Dans un sélecteur Designer, réglez Largeur (Width) dans le design (ou activez Largeur 100 % (Width 100%)), et utilisez Échelle (Scale), Taille de police du titre (Title font size) et Hauteur du drapeau (Flag height) pour le réduire ou l'agrandir. Les Styles #1 à #3 remplissent toujours leur conteneur : limitez-les donc avec du CSS.

Ajoutez le CSS dans Apparence (Appearance) → Personnaliser (Customize) → CSS additionnel (Additional CSS) (ou dans le CSS personnalisé de votre constructeur de pages). .elementor-shortcode est l'enveloppe du widget Shortcode d'Elementor ; retirez-le des sélecteurs si vous n'utilisez pas Elementor.

/* Style #1, #2, #3: limit the width */
.elementor-shortcode .wpcs-style-1-dropdown,
.elementor-shortcode .wpcs-style-2-drop-down,
.elementor-shortcode .wpcs-style-3-du-dialog-starter {
    max-width: 150px;
}

/* Designer switcher: the height it takes in a row, and vertical alignment */
.elementor-shortcode .selectron23 {
    height: 30px !important;
    vertical-align: middle;
}

Placez [wpcs sd=ID] dans le widget Shortcode d'Elementor et jugez le résultat sur la page en ligne : un sélecteur Designer est dessiné par son script après le chargement de la page, et les éditeurs des constructeurs de pages ne l'affichent pas toujours comme le voient les visiteurs.

Menus mobiles : une barre fine, ou une liste à la place

Un sélecteur Designer mesure la hauteur de sa première option au chargement de la page et se dimensionne à partir de cette valeur. S'il se trouve dans un menu mobile fermé à ce moment-là, le menu est masqué, la hauteur mesurée est 0, et lorsque le visiteur ouvre le menu, le sélecteur n'est qu'une barre d'environ un pixel de haut. Il y a deux solutions.

La rapide consiste à fixer une hauteur minimale en CSS. Remplacez .mobile-menu par la classe du panneau de menu mobile de votre thème (inspectez-le dans le navigateur) et ajustez 36px à la hauteur d'une option :

.mobile-menu .selectron23,
.mobile-menu .selectron23 .selectron23-container {
    min-height: 36px !important;
}

La précise consiste à laisser le plugin redessiner le sélecteur lorsqu'il devient visible. wpcs_init_selectron() est la fonction du plugin qui dessine tous les sélecteurs Designer de la page :

/*
 * WPCS: redraw Designer switchers that were hidden when the page loaded
 * (closed mobile menus, tabs, accordions).
 * Child theme functions.php or a code snippets plugin.
 */
add_action('wp_footer', function () {
    ?>
    <script>
    (function () {
        function watch() {
            if (typeof wpcs_init_selectron !== 'function' || !('IntersectionObserver' in window)) {
                return;
            }
            var observer = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                    var box = entry.target.querySelector('.selectron23');
                    if (entry.isIntersecting && box && box.offsetHeight < 5) {
                        wpcs_init_selectron();
                    }
                });
            });
            document.querySelectorAll('div[data-wpcs-sd]').forEach(function (div) {
                observer.observe(div);
            });
        }
        if (document.readyState === 'complete') {
            watch();
        } else {
            window.addEventListener('load', watch);
        }
    })();
    </script>
    <?php
}, 100);

Sur les téléphones, une liste déroulante simple (simple drop-down) est souvent le meilleur choix de toute façon : elle ouvre le sélecteur natif du téléphone et n'a rien à mesurer. Si vous voulez les devises sous forme de liste de liens, comme une liste de langues, utilisez l'affichage afficher sous forme de drapeaux (show as flags), ou ajoutez des éléments de menu de type Liens personnalisés (Custom Links) avec l'URL ?currency=EUR, ?currency=USD et ainsi de suite. Le plugin change la devise pour toute adresse de page qui porte ce paramètre, et le lien relatif garde le visiteur sur la même page. Pour placer le menu déroulant lui-même dans un menu, voir ajouter le sélecteur de devises au menu.

Un menu déroulant dans le pied de page s'ouvre vers le bas

Toutes les listes stylisées s'ouvrent sous le sélecteur : en bas de page, la liste sort donc de l'écran. La liste déroulante simple (simple drop-down) est l'élément select propre au navigateur, et le navigateur l'ouvre vers le haut lorsqu'il n'y a pas de place en dessous. Réglez Affichage de la liste déroulante (Drop-down view) sur liste déroulante simple (simple drop-down) et utilisez, par exemple, [wpcs show_flags=0 width='130px' txt_type='code'] dans le pied de page. Si vous voulez un sélecteur stylisé ailleurs sur le site, utilisez-y un sélecteur Designer ou [wpcs style=1] : les deux ignorent le réglage Affichage de la liste déroulante (Drop-down view).

Un flash blanc à l'ouverture de la liste Designer

Si un arrière-plan clair scintille un instant lorsque le visiteur clique sur un sélecteur Designer, maintenez sa liste rognée pendant son ouverture :

.selectron23-container {
    overflow: hidden !important;
}

Cela supprime aussi le défilement à l'intérieur de la liste. Si vous avez réglé Hauteur ouverte max. (Max open height) à une valeur inférieure à la liste complète dans le design, augmentez-la pour que toutes les devises tiennent.

Conserver la position de défilement après le changement de devise

Choisir une devise recharge la page : soit avec ?currency=EUR ajouté à l'adresse, soit par un simple rechargement lorsque Pas de données GET dans le lien (No GET data in link) est sur Oui (Yes). Le navigateur repart alors du haut, ce qui est gênant lorsque le sélecteur ou un tableau de taux se trouve à mi-chemin d'une longue page. Le plugin n'a pas d'option pour cela, et une modification de son front.js est perdue à la mise à jour suivante. Ce snippet mémorise la position lorsqu'un sélecteur est utilisé, fait défiler la page jusqu'à cet endroit après le rechargement et affiche un curseur d'attente pendant le chargement de la nouvelle page. Il fonctionne avec tous les types de sélecteurs :

/*
 * WPCS: keep the scroll position and show a wait cursor when the currency changes.
 * Child theme functions.php or a code snippets plugin.
 */
add_action('wp_footer', function () {
    ?>
    <script>
    (function () {
        var key = 'my_wpcs_scroll';
        var switchers = '.currency-switcher-form, [class*="wpcs-style-"], div[data-wpcs-sd], .wpcs_flag_view_item, .wpcs_auto_switcher';

        function remember(e) {
            if (!e.target.closest || !e.target.closest(switchers)) {
                return;
            }
            try {
                sessionStorage.setItem(key, JSON.stringify({path: location.pathname, y: window.scrollY, t: Date.now()}));
            } catch (err) {}
            window.addEventListener('beforeunload', function () {
                document.documentElement.classList.add('my-wpcs-loading');
            }, {once: true});
        }
        document.addEventListener('click', remember, true);
        document.addEventListener('change', remember, true);

        window.addEventListener('pageshow', function () {
            document.documentElement.classList.remove('my-wpcs-loading');
        });

        function restore() {
            var saved = null;
            try {
                saved = JSON.parse(sessionStorage.getItem(key));
                sessionStorage.removeItem(key);
            } catch (err) {}
            if (saved && saved.path === location.pathname && Date.now() - saved.t < 30000) {
                window.scrollTo(0, saved.y);
            }
        }
        if (document.readyState === 'complete') {
            restore();
        } else {
            window.addEventListener('load', restore);
        }
    })();
    </script>
    <style>.my-wpcs-loading, .my-wpcs-loading * { cursor: wait !important; }</style>
    <?php
}, 100);

La position n'est restaurée que sur la même page et dans les 30 secondes qui suivent l'utilisation du sélecteur, de sorte que la navigation normale n'est pas affectée. Si un plugin d'optimisation retarde le JavaScript jusqu'à la première interaction, le premier clic sur le sélecteur peut se produire avant que le script ne s'exécute ; excluez ces scripts inline du report, comme vous le faites pour les fichiers du plugin.

Liste de contrôle

• Vous savez quel type vous stylisez : Affichage de la liste déroulante (Drop-down view), un attribut style ou un identifiant Designer sd.
• width, show_flags et txt_type ne sont utilisés qu'avec ddslick, chosen, wSelect ou la liste déroulante simple (simple drop-down).
• Les Styles #1 à #3 et les sélecteurs Designer se dimensionnent avec du CSS ou dans le design.
• Un sélecteur Designer placé dans un menu masqué a une hauteur minimale ou le snippet de redessin.
• Le sélecteur du pied de page est une liste déroulante simple (simple drop-down).
• Les caches sont vidés et le résultat est vérifié sur la page en ligne, pas dans le constructeur de pages.

Si un sélecteur a toujours un mauvais rendu, publiez le lien de la page et le shortcode que vous utilisez sur le forum d'assistance WPCS.