Sprachen: English • Englisch • Spanisch • 日本語 한국어 • Portugiesisch nach Brasilien • Русский • 中文 (简体) •中文 (繁體) • (Fügen Sie Ihre Sprache hinzu)

In diesem Artikel geht es um die Entwicklung von WordPress-Themen. Wenn Sie mehr über die Installation und Verwendung von Themen erfahren möchten, lesen Sie Verwenden von Themen. Dieses Thema unterscheidet sich von Verwenden von Themen, weil Es werden die technischen Aspekte des Schreibens von Code zum Erstellen eigener Themen erläutert, anstatt wie Themen aktiviert werden oder wo neue Themen abgerufen werden können.

Warum WordPress-Themen

WordPress-Themen sind Dateien, die zusammenarbeiten Um das Design und die Funktionalität einer WordPress-Site zu erstellen, kann jedes Theme anders sein und bietet den Site-Eigentümern viele Möglichkeiten, das Erscheinungsbild ihrer Website sofort zu ändern.

Möglicherweise möchten Sie WordPress-Themes für Ihren eigenen Gebrauch entwickeln, z ein Client-Projekt oder zum Senden an das WordPress-Themenverzeichnis. Warum sollten Sie sonst ein WordPress-Thema erstellen?

• Um ein einzigartiges Erscheinungsbild zu erstellen für Ihre WordPress-Site.
• Um Vorlagen, Vorlagen-Tags und die WordPress-Schleife zu nutzen, um unterschiedliche Website-Ergebnisse und -Looks zu generieren.
• Um alternative Vorlagen für bestimmte Site-Funktionen bereitzustellen, z B. als Kategorieseiten und Suchergebnisseiten.
• Um schnell zwischen zwei Site-Layouts zu wechseln oder um einen Themen- oder Stilumschalter zu verwenden, damit Site-Besitzer das Erscheinungsbild Ihrer Site ändern können.

/ul>

Ein WordPress-Theme hat auch viele Vorteile.

• Es trennt die Präsentationsstile und Vorlagendateien von den Systemdateien, sodass die Site ohne drastische Änderungen an der visuellen Präsentation von aktualisiert wird Die Site.
• Ermöglicht die Anpassung der für dieses Thema spezifischen Site-Funktionalität.
• Ermöglicht schnelle Änderungen des visuellen Designs und Layouts einer WordPress-Site.
• Ein typischer WordPress-Site-Besitzer muss nicht mehr CSS, HTML und PHP lernen, um eine gut aussehende Website zu haben.

Warum sollten Sie Ihr eigenes WordPress-Theme erstellen? Das ist die eigentliche Frage.

• Es ist eine Gelegenheit, mehr über CSS, HTML und PHP zu erfahren.
• Es ist eine Gelegenheit, Ihr Fachwissen einzubringen CSS, HTML und PHP funktionieren.
• Es ist kreativ.
• Es macht Spaß (meistens).
• Wenn Sie es veröffentlichen Für die Öffentlichkeit können Sie sich gut fühlen, wenn Sie etwas geteilt und der WordPress-Community etwas zurückgegeben haben (okay, prahlerische Rechte).

Standards für die Themenentwicklung

WordPress-Themen sollten es sein Codiert mit den folgenden Standards:

• Verwenden Sie gut strukturiertes, fehlerfreies PHP und gültiges HTML. Siehe WordPress-Codierungsstandards.
• Verwenden Sie sauberes, gültiges CSS. Siehe CSS-Codierung Standards.
• Befolgen Sie die Designrichtlinien in Site Design and Layout.

Anatomie eines Themas

WordPress-Themes befinden sich in Unterverzeichnissen des WordPress-Themes-Verzeichnisses (wp-content / theme / standardmäßig), die nicht direkt mit der Datei wp-config.php verschoben werden können. Das Unterverzeichnis des Themes enthält alle Stylesh des Themes EET-Dateien, Vorlagendateien und optionale Funktionsdateien (functions.php), JavaScript-Dateien und Bilder. Beispielsweise würde sich ein Thema mit dem Namen „test“ im Verzeichnis wp-content / theme / test / befinden. Vermeiden Sie die Verwendung von Zahlen für den Themennamen, da dies verhindert, dass er in der Liste der verfügbaren Themen angezeigt wird.

WordPress enthält in jeder neuen Installation ein Standardthema. Untersuchen Sie die Dateien im Standarddesign sorgfältig, um eine bessere Vorstellung davon zu erhalten, wie Sie Ihre eigenen Themendateien erstellen.

Eine visuelle Anleitung finden Sie in dieser Infografik zur WordPress-Themenanatomie.

WordPress Themen bestehen in der Regel neben Bildern und JavaScript-Dateien aus drei Hauptdateitypen.

1. Das Stylesheet mit dem Namen style.css, das die Präsentation (visuelles Design und Layout) der Webseiten steuert.
2. WordPress-Vorlagendateien, die steuern, wie die Websiteseiten die Informationen aus Ihrer WordPress-Datenbank generieren, die auf der Website angezeigt werden sollen.
3. Die optionale Funktionsdatei (functions.php) als Teil der WordPress-Themendateien.

