So machen Sie Ihr Theme mehrsprachig und WooCommerce-kompatibel

Matt Mullenweg, Mitbegründer von WordPress und CEO von Automattic, wurde von Josh Janssen interviewt, in dem er erklärte, dass die nicht-englischen Downloads von WordPress im Mai dieses Jahres die englischen Downloads zum ersten Mal überschritten hätten.


Dieser Trend setzt sich mit WordPress 4.0 fort, wodurch lokalisierte WordPress-Sites so viel einfacher zu installieren und zu warten sind. WordPress 4.0 gibt Ihnen jetzt die Möglichkeit, WordPress in der Sprache Ihrer Wahl herunterzuladen. Dies macht den Installationsprozess für nicht-englische Sprecher zu einem Kinderspiel. In früheren WordPress-Versionen war Englisch die Standardeinstellung und andere Sprachen wurden als Ausnahmen behandelt. WordPress 4.0 macht alle Sprachen gleichermaßen zugänglich. Diese Änderung wird WordPress sicherlich weltweit noch populärer machen.


Das Ziel dieser neuen Funktionen in WordPress 4.0 besteht darin, die Anzahl internationaler Benutzer von WordPress zu erhöhen, die WordPress aufgrund von Sprachschwierigkeiten bisher nicht verwenden konnten. Laut den Angaben von eMarketer sollen die asiatisch-pazifischen Länder China, Japan, Indien, Südkorea und Indonesien Nordamerika im Bereich Business-to-Consumer-E-Commerce überholen.

Was bedeutet das für Sie als Theme- oder Plugin-Entwickler? Erstens bedeutet dies, dass Ihr Produkt zur Lokalisierung bereit sein muss. Alle Texte müssen in "gettext" -Aufrufen eingeschlossen werden, damit Benutzer sie in anderen Sprachen ausführen können. Die Internationalisierung ist jedoch nur der erste Schritt. In vielen Ländern ist der Betrieb einer Website in nur einer Sprache eine wesentliche Einschränkung. Um wirklich global zu sein und das große Potenzial außerhalb des englischsprachigen Marktes zu nutzen, sollten Ihre Produkte auch mehrsprachig sein.


Glücklicherweise ist es mit WPML einfach, mehrsprachige Websites auszuführen. Wir werden die sieben wichtigsten bewährten Methoden beschreiben, damit Ihre Designs und Plugins sowohl auf einsprachigen als auch auf mehrsprachigen Websites funktionieren. Durch Befolgen dieser einfachen Richtlinien und Einhaltung einer sauberen Codierung können Ihre Produkte mehrsprachige Websites unterstützen.


Wie Endbenutzer übersetzen werden und worauf Sie vorbereitet sein müssen

Wenn Sie Ihr Design entwickeln, ist es äußerst wichtig zu verstehen, wie Ihre Endbenutzer ihre Websites übersetzen. Sobald Sie ihre Perspektive erkannt haben, werden Sie erkennen, was Sie tun müssen, um Ihr Thema mehrsprachig zu machen.


Ein typisches Thema zeigt Kopf- und Fußzeilen, Menüs, Widgets, Inhalte und Ihre eigenen benutzerdefinierten Elemente an. Hier ist ein Beispiel einer WooCommerce-Site, die auf einem modifizierten Vierundzwanzigsthema basiert:


Mit WPML können Sie alle Standard-WordPress-Elemente übersetzen. Das beinhaltet:

  • Menüs

  • Standard-Widgets

  • Navigationselemente

  • Alle in "gettext" -Aufrufen verpackten Texte

  • Veröffentlichen Sie den Inhalt einschließlich benutzerdefinierter Felder und Taxonomie

  • Produkte

  • Theme-Optionen

  • Bilder und Zeichenfolgen, die sich auf sie beziehen


Sie müssen dem Code nichts hinzufügen, damit alle diese Abschnitte übersetzt werden können. Achten Sie auf Ihre benutzerdefinierten Elemente, damit Ihre Benutzer diese auch übersetzen können.


