Internationalisierung von WordPress-Projekten: Ein praktisches Beispiel, Teil 1

() translation by (you can also view the original English article)

In dieser Reihe werfen wir einen Blick auf unsere WordPress-Projekte. Für die Leute, die sich uns gerade anschließen, empfehle ich den ersten Beitrag in der Reihe zu lesen, da wir uns alle Funktionen ansehen, die in WordPress bereitgestellt werden, um uns bei der Internationalisierung unserer Strings zu helfen.

Und obwohl das hilfreich ist, hilft es immer noch nicht zu erklären, was Internationalisierung ist. Wie wir im ersten Beitrag gesagt haben:

Internationalisierung ist der Prozess der Entwicklung Ihres Plugins, damit es leicht in andere Sprachen übersetzt werden kann.

Angesichts der Tatsache, dass WordPress ungefähr 25% des Webs mit Strom versorgt und das Web nicht in Ihrem Herkunftsland lokal ist, ist es sinnvoll sicherzustellen, dass die von uns produzierte Arbeit an andere Orte übersetzt werden kann.

Das bedeutet nicht, dass Sie als Entwickler dafür verantwortlich sind, alle Zeichenfolgen in Ihrer Codebasis in die verschiedenen Sprachen zu übersetzen, die Ihre Kunden möglicherweise verwenden. Stattdessen bedeutet dies, dass Sie die richtigen APIs verwenden, um sicherzustellen, dass andere Personen mitkommen und Übersetzungen für sie bereitstellen können.

Bevor wir weiter gehen, erinnern Sie sich:

Internationalisierung, oft als i18n bezeichnet, ist der Prozess, mit dem wir unsere Software so erstellen, dass sie übersetzt werden kann.
Bei der Lokalisierung nehmen wir internationalisierte Zeichenfolgen und übersetzen sie dann in das richtige Gebietsschema.

An diesem Punkt leicht zu verstehen, oder? Es gibt jedoch viele Informationen dazu, und es kann sehr schwierig sein, das Signal vom Rauschen zu trennen, insbesondere wenn Sie noch nicht damit vertraut sind.

Aber genau das ist das Ziel dieser Reihe von Tutorials: sicherzustellen, dass Sie mit allem ausgestattet sind, was Sie wissen müssen, um Ihr WordPress-Projekt ordnungsgemäß zu internationalisieren, zu verstehen, was Sie tun, und zu verstehen, wie Sie es testen.

In den nächsten beiden Artikeln werden wir ein einfaches Plugin erstellen, das richtig internationalisiert ist. Darüber hinaus werden wir uns jedes einzelne Plugin ansehen, das zur Internationalisierung der Codebasis verwendet wird, um sicherzustellen, dass wir alles vollständig verstehen.

Im nächsten Artikel werfen wir einen Blick auf eines der Werkzeugs, die ich für die Lokalisierung Ihrer Arbeit am nützlichsten fand, und wie Sie testen können, ob die Lokalisierung ordnungsgemäß funktioniert.

Nachdem dies gesagt ist, lassen Sie uns fortfahren und loslegen.

Loslegen

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

The most recent copy of WordPress installed via Subversion

Wenn Sie jedoch auf dem neuesten Stand sein möchten, lesen Sie diese Anleitung, um die neueste Version des Codes zu erhalten.

Es wird keinen Einfluss auf unsere Arbeit haben, aber es ist eine Gelegenheit, Ihre Entwicklungsfähigkeiten ein wenig zu erweitern.

Die Vorbereitung des Plugins

Wenn eine lokale Kopie von WordPress auf Ihrem Computer eingerichtet ist, können Sie mit der Arbeit an einem Plugin beginnen. Beachten Sie, dass wir für die Zwecke dieses Tutorials ein unglaublich einfaches Plugin erstellen werden.

Der Zweck besteht nicht darin, zu verstehen, wie ein Plugin erstellt wird, da wir dies in anderen Kursen und in anderen Tutorials behandelt haben. Es geht jedoch darum, die Feinheiten der Internationalisierung der Codebasis zu verstehen, damit Sie verstehen, was Sie tun, während Sie Ihre Arbeit in aktuellen oder zukünftigen Projekten fortsetzen.

1. Erstellen Sie das Plugin-Verzeichnis und den Bootstrap

Suchen Sie zunächst das Verzeichnis wp-content/plugins und erstellen Sie ein Verzeichnis mit dem Namen tutsplus-i18n. Dies ist das Verzeichnis, in dem wir unsere Plugin-Dateien speichern werden. Es heißt treffend Tuts+ Internationalization.

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