Sehen wir uns diese einzeln an.

Untergeordnete Themen

Das einfachste mögliche Thema ist ein untergeordnetes Thema, das nur eine style.css enthält Dies ist möglich, da es sich um ein untergeordnetes Thema eines anderen Themas handelt, das als übergeordnetes Thema fungiert.

Eine ausführliche Anleitung zu untergeordneten Themen finden Sie unter Untergeordnete Themen.

Thema Stylesheet

Zusätzlich zu den CSS-Stilinformationen für Ihr Thema enthält style.css Details zum Thema in Form von Kommentaren. Das Stylesheet muss Details zum Thema in Form von Kommentaren enthalten. Es gibt keine zwei Themen Es dürfen dieselben Details in den Kommentar-Headern aufgeführt sein, da dies zu Problemen im Dialogfeld zur Themenauswahl führt. Wenn Sie ein eigenes Thema erstellen, indem Sie ein vorhandenes kopieren, müssen Sie diese Informationen zuerst ändern.

Das Folgende ist ein Beispiel für die ersten Zeilen des Stylesheets, die als Stylesheet-Header bezeichnet werden, für das Thema „Twenty Thirteen“:

NB: Der für den Autor verwendete Name lautet Es wird vorgeschlagen, dass er mit dem Benutzernamen wordpress.org des Themenautors identisch ist, obwohl dies auch der wirkliche Name des Autors sein kann. Sie haben die Wahl zwischen den Themenautoren.

Beachten Sie die Liste der Tags, die zur Beschreibung des Themas verwendet werden. Mit diesen können Benutzer Ihr Thema mithilfe des Tag-Filters finden. Eine vollständige Liste finden Sie im Handbuch zur Themenüberprüfung

Die Kommentar-Kopfzeilen in style.css sind erforderlich, damit WordPress das Thema identifizieren und im Administrationsbereich unter Design > Themen als anzeigen kann eine verfügbare Designoption zusammen mit allen anderen installierten Designs.

Richtlinien für Stylesheets

• Befolgen Sie beim Erstellen Ihres CSS die CSS-Codierungsstandards.
• Verwenden Sie gültiges CSS, wenn möglich. Verwenden Sie ausnahmsweise herstellerspezifische Präfixe, um die CSS3-Funktionen zu nutzen.
• Minimieren Sie CSS-Hacks. Die offensichtliche Ausnahme ist die browserspezifische Unterstützung, normalerweise Versionen von IE. Wenn möglich, trennen Sie CSS-Hacks in separate Abschnitte oder separate Dateien.
• Alle möglichen HTML-Elemente sollten von Ihrem Thema (sofern es sich nicht um ein untergeordnetes Thema handelt) sowohl im Beitrags- / Seiteninhalt als auch in Zusammenarbeit gestaltet werden Inhalt.
  • Tabellen, Beschriftungen, Bilder, Listen, Blockzitate usw.
• Das Hinzufügen druckfreundlicher Stile wird dringend empfohlen.
  • Sie können ein Druck-Stylesheet mit media = „print“ einfügen oder einen Print-Media-Block in Ihr Haupt-Stylesheet einfügen.

Funktionsdatei

Ein Thema kann optional eine Funktionsdatei verwenden, die sich im Unterverzeichnis des Themas befindet und den Namen functions.php trägt. Diese Datei verhält sich im Grunde genommen wie ein Plugin. Wenn sie in dem von Ihnen verwendeten Thema vorhanden ist, wird sie während der WordPress-Initialisierung automatisch geladen (sowohl für Administrationsseiten als auch für externe Seiten). Vorgeschlagene Verwendung für diese Datei:

• Stylesheets und Skripte für Themen in die Warteschlange stellen. Siehe wp_enqueue_scripts.
• Aktivieren Sie Themenfunktionen wie Seitenleisten, Navigationsmenüs, Post-Miniaturansichten, Post-Formate, benutzerdefinierte Header, benutzerdefinierte Hintergründe und andere.
• Definieren Sie Funktionen, die in mehreren Vorlagendateien Ihrer verwendet werden Thema.
• Richten Sie ein Optionsmenü ein, das Websitebesitzern Optionen für Farben, Stile und andere Aspekte Ihres Themas bietet.

Das Standard-WordPress-Thema enthält Funktionen. PHP-Datei, die viele dieser Funktionen definiert, daher möchten Sie sie möglicherweise als Modell verwenden. Da functions.php grundsätzlich als Plugin fungiert, ist die Liste Function_Reference der beste Ort, um weitere Informationen darüber zu erhalten, was Sie mit dieser Datei tun können.