Nachfolgend finden Sie eine Tabelle, in der zusammengefasst ist, wie der Endbenutzer standardmäßige Site-Elemente mit WPML übersetzt. 

Was Endbenutzer mit WPML übersetzen können

Übersetzen Sie den Header mit dem WPML String Translation Tool

Da es nicht Bestandteil von Beiträgen, Seiten oder Taxonomien ist, müssen Sie WPMLs String Translation verwenden, um es zu übersetzen. Gehen Sie zu WPML-> String Translation, suchen Sie den String nach Inhalt (der Titel der Site) und übersetzen.

 

Übersetzen Sie WordPress-Menüs

Wenn Sie zu Darstellung> Menüs wechseln, werden die Steuerelemente zur Menüübersetzung von WPML angezeigt. Erfahren Sie mehr über das Übersetzen von Menüs, um zu sehen, wie das funktioniert.

Übersetzen Sie benutzerdefinierte Elemente oder Plugin-Elemente

Viele Themes oder Plugins verfügen über einzigartige Funktionen, die Texte in der App speichern wp_options Tabelle. Das Einleitende Nachricht, durch Resort macht das genau. Das Theme oder Plugin speichert diese Texte in der Tabelle wp_options. Wir müssen WPML mit der Übersetzung beauftragen. Wir fügen diese Informationen der Sprachkonfigurationsdatei hinzu. Dort teilen wir WPML mit, welche Einträge in der Tabelle wp_options übersetzt werden müssen.

Diese Technik ist gut, wenn für die Tasten die Optionen festgelegt sind (wie in den meisten Themen). Wenn Ihr Design Arrays von Einträgen verwendet, die mit der Benutzereingabe wachsen können, müssen Sie diese Einträge dynamisch registrieren. Verwenden Sie dazu die WPML-Funktionen icl_register_string und icl_t.

Den Post Body übersetzen

Mit WPML können Benutzer Inhalte problemlos übersetzen. Die Bildbearbeitungs-Bildschirme enthalten die Übersetzung von WPML Steuerelemente, um neue Übersetzungen erstellen und vorhandene bearbeiten zu können.

Sie müssen nichts im Theme oder Plugin tun, um dies zu ermöglichen. Das Übersetzen von Inhalten ist eine Kernfunktion von WPML.

Sie müssen überprüfen, ob Text, den Ihr Design der Ausgabe hinzufügt, übersetzt werden kann.

Wenn Sie mit GetText noch nicht vertraut sind, erfahren Sie mehr darüber in unseren FAQs zum Thema Übersetzungstexte.

Übersetzen Sie Widgets mit String-Übersetzung

Mit WPML können Benutzer den Inhalt von Text-Widgets übersetzen. Es übersetzt auch Titel aller anderen Widgets. Wenn Ihr Design oder Plugin eigene benutzerdefinierte Widgets erstellt, stellen Sie sicher, dass Sie deren Titel durch die Standard-WordPress-Filter übergeben. Auf diese Weise ermöglicht WPML Benutzern das Übersetzen der Titel Ihrer Widgets über den Bildschirm "String-Übersetzung".

Übersetzen der Fußzeile

 Einige Designs verfügen über einen benutzerdefinierten Admin-Bildschirm zum Speichern der Fußzeilentexte. Wie andere Texte, die wir gesehen haben, hat das Thema oder das Plugin die Fußzeilentexte im gespeichert wp_options Tisch auch. Wir werden diese Einträge zur Sprachkonfigurationsdatei hinzufügen und WPML anweisen, sie zu übersetzen.

 



Eine ausführliche Erklärung zur Verwendung von WPML durch Endbenutzer finden Sie in unserem Lernprogramm zum Erreichen der Kompatibilität mit WPML.


