In diesem Beitrag
TranslatePress bietet zahlreiche Möglichkeiten, den Sprachumschalter Ihrer Website von Haus aus individuell zu gestalten. So fügt er sich nahtlos in das Design Ihrer Website ein und sorgt für ein einheitliches Markenerlebnis. Darüber hinaus können Sie ihn mithilfe von Code weiter anpassen und sogar einen eigenen Sprachumschalter von Grund auf neu erstellen.
Also werde ich Ihnen in diesem Artikel zeigen, wie Sie einen auf 3 verschiedene Arten erstellen können, beginnend mit der einfachsten No-Code-Option bis hin zur Erstellung von Grund auf mit PHP.
Aber lassen Sie uns zunächst die Vorteile einer Neugestaltung Ihres Sprachumschalters betrachten. Anschließend werde ich auf die verfügbaren Optionen in den TranslatePress-Einstellungen eingehen und erläutern, wie Sie mithilfe von Markup Änderungen an Ihrem Sprachumschalter vornehmen können.
Warum sollte man in TranslatePress einen benutzerdefinierten Sprachumschalter erstellen?
Das Anpassen Ihres Sprachumschalters kann dazu beitragen, das Design, die Benutzerfreundlichkeit, die Barrierefreiheit, die Glaubwürdigkeit und die Wirksamkeit Ihres mehrsprachige website:
- Es sorgt dafür, dass dieser notwendige Teil Ihrer Benutzeroberfläche gut zum Rest Ihres Website-Design, was zu einem einheitlichen Branding, einer angenehmen Benutzererfahrung und einem professionellen Eindruck führt.
- Besucher können einfacher auf Inhalte in ihrer gewünschten Sprache zugreifen, was die Wahrscheinlichkeit erhöht, dass sie länger auf Ihrer Website bleiben. Dies erhöht auch das Vertrauen und macht Ihre Website attraktiver.
- Sie können entsprechende Gestaltungsentscheidungen treffen für Besucher mit Beeinträchtigungen, wie beispielsweise ein ausreichender Farbkontrast und ausreichend große Schaltflächen.
Schließlich bietet Ihnen die Möglichkeit, das Design Ihres Sprachumschalters anzupassen, mehr Freiheit und Kontrolle darüber, wie Ihre Website aussieht. Sie können mit verschiedenen Positionen, Formen, Farben und Designs des Umschalters experimentieren, Schriftarten, und sogar maßgeschneiderte Designs für Mobilgeräte.
Okay, kommen wir nun zu den drei Methoden, mit denen Sie einen benutzerdefinierten Sprachumschalter zu Ihrer Website hinzufügen können, wenn Sie TranslatePress verwenden – von einfach bis schwierig.
Einfache Methode: TranslatePress – Integrierte Anpassungsoptionen
Fangen wir mit der einfachsten Methode an (und der besten, wenn Sie mich fragen). Einfach, schnell, kein Code, aber dennoch viele Anpassungsoptionen.
Das TranslatePress-Plugin bietet zahlreiche integrierte Optionen zur Anpassung des eingebauten Sprachumschalters, sodass Sie mit nur wenigen Klicks umfassende Änderungen vornehmen können. Sie finden alle diese Optionen in Ihrem WordPress-Dashboard unter Einstellungen → TranslatePress → Sprachwechsler.
Der standardmäßige TranslatePress-Sprachumschalter ist in drei Versionen erhältlich:
- als schwebende Schaltfläche
- der
- oder als Menüpunkt
Jede dieser Optionen bietet eigene Anpassungsmöglichkeiten. Schauen wir uns jede davon einzeln an.
Der schwebende Sprachumschalter
Mit dem Schalter auf der rechten Seite können Sie den schwebenden Umschalter aktivieren. Eine Vorschau in der oberen linken Ecke zeigt Ihnen, wie er auf der Seite aussehen wird. Dieser Umschalter bleibt immer im Vordergrund Ihrer Website und folgt Ihren Besuchern auf jeder Seite, die sie aufrufen.
Unter Schaltertyp, Sie können zunächst festlegen, ob Ihre Sprachen als Dropdown-Menü angezeigt werden sollen, oder – falls Sie auf Ihrer Website genau zwei Sprachen anbieten – diese nebeneinander anzeigen lassen. Darunter finden Sie eine Reihe von Design-Voreinstellungen. Diese lassen sich mit einem einzigen Klick aktivieren.
Außerdem ist die Design anpassen Dieser Abschnitt enthält Dutzende von Optionen, mit denen sich nahezu jeder Aspekt des Switchers anpassen lässt, darunter:
- Hintergrundfarbe und Farbe beim Darüberfahren mit der Maus
- Textfarbe (normal und beim Darüberfahren mit der Maus)
- Farbe, Breite und Radius der Umrandung (d. h. die Rundung der Ecken)
- Bewegungsanimationen des Dropdown-Menüs
- Flagge und Textgröße (normal oder groß)
- Flaggen-Symbol Form (Rechteck oder Quadrat)
Sie haben außerdem die Möglichkeit, benutzerdefiniertes CSS einzugeben, aber dazu später mehr.
Unter Layout anpassen, Sie können die Position und andere Teile des Aussehens Ihres Sprachwechslers anpassen.
Konkret können Sie:
- Platzieren Sie es in der unteren oder oberen linken bzw. rechten Ecke des Bildschirms
- Anpassen Schaltflächenbreite
- Passen Sie den Abstand (d. h. den inneren Abstand um den Text herum) an
- Platzieren Sie die Sprachflaggen vor oder hinter dem Namen oder blenden Sie sie vollständig aus
- Die vollständigen Namen der Sprachen, deren ISO-Code (EN, DE usw.) oder gar nichts anzeigen
Beachten Sie, dass Sie auch unterschiedliche Einstellungen für Desktop und Mobilesucher.
Endlich gibt es Zusätzliche Einstellungen.
Es hat nur zwei Einstellungen:
- Wenn Sie genau zwei Sprachen auf Ihrer Website haben, können Sie festlegen, dass der Umschalter immer die andere Sprache als die aktuell aktive anzeigt.
- Du kannst im Sprachumschalter des Floaters ein kleines “Powered by TranslatePress”-Logo anzeigen lassen (wir freuen uns über die Erwähnung, falls du das tust ☺️).
Speichern Sie Ihre Änderungen, um sie dauerhaft zu übernehmen. Verwenden Sie die Änderungen rückgängig machen Schaltfläche zum Wiederherstellen der Standardeinstellungen.
Der Shortcode/Block-Sprachumschalter
Die Shortcode-Einstellungen bieten ähnliche Optionen wie für den schwebenden Sprachumschalter. Ein wesentlicher Unterschied besteht darin, dass Sie diesen Umschalter an bestimmten Stellen auf Ihrer Website platzieren können – wie im Footer oder auf einer bestimmten Seite.
Sie können es überall auf Ihrer Website kopieren und einfügen, damit der Umschalter an genau dieser Stelle angezeigt wird.
Der Shortcode ist jedoch hauptsächlich für klassische gedacht Themen. Für Block-Themes bietet TranslatePress eine spezielle Sprachwechsler Block.
Sie können das Button-Design fast genauso anpassen wie den schwebenden Umschalter.
Unter Zusätzliche Einstellungen, es gibt eine zusätzliche Option, den Sprachumschalter per Klick statt per Hover zu öffnen.
Der Menüpunkt-Umschalter
Schließlich haben Sie die Möglichkeit, den Sprachumschalter als Menü Element zu Ihrem WordPress-Menü.
Diese Art von Umschalter ist auch für klassische Themes sehr nützlich. Bei Themes, die Blöcke verwenden, ist es möglicherweise einfacher, das zuvor genannte zu verwenden Sprachwechsler stattdessen blockieren.
Diese Option ist in Bezug auf die Anpassbarkeit etwas strenger, da das Menüdesign mit dem Design deines Themes verknüpft ist. Daher sind die einzigen Anpassungsoptionen hier die Positionen der Flaggensymbole und die Namen der Sprachen. Du findest hier auch eine Einstellung zur Steuerung der Form des Flaggensymbols (Rechteck, Quadrat, gerundet).
Der knifflige Teil dabei ist, dass Sie Ihre Sprachen auch manuell über Ihre Menüeinstellungen zum Menü hinzufügen müssen. Das bedeutet, dass Sie navigieren müssen zu Darstellung → Menüs, und das spezifische Menü auswählen, dem Sie Ihren Umschalter hinzufügen möchten.
Dann von dem Menüpunkte hinzufügen Bereich links, den öffnen Sprachwechsler Registerkarte, und fügen Sie die gewünschten Sprachen in Ihr Menü ein, indem Sie sie als Unterelemente unter Aktuelle Sprache. Dadurch entsteht ein Dropdown-ähnlicher Umschalter, über den Benutzer ihre bevorzugte Sprache auswählen können.
Ändern der Standard-Sprachflaggen
Die letzte integrierte Option, die ich für das Erstellen eines benutzerdefinierten Sprachumschalters durchgehen möchte, ist, wie man die Standard-Sprachflaggen ändert.
Wenn Sie für eine beliebige Sprache ein anderes Flaggensymbol verwenden möchten, müssen Sie die Datei als Erstes über Ihre WordPress-Website hochladen Mediathek → Mediendatei hinzufügen.
Wenn Sie fertig sind, öffnen Sie das Bild in der Medienbibliothek und kopieren Sie den Link zu seinem Speicherort.
Gehen Sie dann zu Einstellungen → TranslatePress → Erweitert → Benutzerdefinierte Sprache. Hier eingeben ISO-Code der Sprache, für die Sie das Flaggensymbol ändern möchten, unter Sprachcode, und geben Sie dann den Link zu Ihrer neu hochgeladenen Flaggen-Datei in der Flagge-URL Feld und klick Hinzufügen, und dann speichern.
Sie können dies für beliebig viele Sprachen tun, die Sie verwenden. Wenn Sie speichern, wird das neue Flaggensymbol im Frontend Ihrer Website angezeigt.
Fortgeschrittene Methode: So passen Sie den TranslatePress-Sprachumschalter per CSS an
Während dir die Einstellungen, die ich dir bereits gezeigt habe, jede Menge Anpassungsoptionen bieten, ohne eine einzige Zeile Code zu verwenden, mag es Fälle geben, in denen du die Dinge noch ein Stück weiter vorantreiben möchtest.
Um den Sprachumschalter noch weiter anzupassen, als es die integrierten Einstellungen ermöglichen, haben Sie immer die Möglichkeit, eigenes CSS zu verwenden.
Wie bereits erwähnt, verfügt das schwebende Sprachumschaltmenü über einen dedizierten Benutzerdefiniertes CSS Option. Sie können sie einschalten und Ihr eigenes Markup eingeben, um das Design des Schalters weiter zu verändern.
Schauen wir uns an, was möglich ist. Gleich nach einem Crashkurs in CSS für Anfänger.
Eine kurze Einführung in CSS
Falls Sie ein absoluter Anfänger sind: CSS ist die Auszeichnungssprache, die einen Großteil des Aussehens, des Layouts und des Verhaltens von Websites bestimmt. Während HTML-Elemente die Struktur bereitstellen, entscheidet CSS über Folgendes:
- Wie groß diese Elemente sind
- Welche Farben haben sie?
- Welche Schriftart verwenden sie
- wie sie positioniert sind
- wie viel Platz sie um sich herum haben
- und vieles mehr
Hier ist, wie ein typisches Stück CSS-Code (das als “Regelsatz” bezeichnet wird) aussieht:
.button {
background-color: #0073aa;
color: #ffffff;
font-size: 16px;
}Es besteht aus mehreren Teilen:
- Selektor Ganz oben, vor den öffnenden geschweiften Klammern, befindet sich der sogenannte Selektor. Er heißt so, weil er bestimmt beziehungsweise ausählt, welches Webseitenelement das CSS verändern wird. In diesem Fall ist das ein Element mit einer Klasse namens “button”, also höchstwahrscheinlich ein echter Button auf der Seite.
- Eigentum Dies ist der Teil, der bestimmt, auf welches Attribut des ausgewählten Elements der Regelsatz abzielt. In diesem Fall sind es die Hintergrundfarbe, die Schriftfarbe und die Schriftgröße des Elements. Es gibt jedoch viele CSS-Eigenschaften, einschließlich Breite (width), Zeilenhöhe (line-height) oder Textausrichtung (text-align).
- Wert Eigenschaften benötigen einen Wert; dieser bestimmt, welche Eigenschaft die betreffende Eigenschaft annimmt. In diesem Fall ist beispielsweise die Schriftgröße auf 16 Pixel und die Schriftfarbe auf #ffffff festgelegt, was der Hexadezimalcode für Weiß ist. Ein Eigenschaft-Wert-Paar wird als Deklaration bezeichnet. Wie Sie sehen, können Sie mehrere Deklarationen in einem Regelsatz haben.
Der letzte wichtige Teil ist die Syntax. CSS-Deklarationen benötigen am Ende ein Semikolon, und Regelsätze erfordern öffnende und schließende geschweifte Klammern. Natürlich gibt es noch viel mehr zu lernen, aber das reicht erst einmal.
Auswahl der richtigen Selektoren
Wie Sie sich vorstellen können, erfordert das Vornehmen von Änderungen über CSS, dass Sie die richtigen Selektoren ansprechen. Sie können diese mithilfe der Browser-Entwicklertools finden. Klicken Sie einfach mit der rechten Maustaste auf ein beliebiges Element auf einer Webseite in Ihrem Browser und wählen Sie dann Inspizieren.
Die Entwicklertools des Browsers zeigen Ihnen die HTML-Struktur der Seite und das CSS-Markup des ausgewählten Elements. Es erfordert ein wenig Übung, um zu verstehen, an welcher der Boxen Sie Änderungen vornehmen möchten, aber Sie werden den Dreh schnell heraushaben.
Wichtige Selektoren zur Anpassung des TranslatePress-Sprachumschalters sind:
.trp-language-switcherDas ist die Klasse des Sprachelement-Umschalters selbst..trp-language-switcher-innerDas Wrapperelement für die Liste der Sprachen..trp-switcher-dropdown-listermöglicht das Anpassen der Sprach-Dropdown-Liste..trp-language-itemFür die einzelnen Sprachen in Ihrer Liste..trp-language-item__currentDie Klasse für die aktuell aktive Sprache in Ihrer Liste..trp-flag-image: Zielt auf die Sprachflaggengrafiken ab.
Die verschiedenen Varianten des Sprachumschalters können ebenfalls zusätzliche Klassen haben. Beispielsweise hat der Sprachumschalter-Block ein Wrapperelement mit der Klasse .trp-block-container. Diese können Ihnen helfen, Code zu unterscheiden, der nur auf einen Typ von Sprachumschalter abzielt. Außerdem haben mehrere Elemente mehr als eine Klasse oder ID, was Ihnen helfen kann Erstelle einen spezifischeren Selektor um anderes Markup zu überschreiben.
Mach dir keine Sorgen, wenn du das noch nicht alles verstehst. Es wird klarer, sobald ich die Beispiele durchgehe.
Position des Sprachumschalters ändern
Der schwebende Sprachumschalter verfügt über vier Standardpositionen. Wenn Sie ihn an einer anderen Stelle platzieren möchten, müssen Sie dies mit Code tun.
Der einfachste Weg ist, das bestehende CSS zu überschreiben. Wenn Sie den Sprachumschalter über dessen Einstellungen in der unteren rechten Ecke platzieren und in den Entwicklertools des Browsers untersuchen, können Sie diese beiden Deklarationen sehen, die daran angehängt sind:
--bottom: 0px;
--right: 10vw;(Wenn Sie verwirrt sind, dass sie anders aussehen als die anderen CSS-Eigenschaften, die ich verwende, liegt das daran, dass sie Benutzerdefinierte Eigenschaften oder Variablen.)
Sie können diese überschreiben mit .trp-language-switcher wie folgt:
.trp-language-switcher {
right: 0px;
bottom: 50%;
}Wenn Sie das Markup oben in das Benutzerdefiniertes CSS Feld in den Einstellungen des Sprachumschalters und speichern, erhalten Sie folgendes Ergebnis (ich habe auch die Sprachnamen ausgeschaltet, damit es besser aussieht).
Beachten Sie, dass Sie, wenn Sie die Position des Sprachumschalters in den Einstellungen anders festgelegt haben (z. B. oben links statt unten rechts), eventuell andere CSS-Deklarationen überschreiben müssen, um ihn zu verschieben.
Form und Stil anpassen
Sie können auch CSS verwenden, um das Aussehen des Sprachumschalters zu verändern. In diesem Fall möchte ich beispielsweise den Umschalter und die Liste der Sprachen in Kreise verwandeln. Er ist bereits dort platziert, wo ich ihn haben möchte; ich brauche nur ein wenig Platz rechts davon. Das ist mit diesem CSS möglich:
.trp-language-switcher {
bottom: 50%;
right: 1.5vw;
}Um die nächsten Änderungen sichtbar zu machen, müssen wir zuerst die Hintergrundfarbe und die Rahmenfarbe in den Einstellungen auf transparent stellen.
Dann können wir den Sprachumschalter in einen Kreis verwandeln und ihm etwas Farbe zurückgeben:
.trp-language-switcher .trp-language-item {
background-color: rgb(181, 11, 62);
border-radius: 50%;
padding: 16px;
}Das rundet die Ecken ab und fügt zudem etwas internen Abstand hinzu, um jede Sprachschaltfläche perfekt rund zu machen. Das Ganze sieht am Ende so aus:
Jetzt möchte ich einige Abstände zwischen den Sprachfeldern:
.trp-language-switcher-inner,
.trp-language-switcher .trp-switcher-dropdown-list {
gap: 5px;
}
Das Layout steht, jetzt braucht es nur noch ein wenig Styling und ein paar Anpassungen an der Art und Weise, wie es sich öffnet:
.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);
}Der obige Code:
- Fügt eine neue Hintergrundfarbe hinzu
- Passt die Hintergrundfarbe beim Hovern an
- Verschiebt den Auslöser für das Dropdown-Menü auf die Listenelemente
Hier ist das Ergebnis.
Hier ist der gesamte Code als Einheitsdatei:
.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);
}Mobil-Design anpassen
Das Letzte, worauf ich im Hinblick auf CSS eingehen möchte, ist, wie Sie das mobile Design Ihres Sprachwechslers anpassen können. Dies kann erforderlich sein, um das Design für kleinere Bildschirmgrößen anzupassen.
Sie können mobil-spezifische Designänderungen über sogenannte “Media Queries” einführen. Sie führen Bedingungen in das CSS-Markup ein. Sie besagen im Grunde: “Verwende dieses Markup nur, wenn der Bildschirm kleiner oder größer als eine bestimmte Größe ist.” Hier ist ein Beispiel:
@media (max-width: 480px) {
.trp-language-switcher {
bottom: 1.5vw;
}
}In der ersten Zeile heißt es lediglich: “Die folgenden Regelsätze gelten nur für Bildschirme mit einer Breite von maximal 480 Pixeln.” Darunter befindet sich eine Variante des zuvor verwendeten Positionierungs-Markups. Dadurch wird der benutzerdefinierte Sprachumschalter wieder an den unteren Bildschirmrand verschoben.
Beachten Sie, dass Sie nur diejenigen Deklarationen einbinden müssen, die Sie überschreiben möchten. Hier ändern wir nur die Unten Eigentum von .trp-language-switcher. Alles andere bleibt so, wie wir es zuvor eingerichtet haben.
Schließlich ist es wichtig, dass Sie Media Queries am Ende Ihres CSS-Markups platzieren. Browser verarbeiten CSS von oben nach unten. Wenn Sie also frühere Deklarationen oder Regelsätze überschreiben möchten, muss Ihr neuer Code weiter unten als das Original stehen.
Pro-Methode: So erstellen Sie einen Sprachumschalter mit PHP
Dieser Abschnitt richtet sich an Profis. Wenn Sie aus einem bestimmten Grund noch einen Schritt weiter gehen möchten, können Sie auch einen eigenen TranslatePress-Sprachumschalter von Grund auf selbst erstellen.
Dies verhindert zum Beispiel, dass Sie bestehende CSS-Markups überschreiben müssen. Stattdessen haben Sie von Anfang an die volle Kontrolle über die Struktur, das Layout, die Interaktivität und den Stil Ihres Sprachwechslers.
Um Ihnen zu zeigen, wie es funktioniert, erstellen wir einen minimalistischen, horizontalen Umschalter, der nur Flaggen anzeigt und sich leicht in verschiedenen Bereichen Ihrer Website einbinden lässt.
1. Die PHP-Funktion kennenlernen
TranslatePress bietet eine benutzerdefinierte Funktion zum Erstellen eines eigenen Sprachumschalters. Sie gibt Parameter für alle wichtigen Datenpunkte der auf Ihrer Website aktiven Sprachen zurück:
- Sprachname Der vollständige Sprachname (z. B. “Englisch”).
- Sprachcode Der Sprachcode (z. B. “EN”).
- Kurzbezeichnung der Sprache: Die in URLs verwendete Sprach-Slug.
- Link kennzeichnen: Die URL zum Flaggenbild der Sprache.
- Aktuelle URL: Die URL der Seite, auf der sich der Besucher befindet, jedoch in dieser Sprache.
Sie können dies verwenden, um Ihren eigenen Sprachumschalter mit Ihrem eigenen Markup zu erstellen. Eine Möglichkeit besteht darin, ihn direkt in einer Theme-Datei innerhalb eines Child-Theme-Verzeichnisses zu platzieren (nicht im Haupt-Theme, da Ihre Änderungen überschrieben werden, wenn Sie das Theme aktualisieren). Alternativ können Sie einen Shortcode erstellen in functions.php, einem Code-Snippet-Plugin oder mit Ihrem eigenen benutzerdefinierten Plugin und verwenden Sie den Shortcode, um den Sprachumschalter auf Ihrer Website zu platzieren.
Wir entscheiden uns hier für die zweite Option.
2. Erstellen Sie den Shortcode
Das Erste, was wir tun werden, ist das Grundgerüst für den Shortcode einzurichten, den wir erstellen werden. Platzieren Sie dies in Ihrem Child-Theme functions.php oder eine PHP-Datei in Ihrem eigenen Plugin:
<?php
function my_custom_language_switcher() {
// Code für den Sprachumschalter kommt hierhin
}
add_shortcode( 'my_language_switcher', 'my_custom_language_switcher' );Dadurch wird die PHP-Funktion eingerichtet, die schließlich den Shortcode in WordPress registriert und ausgibt.
3. Erstellen Sie das HTML für den Sprachumschalter
Als Nächstes wollen wir die Grundstruktur für den Sprachumschalter erstellen. Da wir minimalistisch vorgehen, ist das relativ einfach.
<div class="my-language-switcher">
<ul>
<li class="language-item">
<a href="#"><img src="flag.png" alt="Sprachflagge"></a>
</li>
</ul>
</div>Es ist im Grunde ein Wrapper-Element mit einer ungeordneten Liste darin. Jedes Listenelement enthält ein Link-Element für die Sprache, welches das Flaggenbild enthält.
4. Dynamische PHP-Daten hinzufügen
Wir fügen nun die HTML-Struktur zu unserer Shortcode-Funktion hinzu und fügen die Sprachdaten über PHP hinzu.
<?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
// Return the HTML for the shortcode
return ob_get_clean();
}
// Register the shortcode
add_shortcode('my_language_switcher', 'my_custom_language_switcher');Dadurch wird dasselbe HTML-Markup erstellt, das wir zuvor gesehen haben, allerdings für jede aktive Sprache auf Ihrer Website. Außerdem werden die Sprach-URL, der Link zum Flaggenbild und der Sprachname als Bild-ALT-Tag eingefügt. Darüber hinaus wird der aktuell aktiven Sprache eine zusätzliche Klasse hinzugefügt, falls Sie ein zusätzliches Styling hinzufügen möchten.
5. Testen Sie die Ausgabe auf Ihrer Website
Das funktioniert bereits. Sie können den Shortcode verwenden [my_language_switcher] um den benutzerdefinierten Umschalter an einer beliebigen Stelle auf Ihrer Website zu platzieren, zum Beispiel über das Kurzcode Block im WordPress-Block-Editor. Alternativ platzieren Sie ihn in einer Datei wie header.php oder footer.php mit dieser Zeile Code:
<?php echo do_shortcode('[my_language_switcher]'); ?>Sie sollten Ihre Sprachliste bereits sehen, allerdings völlig unformatiert.
Der letzte Schritt besteht darin, das zu ändern.
6. Styling per CSS hinzufügen
Der letzte Schritt bei der Erstellung Ihres individuellen TranslatePress-Sprachumschalters besteht darin, ihm ein ansprechendes Aussehen zu verleihen. Um das zuvor gezeigte Ergebnis zu erzielen, fügen Sie Folgendes in Ihr Child-Theme, das Stylesheet Ihres Plugins oder die Zusätzliches CSS Feld im WordPress-Editor:
.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;
}
Erstellen Sie noch heute Ihren eigenen benutzerdefinierten Sprachumschalter
Durch die Anpassung des TranslatePress-Sprachumschalters stellen Sie sicher, dass er sich nahtlos in das übrige Design Ihrer Website einfügt und Ihren Nutzern ein optimales Erlebnis bietet.
Oben habe ich verschiedene Möglichkeiten vorgestellt, wie Sie das Erscheinungsbild anpassen können – von den benutzerfreundlichen integrierten Plugin-Einstellungen über CSS-Anpassungen bis hin zu einem komplett neu entwickelten Umschalter mittels PHP. Hoffentlich fühlen Sie sich nun bereit, TranslatePress vollständig in Ihr eigenes Website-Design zu integrieren.
Wie Sie leicht erkennen können, sticht eine Option in puncto Komfort und Geschwindigkeit besonders hervor. TranslatePress bietet bereits standardmäßig zahlreiche Anpassungsmöglichkeiten, sodass Sie kein Programmier-Experte sein müssen, um einen perfekt funktionierenden und individuell angepassten Sprachumschalter zu erhalten.
TranslatePress Mehrsprachig
Probieren Sie es heute aus und haben Sie Ihren Sprachumschalter in wenigen Minuten einsatzbereit!
