Das Erscheinungsbild des Switchers wird im WordPress-Plugin konfiguriert, nicht im Universally-Dashboard. Zehn Einstellungen umfassen Farben, Rahmen und Radius; alles darüber hinaus wird mit CSS-Variablen anstelle von normalem Theme-CSS vorgenommen.
Bevor Sie beginnen
Gehen Sie in WordPress zu Universally im Admin-Menü. Der Punkt Universally in der Admin-Leiste öffnet dieselbe Stelle.
Dies gilt nur für WordPress-Projekte. Auf anderen Plattformen gibt es noch keine Switcher-Konfiguration. Wenn Sie sich auf einer anderen Plattform befinden und jetzt einen Switcher benötigen, erstellen Sie einen über die API: siehe Erstellen Sie einen benutzerdefinierten Sprachumschalter in WordPress für den Ansatz, der sich an jeden Stack anpasst.
Wo sich die Einstellungen befinden
Das Plugin hat vier Tabs: Allgemein, Sprachumschalter, Styling und Einstellungen. Zwei sind hier relevant:
| Tab | Enthält |
|---|---|
| Sprachumschalter | wie der Switcher eingefügt wird, wo er sitzt und was er anzeigt |
| Styling | Farben, Rahmen und Eckradius, separat für den Trigger und das Dropdown |
Tab „Sprachumschalter“
| Einstellung | Optionen |
|---|---|
| Implementierung | Automatisch, was den Switcher ohne Code für Sie einfügt, oder Benutzerdefiniert, was Ihnen einen Shortcode gibt, den Sie in Ihr Theme einfügen können |
| Position | wo ein automatischer Switcher sitzt: Unten Rechts, Unten Links, Oben Rechts oder Oben Links. Alle vier schweben über der Seite. Ignoriert, wenn die Implementierung benutzerdefiniert ist |
| Sprachnamen | den Sprachnamen anzeigen oder ausblenden |
| Länderflaggen | die Flagge anzeigen oder ausblenden |
| Flaggenstil | Abgerundet oder Eckig |
Wählen Sie Änderungen speichern, wenn Sie fertig sind.
Sprachnamen und Länderflaggen sind unabhängige Schalter, sodass ein reiner Flaggen- oder Text-Switcher durch Ausschalten des jeweils anderen erreicht wird.
Styling-Tab
Zwei Abschnitte, jeweils fünf Einstellungen.
Trigger-Styling ist der geschlossene Switcher, den ein Besucher zuerst sieht:
| Einstellung | Typ |
|---|---|
| Hintergrund | Farbe |
| Textfarbe | Farbe |
| Rahmenfarbe | Farbe |
| Rahmen-Hover | Farbe, die verwendet wird, wenn sich der Zeiger über dem Schalter befindet |
| Radius des Rahmens | 0 bis 24px, Standard 6 |
Dropdown-Styling ist die geöffnete Liste:
| Einstellung | Typ |
|---|---|
| Hintergrund | Farbe |
| Textfarbe | Farbe |
| Rahmenfarbe | Farbe |
| Hintergrund beim Hovern über ein Element | Farbe, die für die Sprache unter dem Zeiger verwendet wird |
| Radius des Rahmens | 0 bis 24px, Standard 6 |
Jeder Farbwähler bietet eine Auswahl an Farbfeldern und eine Zurücksetzen-Aktion, um zu keiner Farbe zurückzukehren, wodurch die Standardeinstellung des Schalters erhalten bleibt.
Über die integrierten Optionen hinaus
Der integrierte Schalter ist ein benutzerdefiniertes Element, das seinen eigenen Inhalt in einem Shadow Root rendert. Dies hat eine praktische Konsequenz: Das Theme-CSS kann das Innere nicht gestalten. Eine Regel, die auf eine Klasse innerhalb des Schalters abzielt, trifft nichts und schlägt lautlos fehl.
Zwei Dinge erreichen ihn.
Das Element selbst. universally-switcher ist ein gewöhnliches Element auf Ihrer Seite, sodass Ihr Theme es positionieren kann:
universally-switcher {
display: block;
margin: 0 auto 1rem;
}
CSS-Variablen. Diese werden vom eigenen Stylesheet des Schalters gelesen und überschreiten die Shadow-Grenze, sodass das Festlegen in Ihrem Theme funktioniert. Die vier als keine Einstellung markierten haben keine Entsprechung im Styling-Tab und sind der Grund, Variablen überhaupt zu verwenden.
| Variable | Standard | Auch eine Einstellung |
|---|---|---|
--universally-font-size |
14px |
keine Einstellung |
--universally-trigger-padding |
8px 12px |
keine Einstellung |
--universally-trigger-bg |
#fff |
Hintergrund |
--universally-trigger-text |
#1a1a1a |
Textfarbe |
--universally-trigger-border |
#ddd |
Rahmenfarbe |
--universally-trigger-border-hover |
#999 |
Rahmen-Hover |
--universally-trigger-radius |
6px |
Radius des Rahmens |
--universally-dropdown-bg |
#fff |
Hintergrund |
--universally-dropdown-text |
#1a1a1a |
Textfarbe |
--universally-dropdown-border |
#ddd |
Rahmenfarbe |
--universally-dropdown-hover-bg |
#f5f5f5 |
Hintergrund beim Hovern über ein Element |
--universally-dropdown-radius |
6px |
Radius des Rahmens |
--universally-dropdown-shadow |
0 4px 12px rgba(0,0,0,0.1) |
keine Einstellung |
--universally-focus |
#0073aa |
keine Einstellung |
Legen Sie sie auf das Element oder auf :root, um jede Instanz abzudecken:
universally-switcher {
--universally-font-size: 16px;
--universally-trigger-padding: 10px 14px;
--universally-dropdown-shadow: none;
--universally-focus: #7c3aed;
}
Ein Wert, der im Tab "Styling" festgelegt wird, wird direkt auf das Element geschrieben und überschreibt daher dieselbe Variable, die in Ihrer Stylesheet deklariert ist. Löschen Sie die Einstellung, wenn Sie möchten, dass die CSS-Datei die Kontrolle übernimmt. Die beiden Radiuswerte sind die Ausnahme: Sie werden immer auf das Element geschrieben. Ändern Sie diese daher im Tab "Styling" anstelle von CSS.
Erstellen Sie Ihre eigene. Wenn der Umschalter eine Reihe von Tabs, eine vertikale Liste oder etwas strukturell anderes sein muss, rendern Sie ihn selbst aus denselben Daten, die das Plugin verwendet. Siehe Erstellen Sie einen benutzerdefinierten Sprachumschalter in WordPress.