Bevor wir weiter gehen, müssen wir entscheiden, was dieses Plugin tun soll. Wir wissen, dass wir dem Benutzer etwas anzeigen müssen, damit wir Internationalisierung (und Lokalisierung) üben können. Dies bedeutet, dass das Plugin eine UI-Komponente enthalten sollte.

Zu diesem Zweck erstellen wir ein einfaches Plugin, das einen neuen Menüpunkt unter dem Menü Tools einführt. Wir rufen den Untermenüpunkt Serverinfo auf und verwenden Daten, die in PHP leicht verfügbar sind, um einen Bildschirm mit Inhalten auf benutzerfreundliche Weise anzuzeigen.

Möglicherweise kann dies zum Senden eines Debug-Protokolls an einen Anbieter verwendet werden, wenn mit einem Plugin ein Fehler auftritt.

2. Definieren Sie das Plugin

Ich gehe davon aus, dass Sie mit dem Erstellen eines Basis-Plugins vertraut sind. Wenn nicht, haben wir eine Reihe von Tutorials und Kursen zur Verfügung, wie das geht (wie bereits erwähnt). Der Codex enthält auch einige Informationen zu den ersten Schritten.

Wenn Sie damit nicht vertraut sind, empfehlen wir Ihnen, die oben genannten Ressourcen zu lesen. Nachdem dies gesagt ist, lassen Sie uns fortfahren und die Grundlagen unseres Plugins definieren.

Um zu beginnen, müssen wir den Plugin-Header definieren. Öffnen Sie tutsplus-i18n.php und stellen Sie sicher, dass es die folgenden Informationen enthält:

<?php
/**
 * The plugin bootstrap File_Upload_Upgrader::cleanup
 *
 * @link              https://code.tutsplus.com/tutorials/internationalizing-wordpress-projects-a-practical-example-part-1--cms-26676
 * @since             1.0.0
 * @package           TutsPlus_i18n
 *
 * @wordpress-plugin
 * Plugin Name:       Tuts+ Internationalization
 * Plugin URI:        http://code.tutsplus.com/tutorials/internationalizing-wordpress-projects-a-practical-example-part-1--cms-26676
 * Description:       Easily view internationalized server information.
 * Version:           1.0.0
 * Author:            Tom McFarlin
 * Author URI:        https://tommcfarlin.com
 * Text Domain:       tutsplus-i18n
 * License:           GPL-2.0+
 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
 */

Speichern Sie anschließend die Datei und navigieren Sie zum Plugins-Bildschirm in WordPress. Dort sollte ein Eintrag für das soeben erstellte Plugin angezeigt werden.

The Tuts Internationalization plugin visible in the Installed Plugins screen

Zugegeben, es wird an dieser Stelle nichts bewirken, aber Sie können sehen, dass wir auf dem richtigen Weg sind. Beachten Sie außerdem, dass wir ein Tag hinzugefügt haben, das Sie bei WordPress-Projekten nicht oft sehen, und das ist das Text Domain-Tag. Dies wird verwendet, um die Internationalisierung unseres Plugins zu unterstützen.

Hier sind spezifische Details zu diesem Tag:

Wenn Sie ein Plugin oder ein Thema übersetzen, müssen Sie eine Textdomäne verwenden, um den gesamten zu diesem Plugin gehörenden Text zu kennzeichnen. Dies erhöht die Portabilität und spielt besser mit bereits vorhandenen WordPress-Werkzeugs. Die Textdomäne muss mit dem "slug" des Plugins übereinstimmen.

Offensichtlich haben wir unsere Textdomäne als tutsplus-i18n definiert. Sie werden dies im Rest der Codebasis im Rest des Tutorials sehen.

Vergessen Sie nicht, sicherzustellen, dass Sie die Author- und Author-URI-Tags so aktualisieren, dass sie auch Ihrem Namen und Ihrer Homepage entsprechen.

3. Stellen Sie den Menüpunkt vor

Als erstes möchten wir einen Untermenüpunkt in das Menü Tools einfügen. Zu diesem Zweck nutzen wir den von WordPress angebotenen Hook add_submenu_page.

Beachten Sie, dass wir die Funktion __() verwenden, die wir im ersten Beitrag dieses Tutorials besprochen haben, um sicherzustellen, dass der Text des Menüelements für die Übersetzung ordnungsgemäß internationalisiert ist. Beachten Sie außerdem, dass der zweite Parameter, der an die Funktion übergeben wird, mit der im Header des Plugins definierten Textdomäne identisch ist.

<?php

add_action( 'admin_menu', 'tutsplus_i18n_add_submenu_page' );
/**
 * Adds a new submenu item to the Tools menu that will display server
 * information to the user.
 *
 * The menu item is internationalized so that we can provide proper translations
 * for users who are outside of our own locale.
 */
