Währungsumschalter-Dropdown in WordPress anpassen: Größe, Mobil, Footer

Um das Dropdown des Währungsumschalters in WordPress anzupassen, wählen Sie einen der Umschalter-Typen von WPCS, setzen ein paar [wpcs]-Attribute und ergänzen den Rest per CSS. Welche Attribute und welches CSS funktionieren, hängt vom Typ ab – und das ist meist der Grund, warum eine Breite oder eine Einstellung scheinbar nichts bewirkt. Diese Anleitung geht die Typen durch, danach Größe und Ausrichtung (auch in Elementor), mobile Menüs, einen Umschalter im Footer, das kurze Aufblitzen beim Klick und das Zurückspringen der Seite nach oben nach einem Währungswechsel.

Zuerst den Umschalter-Typ wählen

Das Aussehen von [wpcs] wird über Dropdown-Ansicht (Drop-down view) auf dem Tab Optionen (Options) unter Einstellungen (Settings) → Currency Switcher festgelegt. Zwei Arten von Umschaltern ignorieren diese Einstellung: [wpcs style=2] zeigt für diesen einen Shortcode Style #2, und [wpcs sd=3] zeigt das auf dem Tab Designer erstellte Design 3. Der Tab Seiten-Umschalter (Side switcher) fügt einen separaten Umschalter hinzu, der am Bildschirmrand fixiert ist.

Die gestalteten Dropdowns öffnen ihre Liste immer unterhalb des Umschalters; nur beim einfachen Dropdown (simple drop-down) entscheidet der Browser.

Attribute und der Text der Optionen

Für die Typen, die Attribute akzeptieren:

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

• show_flags: 1 oder 0. Ohne Angabe entscheidet Flaggen standardmäßig anzeigen (Show flags by default) auf dem Tab Optionen (Options).
• width: in px oder %, zum Beispiel '150px' oder '50%'. Ohne Angabe ist der Umschalter 100 % breit.
• txt_type: code zeigt den Code, bei Währungssymbole anzeigen (Show money signs) auf Ja (Yes) zusätzlich das Symbol (USD, $); desc zeigt die Beschreibung der Währung.

Es gibt nur diese beiden Textmodi, aber die Beschreibung ist ein freier Text. Um $ US dollar oder nur $ anzuzeigen, tragen Sie das in das Beschreibungsfeld der Währungszeile ein und verwenden txt_type='desc'. In einem Designer-Umschalter erledigt das Feld Titelwert (Title value) dasselbe mit den Schlüsseln __CODE__, __SIGN__ und __DESCR__: __SIGN__ allein zeigt nur Symbole, __CODE__ - __SIGN__ zeigt USD - $. Alle Attribute sind auf der Seite zum Shortcode [wpcs] aufgelistet.

Breite, Höhe und Ausrichtung, auch in Elementor

Ein Umschalter übernimmt die Breite des Ortes, an dem Sie ihn einfügen, sofern nichts anderes festgelegt ist. In einer breiten Elementor-Spalte oder Kopfzeile dehnt er sich über die gesamte Spalte. Für ddslick, chosen, wSelect und das einfache Dropdown (simple drop-down) genügt das Attribut width. In einem Designer-Umschalter legen Sie Breite (Width) im Design fest (oder aktivieren Breite 100% (Width 100%)) und verwenden Skalierung (Scale), Schriftgröße des Titels (Title font size) und Flaggenhöhe (Flag height), um ihn kleiner oder größer zu machen. Style #1 bis #3 füllen immer ihren Container, begrenzen Sie sie daher per CSS.

Fügen Sie das CSS unter Design (Appearance) → Anpassen (Customize) → Zusätzliches CSS (Additional CSS) ein (oder in das benutzerdefinierte CSS Ihres Builders). .elementor-shortcode ist der Wrapper des Shortcode-Widgets von Elementor; lassen Sie ihn aus den Selektoren weg, wenn Sie Elementor nicht verwenden.

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

Fügen Sie [wpcs sd=ID] in das Shortcode-Widget von Elementor ein und beurteilen Sie das Ergebnis auf der Live-Seite: Ein Designer-Umschalter wird nach dem Laden der Seite per Skript gezeichnet, und die Editoren von Buildern zeigen ihn nicht immer so, wie ihn Besucher sehen.

Mobile Menüs: ein dünner Balken oder stattdessen eine Liste

Ein Designer-Umschalter misst beim Laden der Seite die Höhe seiner ersten Option und richtet seine Größe danach aus. Befindet er sich in einem mobilen Menü, das in diesem Moment geschlossen ist, ist das Menü verborgen, die gemessene Höhe beträgt 0, und wenn der Besucher das Menü öffnet, ist der Umschalter ein Balken von etwa einem Pixel Höhe. Es gibt zwei Lösungen.