Sie müssen nicht Ihr gesamtes Design oder Plugin neu schreiben, da WPML all dies erledigt. Dieses Tutorial ist nicht so schwer wie das Besteigen des Mount Everest, aber es gibt ein paar Dinge, die Sie bearbeiten müssen, um es Ihrem Endbenutzer leicht zu machen.


Nachdem wir nun erläutert haben, wie die Benutzer die Standard-WordPress-Elemente übersetzen, sehen wir uns zusammen an, was Sie tun sollten, um die Mehrsprachenkompatibilität Ihrer benutzerdefinierten Elemente sicherzustellen.

Die Top 7 Best Practices, um Ihr Thema mehrsprachig und WooCommerce kompatibel zu machen

1. Fügen Sie dem hartcodierten Text GetText-Funktionen hinzu

Achten Sie bei Plugins oder Themes darauf, Ihren hartcodierten Text in "gettext" -Funktionen einzupacken. Dies umfasst den Kopf-, Fuß- und Widgettext. Ihre Vorlagendateien enthalten eine Auswahl an Produktinformationen und hart codierten Text. Beispielsweise enthalten die meisten Vorlagen den Produktnamen und einen Kauflink. Der Produktname stammt aus der Datenbank, sodass Sie sich keine Sorgen um die Übersetzung machen müssen.

Sie sollten sicherstellen, dass alle hartcodierten Texte mit "gettext" -Funktionen übersetzt werden können.

Gut

Schlecht

”/>

"Ähnliche Produkte" und "Jetzt kaufen!" Sind nicht in GetText-Aufrufen enthalten.

Stellen Sie sicher, dass Sie die Textdomäne Ihres Themas für alle GetText-Aufrufe verwenden.

2. Verwenden Sie die API-Funktionen, um eine Verknüpfung zu WooCommerce-Seiten herzustellen

Viele E-Commerce-Themen enthalten spezielle Seiten wie "Einkaufswagen" oder "Konto". Das Thema enthält häufig Links zu diesen Seiten, die auf jeder Seite der Website angezeigt werden.


Wenn Sie für diese Links ein WordPress-Menü verwenden, sollten Sie alle Einstellungen vornehmen. In WPML wird für jede Sprache ein anderes WordPress-Menü angezeigt, sodass die Links zu dieser "speziellen Seite" je nach Sprache unterschiedlich sind. Wenn Sie diese Links jedoch in Vorlagendateien fest codieren, müssen Sie WPML erlauben, die Links durch Links zu diesen Seiten in der richtigen Sprache zu ersetzen.


Der richtige Weg, um auf die speziellen WooCommerce-Seiten zu verlinken, ist die Verwendung der WordPress-API-Funktionen und der WooCommerce-Seiten-IDs. WooCommerce Multilingual filtert Aufrufe an 'get_option ()' mit den WooCommerce-Seitenkennungen. Die ID der Seite wird in der aktuellen Sprache zurückgegeben.


Gut

Schlecht

">

">

'shop' ist der Slug der Seite in der Standardsprache.

">

Die ID der Shop-Seite ist hart codiert. Es wird für verschiedene Websites und für verschiedene Sprachen unterschiedlich sein.

Die URL der Shopseite ist hart codiert. Es wird für verschiedene Sprachen unterschiedlich sein.

3. Fügen Sie mehrsprachige Produktlisten hinzu

Wenn Sie die WooCommerce-Kurzwahlen zum Anzeigen der Produktliste verwenden, sind Sie alle eingestellt. WooCommerce lädt die Produkte in der richtigen Sprache und zeigt sie an.

Wenn Sie Produkte lieber manuell laden möchten, stellen Sie sicher, dass Sie die WordPress-API oder die WooCommerce-API-Aufrufe verwenden. Wenn Sie direkt auf die Datenbank zugreifen, filtert WPML Ihren Anruf nicht und Sie erhalten eine Mischung aller Produkte in allen Sprachen.

Gut

Schlecht

