Internationalisierung von WordPress-Projekten Ein praktisches Beispiel, Teil 1

In dieser Serie werfen wir einen Blick auf die Internationalisierung unserer WordPress-Projekte. Für diejenigen, die gerade zu uns kommen, empfehle ich Ihnen dringend, den ersten Beitrag der Serie zu lesen, da wir uns alle Funktionen ansehen, die in WordPress bereitgestellt werden, um uns bei der Internationalisierung unserer Zeichenketten zu unterstützen.

Und obwohl das hilfreich ist, hilft es trotzdem nicht zu erklären, was Internationalisierung ist. Wie wir im ersten Beitrag gesagt haben:

Internationalisierung ist der Prozess der Entwicklung Ihres Plugins, so dass es leicht in andere Sprachen übersetzt werden kann.

Angesichts der Tatsache, dass WordPress etwa 25% des Webs nutzt und das Web nicht in Ihrem Herkunftsland lokal ist, ist es sinnvoll, sicherzustellen, dass die von uns produzierte Arbeit in andere Standorte übersetzt werden kann.

Um klar zu sein, das tut es nicht bedeutet, dass Sie als Entwickler dafür verantwortlich sind, alle Zeichenfolgen in Ihrer Codebase in die verschiedenen Sprachen zu übersetzen, die Ihre Kunden verwenden können. Stattdessen bedeutet dies, dass Sie die richtigen APIs verwenden, um sicherzustellen, dass eine andere Person mitkommen und Übersetzungen für sie bereitstellen kann.

Bevor wir weitergehen, erinnern wir uns:

  • Internationalisierung, oft auch als i18n bezeichnet, ist der Prozess, durch den wir unsere Software so entwickeln, dass sie übersetzt werden kann.
  • Lokalisierung ist, wenn wir internationalisierte Zeichenfolgen verwenden und sie dann in das richtige Gebietsschema übersetzen.

Leicht genug, an diesem Punkt zu verstehen, richtig? Es gibt jedoch eine Menge Informationen darüber, wie dies zu tun ist, und es kann sein Ja wirklich Es ist schwer, das Signal vom Rauschen zu trennen, vor allem, wenn Sie neu sind.

Aber das ist das Ziel dieser Reihe von Tutorials: Sie müssen sicherstellen, dass Sie mit allem ausgestattet sind, was Sie wissen müssen, um Ihr WordPress-Projekt richtig zu internationalisieren, zu verstehen, was Sie tun, und zu verstehen, wie Sie es testen können.

In den nächsten beiden Artikeln erstellen wir ein einfaches Plugin, das richtig internationalisiert ist. Darüber hinaus werden wir uns jedes einzelne Plugin ansehen, das die Codebase internationalisiert, um sicherzustellen, dass wir alles verstehen.

Im nächsten Artikel werfen wir einen Blick auf eines der Werkzeuge, das ich für das Lokalisieren Ihrer Arbeit am nützlichsten gefunden habe, und wie Sie testen, ob die Lokalisierung ordnungsgemäß funktioniert.

Nachdem dies gesagt ist, lasst uns fortfahren und loslegen.

Fertig machen

Für dieses spezielle Tutorial werde ich die neueste Version von WordPress verwenden, die über Subversion verfügbar ist. Wenn Sie eine lokale Version von WordPress installiert haben und es sich um eine aktuelle Version handelt, ist das großartig.

Wenn Sie jedoch am Rande der Blutung leben möchten, können Sie in dieser Anleitung nachschauen, um die neueste Version des Codes zu erhalten.

Letztendlich wird sich dies nicht auf unsere Arbeit auswirken, aber es ist eine Gelegenheit, Ihre Entwicklungsfähigkeiten ein wenig zu erweitern.

Plugin vorbereiten

Mit einer lokalen Kopie von WordPress auf Ihrem Computer können Sie mit der Arbeit an einem Plugin beginnen. Beachten Sie, dass wir für dieses Tutorial ein unglaublich einfaches Plugin erstellen werden.