Hinweis zur Entscheidung, wann Funktionen zu functions.php oder hinzugefügt werden sollen zu einem bestimmten Plugin: Möglicherweise benötigen Sie dieselbe Funktion, um für mehr als ein übergeordnetes Thema verfügbar zu sein. In diesem Fall sollte die Funktion in einem Plugin anstelle einer functions.php für das jeweilige Thema erstellt werden. Dies kann Vorlagen-Tags und andere spezifische Funktionen umfassen. In Plugins enthaltene Funktionen werden von allen Themen angezeigt.

Vorlagendateien

Vorlagen sind PHP-Quelldateien, die zum Generieren der von Besuchern angeforderten Seiten verwendet werden und als HTML ausgegeben werden. Vorlagendateien bestehen aus HTML-, PHP- und WordPress-Vorlagen-Tags.

Sehen wir uns die verschiedenen Vorlagen an, die als Teil eines Themas definiert werden können.

Mit WordPress können Sie separate Vorlagen für die verschiedenen Aspekte Ihrer Website definieren. Dies ist nicht der Fall Es ist jedoch wichtig, dass alle diese verschiedenen Vorlagendateien für Ihre Site vollständig funktionieren. Vorlagen werden basierend auf der Vorlagenhierarchie ausgewählt und generiert, je nachdem, welche Vorlagen in einem bestimmten Thema verfügbar sind.

Als Thema Entwickler können Sie den Umfang der Anpassung auswählen, die Sie mithilfe von Vorlagen implementieren möchten. Im Extremfall können Sie beispielsweise nur eine Vorlagendatei mit dem Namen index.php als Vorlage für alle von der Site generierten und angezeigten Seiten verwenden. A. Häufiger wird verwendet, dass unterschiedliche Vorlagendateien unterschiedliche Ergebnisse generieren, um eine maximale Anpassung zu ermöglichen.

Liste der Vorlagendateien

Hier ist die Liste der von WordPress erkannten Themendateien. Ihr Design kann andere Stylesheets, Bilder oder Dateien enthalten. Denken Sie daran, dass die Folgendes hat für WordPress eine besondere Bedeutung – weitere Informationen finden Sie unter Vorlagenhierarchie.

style.css Das Haupt-Stylesheet. Dies muss in Ihrem Thema enthalten sein und den Informationskopf für Ihr Thema enthalten. rtl.css Das RTL-Stylesheet. Dies wird automatisch aufgenommen, wenn die Textrichtung der Website von rechts nach links ist. Dies kann mit dem RTLer-Plugin generiert werden. Index.php Die Hauptvorlage. Wenn Ihr Design eigene Vorlagen bereitstellt, muss index.php vorhanden sein. comment.php Die Kommentarvorlage. front-page.php Die Titelseitenvorlage. home.php Die Homepage-Vorlage, die standardmäßig die Startseite ist.Wenn Sie eine statische Startseite verwenden, ist dies die Vorlage für die Seite mit den neuesten Beiträgen. single.php Die Single-Post-Vorlage. Wird verwendet, wenn ein einzelner Beitrag abgefragt wird. Für diese und alle anderen Abfragevorlagen wird index.php verwendet, wenn die Abfragevorlage nicht vorhanden ist. single- {post-type} .php Die Vorlage für einen einzelnen Beitrag, die verwendet wird, wenn ein einzelner Beitrag von einem benutzerdefinierten Beitragstyp abgefragt wird. Beispielsweise würde single-book.php zum Anzeigen einzelner Beiträge des benutzerdefinierten Beitragstyps „Buch“ verwendet. index.php wird verwendet, wenn die Abfragevorlage für den benutzerdefinierten Beitragstyp nicht vorhanden ist. page.php Die Seitenvorlage. Wird verwendet, wenn eine einzelne Seite abgefragt wird. category.php Die Kategorievorlage. Wird verwendet, wenn eine Kategorie abgefragt wird. tag.php Die Tag-Vorlage. Wird verwendet, wenn ein Tag abgefragt wird. taxonomy.php Die Begriffsvorlage. Wird verwendet, wenn ein Begriff in einer benutzerdefinierten Taxonomie abgefragt wird. author.php Die Autorenvorlage. Wird verwendet, wenn ein Autor abgefragt wird. date.php Die Datums- / Zeitvorlage. Wird verwendet, wenn ein Datum oder eine Uhrzeit abgefragt wird. Jahr, Monat, Tag, Stunde, Minute, Sekunde. archive.php Die Archivvorlage. Wird verwendet, wenn eine Kategorie, ein Autor oder ein Datum abgefragt wird. Beachten Sie, dass diese Vorlage für die jeweiligen Abfragetypen von category.php, author.php und date.php überschrieben wird. search.php Die Vorlage für Suchergebnisse. Wird verwendet, wenn eine Suche durchgeführt wird. Anhang.php Anhangsvorlage. Wird beim Anzeigen eines einzelnen Anhangs verwendet. image.php Vorlage für Bildanhänge. Wird beim Anzeigen eines einzelnen Bildanhangs verwendet. Wenn nicht vorhanden, wird Anhang.php verwendet. 404.php Die Vorlage 404 Not Found. Wird verwendet, wenn WordPress keinen Beitrag oder keine Seite finden kann, die der Abfrage entspricht.