[featured_products per_page = ”12" Spalten = ”4"]

[Produkt-ID = "99"]

(Mehr)

'product', 'suppress_filters' => 0)); ?>

$ args = array (

'post_type' => 'Produkt',

'posts_per_page' => 10,

);

$ products = new WP_Query ($ args);

?>

'Produkt')); ?>

suppress_filters wird standardmäßig auf true gesetzt, wodurch die Sprachfilterung verhindert wird.

$ products = $ wpdb-> get_results ($ wpdb-> prep ("SELECT * FROM $ wpdb-> posts WHERE post_type =" product "ORDER BY ID DESC LIMIT% d", 10));

WPML filtert nicht einfache SQL-Abfragen. Alle Produkte in allen Sprachen werden zurückgegeben.

Nachdem Sie die richtigen Produkte geladen haben, müssen Sie sich bei der Anzeige nicht um Sprachen kümmern. Jedes Produkt verfügt über eigene Felder mit Informationen in der richtigen Sprache.

4. Fügen Sie die Zahlungsoptionen für mehrere Währungen hinzu

Einige globale E-Commerce-Websites benötigen sowohl mehrere Sprachen als auch mehrere Währungen. Ihr Thema sollte die Websites unterstützen, für die mehrere Währungen erforderlich sind. Für viele nichtamerikanische Websites ist die Unterstützung mehrerer Währungen ein sehr wichtiges Merkmal. Zum Beispiel müssen viele europäische Standorte in Euro, Britischen Pfund und US-Dollar berechnen. Für osteuropäische Standorte ist häufig russischer Rubel und für asiatische Standorte eine Vielzahl verschiedener Währungen erforderlich.

Unterstützung für mehrere Währungen ist in WooCommerce Multilingual enthalten. Damit Besucher zwischen Währungen wechseln können, sollte Ihr Thema einen optionalen Währungsumschalter enthalten.

Sie können einen Währungsumschalter anzeigen, entweder mit einem PHP-Aufruf oder durch Einfügen eines Kurzcodes.

'% name (% symbol)')); ?>

[Currency_switcher]

Eine vollständige Anleitung finden Sie in der Anleitung zu Multi-Currency für WooCommerce. Beachten Sie, dass der Währungsumschalter nur angezeigt wird, wenn die Site mehrere Währungen verwendet.

5. Werden Sie RTL-kompatibel

Englisch - LTR

Hebräisch - RTL


WooCommerce-Designs müssen den RTL-Richtlinien entsprechen, genau wie WordPress-Designs. Sie sollten eine 'rtl.css'-Datei mit den CSS-Regeln für die RTL-Anzeige erstellen.

Erstellen Sie eine neue "rtl.css" -Datei und legen Sie sie im Stammverzeichnis Ihres Themes ab. Die Dir-Richtung in CSS erledigt die meiste Arbeit und Sie müssen nur ein paar Stellen patchen. Setzen Sie für RTL-Sprachen das Attribut 'direction' in CSS auf 'rtl'. Fügen Sie zusätzlich das Unicode-Bidi- Attribut hinzu.

Gute RTL-Anzeige hinzugefügt .body Selector:


Richtung: RTL;

Unicode-Bidi: Einbettung;


Jetzt wird Ihr Thema in RTL angezeigt. Um Ausnahmen zu behandeln, gehen Sie zu den RTL Themes Support Guidelines.

6. Verwalten Sie unterschiedliche Textlängen in verschiedenen Sprachen

Wenn Sie ein mehrsprachiges WooCommerce-Design erstellen, müssen Sie wissen, dass einige Texte in bestimmten Sprachen länger und in anderen kürzer sein werden. Einige Sprachlängen können Sie nicht testen, da Ihre Endbenutzer den Inhalt selbst übersetzen.

Sehen Sie sich zum Beispiel diese beiden Produktblöcke an.


CSS optimiert für Kurztext in Englisch