function tutsplus_i18n_add_submenu_page() {

    add_submenu_page(
        'tools.php',
        __( 'Server Information', 'tutsplus-i18n' ),
        __( 'Server Information', 'tutsplus-i18n' ),
        'manage_options',
        'tutsplus-i18n-menu',
        'tutsplus_i18n_display_submenu_page'
    );

}

Das ist nicht genug. Wenn Sie die oben verlinkte Dokumentation gelesen haben, wissen Sie, dass wir auch eine Funktion definieren müssen, die den Inhalt der Seite anzeigt. Im obigen Code haben wir die Funktion als tutsplus_i18n_display_submenu_page bezeichnet, aber wir haben die Funktion nicht definiert.

Lassen Sie uns das jetzt tun. Wir machen es einfach, damit das Plugin tatsächlich ausgeführt wird. Die Seite zeigt nichts an, aber das Plugin funktioniert weiterhin.

<?php

/**
 * Displays the content of the page associated with the new Server Information
 * menu item located in the Tools menu.
 */
function tutsplus_i18n_display_submenu_page() {
    echo '';
}

An diesem Punkt können Sie Ihr Plugin aktivieren und den Inhalt im Menü Tools anzeigen. An dieser Stelle sollte nichts übersetzt werden. Sie sollten jedoch einen neuen Menüpunkt sehen.

Und wenn Sie auf das Element klicken, sollten Sie so etwas wie den Bildschirm oben sehen. Es ist leer. Aber das ist okay, denn im nächsten Abschnitt werden wir tatsächlich einige Informationen auf dem Bildschirm platzieren.

4. Fügen Sie den Bildschirm des Plugins hinzu

Abhängig davon, welche anderen Plugins und welchen anderen Code Sie bei der Arbeit an WordPress-Plugins studiert haben, haben Sie Code gesehen, der auf zwei (oder wirklich beide) Arten geschrieben wurde, wenn es um die Anzeige des Bildschirms eines Plugins geht.

Der gesamte HTML-Code ist fest in der PHP-Datei des Haupt-Plugins codiert.
Der HTML-Code ist in einer externen Datei enthalten, die über die PHP-Kerndatei enthalten ist.

Ich bin ein Fan von Letzterem, weil ich denke, dass es hilft, den Code wartbarer zu machen. Für die Zwecke dieses Beispiels werden wir diesen Ansatz verfolgen. Erstellen Sie zu diesem Zeitpunkt eine zweite Datei im Verzeichnis Ihres Plugins und nennen Sie sie tutsplus-i18n-ui.php.

The initial UI for the Tuts Internationalization Plugin

Fügen Sie als Nächstes den folgenden Code zur Datei hinzu. Wir werden es genauer besprechen, sobald Sie die Gelegenheit hatten, es zu überprüfen.

<?php
/**
 * The user interface for the plugin.
 *
 * @link              http://code.tutsplus.com/tutorials/internationalizing-wordpress-projects-a-practical-example-part-1--cms-26676
 * @since             1.0.0
 * @package           TutsPlus_i18n
 */

?>

<div class="wrap">

    <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
	<span class="description"><?php esc_html_e( 'Information about the environment in which WordPress is running.', 'tutsplus-i18n' ); ?></span>

	<table id="tutsplus-i18n-table">
		<thead>
			<tr>
				<th>
					<?php esc_html_e( 'Server Key', 'tutsplus-i18n' ); ?>
				</th>
				<th>
					<?php esc_html_e( 'Server Value', 'tutsplus-i18n' ); ?>
				</th>
			</tr>
		</thead>
		<tbody>

			<?php // This counter is used to determine even/odd rows for styles. ?>
			<?php $i = 0; ?>

			<?php foreach ( $_SERVER as $key => $val ) { // Input var okay. ?>

				<?php // Determine if we're on an odd or even row. ?>
				<?php $striped = ( $i % 2 ) ? 'even' : 'odd'; ?>

				<tr class="<?php echo esc_attr( $striped ); ?>">
					<th>
						<?php echo $key ; ?>
					</th>
					<td>
						<?php echo $val; ?>
					</td>
				</tr>

				<?php // Increase the counter by one. ?>
				<?php $i++; ?>

			<?php } ?>
		</tbody>
	</table>

</div>

Beachten Sie hier, dass wir ein table element erstellen, das alle Schlüssel und Werte in der $_SERVER-Auflistung von PHP anzeigt.