Diese Dateien haben in Bezug auf WordPress eine besondere Bedeutung, da sie als Ersatz für index.php verwendet werden, wenn sie gemäß der Vorlagenhierarchie verfügbar sind und wenn das entsprechende bedingte Tag true zurückgibt. Wenn beispielsweise nur ein einzelner Beitrag angezeigt wird, gibt die Funktion is_single () „true“ zurück. Wenn das aktive Design eine single.php-Datei enthält, wird diese Vorlage zum Generieren der Seite verwendet.

Grundlegende Vorlagen

Ein WordPress-Theme besteht mindestens aus zwei Dateien:

• style.css
• index.php

Diese beiden Dateien werden in das Theme-Verzeichnis verschoben. Die Vorlagendatei index.php ist sehr flexibel. Es kann verwendet werden, um alle Verweise auf Kopfzeile, Seitenleiste, Fußzeile, Inhalt, Kategorien, Archive, Suche, Fehler und jede andere in WordPress erstellte Seite einzuschließen.

Oder es kann in modulare Vorlagen unterteilt werden Dateien, von denen jede einen Teil der Arbeitslast übernimmt. Wenn Sie keine anderen Vorlagendateien bereitstellen, verfügt WordPress möglicherweise über Standarddateien oder -funktionen, um ihre Aufgaben auszuführen. Wenn Sie beispielsweise keine Vorlagendatei searchform.php angeben, verfügt WordPress über eine Standardfunktion zum Anzeigen des Suchformulars.

Typische Vorlagendateien sind:

• Kommentare. php
• Kommentare-popup.php
• footer.php
• header.php
• sidebar.php

Mit diesen Vorlagendateien können Sie Vorlagen-Tags in die index.php-Masterdatei einfügen, um diese anderen Dateien dort einzuschließen, wo sie auf der endgültig generierten Seite angezeigt werden sollen.

Hier ist ein Beispiel für die Verwendung einschließen:

<?php get_sidebar(); ?><?php get_footer(); ?>

Die Standarddateien für einige Vorlagenfunktionen sind möglicherweise veraltet oder nicht vorhanden. Sie sollten diese Dateien in Ihrem Design angeben. Ab Version 3.0 befinden sich die veralteten Standarddateien in wp-includes/theme-compat. Beispielsweise sollten Sie header.php für die Funktion get_header () bereitstellen, damit diese sicher funktioniert, und comment.php für die Funktion comment_template ().

Weitere Informationen zur Funktionsweise dieser verschiedenen Vorlagen und zum Generieren unterschiedlicher Vorlagen Informationen dazu finden Sie in der Dokumentation zu Vorlagen.

Benutzerdefinierte Seitenvorlagen

Die Dateien, die die einzelnen Seitenvorlagen definieren, befinden sich in Ihrem Themenverzeichnis. Um eine neue benutzerdefinierte Seitenvorlage für eine Seite zu erstellen, müssen Sie eine Datei erstellen. Rufen wir unsere erste Seitenvorlage für unsere Seite snarfer.php auf. Fügen Sie oben in der Datei snarfer.php Folgendes ein:

<?php/*Template Name: Snarfer*/?>

Oben Code definiert diese snarfer.php-Datei als „Snarfer“ -Vorlage. Natürlich kann „Snarfer“ durch fast jeden Text ersetzt werden, um den Namen der Seitenvorlage zu ändern. Dieser Vorlagenname wird im Themeneditor als Link zum Bearbeiten dieser Vorlage angezeigt Datei.

Die Datei kann fast alles mit der Erweiterung .php benannt werden (siehe reservierte Themendateinamen für Dateinamen, die Sie nicht verwenden sollten; dies sind spezielle Dateinamen, die WordPress für bestimmte Zwecke reserviert).

Was den obigen fünf Codezeilen folgt, liegt bei Ihnen. Der Rest des Codes, den Sie schreiben, steuert, wie Seiten, die die Snarfer-Seitenvorlage verwenden, angezeigt werden. Eine Beschreibung der verschiedenen WordPress-Vorlagenfunktionen finden Sie unter Vorlagen-Tags Sie können es für diesen Zweck verwenden. Möglicherweise ist es bequemer, eine andere Vorlage (möglicherweise page.php oder index.php) in snarfer.php und dann zu kopieren Fügen Sie die obigen fünf Codezeilen am Anfang der Datei hinzu.Auf diese Weise müssen Sie nur den HTML- und PHP-Code ändern, anstatt alles von Grund auf neu zu erstellen. Beispiele sind unten gezeigt. Nachdem Sie eine Seitenvorlage erstellt und in das Verzeichnis Ihres Themas gestellt haben, steht diese beim Erstellen oder Bearbeiten einer Seite als Auswahl zur Verfügung. (Hinweis: Beim Erstellen oder Bearbeiten einer Seite wird die Option Seitenvorlage nur angezeigt Es gibt mindestens eine Vorlage, die auf die oben beschriebene Weise definiert wurde.)