Längerer spanischer Text passt nicht zum Leerzeichen

Um eine Kompatibilität mit mehreren Längen zu erreichen, testen Sie Ihr Design am besten mit Texten, die x2 länger und ½ kürzer sind. In den meisten Fällen gilt dies für alle Sprachen, die übersetzt werden. Es wird dringend empfohlen, flüssige Layouts für Text unterschiedlicher Größe zu verwenden. Durch ein flüssiges Layout kann jedes Element die erforderliche Größe ändern und erfassen. Das Erreichen eines fließenden Layouts erfordert Zeit, verhindert jedoch visuelle Störungen.

Der Text läuft nahtlos in die nächste Zeile über, ohne dass Anzeigefehler auftreten

WooCommerce 'style.css' verwendet die Bezeichnung 'white-space: no-wrap'. In unserem Beispiel müssen Sie jedoch 'white-space: normal;'.

7. Erstellen Sie eine Sprachkonfigurationsdatei

Damit Ihr Design vollständig WPML-kompatibel ist, sollten Sie anderen Benutzern die Ausführung mehrsprachiger Websites mit dem Design erleichtern, indem Sie eine Sprachkonfigurationsdatei erstellen.

WPML kann eine Konfigurationsdatei lesen, die genau beschreibt, was im Design oder Plugin übersetzt werden soll. Erstellen Sie die Datei "wpml-config.xml" und benennen Sie sie. Speichern Sie die Datei im Stammverzeichnis des Themas. Verwenden Sie die Struktur und das Abschnittslayout im Beispiel dieser Beispieldatei wpml-config.zip, und bearbeiten Sie sie mit Ihrem eigenen benutzerdefinierten Inhalt.

Der Inhalt in der Datei 'wpml-config.xml' muss im Folgenden eingeschlossen werden Tags öffnen und schließen:



In der Datei 'wpml-config' legen Sie fest, welche Funktionen von WPML übersetzt werden müssen, Ihre benutzerdefinierten Posttypen, benutzerdefinierten Taxonomien, benutzerdefinierten Felder und Admin-Text (Zeichenfolge, die von "wp_options" stammt). Außerdem können Sie die Sprache Ihres Themas einstellen switcher folgt diesem kurzen Tutorial mit vollständigen Beispielen und Details zum Strukturieren Ihrer Sprachkonfigurationsdatei. Besuchen Sie unser Tutorial für Sprachkonfigurationsdateien.

Testen Sie Ihre Site

Nachdem Sie die Notwendigkeit verstanden haben, Ihr Theme oder Plugin mehrsprachig und WooCommerce zu erstellen, und nachdem Sie die oben beschriebenen üblichen Entwicklungspraktiken befolgt haben, ist es an der Zeit, Ihr Theme oder Plugin zu testen.


Normalerweise versuchen Sie beim Testen, alles zu übersetzen, indem Sie in jedem Bereich Ihrer Website Dummy-Übersetzungen einfügen. Dies würde jedoch viel Zeit in Anspruch nehmen. Deshalb haben wir ein Testwerkzeug für Sie erstellt: WPML Compatibility Test Tools Plugin.


Dieses Tool fügt Dummy-Übersetzungen für Ihre Site ein, sodass Sie die Sprache wechseln und sehen können, was übersetzt wurde und was in Ihrer Originalsprache geblieben ist. Mit unserem Test-Tool sparen Sie mehrere Stunden an Tests und erkennen, welche Bereiche Sie in Ihrem Design oder Plugin verbessern müssen.

Installieren Sie die richtigen Plugins für mehrsprachiges WooCommerce

Ihre Kunden benötigen die folgenden Plugins für mehrsprachige E-Commerce-Websites mit WooCommerce:

  • WPML CMS von OnTheGoSystems

  • WooCommerce von WooThemes

  • WooCommerce Mehrsprachig von OnTheGoSystems


