Viele Seiten (und Themes) brauchen einen benutzerdefinierten Sprachumschalter, der sich in das Gesamt-Design einfügt. Dieses Tutorial erklärt, wie Sie nur mit HTML-Templates und ohne PHP-Programmierung individuelle Sprachumschalter gestalten.

Einführung in Twig-Templates für Sprachumschalter

Twig ist eine Templating Engine, mit der Sie mit HTML und Pseudo-Code designen können.

Dies ist zum Beispiel ein Twig-Template:




<div class="[ css_classes ] my-custom-switcher">



<ul>

   {% for code, language in languages %}



<li class="[ language.css_classes ] my-custom-switcher-item">

           <a href="[ language.url ]">

               {% if language.flag_url %}

                   <img src="[ language.flag_url ]" alt="[ language.code ]" title="[ language.flag_title ]">

               {% endif %}

               [ language.native_name ]

               ([ language.display_name ])

           </a>

       </li>



   {% endfor %}

   </ul>



</div>



Dieses Template macht Folgendes:

  1. Öffnen der Container-DIV und UL-Tags für den Sprachumschalter.
  2. Iterieren durch die verschiedenen Sprachen.
  3. Ausgeben eines Listenobjekts (LI) für jede Sprache.
  4. Ausgeben eines Links auf die Sprache in dem Listenobjekt.
  5. Ausgeben der Flagge, falls die Sprache eine hat.
  6. Ausgeben des Sprachnamens.
  7. Schließen aller ineinander verschachtelten Tags.

Sieht einfach aus? Schauen wir uns einmal an, wie Sie solche Templates für Ihre eigenen Sprachumschalter gestalten können.

Hinzufügen eines Sprachumschalter-Templates zu Ihrem Theme

WPML ermöglicht es Ihnen, dem Theme ein Verzeichnis mit Sprachumschalter-Templates hinzuzufügen. Wenn Sie ein Theme zum Verkaufen erstellen, können Sie diese Templates in Ihr Theme einfügen, sodass alle sie verwenden können. Wenn Sie ein Theme anpassen, sollten Sie diese benutzerdefinierten Sprachumschalter-Templates in einem untergeordneten Theme erstellen, damit Ihre Bearbeitungen nicht bei jedem Theme-Update verloren gehen.

Das Sprachumschalter-Template muss in folgender Ordner-Struktur angelegt werden:

my-theme/wpml/templates/language-switchers/my-template

Struktur der Verzeichnisse Ihrer Sprachumschalter-Dateien

Struktur der Verzeichnisse Ihrer Sprachumschalter-Dateien

Das bedeutet, Sie sollten einen Ordner namens „wpml“ im Stammordner Ihres Themes (oder untergeordneten Theme) erstellen. Darin erstellen Sie die templates/language-switcher-Ordner. In dem language-switchers-Verzeichnis können Sie Unterverzeichnisse für die verschiedenen Templates anlegen, die Sie erstellen (in unserem Beispiel „my-template“.)

Im Template-Verzeichnis („my-template“) brauchen Sie die folgenden Dateien mit den folgenden Namen:

  • template.twig-Datei (erforderlich)
  • config.json-Datei (erforderlich)
  • CSS-Dateien (optional)
  • JS-Dateien (optional)
  • Flaggenverzeichnis (optional)

Gestaltung der template.twig-Datei

Die template.twig-Datei ist das eigentliche Template, das Sie gestalten. Sie nutzt die Twig-Syntax. Im Template können Sie diese Variablen verwenden:

current_language_code (String)

css_classes           (String)

languages             (Array)

code          (String)

url           (String)

flag_url      (String)

flag_title   (String)

native_name   (String)

display_name  (String)

is_current    (Boolesche Variable)

css_classes   (String)

Einstellung der Optionen in der config.json-Datei

Jeder Sprachumschalter muss eine Datei namens config.json haben, die WPML Informationen über den Umschalter liefert.

Hier sind die Felder für diese Datei:

  • name (erforderlich): Der Name des Templates. Ein Präfix ist nicht nötig, WPML macht das mit dem Theme- oder Plugin-Namen. Dies ist das einzige Pflichtfeld.
  • version (optional): Die Version Ihres Templates. Dies wird empfohlen, da es die Aktualisierung der Stylesheets und Javascript-Ressourcen erzwingt.
  • css (optional): Per Standard wird es alle vorhandenen CSS-Dateien im Vorlagen-Verzeichnis durchsuchen und einreihen. Sie können jedoch auch ein JSON-Array von CSS-Dateien im Template-Verzeichnis übergeben. Beispiel: „css“: [„style.css“, „responsive.css“] .
  • js (optional): Per Standard wird es alle vorhandenen JS-Dateien im Vorlagen-Verzeichnis durchsuchen und einreihen. Sie können jedoch auch ein JSON-Array von JS-Dateien im Template-Verzeichnis übergeben.

    Beispiel: „js“: [„script.js“, „click-script.js“] . Beachten Sie, dass das Script in reinem Javascript geschrieben werden sollte, außer das Theme oder Plugin enthält selbst eine andere Bibliothek.

  • flags_dir (optional): Per Standard wird nach einem vorhandenen „flags“-Verzeichnis im Template-Ordner oder dem angegebenen gesucht, sofern einer angegeben ist.
  • flag_extension (optional): Die Dateierweiterung für die Flaggendateien (png, svg, jpg, gif).
  • for (optional): Per Standard wird das Template für alle Stellen der Seite verfügbar sein (“menus”, „sidebars“, „footer“, „post_translations“, „shortcode_actions“). Sie können jedoch eine oder mehrerer dieser Stellen in einem JSON-Array angeben.

    Beispiel: „for“: [„sidebars“, „post_translations“] .

  • settings (optional): Sie können die Benutzereinstellungen in der Admin-Benutzeroberfläche überschreiben, indem Sie einige Einstellungen erzwingen. Übergeben Sie einfach ein JSON-Objekt mit dem erforderlichen Wert (0 oder 1) für display_flags , display_names_in_native_lang , display_names_in_current_lang oder display_link_for_current_lang.

    Beispiel: „settings“: {„display_link_for_current_lang“: 1} .