Abfragebasierte Vorlagendateien

WordPress kann verschiedene Vorlagen für verschiedene Abfragetypen laden. Es gibt zwei Möglichkeiten, dies zu tun: Als Teil der integrierten Vorlagenhierarchie und durch die Verwendung von bedingten Tags in der Schleife einer Vorlagendatei.

Um die Vorlagenhierarchie zu verwenden, müssen Sie grundsätzlich spezielle Vorlagendateien bereitstellen wird automatisch zum Überschreiben von index.php verwendet. Wenn Ihr Design beispielsweise eine Vorlage mit dem Namen category.php bereitstellt und eine Kategorie abgefragt wird, wird category.php anstelle von index.php geladen. Wenn category.php nicht vorhanden ist, index.php wird wie gewohnt verwendet.

Sie können in der Vorlagenhierarchie noch spezifischer werden, indem Sie af angeben ile heißt beispielsweise category-6.php – diese Datei wird anstelle von category.php verwendet, wenn die Seite für die Kategorie generiert wird, deren ID-Nummer 6 ist. (Sie finden Kategorie-ID-Nummern unter Verwalten > Kategorien, wenn Sie in WordPress Version 2.3 und niedriger als Site-Administrator angemeldet sind. In WordPress 2.5 wurde die ID-Spalte aus den Admin-Bereichen entfernt. Sie können die Kategorie-ID suchen, indem Sie auf „Kategorie bearbeiten“ klicken und in der URL-Adressleiste nach dem Wert „cat_ID“ suchen. Es sieht aus wie „… category.php? Action = edit & cat_ID = 3“ wobei „3“ die Kategorie-ID ist). Weitere Informationen zur Funktionsweise dieses Prozesses finden Sie unter Kategorievorlagen.

Wenn Ihr Design noch mehr Kontrolle darüber haben muss, welche Vorlagendateien verwendet werden als in der Vorlagenhierarchie angegeben, können Sie Bedingt verwenden Stichworte. Das bedingte Tag prüft im Wesentlichen, ob eine bestimmte Bedingung in der WordPress-Schleife erfüllt ist. Anschließend können Sie eine bestimmte Vorlage laden oder einen bestimmten Text basierend auf dieser Bedingung auf dem Bildschirm anzeigen.

Für Um beispielsweise ein eindeutiges Stylesheet in einem Beitrag zu generieren, der nur in einer bestimmten Kategorie gefunden wird, sieht der Code möglicherweise folgendermaßen aus:

Bei Verwendung einer Abfrage sieht er möglicherweise folgendermaßen aus:

<?php$post = $wp_query->post;if ( in_category( "9" ) ) { get_template_part( "single2" );} else { get_template_part( "single1" );}?>

In beiden Fällen führt dieser Beispielcode dazu, dass je nach Kategorie des angezeigten Beitrags unterschiedliche Vorlagen verwendet werden. Abfragebedingungen sind nicht auf Kategorien beschränkt. Im Artikel „Bedingte Tags“ finden Sie jedoch alle Optionen.

Definieren benutzerdefinierter Vorlagen

Zum Definieren können Sie das WordPress-Plugin-System verwenden zusätzliche Vorlagen, die basierend auf Ihren eigenen benutzerdefinierten Kriterien angezeigt werden. Diese erweiterte Funktion kann mithilfe des Aktionshakens „template_include“ ausgeführt werden. Weitere Informationen zum Erstellen von Plugins finden Sie in der Plugin-API-Referenz.

Einschließen von Vorlagendateien

Zum Laden einer anderen Vorlage (außer Kopfzeile, Seitenleiste und Fußzeile, für die vordefinierte Befehle wie enthalten sind) get_header ()) in eine Vorlage, können Sie get_template_part () verwenden. Dies erleichtert einem Thema die Wiederverwendung von Codeabschnitten.

Verweisen auf Dateien aus einer Vorlage

Vermeiden Sie beim Verweisen auf andere Dateien innerhalb desselben Themas fest codierte URIs und Dateipfade. Verweisen Sie stattdessen mit bloginfo () auf die URIs und Dateipfade: Siehe Verweisen auf Dateien aus einer Vorlage.

Beachten Sie, dass URIs, die im Stylesheet verwendet werden, sich auf das Stylesheet beziehen und nicht auf die Seite, die auf das Stylesheet verweist. Wenn Sie beispielsweise ein Bild- / Verzeichnis in Ihr Design aufnehmen, müssen Sie nur dieses relative Verzeichnis im CSS angeben, wie folgt:

h1 { background-image: url(images/my-background.jpg);}

Plugin-API-Hooks

Beachten Sie beim Entwickeln von Themes, dass Ihr Theme so eingerichtet sein sollte, dass es mit allen WordPress-Plugins funktioniert, die Benutzer möglicherweise installieren möchten. Plugins fügen WordPress über „Aktion“ Funktionen hinzu Hooks „(weitere Informationen finden Sie unter Plugin-API).

