Personalizar el menú desplegable del selector de monedas en WordPress

Para personalizar el menú desplegable del selector de monedas en WordPress, eliges uno de los tipos de selector de WPCS, defines unos cuantos atributos de [wpcs] y añades CSS para el resto. Qué atributos y qué CSS funcionan depende del tipo, y ese suele ser el motivo por el que un ancho o un ajuste parece no hacer nada. Esta guía repasa los tipos, y después el tamaño y la alineación (incluido Elementor), los menús móviles, un selector en el pie de página, el breve parpadeo al hacer clic y el salto de la página al principio tras cambiar de moneda.

Elige primero el tipo de selector

El aspecto de [wpcs] se define en Vista del desplegable (Drop-down view), en la pestaña Opciones (Options) de Ajustes (Settings) → Currency Switcher. Dos clases de selector ignoran ese ajuste: [wpcs style=2] muestra el Estilo n.º 2 solo para ese shortcode, y [wpcs sd=3] muestra el diseño 3 creado en la pestaña Diseñador (Designer). La pestaña Selector lateral (Side switcher) añade un selector independiente fijado al borde de la pantalla.

Los desplegables con estilo siempre abren su lista por debajo del selector; solo el desplegable simple (simple drop-down) deja que decida el navegador.

Atributos y texto de las opciones

Para los tipos que aceptan atributos:

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

• show_flags: 1 o 0. Si no se indica, decide Mostrar banderas por defecto (Show flags by default) en la pestaña Opciones (Options).
• width: en px o %, por ejemplo '150px' o '50%'. Si no se indica, el selector ocupa el 100 % del ancho.
• txt_type: code muestra el código, más el símbolo cuando Mostrar signos de moneda (Show money signs) está en Sí (Yes) (USD, $); desc muestra la descripción de la moneda.

Solo hay estos dos modos de texto, pero la descripción es texto libre. Para mostrar $ dólar estadounidense o solo $, escríbelo en el campo de descripción de la fila de la moneda y usa txt_type='desc'. En un selector del Diseñador, el campo Valor del título (Title value) hace lo mismo con las claves __CODE__, __SIGN__ y __DESCR__: __SIGN__ a solas muestra solo símbolos, y __CODE__ - __SIGN__ muestra USD - $. Todos los atributos aparecen en la página del shortcode [wpcs].

Ancho, alto y alineación, también en Elementor

Si no se indica otra cosa, un selector toma el ancho del lugar donde lo colocas. En una columna ancha de Elementor o en una fila de cabecera, se estira por toda la columna. Para ddslick, chosen, wSelect y desplegable simple (simple drop-down), basta con el atributo width. En un selector del Diseñador, define Ancho (Width) en el diseño (o activa Ancho 100% (Width 100%)), y usa Escala (Scale), Tamaño de fuente del título (Title font size) y Altura de la bandera (Flag height) para hacerlo más pequeño o más grande. Del Estilo n.º 1 al n.º 3 siempre ocupan todo su contenedor, así que límitalos con CSS.

Añade el CSS en Apariencia → Personalizar → CSS adicional (Appearance → Customize → Additional CSS) (o en el CSS personalizado de tu constructor de páginas). .elementor-shortcode es el contenedor del widget Shortcode de Elementor; quítalo de los selectores si no usas 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;
}

Coloca [wpcs sd=ID] en el widget Shortcode de Elementor y valora el resultado en la página publicada: un selector del Diseñador lo dibuja su script después de cargar la página, y los editores de los constructores no siempre lo muestran como lo ven los visitantes.

Menús móviles: una barra delgada o una lista en su lugar

Un selector del Diseñador mide la altura de su primera opción al cargar la página y se dimensiona a partir de ella. Si está en un menú móvil que en ese momento está cerrado, el menú está oculto, la altura medida es 0 y, cuando el visitante abre el menú, el selector es una barra de aproximadamente un píxel de alto. Hay dos soluciones.