Hier ist ein grundlegendes Beispiel für eine config.json-Datei:


{

"name":           "My custom switcher",

}

Und hier ist ein vollständigeres Beispiel, mit zusätzlichen (optionalen) Feldern:


{

"name":           "Vertical List",

"version":         "1.0",

"css":            ["style.css"],

"js":             ["script.js"],

"flags_dir":      "super-flags",

"flag_extension": "png",

"for":            ["sidebars", "shortcode_actions"],

"settings":       {"display_link_for_current_lang": 1}

}

Beispiele für Sprachumschalter

Sagen wir, Sie wollen eine benutzerdefinierte Sprache erstellen, die im Menü so erscheinen soll:

Benutzerdefinierter Sprachumschalter mit ISO-Codes

Benutzerdefinierter Sprachumschalter mit ISO-Codes

Das Menü wird nur den ISO-Code für jede Sprache enthalten (in Großbuchstaben).

  1. Erstellen Sie einen neuen Template-Ordner in Ihrem Theme: mytheme/wpml/templates/language-switchers/menu-iso-codes/
  1. Fügen Sie in diesem Ordner eine config.json-Datei mit dem unten stehenden Inhalt hinzu:


{

"name" : "ISO codes for menus",

"for": ["menus"]

}

Im Grunde definieren Sie den Namen des Templates (der in den verfügbaren Auswahlen aufgelistet wird) und in welchem Kontext dieses Template verfügbar sein wird (nur für Menüs).

  1. Fügen Sie jetzt die Datei template.twig mit dem unten stehenden Inhalt hinzu:


[ code|upper ]

Da es ein Menü-Template ist, müssen Sie nur den Inhalt des Menüpunkt-Elements rendern. Hier zeigen wir den Sprachcode an, nachdem er vom Twig-upper-Filter bearbeitet wurde (siehe Dokumentation hier http://twig.sensiolabs.org/doc/filters/upper.html).

Bitte beachten Sie: Sie können die Anzeigeoptionen (Flagge, Muttersprache, …) in der WordPress-Admin-Oberfläche immer noch ändern, dies wird sich jedoch nicht auf das Frontend auswirken, da unser benutzerdefiniertes Template dies nicht verarbeitet. Um Verwirrung für den Benutzer zu vermeiden, können wir die Deaktivierung dieser Einstellungen erzwingen. Hier ist eine erweiterte config.json-Datei:


{

"name" : "ISO codes for menus",

"for": ["menus"],

"settings": {

   "display_flags": 0,

   "display_names_in_native_lang": 0,

   "display_names_in_current_lang": 0

 }

}

Und so wird diese in der Administrations-Benutzeroberfläche ausgegeben:

Individueller Sprachumschalter im Backend

Individueller Sprachumschalter im Backend

Holen Sie sich die Quelle: Sie können die Dateien für dieses Beispiel auf unserer speziellen GitHub-Seite finden.

Horizontale Liste als Sprachumschalter

Sie möchten gern einen minimalistischen horizontalen Sprachumschalter nur mit Flaggen und dem Sprachnamen als Titel anzeigen. Außerdem werden Sie Ihre eigene Sammlung an SVG-Flaggen verwenden.

Horizontaler Sprachumschalter nur mit Flaggen

Horizontaler Sprachumschalter nur mit Flaggen

  1. Erstellen Sie Ihren eigenen Template-Ordner in mytheme/wpml/templates/language-switchers/custom-flags-with-titles/
  1. Importieren Sie Ihre Flaggensammlung aus mytheme/wpml/templates/language-switchers/custom-flags-with-titles/flags/.

(Quelle https://github.com/lipis/flag-icon-css)

Bitte beachten Sie: Die Flaggen-Sammlung muss eine Datei für jeden Sprachcode enthalten, etwa so: “en.svg”, “fr.svg”, “es.svg”, “pt-pt.svg”, …

  1. Erstellen Sie eine config.json-Datei wie die folgende:


{

"name": "Custom flags with titles",

"for": ["sidebars"],

"flag_extension": "svg",

"settings": {

  "display_flags": 1,

  "display_names_in_native_lang": 1,

  "display_names_in_current_lang": 1

 }

}

Sie definieren einfach die Dateierweiterung für die Flaggen (“svg”), aber den Flaggenordner selbst müssen Sie nicht definieren, da wir den Standard-Ordnernamen (“flags”) verwenden.

  1. Erstellen Sie eine template.twig-Datei wie die folgende:




<div class="[ css_classes ] custom-flags-with-titles">



<ul>

     {% <b>for</b> code, language <b>in</b> languages %}



<li class="[ language.css_classes ] item-custom-flags-with-titles">

           <a href="[ language.url ]">

              <img src="[ language.flag_url ]" title="[ language.flag_title ]">

           </a>

        </li>



     {% <b>endfor </b>%}

  </ul>



</div>



  1. Um einige CSS-Stile zu haben, müssen Sie außerdem eine style.css-Datei wie die folgende erstellen:


.custom-flags-with-titles li {

  list-style: none;

  float: left;

  margin: 0 3px;

}



.item-custom-flags-with-titles img {

  max-width: 32px;

  height: auto;

}

Holen Sie sich die Quelle: Sie können die Dateien für dieses Beispiel auf unserer speziellen GitHub-Seite finden.