Die meisten Action-Hooks befinden sich im PHP-Kerncode von WordPress, sodass Ihr Theme keine speziellen Tags haben muss, damit sie funktionieren. Aber ein paar Action Hooks müssen in Ihrem Theme vorhanden sein, damit Plugins Informationen direkt in Ihrer Kopf-, Fuß-, Seiten- oder Seitenstruktur anzeigen können. Hier finden Sie eine Liste der speziellen Action Hook-Vorlagenvorlagen-Tags, die Sie einschließen müssen:

wp_enqueue_scripts Wird in der Theme-Funktionsdatei verwendet. Zum Laden externer Skripte und Stylesheets. wp_head () Geht in den < head > Element eines Themas in header.php. Beispiel für die Verwendung eines Plugins: Fügen Sie JavaScript-Code hinzu. wp_footer () Wird in footer.php direkt vor dem schließenden Tag < / body > angezeigt. Beispiel für die Verwendung eines Plugins: Fügen Sie unten in der Fußzeile PHP-Code ein, der nach allem anderen ausgeführt werden muss.Sehr häufig zum Einfügen von Webstatistikcode wie Google Analytics verwendet. wp_meta () Geht normalerweise in die < li > Meta < / li > Abschnitt des Menüs oder der Seitenleiste eines Themas; sidebar.php-Vorlage. Beispiel für die Verwendung des Plugins: Fügen Sie eine rotierende Werbung oder eine Tag-Cloud hinzu. s schließendes Tag (< / div >). Beispiel für die Verwendung eines Plugins: Anzeigen einer Kommentarvorschau.

Für ein reales Anwendungsbeispiel finden Sie diese Plugin-Hooks in den Vorlagen des Standardthemas.

API zur Anpassung des Themas

Ab WordPress 3.4 neu Die Funktion zur Anpassung von Themen ist standardmäßig für fast alle WordPress-Themen verfügbar. Die Administrationsseite für die Themenanpassung wird automatisch mit Optionen gefüllt, für die ein Thema die Unterstützung mit add_theme_support () oder mithilfe der Einstellungs-API deklariert, und Administratoren können nicht permanente Vorschauen der von ihnen vorgenommenen Änderungen in Echtzeit anzeigen.

Entwickler von Themen und Plugins, die neue Optionen zur Seite „Themenanpassung“ eines Themas hinzufügen möchten, sollten die Dokumentation zur Themenanpassungs-API lesen. Weitere Tutorials zur Themenanpassungs-API finden Sie auf der Website Ottopress.com.

Nicht vertrauenswürdige Daten

Sie sollten dynamisch generierten Inhalten in Ihrem Design entgehen, insbesondere Inhalten, die in HTML-Attributen ausgegeben werden. Wie in den WordPress-Codierungsstandards angegeben, sollte Text, der in Attribute eingeht, über esc_attr () ausgeführt werden, damit er einzeln angezeigt wird oder doppelte Anführungszeichen beenden den Attributwert nicht und machen das XHTML ungültig und verursachen ein Sicherheitsproblem. Häufige zu überprüfende Stellen sind Titel-, Alt- und Wertattribute.

Es gibt nur wenige spezielle Vorlagen-Tags für häufige Fälle, in denen Die sichere Ausgabe ist erforderlich. In einem solchen Fall wird ein Beitragstitel mit the_title_attribute () anstelle von the_title () in ein title-Attribut ausgegeben, um eine Sicherheitslücke zu vermeiden. Hier ist ein Beispiel für das korrekte Escapezeichen für das title-Attribut eines Post-Titel-Links bei Verwendung von übersetzbarem Text:

<a href="<?php the_permalink(); ?>" title="<?php sprintf( __( "Permanent Link to %s", "theme-name" ), the_title_attribute( "echo=0" ) ); ?>"><?php the_title(); ?></a>

Übersetzungsunterstützung / I18n

Um einen reibungslosen Übergang für die Sprachlokalisierung zu gewährleisten, verwenden Sie die auf gettext basierenden i18n-Funktionen von WordPress, um den gesamten übersetzbaren Text in die Vorlagendateien einzubinden. Dies erleichtert den Übersetzungsdateien das Einhängen und Übersetzen von Beschriftungen, Titeln und anderem Vorlagentext die aktuelle Sprache der Site. Weitere Informationen finden Sie unter WordPress-Lokalisierung und I18n für WordPress-Entwickler.

Themenklassen

Implementieren Sie die folgenden Vorlagen-Tags, um von WordPress generierte Klassenattribute zu Body-, Post- und Kommentarelementen hinzuzufügen. Wenden Sie für Postklassen nur Elemente in The Loop an.

• body_class ()
• post_class ()
• comment_class ()

Checkliste für Vorlagendateien

Überprüfen Sie beim Entwickeln eines Themas Ihre Vorlagendateien anhand der folgenden Standards für Vorlagendateien.

Dokumentenkopf (header.php)