Das Ziel ist nicht zu verstehen, wie ein Plugin erstellt wird, da wir dies in anderen Kursen und anderen Tutorials behandelt haben. Um jedoch die Feinheiten der Internationalisierung der Codebase zu verstehen, müssen Sie wissen, was Sie tun, wenn Sie mit Ihrer Arbeit in aktuellen oder zukünftigen Projekten fortfahren.

1. Erstellen Sie das Plugin-Verzeichnis und den Bootstrap

Suchen Sie zuerst die WP-Inhalt / Plugins Verzeichnis und erstellen Sie ein Verzeichnis namens tutsplus-i18n. In diesem Verzeichnis werden unsere Plugin-Dateien gespeichert. Es ist treffend benannt Tuts + Internationalisierung.

Erstellen Sie eine einzige Datei in dem Verzeichnis, in dem das Plugin gestartet wird. Rufen Sie die Datei auf tutsplus-i18n.php.

Bevor wir weitergehen, müssen wir entscheiden, was dieses Plugin tun soll. Wir wissen, dass wir dem Benutzer etwas anzeigen müssen, um Internationalisierung (und Lokalisierung) zu üben. Das bedeutet, dass das Plugin eine UI-Komponente enthalten sollte.

Zu diesem Zweck erstellen wir ein einfaches Plugin, mit dem ein neuer Menüpunkt unter der Werkzeuge Speisekarte. Wir rufen den Untermenüpunkt auf Server Info, und wir verwenden Daten, die in PHP leicht verfügbar sind, um einen Bildschirm mit Inhalten benutzerfreundlich anzuzeigen.

Vielleicht könnte dies zum Senden eines Debug-Protokolls an einen Hersteller verwendet werden, falls mit einem Plug-In etwas schiefgehen sollte.

2. Definieren Sie das Plugin

Ich gehe davon aus, dass Sie mit der Erstellung eines grundlegenden Plugins vertraut sind. Wenn nicht, haben wir eine Reihe von Tutorials und Kursen zur Verfügung (wie bereits erwähnt). Der Kodex enthält auch einige Informationen, wie Sie loslegen können.

Wenn Sie nicht mit der Vorgehensweise vertraut sind, empfehle ich Ihnen die oben genannten Ressourcen. Nachdem dies gesagt ist, wollen wir die Grundlagen unseres Plugins definieren.

Um zu beginnen, müssen wir den Plugin-Header definieren. Öffnen tutsplus-i18n.php und stellen Sie sicher, dass es die folgenden Informationen enthält:

Wenn Sie fertig sind, speichern Sie die Datei und navigieren Sie zu Plugins Bildschirm in WordPress. Dort sollte ein Eintrag für das soeben erstellte Plugin angezeigt werden. 

Zugegeben, es wird an dieser Stelle nichts passieren, aber Sie sehen, dass wir auf dem richtigen Weg sind. Beachten Sie außerdem, dass wir ein Tag hinzugefügt haben, das Sie bei WordPress-Projekten nicht oft sehen Textdomäne Etikett. Dies verwenden wir, um unser Plugin zu internationalisieren.

Hier sind spezifische Details zu diesem Tag:

Wenn Sie ein Plugin oder ein Design übersetzen, müssen Sie eine Textdomäne verwenden, um den gesamten zu diesem Plugin gehörenden Text zu bezeichnen. Dies erhöht die Portabilität und lässt sich besser mit bereits vorhandenen WordPress-Tools verwenden. Die Textdomäne muss mit dem „Slug“ des Plugins übereinstimmen.

Offensichtlich haben wir unsere Textdomäne als tutsplus-i18n definiert. Im Rest der Codebase wird dies im Rest des Tutorials verwendet.

Vergessen Sie nicht, das Update zu aktualisieren Autor und Autoren-URI Tags, die Ihrem Namen und Ihrer Homepage entsprechen.