Die schnelle ist eine Mindesthöhe per CSS. Ersetzen Sie .mobile-menu durch die Klasse des mobilen Menüpanels Ihres Themes (prüfen Sie sie im Browser) und passen Sie 36px an die Höhe einer Option an:

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

Die genaue Lösung besteht darin, den Umschalter vom Plugin neu zeichnen zu lassen, sobald er sichtbar wird. wpcs_init_selectron() ist die plugineigene Funktion, die alle Designer-Umschalter auf der Seite zeichnet:

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

Auf Smartphones ist ein einfaches Dropdown (simple drop-down) ohnehin oft die bessere Wahl: Es öffnet die Auswahl des Telefons und hat nichts zu messen. Wenn Sie Währungen als Liste von Links möchten, wie eine Sprachliste, verwenden Sie die Ansicht als Flaggen anzeigen (show as flags) oder fügen Menüeinträge vom Typ Eigene Links (Custom Links) mit der URL ?currency=EUR, ?currency=USD usw. hinzu. Das Plugin schaltet die Währung für jede Seitenadresse um, die diesen Parameter enthält, und der relative Link hält den Besucher auf derselben Seite. Wie Sie das Dropdown selbst in ein Menü einfügen, lesen Sie unter Währungsumschalter zum Menü hinzufügen.

Ein Dropdown im Footer öffnet sich nach unten

Alle gestalteten Listen öffnen sich unterhalb des Umschalters, sodass die Liste am Seitenende über den Bildschirm hinausragt. Das einfache Dropdown (simple drop-down) ist das Select-Element des Browsers selbst, und der Browser öffnet es nach oben, wenn unten kein Platz ist. Stellen Sie Dropdown-Ansicht (Drop-down view) auf einfaches Dropdown (simple drop-down) und verwenden Sie im Footer zum Beispiel [wpcs show_flags=0 width='130px' txt_type='code']. Wenn Sie an anderer Stelle der Website einen gestalteten Umschalter möchten, verwenden Sie dort einen Designer-Umschalter oder [wpcs style=1]: Beide ignorieren die Einstellung Dropdown-Ansicht (Drop-down view).

Ein weißes Aufblitzen beim Öffnen des Designer-Dropdowns

Wenn kurzzeitig ein heller Hintergrund flackert, sobald der Besucher auf einen Designer-Umschalter klickt, halten Sie dessen Liste beim Öffnen abgeschnitten:

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

Dadurch wird auch das Scrollen innerhalb der Liste unterbunden. Wenn Sie im Design Maximale Höhe im geöffneten Zustand (Max open height) niedriger als die gesamte Liste eingestellt haben, erhöhen Sie den Wert, damit alle Währungen hineinpassen.

Die Scroll-Position nach dem Währungswechsel beibehalten

Die Auswahl einer Währung lädt die Seite neu: mit angehängtem ?currency=EUR in der Adresse oder als einfaches Neuladen, wenn Keine GET-Daten im Link (No GET data in link) auf Ja (Yes) steht. Der Browser beginnt dann ganz oben, was lästig ist, wenn der Umschalter oder eine Kurstabelle mitten auf einer langen Seite steht. Das Plugin hat dafür keine Option, und Änderungen an seiner front.js gehen mit dem nächsten Update verloren. Dieses Snippet merkt sich die Position, wenn ein Umschalter benutzt wird, scrollt nach dem Neuladen dorthin zurück und zeigt einen Warte-Cursor, während die neue Seite lädt. Es funktioniert mit jedem Umschalter-Typ:

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

Die Position wird nur auf derselben Seite und nur innerhalb von 30 Sekunden nach Benutzung des Umschalters wiederhergestellt, sodass die normale Navigation nicht beeinflusst wird. Wenn ein Optimierungs-Plugin JavaScript bis zur ersten Interaktion verzögert, kann der erste Klick auf den Umschalter erfolgen, bevor das Skript läuft; schließen Sie diese Inline-Skripte von der Verzögerung aus, so wie Sie es bei den eigenen Dateien des Plugins tun.

Checkliste

• Sie wissen, welchen Typ Sie gestalten: Dropdown-Ansicht (Drop-down view), ein style-Attribut oder eine Designer-sd-ID.
• width, show_flags und txt_type werden nur mit ddslick, chosen, wSelect oder dem einfachen Dropdown (simple drop-down) verwendet.
• Style #1 bis #3 und Designer-Umschalter werden per CSS oder im Design dimensioniert.
• Ein Designer-Umschalter in einem verborgenen Menü hat eine Mindesthöhe oder das Snippet zum Neuzeichnen.
• Der Umschalter im Footer ist ein einfaches Dropdown (simple drop-down).
• Caches sind geleert, und das Ergebnis wurde auf der Live-Seite geprüft, nicht im Builder.

Sieht ein Umschalter weiterhin falsch aus, posten Sie den Seitenlink und den verwendeten Shortcode im WPCS-Support-Forum.