La rápida es una altura mínima en CSS. Sustituye .mobile-menu por la clase del panel del menú móvil de tu tema (inspecciónalo en el navegador) y ajusta 36px a la altura de una opción:

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

La exacta es dejar que el plugin vuelva a dibujar el selector cuando se hace visible. wpcs_init_selectron() es la función propia del plugin que dibuja todos los selectores del Diseñador de la página:

/*
 * 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);

En los teléfonos, un desplegable simple (simple drop-down) suele ser la mejor opción de todos modos: abre el selector propio del teléfono y no tiene nada que medir. Si quieres las monedas como una lista de enlaces, como una lista de idiomas, usa la vista mostrar como banderas (show as flags), o añade elementos de menú del tipo Enlaces personalizados (Custom Links) con la URL ?currency=EUR, ?currency=USD, etc. El plugin cambia la moneda en cualquier dirección de página que lleve este parámetro, y el enlace relativo mantiene al visitante en la misma página. Para poner el propio desplegable en un menú, consulta cómo añadir el selector de monedas al menú.

Un desplegable en el pie de página se abre hacia abajo

Todas las listas con estilo se abren por debajo del selector, así que al final de la página la lista se sale de la pantalla. El desplegable simple (simple drop-down) es el elemento select del propio navegador, y el navegador lo abre hacia arriba cuando no hay espacio debajo. Define Vista del desplegable (Drop-down view) como desplegable simple (simple drop-down) y usa, por ejemplo, [wpcs show_flags=0 width='130px' txt_type='code'] en el pie de página. Si quieres un selector con estilo en otra parte del sitio, usa allí un selector del Diseñador o [wpcs style=1]: ambos ignoran el ajuste Vista del desplegable (Drop-down view).

Un destello blanco al abrirse el desplegable del Diseñador

Si un fondo claro parpadea un instante cuando el visitante hace clic en un selector del Diseñador, mantén recortada su lista mientras se abre:

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

Esto también impide el desplazamiento dentro de la lista. Si en el diseño has definido Altura máxima abierta (Max open height) por debajo de la lista completa, auméntala para que quepan todas las monedas.

Conservar la posición de scroll tras cambiar de moneda

Al elegir una moneda se recarga la página: con ?currency=EUR añadido a la dirección, o como una recarga normal cuando Sin datos GET en el enlace (No GET data in link) está en Sí (Yes). El navegador empieza entonces por arriba, lo cual es molesto cuando el selector o una tabla de tasas está a mitad de una página larga. El plugin no tiene ninguna opción para esto, y editar su front.js se pierde con la siguiente actualización. Este fragmento recuerda la posición cuando se usa un selector, vuelve a desplazarse hasta ella tras la recarga y muestra un cursor de espera mientras carga la nueva página. Funciona con todos los tipos de selector:

/*
 * 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 posición se restaura solo en la misma página y solo dentro de los 30 segundos posteriores al uso del selector, de modo que la navegación normal no se ve afectada. Si un plugin de optimización retrasa el JavaScript hasta la primera interacción, el primer clic en el selector puede producirse antes de que el script se esté ejecutando; excluye estos scripts en línea del retraso, como haces con los archivos del propio plugin.

Lista de comprobación

• Sabes qué tipo estás personalizando: Vista del desplegable (Drop-down view), un atributo style o un ID sd del Diseñador.
• width, show_flags y txt_type se usan solo con ddslick, chosen, wSelect o desplegable simple (simple drop-down).
• Del Estilo n.º 1 al n.º 3 y los selectores del Diseñador se dimensionan con CSS o en el diseño.
• Un selector del Diseñador en un menú oculto tiene una altura mínima o el fragmento de redibujado.
• El selector del pie de página es un desplegable simple (simple drop-down).
• Las cachés están vaciadas y el resultado se ha comprobado en la página publicada, no en el constructor.

Si un selector sigue viéndose mal, publica el enlace de la página y el shortcode que usas en el foro de soporte de WPCS.