WPML wird mit dem Kern-Plugin und den Add-Ons geliefert. Diese Architektur ermöglicht es verschiedenen Personen, verschiedene Teile zu installieren, die sie benötigen. Für mehrsprachige WooCommerce-Sites benötigen Sie die folgenden WPML-Komponenten:


  • WPML (Core)

  • WPML-String-Übersetzung

  • WPML-Übersetzungsmanagement

  • WPML-Medienübersetzung

GoGlobal-Partnerschaft

WPML wird auf über 400.000 Websites verwendet. Jedes Theme oder Plugin, das die WordPress-API verwendet, kann mit WPML mehrsprachig sein. Warum sollten Sie das Risiko eingehen, dass Sie kein mehrsprachiges und WooCommerce-kompatibles Design oder Plugin haben?


WPML verfügt über ein GoGlobal-Programm, in dem wir Autoren und Designern kostenlose WPML-Konten für Kompatibilitätstests zur Verfügung stellen. Wir haben zahlreiche Themen, die derzeit kompatibel sind, darunter mehrere WooThemes, alle eleganten Themen, Avada und viele Themen zu ThemeForest.


Bei WPML nehmen wir die Kompatibilität mit fünf erfahrenen Entwicklern und Beratern ernst, die sich voll und ganz mit der Kompatibilität aller Design- und Plugin-Autoren befassen, um eine mehrsprachige Kompatibilität zu erreichen. Melden Sie sich noch heute kostenlos für unser WPML GoGlobal-Programm an.

Verteilung mehrsprachiger Designs

Wenn Sie Ihr Design verteilen, möchten Sie, dass die Benutzer es für ein- und mehrsprachige Websites verwenden können. Die Designtipps, die wir in diesem Artikel gegeben haben, basieren hauptsächlich auf den bewährten Vorgehensweisen von WordPress. Daher enthält Ihr Design-Code kaum spezifischen Code für WPML.


Ihre Kunden müssen WPML und ihre erforderlichen Komponenten installieren, um mehrsprachige Websites ausführen zu können. Da WPML ein Markenzeichen ist (und aus anderen guten Gründen), sollten Sie WPML nicht mit Ihrem Design bündeln.


Stattdessen bietet WPML eine kleine Komponente zum Kauf und zur automatischen Installation, die Sie gerne verwenden. Mit dieser Komponente können Ihre Benutzer WPML direkt aus dem WordPress-Administrator heraus kaufen. Sie schreiben Ihnen außerdem eine Affiliate-Provision für eine solche Überweisung gut.


Durch die Integration dieser winzigen Komponente für die automatische Installation in Ihr Design können Sie den Nutzern zeigen, dass Ihr Design wirklich mit WPML kompatibel ist und mehrsprachige Websites unterstützen kann. Außerdem erhalten Ihre Benutzer einen optimierten Prozess für den Kauf und die Installation von WPML, ohne FTP zum Hochladen auf ihre Server verwenden zu müssen.

Zusammenfassung

Nachdem wir nun die sieben besten Vorgehensweisen für die Erstellung Ihres Designs oder Plugins für WooCommerce und Multilingual besprochen haben, hoffen wir, dass Sie bereit sind, loszulegen. Mehrsprachigkeit ist für jeden Autor eines Themas einfach und möglich.  


Es ist so einfach wie die Verwendung von WordPress-Best Practices, z. B. die Verwendung von "gettext" -Funktionen und die korrekte Handhabung hartcodierter WooCommerce-Links, um schließlich eine Sprachkonfigurationsdatei zu Ihrem Design hinzuzufügen. Steigern Sie die Vielseitigkeit Ihres Produkts auf dem Markt, indem Sie sich auf die Internationalisierung Ihres Themes oder Plugins konzentrieren.

In unserer neuesten WPML und WooCommerce WordPress Themes Most Wanted-Veranstaltung werden 8.000 $ vergeben. Du musst dabei sein, um es zu gewinnen!