• Verwenden Sie das richtige DOCTYPE.
• Das öffnende < html > -Tag sollte language_attributes ( ).
• Das Zeichensatzelement < meta > sollte vor allem anderen stehen, einschließlich des Zeichens < title > Element.
• Verwenden Sie bloginfo (), um das Meta < festzulegen > Zeichensatz- und Beschreibungselemente.
• Verwenden Sie wp_title (), um den < -Titel Element. Sehen Sie, warum.
• Verwenden Sie automatische Feed-Links, um Feed-Links hinzuzufügen.
• Fügen Sie wp_head () einen Aufruf hinzu, bevor Sie < / head schließen > -Tag. Plugins verwenden diesen Aktions-Hook, um eigene Skripte, Stylesheets und andere Funktionen hinzuzufügen.
• Verknüpfen Sie die Theme-Stylesheets nicht in der Header-Vorlage. Verwenden Sie stattdessen den Aktions-Hook wp_enqueue_scripts in einer Designfunktion.

Hier ist ein Beispiel für einen korrekt formatierten HTML5-kompatiblen Kopfbereich:

Navigationsmenüs (header.php )

• Die Hauptnavigation des Themas sollte ein benutzerdefiniertes Menü mit wp_nav_menu () unterstützen.
  • Menüs sollten lange Linktitel und eine große Anzahl von Listenelementen unterstützen. Diese Elemente sollten das Design oder Layout nicht beschädigen.
  • Untermenüelemente sollten korrekt angezeigt werden. Wenn möglich, unterstützen Sie Dropdown-Menüstile für Untermenüelemente. Dropdown-Listen, in denen die Menütiefe angezeigt wird, anstatt nur die oberste Ebene anzuzeigen.

• Das Thema sollte so vollständig wie möglich Widget-fähig sein. Jeder Bereich im Layout, der wie ein Widget funktioniert (Tag Cloud, Blogroll, Liste der Kategorien) oder Widgets akzeptiert (Seitenleiste), sollte Widgets zulassen.
• Inhalt, der standardmäßig in Widget-Bereichen angezeigt wird (fest codiert) (in der Seitenleiste) sollte beispielsweise verschwinden, wenn Widgets unter Darstellung > Widgets aktiviert sind.

Fußzeile (footer.php)

• Verwenden Sie den Aufruf wp_footer (), um kurz vor dem Schließen des Body-Tags angezeigt zu werden.

<?php wp_footer(); ?></body></html>

Index (index.php)

• Zeigt eine Liste der Beiträge in Auszug oder in voller Länge an. Wählen Sie das eine oder das andere aus.
• Fügen Sie wp_link_pages () ein, um Navigationslinks in Posts zu unterstützen.

Archiv (archive.php)

• Archivtitel anzeigen (Tag-, Kategorie-, Datums- oder Autorenarchive).
• Eine Liste der Beiträge in Auszug oder in voller Länge anzeigen. Wählen Sie das eine oder das andere aus.
• Fügen Sie wp_link_pages () ein, um Navigationslinks in Posts zu unterstützen.

Pages (page.php)

• Seitentitel und Seiteninhalt anzeigen.
• Kommentarliste und Kommentarformular anzeigen (sofern die Kommentare nicht deaktiviert sind).
• Fügen Sie wp_link_pages () ein, um Navigationslinks innerhalb einer Seite zu unterstützen.
• Metadaten wie Tags, Kategorien, Datum und Autor sollten nicht angezeigt werden.
• Zeigen Sie einen Link „Bearbeiten“ für angemeldete Benutzer mit Bearbeitungsberechtigungen an.

Einzelner Beitrag (single.php)

• Fügen Sie wp_link_pages () ein, um Navigationslinks in einem Beitrag zu unterstützen.
• Titel und Beitragsinhalt des Beitrags anzeigen.
  • Der Titel sollte Klartext anstelle eines Links sein, der auf sich selbst verweist.
• Zeigen Sie das Datum des Beitrags an es sei denn, dies ist für das Design wichtig. (Die Benutzereinstellungen für das Datums- und Uhrzeitformat befinden sich in den Administrationsbereichen. > Einstellungen Allgemein).
• Verwenden Sie für die Ausgabe basierend auf der Benutzereinstellung die Zeit (get_option („date_format“)).

Zeigen Sie den Autorennamen an (falls zutreffend).

Zeigen Sie Beitragskategorien und Beitragstags an.

Zeigen Sie einen Link „Bearbeiten“ für angemeldete Benutzer mit Bearbeitungsberechtigungen an.

Kommentarliste und Kommentarformular anzeigen.

Navigationslinks zum nächsten und vorherigen Beitrag mit previous_post_link () und next_post_link () anzeigen.

• Autorenkommentare sollten anders hervorgehoben werden.
• Gravatare (Benutzeravatare) anzeigen, falls zutreffend.
• Thread-Kommentare unterstützen.
• Trackbacks / Pingbacks anzeigen.
• Diese Datei sollte keine Funktionsdefinitionen enthalten, es sei denn, Sie überprüfen in function_exist (), um Fehler bei der erneuten Deklaration zu vermeiden. Idealerweise sollten sich alle Funktionen in functions.php befinden.