Das Wichtigste ist vielleicht, dass wir esc_html_e() für unsere Internationalisierungsfunktionen verwenden und den Moduloperator verwenden, um den Bildschirm zu gestalten.

5. Design des Plugins

Technisch gesehen funktioniert das Plugin zu diesem Zeitpunkt. Gehen wir noch einen Schritt weiter, um sicherzustellen, dass der Bildschirm ein bisschen schöner aussieht.

Erstellen Sie zunächst die Datei tutsplus-i18n.css im Stammverzeichnis Ihres Plugin-Verzeichnisses und fügen Sie den folgenden Code hinzu:

#tutsplus-i18n-table {

    margin-top:    20px;
    border:        1px solid #ccc;
    padding:       10px;

}

#tutsplus-i18n-table thead th {

    font-size: 15px;
    height:    40px;

}

#tutsplus-i18n-table thead,
#tutsplus-i18n-table tbody {
    font-family: 'Monaco', 'Menlo', 'Courier New', Monospace;
}

#tutsplus-i18n-table tbody td {

    height: 30px;
    padding: 5px;

}

#tutsplus-i18n-table tbody tr.odd {
    background: #fff;
}

Fügen Sie als Nächstes der Datei des Plugins eine Funktion hinzu, mit der diese Datei ordnungsgemäß in die Warteschlange gestellt wird, jedoch nur auf dem Bildschirm "Serverinformationen":

<?php

add_action( 'admin_enqueue_scripts', 'tutsplus_i18n_dashboard_styles' );
/**
 * Add styles to the table displayed in the Server Info page available from the
 * Tools menu.
 */
function tutsplus_i18n_dashboard_styles() {

    // Only register the stylesheet if we're on the Server Information page.
    if ( 'tools_page_tutsplus-i18n-menu' !== get_current_screen()->id ) {
        return;
    }

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

}

Zu diesem Zeitpunkt sollte das Plugin eine etwas schönere Anzeige haben:

The final UI of the plugin for this version of the tutorial

Nein, dies wird nicht benötigt, aber es hilft, das Plugin im Kontext unserer Aktivitäten besser lesbar zu machen.

Was ist mit objektorientierter Programmierung?

Für diejenigen, die meine Kurse und Tutorials besucht 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 Schwerpunkt einer Lektion so klar wie möglich zu gestalten. Zu diesem Zweck stelle ich häufig fest, dass die Verwendung der prozeduralen Programmierung zum Unterrichten so etwas weniger Verwirrung stiftet als die Verwendung der objektorientierten Programmierung.

Das heißt, bei der objektorientierten Programmierung wird davon ausgegangen, dass Sie bestimmte Konzepte genau kennen, die Sie beim Durchlaufen dieser Codebasis möglicherweise nicht haben. Und wenn dies der Fall ist, können Sie sich nicht auf das Kernmaterial dieses Tutorials konzentrieren.

Daher haben die Hauptthemen, die wir überprüfen möchten, nichts mit objektorientierter Programmierung zu tun, sondern mit dem Verständnis, wie ein WordPress-Projekt internationalisiert und letztendlich lokalisiert werden kann.

Abschluss

Zu diesem Zeitpunkt haben wir ein funktionales Plugin, das in einer WordPress-Installation heruntergeladen, installiert und ausgeführt werden kann. Obwohl es internationalisiert ist, haben wir keine Lokalisierungsdateien, die zeigen, wie der Prozess funktioniert. Sie können eine Kopie des Plugins von der Seitenleiste dieser Seite herunterladen.

Im folgenden Tutorial werden wir uns ansehen, wie wir unsere Lokalisierungsdateien erstellen und ein anderes Gebietsschema simulieren können, um unsere Übersetzungen zu testen. Außerdem werden wir uns die Werkzeugs ansehen, die uns zur Verfügung stehen.

Vergessen Sie nicht, während Sie auf die nächste Ausgabe warten, zu sehen, was wir in Envato Market zur Verfügung haben, um Ihnen dabei zu helfen, Ihre wachsenden Werkzeugs für WordPress oder beispielsweise Code zum Lernen und Erlernen von WordPress zu erweitern.

Wenn Sie mehr über WordPress aus entwicklungspolitischer Sicht erfahren möchten, beachten Sie, dass ich ausschließlich mit WordPress arbeite und häufig darüber schreibe. Sie können alle meine Kurse und Tutorials auf meiner Profilseite abrufen und mir auf meinem Blog und/oder Twitter unter @tommcfarlin folgen, wo ich über Softwareentwicklung im Kontext von WordPress spreche.

Bitte zögern Sie nicht, wie gewohnt Kommentare oder Fragen im Kommentar-Feed unten zu hinterlassen.