3. Führen Sie den Menüpunkt ein

Das erste, was wir tun wollen, ist, ein Untermenüelement in die einzuführen Werkzeuge Speisekarte. Dazu nutzen wir die add_submenu_page Hook von WordPress angeboten.

Beachten Sie, dass wir das verwenden __ () Funktion, die wir im ersten Beitrag dieses Tutorials besprochen haben, um sicherzustellen, dass der Text des Menüelements für die Übersetzung ordnungsgemäß internationalisiert wird. Beachten Sie auch, dass der zweite Parameter, der an die Funktion übergeben wird, mit der im Header des Plugins definierten Textdomäne identisch ist.

Nun, das reicht nicht aus. Wenn Sie die oben stehende Dokumentation gelesen haben, wissen Sie, dass wir auch eine Funktion definieren müssen, die den Inhalt der Seite anzeigt. Im obigen Code haben wir auf die Funktion als verwiesen tutsplus_i18n_display_submenu_page, aber wir haben die Funktion nicht definiert.

Lass uns das jetzt machen. Wir machen es einfach, damit das Plugin tatsächlich ausgeführt wird. Die Seite zeigt nichts an, aber das Plugin funktioniert weiterhin.

Jetzt können Sie Ihr Plugin aktivieren und sich den Inhalt unter ansehen Werkzeuge Speisekarte. An dieser Stelle sollte nichts übersetzt werden; Aber du sollte sehen Sie einen neuen Menüpunkt.

Und wenn Sie auf das Element klicken, sollten Sie etwas wie den Bildschirm oben sehen. Es ist leer Aber das ist in Ordnung, denn im nächsten Abschnitt werden wir tatsächlich einige Informationen auf dem Bildschirm platzieren.

4. Fügen Sie den Bildschirm des Plugins hinzu

Je nachdem, welche anderen Plugins und welcher andere Code Sie bei der Arbeit mit WordPress-Plugins studiert haben, haben Sie gesehen, dass der Code auf eine von zwei Arten (oder möglicherweise auf beide Arten) geschrieben wurde, da er sich auf die Anzeige eines Plugins bezieht.

  1. Der gesamte HTML-Code ist in der PHP-Datei des Haupt-Plugins fest codiert.
  2. Der HTML-Code ist in einer externen Datei enthalten, die über die PHP-Kerndatei eingefügt wird.

Ich bin ein Fan von Letzterem, weil ich denke, es hilft, den Code leichter zu pflegen. In diesem Beispiel werden wir also diesem Ansatz folgen. Erstellen Sie an diesem Punkt eine zweite Datei im Verzeichnis Ihres Plugins und rufen Sie sie an tutsplus-i18n-ui.php

Fügen Sie der Datei anschließend den folgenden Code hinzu. Wir werden ausführlicher darüber sprechen, nachdem Sie die Möglichkeit hatten, es zu überprüfen.

 

$ val) // Eingabe var okay. ?>

Beachten Sie hier, dass wir ein erstellen Tabelle Element, das alle in PHP enthaltenen Schlüssel und Werte anzeigt $ _SERVER Sammlung. 

Die wichtigsten Dinge, die wir beachten sollten, sind vielleicht die, die wir verwenden esc_html_e () Für unsere Internationalisierungsfunktionen verwenden wir den Modulus-Operator, um uns bei der Gestaltung des Bildschirms zu unterstützen.

5. Das Plugin gestalten

Technisch wird das Plugin an diesem Punkt funktionieren. Lassen Sie uns noch einen Schritt weiter gehen, um sicherzustellen, dass der Bildschirm ein bisschen schöner aussieht.

Erstellen Sie zuerst das tutsplus-i18n.css Datei im Stammverzeichnis Ihres Plugin-Verzeichnisses und fügen Sie den folgenden Code hinzu:

# tutsplus-i18n-table margin-top: 20px; Rahmen: 1px fest #ccc; Polsterung: 10px;  # tutsplus-i18n-table thead th font-size: 15px; Höhe: 40px;  # tutsplus-i18n-table thead, # tutsplus-i18n-table tbody font-family: 'Monaco', 'Menlo', 'Courier New', Monospace;  # tutsplus-i18n-table tbody td height: 30px; Polsterung: 5px;  # tutsplus-i18n-table tbody tr.odd background: #fff;  

Als nächstes fügen Sie der Plugin-Datei eine Funktion hinzu, die diese Datei aber ordnungsgemäß einreiht nur auf der Serverinformation Bildschirm:

id) return;  wp_enqueue_style ('tutsplus-i18n-css', plugin_dir_url (__FILE__). '/tutsplus-i18n.css', array (), '1.0.0', 'all');  

An diesem Punkt sollte das Plugin eine etwas schönere Anzeige haben:

Nein, das ist nicht nötig, aber es hilft, das Plugin im Zusammenhang mit dem, was wir tun, ein bisschen lesbarer zu machen.

Was ist mit objektorientierter Programmierung??

Für diejenigen, die meine Kurse und meine Tutorials durchlaufen haben, wissen Sie, dass ich meinen Code lieber in objektorientierter Programmierung als in prozeduraler Programmierung schreibe.

Wenn es darum geht, ein neues Konzept zu vermitteln, versuche ich, den Fokus einer Lektion so klar wie möglich zu machen. Zu diesem Zweck finde ich oft, dass die Verwendung von prozeduraler Programmierung zum Unterrichten von etwas weniger Verwirrung führt als bei der objektorientierten Programmierung.

Das heißt, bei der objektorientierten Programmierung wird davon ausgegangen, dass Sie bestimmte Konzepte, die Sie möglicherweise nicht kennen, wenn Sie diese Codebase durchlaufen, verstanden haben. Wenn dies der Fall ist, können Sie sich nicht auf das Kernmaterial dieses Tutorials konzentrieren.

Daher haben die primären Themen, die wir überprüfen wollen, nichts mit objektorientierter Programmierung zu tun, sondern mit dem Verständnis, wie ein WordPress-Projekt internationalisiert und letztendlich lokalisiert werden kann.

Fazit

Zu diesem Zeitpunkt haben wir ein funktionales Plugin, das heruntergeladen, installiert und in einer WordPress-Installation ausgeführt werden kann. Obwohl es international ist, haben wir keine Lokalisierungsdateien zum Anzeigen Wie Der Prozess funktioniert. Sie können eine Kopie des Plugins von der Seitenleiste dieser Seite herunterladen.

Im Folgetutorial werden wir einen Blick darauf werfen, wie wir unsere Lokalisierungsdateien erstellen und ein anderes Gebietsschema simulieren können, um unsere Übersetzungen zu testen. Außerdem werden wir uns die Tools ansehen, die uns zur Verfügung stehen.

Vergessen Sie beim Warten auf die nächste Rate nicht, was wir in Envato Market zur Verfügung haben, um Ihnen dabei zu helfen, Ihre wachsenden Tools für WordPress zu entwickeln oder beispielsweise Code, um sich mit WordPress vertraut zu machen.

Wenn Sie mehr über WordPress aus Entwicklungsperspektive erfahren möchten, beachten Sie, dass ich ausschließlich mit WordPress arbeite und häufig darüber schreibe. Sie finden alle meine Kurse und Tutorials auf meiner Profilseite. Sie können mir auf meinem Blog und / oder Twitter unter @tommcfarlin folgen, wo ich über Softwareentwicklung im Kontext von WordPress spreche.

Bitte zögern Sie nicht, Kommentare oder Fragen in den Kommentar-Feed zu schreiben.

Verweise

  • Plugin-Header
  • Textdomäne
  • admin_menu
  • add_submenu_page
  • __ ()
  • esc_html_e ()
  • admin_enqueue_scripts
  • wp_enqueue_style