Suchergebnisse (search.php)

JavaScript

• JavaScript-Code sollte sein Wann immer möglich in externen Dateien abgelegt.
• Verwenden Sie wp_enqueue_script (), um Ihre Skripte zu laden.
• JavaScript, das direkt in HTML-Dokumente (Vorlagendateien) geladen wird, sollte CDATA-codiert sein, um Fehler in älteren Browsern zu vermeiden .

<script type="text/javascript">/* <!]> */</script>

Screenshot

Erstellen Sie einen Screenshot für Ihr Thema. Der Screenshot sollte den Namen screenhot.png haben und im Verzeichnis der obersten Ebene abgelegt werden. Der Screenshot sollte das Design des Themas genau zeigen und im PNG-Format gespeichert sein. Obwohl .jpg, .jpeg und .gif ebenfalls gültige Erweiterungen und Dateiformate für den Screenshot sind, werden sie nicht empfohlen.

Die empfohlene Bildgröße ist 1200 Pixel breit und 900 Pixel hoch. Der Screenshot wird normalerweise kleiner angezeigt, aber das übergroße Bild ermöglicht eine hochauflösende Anzeige auf HiDPI-Displays. Beachten Sie, dass der obere und untere Rand des Screenshot-Bilds möglicherweise nicht angezeigt werden kann, da der Bildschirm „Themen verwalten“ nicht angezeigt wird.

Themenoptionen

Themen können optional das unterstützen Bildschirm zum Anpassen des Themas. Einen Beispielcode finden Sie unter Eine Beispielseite für WordPress-Themenoptionen.

Wenn Sie die Verfügbarkeit des Bildschirms zum Anpassen von Themen für eine Benutzerrolle aktivieren, verwenden Sie die Benutzerfunktion „edit_theme_options“ anstelle der Funktion „switch_themes“, es sei denn Die Benutzerrolle sollte eigentlich auch in der Lage sein, die Themen zu wechseln. Weitere Informationen finden Sie unter Rollen und Funktionen und Hinzufügen von Administrationsmenüs.

Wenn Sie die Funktion „edit_themes“ an einer beliebigen Stelle in Ihrem Design verwenden, um der Administratorrolle Zugriff auf den Bildschirm zum Anpassen des Themas (oder möglicherweise auf einige benutzerdefinierte Bildschirme) zu gewähren, Beachten Sie, dass diese Funktion seit Version 3.0 bei der Installation von WordPress Multisite nicht standardmäßig der Administratorrolle zugewiesen wurde. Siehe die Erklärung. Verwenden Sie in diesem Fall stattdessen die Funktion „edit_theme_options“, wenn der Administrator das Menü „Theme Options“ anzeigen soll. Informationen zu den zusätzlichen Funktionen der Administratorrolle bei Verwendung von WordPress Multisite.

Testprozess für Themen

1. Beheben Sie PHP- und WordPress-Fehler. Fügen Sie Ihrer Datei wp-config.php die folgende Debug-Einstellung hinzu, um veraltete Funktionsaufrufe und andere WordPress-bezogene Fehler anzuzeigen: define („WP_DEBUG“, true);. Weitere Informationen finden Sie unter Hook für veraltete Funktionen.
2. Überprüfen Sie die Vorlagendateien anhand der Checkliste für Vorlagendateien (siehe oben).
3. Führen Sie einen Durchlauf mit dem Theme Unit Test durch.
4. Überprüfen Sie HTML und CSS. Siehe Überprüfen einer Website.
5. Auf JavaScript-Fehler prüfen.
6. In allen Zielbrowsern testen. Beispiel: IE9, Safari, Chrome, Opera, Firefox und Microsoft Edge.
7. Bereinigen Sie alle überflüssigen Kommentare, Debug-Einstellungen oder TODO-Elemente.
8. Siehe Themenüberprüfung, wenn Sie öffentlich sind Freigeben des Themas durch Senden an das Themenverzeichnis.

Ressourcen und Referenzen

Codestandards

• Kennen Sie Ihre Quellen
• WordPress-Codierungsstandards
• CSS-Codierungsstandards

Themendesign

• Site-Design und Layout

CSS

• CSS
• CSS-Kurzschrift
• Von WordPress generierte Klassen

Vorlagen

• Einstieg in Vorlagen
• Vorlagen
• Vorlagenhierarchie
• Vorlagen-Tags
• Die Schleife
• Bedingte Tags
• Funktionsreferenz
• I18n für WordPress-Entwickler
• Datenüberprüfung

Funktionsliste

• Funktionsreferenz

Testen und Qualitätssicherung

• Themeneinheit Te st
• Überprüfen einer Website
• CSS Beheben von Browserfehlern
• CSS-Fehlerbehebung
• modern.IE: Zum Testen des IE auf verschiedenen Plattformen mit open -source tools

Release & Promotion

• Themenüberprüfungsprozess