WordPress Custom Theme Tutorial

WordPress Custom Theme Tutorial

Das Lernen, benutzerdefinierte WordPress-Themes zu erstellen, eröffnet Ihnen eine ganz neue Welt. Es ermöglicht Ihnen, benutzerdefinierte Designs für sich selbst, Ihre Kunden zu erstellen und sogar zur Open-Source-Community beizutragen.

In diesem Handbuch werden wir Sie von Null zu einem voll funktionsfähigen Thema führen, das an die WordPress.org thema Verzeichnis.

Um folgen zu können, benötigen Sie ein grundlegendes Verständnis von HTML, CSS, PHP und der Funktionsweise von WordPress.

Der gesamte in diesem Handbuch verwendete Code steht in diesem Github-Repository als Referenz zur Verfügung.

Schritt #1: Erstellen wesentlicher Dateien für Ihr benutzerdefiniertes Thema

Ein funktionierendes WordPress-Theme kann aus nur zwei Dateien bestehen: Stil.css und Index.PHP. Dies ist aufgrund der Template-Hierarchie von WordPress möglich.

Wenn WordPress eine Webseite ausgibt, sucht es nach der spezifischsten verfügbaren Vorlage. Hier ist ein praktisches Beispiel:

Der Benutzer befindet sich auf https://example.com/practical-example, einer Seite. WordPress versucht, eine Vorlage in dieser Reihenfolge zu finden:

1. 1. • seite-{slug}.php – Die Seite slug ist /practical-example, WordPress wird versuchen, Ihr-theme / page-practical-example zu verwenden.php
      • Seite-{id}.php – Die Seiten-ID ist 42, WordPress wird versuchen, Ihr-theme / page-42 zu verwenden.PHP.
      • Seite.php – WordPress wird das allgemeine your-theme / page ausprobieren.PHP-Vorlage.
      • singular.php – Die singuläre Vorlage kann Beiträge und Seiten rendern, daher wird sie nach der spezifischeren Seite versucht.php
      • index.php – Zuletzt your-theme / index.php wird verwendet, wenn keine andere Vorlage gefunden wird.

Beginnen wir mit dem Erstellen eines Themas mit nur den wesentlichen Dateien und können dann weitere Funktionen überlagern, während wir deren Funktionsweise untersuchen.

Erstellen Sie in /wp-content/themes/einen Ordner mit dem Namen my-custom-theme und erstellen Sie diese beiden folgenden Dateien:

style.css

Damit WordPress unser Thema erkennt und in der Liste Aussehen → Themen ordnungsgemäß ausgibt, müssen wir einen WordPress-spezifischen Code oben im Stil platzieren.css, es sieht so aus:

/*Theme Name: My Custom ThemeTheme URI: https://yourwebsite.com/themeAuthor: Your NameAuthor URI: https://yourwebsite.comDescription: This is my first custom theme!Version: 1.0.0License: GNU General Public License v2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Text Domain: my-custom-themeTags: custom-background*/

Technisch ist keines der Felder erforderlich, aber wenn Sie möchten, dass Ihr Thema in wp-admin gut aussieht, werden sie dringend empfohlen. Sie sind auch erforderlich, wenn Sie Ihr Thema auf WordPress verteilen.

1. 1. • Themenname – Sie sollten immer einen Themennamen angeben. Wenn Sie dies nicht tun, wird der Ordnername verwendet, in unserem Beispiel my-custom-theme.
      • Theme-URI – Wenn verwendet, sollte der Theme-URI einen Link zu einer Seite enthalten, auf der Besucher mehr über das Thema erfahren können.
      • Autor – Ihr Name geht hier.
      • Author URI – Ein Link zu Ihrer persönlichen oder geschäftlichen Website kann hier platziert werden.
      • Beschreibung – Die Beschreibung wird im Modal des wp-Admin-Themas und auch in der WordPress-Themenliste angezeigt.
      • Version – Versionsnummern helfen Entwicklern, Änderungen zu verfolgen und Benutzern mitzuteilen, ob sie die neueste Version verwenden. Wir folgen dem SemVer-Nummerierungssystem, um den Schweregrad von Änderungen in einem Update anzugeben.
      • Lizenz – Wie Sie Ihr Thema lizenzieren, liegt bei Ihnen, aber wenn Sie eine nicht GPL-kompatible Lizenz wählen, können Sie Ihr Thema nicht auf WordPress verteilen.
      • Lizenz-URI – Dies ist einfach ein Link zur oben aufgeführten Lizenz.
      • Textdomäne – Die Textdomäne wird verwendet, wenn Sie Ihr Thema in andere Sprachen übersetzen. Keine Sorge, wir werden dies später eingehend untersuchen. Im Moment reicht es aus zu wissen, dass es sich empfiehlt, dass der Themenordner und die Textdomäne der Themenname sind, der durch Bindestriche anstelle von Leerzeichen getrennt ist.
      • Tags – Tags werden nur verwendet, wenn Sie Ihr Thema auf die WordPress.org thema Verzeichnis. Sie sind die Basis des ‚Feature Filter‘ Mechanismus.

Kopieren Sie das Obige und fügen Sie es in den Stil ein.css und Sie werden so etwas haben:

Hinweis: Es sieht im Moment etwas leer aus, da wir noch keinen Screenshot haben. Wir werden das später hinzufügen.

Index.php

index.php ist die einzige andere unbedingt erforderliche Datei. Seine Aufgabe ist es, die gesamte Front-End-Ausgabe für unser Thema zu rendern.

Seit Index.php wird alle unsere Seiten rendern (Startseite, Beiträge, Kategorien, Archive), es wird viel Arbeit machen. Um zu beginnen, benötigen wir einen Kopfabschnitt, der die HTML-Grundlagen abdeckt.

<!DOCTYPE html><html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <?php wp_head(); ?> </head>

Dies ist Standard-HTML mit einer Ausnahme, (<https://developer.wordpress.org/reference/hooks/wp_head/>). wp_head ist eine Kernfunktion, mit der WordPress- und Drittanbieter-Plugins Code in den Header einfügen können, ohne Ihre Vorlagendateien zu ändern. Dies wird als Aktionshaken bezeichnet.

Wenn Sie mit HTML vertraut sind, stellen Sie möglicherweise fest, dass es kein <title> -Tag gibt, um den Seitentitel auszugeben. Das liegt daran, dass WordPress den Hook wp_head verwenden kann, um den Titel dynamisch einzufügen.

Eine andere Verwendung von wp_head besteht darin, styles (.css) und Skripte (.js). Es gibt sehr gute Gründe, dies zu tun, anstatt sie fest zu codieren, was wir später betrachten werden.

Als nächstes haben wir den Hauptteil der Seite:

<body <?php body_class(); ?>>

body_class () ist eine von WordPress bereitgestellte Hilfsfunktion, die eine Liste nützlicher CSS-Klassen ausgibt, die die angezeigte Seite beschreiben, z:

class="page page-id-2 page-parent page-template-default logged-in"

body_class(); akzeptiert auch einen Parameter, so dass Sie Ihre eigenen Klassen hinzufügen können, zum Beispiel:

<body <?php body_class( 'wide-template blue-bg' ); ?>>

Als nächstes haben wir den Template-Header.

<header class="site-header"><p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p><p class="site-description"><?php bloginfo( 'description' ); ?></p></header><! – .site-header – >

Hier verwenden wir die integrierten Vorlagenfunktionen von WordPress, um den Titel und die Beschreibung der Website auszugeben. Wir haben auch eine Hilfsfunktion, home_url () , verwendet, um den Site-Titel wieder mit der Homepage zu verknüpfen.

Als nächstes der Hauptteil der Seite:

<div class="site-content"><?phpif ( have_posts() ) :while ( have_posts() ) :the_post();?><article <?php post_class(); ?>><header class="entry-header"><?php the_title( '<h1 class="entry-title">', '</h1>' ); ?></header><! – .entry-header – ><div class="entry-content"><?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?></div><! – .entry-content – ></article><! – #post-## – ><?php// If comments are open or we have at least one comment, load up the comment template.if ( comments_open() || get_comments_number() ) :comments_template();endif;endwhile;else :?><article class="no-results"><header class="entry-header"><h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1></header><! – .entry-header – ><div class="entry-content"><p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p></div><! – .entry-content – ></article><! – .no-results – ><?phpendif;?></div><! – .site-content – >

Hier wird es interessant (und etwas komplexer). Hier verwenden wir die wichtigste Funktion von WordPress, die Schleife. Die Schleife erledigt die harte Arbeit, um herauszufinden, auf welcher Seite sich der Benutzer befindet und was angezeigt werden soll. Anschließend wird eine Liste mit einem oder mehreren ‚Posts‘ zurückgegeben, die wir mithilfe von Vorlagenfunktionen durchlaufen und Daten ausgeben können.

Wenn die Schleife keine Ergebnisse zurückgibt, z. B. auf einer 404-Seite oder einem gelöschten Beitrag, verwenden wir einen else-Operator, um eine vordefinierte Nachricht anzuzeigen.

Ohne den umgebenden Code sieht eine vereinfachte Schleife folgendermaßen aus:

if ( have_posts() ) : // check if the loop has returned any posts.while ( have_posts() ) : // loop through each returned post.the_post(); // set up the content so we can use template tags like the_title().the_title(); // output the post title.the_content(); // output the post content.endwhile;else : echo 'No Page Found'; // output an error message if there are no posts.endif;?>

Hinweis: Da WordPress seinen Ursprung im Bloggen hat, verwenden viele Funktionen die Terminologie ‚Post‘, obwohl sie jede Art von Inhalt (Beiträge, Seiten, benutzerdefinierte Beitragstypen) zurückgeben und ausgeben können.

Schließlich haben wir die Fußzeile, alles, was wir hier tun müssen, ist die HTML-Tags zu schließen, die wir zuvor geöffnet haben. Es gibt einen weiteren Action-Hook, wp_footer() , der von WordPress und Plugins aktiv verwendet wird, um Skripte in die Fußzeile aufzunehmen, die zum Rendern der Seite benötigt werden.

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

Wenn Sie bisher gefolgt sind, haben Sie ein voll funktionsfähiges WordPress-Theme, das so aussieht:

Unser Thema wird keine Designpreise gewinnen (es hat kein CSS) und es fehlen viele Funktionen, die Benutzer für wesentlich halten (Seitenleisten, Navigation, Metadaten, Miniaturansichten, Paginierung usw.) aber es ist ein guter Anfang!

Lassen Sie uns fortfahren und sehen, wie wir es verbessern können.

Schritt #2: Funktionen erstellen.php

Funktionen.PHP ist nicht unbedingt eine erforderliche Datei, aber es bietet so viele Vorteile, dass 99,99% der Themen es haben. In Funktionen.php Sie können die in WordPress integrierte Theme-Funktionalität nutzen und auch Ihren eigenen PHP-Code hinzufügen.

Erstellen Sie eine Funktion.php jetzt in Ihrem Themenordner, da wir in den nächsten Abschnitten Code hinzufügen werden.

Hinzufügen eines Navigationsmenüs

Die meisten, wenn nicht alle Websites verwenden ein Navigationsmenü, aber bis jetzt unterstützt unser Thema keines. Um WordPress mitzuteilen, dass unser Thema über ein Navigationsmenü verfügt, müssen wir es in Funktionen registrieren.php so:

register_nav_menus( array( 'menu-1' => __( 'Primary Menu', 'my-custom-theme' ),);

Hinweis: register_nav_menus() akzeptiert ein Array, sodass Sie bei Bedarf mehr als ein Menü registrieren können.

WordPress kennt jetzt unser Menü, aber wir müssen es noch in unserem Thema ausgeben. Wir tun dies, indem wir den folgenden Code unter der Site-Beschreibung im Index hinzufügen.php:

wp_nav_menu( array( 'theme_location' => 'menu-1',) );

Jetzt haben wir ein (nicht gestaltetes) Navigationsmenü:

Hinzufügen einer Seitenleiste

Unser Theme hat auch keine Seitenleiste (Widget-Bereich).

Zuerst müssen wir die Seitenleiste in Funktionen registrieren.php:

function my_custom_theme_sidebar() { register_sidebar( array( 'name' => __( 'Primary Sidebar', 'my-custom-theme' ), 'id' => 'sidebar-1', ) );}add_action( 'widgets_init', 'my_custom_theme_sidebar' );

Erstellen Sie nun die Seitenleiste.php in Ihrem Themenordner und fügen Sie den folgenden Code hinzu:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) { ?> <ul class="sidebar"> <?php dynamic_sidebar('sidebar-1' ); ?> </ul><?php } ?>

Hier verwenden wir eine if-Anweisung, um zu überprüfen, ob die Seitenleiste ‚aktiv‘ ist, bevor wir den Code ausgeben. Eine aktive Seitenleiste ist eine, der der Benutzer mindestens ein Widget hinzugefügt hat.

Der letzte Schritt besteht darin, die Seitenleiste in den Index aufzunehmen.php, über wp_footer () fügen Sie einen get_sidebar () -Aufruf hinzu.

Hinzufügen ausgewählter Bilder

Wie Seitenleisten und Navigationsmenüs können wir nicht nur ausgewählte Bilder in unserem Thema ausgeben und erwarten, dass sie funktionieren. In Funktionen.php hinzufügen:

add_theme_support( 'post-thumbnails' );

Jetzt können wir the_post_thumbnail() hinzufügen; innerhalb unserer Schleife und die Miniaturansichten funktionieren. Das einzige Problem ist, dass sie mit der maximalen Größe von WordPress von 1920px x 2560px ausgegeben werden, was für die meisten Anwendungen zu groß ist. Glücklicherweise hat WordPress eine weitere Hilfsfunktion: add_image_size();

Wenn ein Benutzer ein Bild hochlädt und die Bildgröße definiert ist, generiert WordPress eine Version des hochgeladenen Bildes in dieser Größe (unter Beibehaltung des Originals). Wenn das Bild des Benutzers kleiner als die von Ihnen festgelegten Abmessungen ist, wird WordPress nichts tun, da es kein Bild größer als das Original machen kann.

Um ein optimiertes Feature-Image anstelle des Originals zu verwenden, fügen Sie den folgenden Code in Funktionen ein.php:

add_image_size( 'my-custom-image-size', 640, 999 );

Der erste Parameter ist der Handle, der zweite die Bildbreite und der dritte die Höhe. Sowohl Höhe als auch Breite sind optional, falls Sie nur eine Dimension begrenzen möchten.

Im Index.php:

the_post_thumbnail( 'my-custom-image-size' );

Stile und Skripte in die Warteschlange stellen

Zuvor haben wir erklärt, dass es besser ist, Stile und Skripte in die Warteschlange zu stellen, als sie direkt in die Vorlagendateien zu codieren. Das liegt daran, dass Enqueuing viel mehr Flexibilität ermöglicht.

Bei korrekter Ausführung teilt Enqueuing WordPress auch mit, welche Ressourcen geladen werden. Wenn WordPress weiß, welche Ressourcen benötigt werden, kann es sicherstellen, dass dieselbe Ressource nicht mehr als einmal geladen wird. Dies ist besonders wichtig, wenn Sie über eine äußerst beliebte Bibliothek wie jQuery oder FontAwesome verfügen, die mehrere Themen und Plugins verwendet.

Ein weiterer Vorteil von Enqueuing besteht darin, dass eine Ressource, die in der Warteschlange steht, von einem Plugin aus der Warteschlange entfernt werden kann, sodass Vorlagendateien nicht geändert werden müssen.

Obwohl unser Thema einen Stil hat.CSS-Datei, die es noch nicht verwendet, lassen Sie uns das jetzt in die Warteschlange stellen:

function my_custom_theme_enqueue() { wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

get_stylesheet_uri() ist eine Hilfsfunktion, die den URI des Stylesheets des aktuellen Themas abruft. Wenn wir eine andere Datei in die Warteschlange stellen würden, müssten wir dies stattdessen tun:

wp_enqueue_style( 'my-stylesheet', get_template_directory_uri() . '/css/style.css' );

Unser Thema hat keine Skripte, wenn es so wäre, würden wir sie so in die Warteschlange stellen:

function my_custom_theme_enqueue() {wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/scripts.js' );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

Eine Ausnahme von den oben genannten sind Skripte, die von WordPress vorregistriert wurden, in diesen Fällen müssen Sie nur den ersten Parameter ($ handle) angeben:

wp_enqueue_script( 'jquery' );

Hinzufügen von Stil mit CSS

Unser Thema hat starke Grundlagen, aber es fehlt jedes Design und fügt einige grundlegende CSS zum Stil hinzu.css wird einen großen Unterschied machen. Wir haben unserem Beispielthema als Demonstration etwa ~ 100 CSS-Zeilen hinzugefügt, und das Ergebnis sieht folgendermaßen aus:

Titel-Tag

Alle Themes sollten die integrierte Funktionalität von WordPress verwenden, um das Titel-Tag zu generieren, das durch Hinzufügen dieses Codes zu Ihren Funktionen aktiviert wird.php-Datei: add_theme_support( 'title-tag' ); Das ist alles, WordPress verarbeitet die Ausgabe der Seite <title> und bei Bedarf können Plugins die Ausgabe mithilfe von Filtern ändern. SEO-Plugins tun dies häufig, um die Titel weiter zu optimieren.

Schritt #3: Vorlagenteile hinzufügen

Im Moment befinden sich 80% unseres Vorlagencodes im Index.PHP.

Während dies funktioniert, führt dies zu einer Menge Codewiederholungen, wenn wir andere Vorlagendateien wie Singular haben.php, Suche.php und Archiv.PHP. Template-Teile erleichtern die Theme-Entwicklung, indem sie es uns ermöglichen, Code über Vorlagen hinweg wiederzuverwenden. Da unsere Kopf- und Fußzeile auf jeder Seite gleich ist, sind sie ein perfekter Kandidat für die Verwendung von Vorlagenteilen. Erstellen Sie zuerst den Header.php und verschieben Sie den folgenden Code aus dem Index.php:

<!DOCTYPE html><html <?php language_attributes(); ?>><head><meta charset="<?php bloginfo( 'charset' ); ?>"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="profile" href="<https://gmpg.org/xfn/11>"><?php wp_head(); ?></head> <header class="site-header"> <p class="site-title"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <?php bloginfo( 'name' ); ?> </a> </p> <p class="site-description"><?php bloginfo( 'description' ); ?></p><?phpwp_nav_menu( array( 'theme_location' => 'menu-1',) );?> </header><! – .site-header – >

Im Index.php ersetzen Sie den obigen Code durch:

<?php get_template_part( 'header' ); ?>

Hinweis: Wenn Sie ein Template-Teil erhalten, müssen Sie das weglassen.php aus dem Template-Part-Handle.

Erstellen Sie als Nächstes einen Fußzeilenvorlagenteil, indem Sie diesen Code in die Fußzeile verschieben.php und Wiederholen des obigen Vorgangs:

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

Schließlich verschieben wir den Code ohne Ergebnisse auch in einen Vorlagenteil, da er wahrscheinlich in mehreren Vorlagen verwendet wird. Inhalte erstellen- keine.php und verschiebe diesen Code in die neue Datei.

<article class="no-results"> <header class="entry-header"> <h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1> </header><! – .entry-header – > <div class="entry-content"> <p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p> </div><! – .entry-content – ></article><! – .no-results – >

Ihr Index sollte jetzt so aussehen:

<?php get_template_part( 'header' ); ?> <div class="site-content"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <?php the_post_thumbnail(); ?> <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><! – .entry-header – > <div class="entry-content"> <?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?> </div><! – .entry-content – > </article><! – #post-## – > <?php // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; else : get_template_part( 'content-none' ); endif;?></div><! – .site-content – ><?phpget_sidebar();get_template_part( 'footer' );

Während das oben Genannte perfekt funktioniert, gibt es eine leichte Verbesserung, die wir machen können. WordPress verfügt über Hilfsfunktionen zum Einschließen der Kopf-, Fuß- und Seitenleistenvorlagenteile. Da es eine bewährte Methode ist, die Kernfunktionalität nach Möglichkeit zu verwenden, sollten wir diese stattdessen verwenden.

Ersetzen Sie get_template_part( 'header' ); durch get_header(); und get_template_part( 'footer' ); durch get_footer();

Schritt #4: Fügen Sie Singular hinzu.php, Archiv.php, Suche.php und 404.php

Die Grundlagen, die wir mit Vorlagenteilen abgeschlossen haben, werden sich auszahlen, wenn wir unserem Thema neue Vorlagendateien hinzufügen. Im Folgenden haben wir die häufigsten aufgelistet. Um Sie nicht mit Codebeispielen zu überfordern, haben wir stattdessen den Quellcode auf Github verlinkt.

singular.php

Beiträge und Seiten werden, wenn sie auf ihren eigenen URLs angezeigt werden, als ‚Einzigartig‘ betrachtet, da das Layout für beide Seitentypen meistens gleich ist. Falls dies nicht der Fall ist, können Sie die spezifischere Seite verwenden.php und Single.php (post) statt.

Beispielcode – Singular.php

archivieren.php

Archivvorlagen unterscheiden sich in der Regel in zweierlei Hinsicht von singulären Vorlagen: Sie zeigen Auszüge anstelle des vollständigen Inhalts und verfügen über einen Archivkopf, der den Inhalt erklärt.

Gehen Sie zurück zur Vorlagenhierarchie und Sie werden sehen, dass die Archivvorlage alle Arten von Archiven abdeckt (Autor, Kategorie, Tag, Taxonomie, Datum) Wenn dies für Ihren Anwendungsfall nicht funktioniert, können Sie weiterhin die spezifischeren Vorlagen verwenden:

1. 1. • autor.php
      • Kategorie.php
      • Etikett.php
      • Taxonomie.php
      • Datum.php

Beispielcode – Archiv.php

Suche.php

WordPress-Websites können mit dem gesucht werden ?s= URL-Parameter, z. B. yourwebsite.com?s=test. Suche.php Template gibt die Ergebnisse dieser Suchanfragen aus.

Beispielcode – Suche.php

404.php

Die else-Anweisung, die wir im Index hinzugefügt haben.php fängt „Seite nicht gefunden“ -Fehler ab, aber Sie möchten diese Funktionalität möglicherweise in eine eigene Vorlagendatei entkoppeln, um mehr Kontrolle über die Ausgabe zu haben. Das ist der Anwendungsfall des 404.PHP-Vorlagendatei.

Beispielcode – 404.php

Schritt # 5: Hilfsdateien

Wenn Sie Ihr Thema an die Öffentlichkeit verteilen, sind die folgenden Dateien unbedingt erforderlich. Ohne diese wird Ihr Theme von Theme-Repositorys und Marktplätzen abgelehnt.

Bildschirmfoto.png

Der Screenshot wird in der wp-Admin-Themenliste angezeigt, wenn der Benutzer ein neues Thema auswählt. Hier sind einige Best Practices, die Sie befolgen sollten:

1. 1. • Screenshots sollten 1200px x 900px
      • Screenshots sollten in sein.png oder .jpg-Format
      • Screenshots sollten eine genaue Darstellung des Themas sein
      • Screenshots sollten optimiert werden (verwenden tinypng.com oder ähnlich)

readme.txt

WordPress verwendet keine Informationen aus der Readme-Datei.txt, es zieht alles, was es braucht, aus dem Stil.CSS. Auf der anderen Seite zieht das WordPress-Themenverzeichnis wichtige Informationen aus der Readme-Datei und betrachtet sie als erforderliche Datei.

Die meisten Entwickler verwenden Readme.txt als zentraler Ort, um alle Informationen über ihr Thema zu speichern. Eine einfache Readme.txt sieht so aus:

=== Theme Name ===Requires at least: 5.0Tested up to: 5.2Requires PHP: 5.6License: GPLv2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Short description. No more than 150 chars.== Description ==Theme desc.== Changelog === 1.0 =* Added new option== Resources ==* normalize.css <https://necolas.github.io/normalize.css/>, (C) 2012-2016 Nicolas Gallagher and Jonathan Neal, (<https://opensource.org/licenses/MIT>)

1. 1. • Erfordert mindestens – Dies ist die Mindestversion von WordPress, mit der Ihr Thema kompatibel ist.
      • Getestet bis – Dieses Feld gibt die neueste Version von WordPress an, mit der Ihr Theme getestet wurde.
      • Erfordert PHP – Dieses Feld gibt die Mindestversion von PHP an, auf der Ihr Theme funktionieren wird.
      • Beschreibung – Dieses Beschreibungsfeld wird derzeit nirgendwo angezeigt.
      • Changelog – Das Changelog wird nirgendwo verwendet, aber Entwickler und einige Benutzer verweisen auf diese Datei, um zu sehen, welche Änderungen vorgenommen wurden.
      • Ressourcen – Die meisten Ressourcen von Drittanbietern erfordern eine Zuordnung. Der Ressourcenbereich ist ein weithin akzeptierter Ort, um diese zu platzieren. Selbst für Ressourcen, für die keine explizite Zuordnung erforderlich ist, empfiehlt es sich, sie hier aufzulisten, damit Benutzer die Lizenzen der von ihnen verwendeten Ressourcen kennen.

Schritt #6: Seitenvorlagen erstellen

Mit Seitenvorlagen können Entwickler benutzerdefinierte Vorlagen erstellen, die für einzelne Beiträge und Seiten verwendet werden können. Beispielsweise haben die meisten Themen ein zweispaltiges Layout (Inhalts-Seitenleiste), aber auf einigen Seiten möchte sich der Benutzer möglicherweise nur auf den Inhalt konzentrieren und keine Seitenleiste anzeigen. Hier kann eine Seitenvorlage helfen.

Wie werden „Seitenvorlagen“ erstellt?

Erstellen Sie in unserem Themenordner einen neuen Ordner mit dem Namen ‚page-templates‘ und erstellen Sie in diesem Ordner eine Datei mit dem Namen single-column.PHP. Um die Dinge zu beschleunigen, kopieren Sie den gesamten Code von Singular.php zu Seitenvorlagen / einspaltig.php und entfernen Sie den Aufruf von get_sidebar() da diese Vorlage das nicht benötigt.

Jetzt müssen wir einen speziellen Header hinzufügen, der WordPress mitteilt, dass dies eine Seitenvorlage ist.Es sieht folgendermaßen aus:

/*Template Name: Single Column TemplateTemplate Post Type: post, page*/

Der Code ist selbsterklärend, wir sagen WordPress einfach den Namen der Vorlage und mit welchen Beitragstypen sie verwendet werden kann.

Mehr nicht, unsere neue Seitenvorlage ist jetzt im Editor unter ‚Seitenattribute‘ verfügbar.

Schritt #7: Machen Sie Ihr Thema mit RTL kompatibel.css

Nicht alle Sprachen lesen von links nach rechts. Arabisch und Hebräisch werden beispielsweise von Rechts nach links gelesen (RTL). Es gibt eine einfache Möglichkeit, Ihr Thema mit RTL-Sprachen kompatibel zu machen.

Erstellen Sie in Ihrem Themenordner eine neue Datei mit dem Namen rtl.css, kopieren Sie dann den folgenden Code und fügen Sie ihn ein:

body {direction: rtl;unicode-bidi: embed;}

Wenn eine RTL-Sprache die aktive Sprache auf einer WordPress-Website ist, weiß WordPress, dass diese CSS-Datei automatisch geladen wird.

Dies ist eine sehr grundlegende Implementierung der RTL-Funktionalität, um Ihnen den Einstieg zu erleichtern. Wenn Sie mehr erfahren möchten, finden Sie hier zwei fantastische Ressourcen:

Dokumentation zur Sprachunterstützung von rechts nach links

Twenty Twenty RTL-Code

Schritt #8: Befolgen Sie immer die Best Practices

Best Practices haben sich im Laufe der Zeit weiterentwickelt, um das Erstellen und Verwalten von WordPress-Themes zu vereinfachen. Das Befolgen dieser Prinzipien hilft Ihnen nicht nur, sondern erleichtert es auch anderen Entwicklern, wenn sie mit Ihrem Code arbeiten müssen.

1) Verwenden Sie Starter-Themen

Starter-Themen bieten eine solide Basis, auf der Sie Ihr Thema aufbauen können. Typischerweise sind sie leicht, enthalten wenig bis gar kein Styling und keine Konfigurationsoptionen. Im Laufe der Zeit können Sie Ihr eigenes Starter-Thema erstellen, auf dem Sie alle Ihre Projekte basieren können, aber im Moment sind hier einige beliebte Optionen:

1. 1. • Unterstriche
      • Gerüst
      • HTML5 Leer

2) Lernen Sie die WordPress-Codierungsstandards kennen

Codierungsstandards sind eine Möglichkeit, Ihren Code über die gesamte Codebasis hinweg konsistent zu formatieren. WordPress verfügt über Codierungsstandards für HTML, CSS, Javascript und PHP. Die Verwendung eines Codierungsstandards hat zwar keine Auswirkungen auf die Endbenutzererfahrung, macht Ihren Code jedoch viel lesbarer. Auch wenn Sie die WordPress-Codierungsstandards nicht verwenden, empfehlen wir immer die Verwendung eines Standards.

1. 1. • WordPress.org Codierungsstandards
      • WPCS
      • PHP-Codierungsstandards

3) Lokalisierung verwenden

Dank der harten Arbeit von Freiwilligen ist WordPress in Hunderten von Sprachen verfügbar. Wenn Ihr Thema öffentlich veröffentlicht wird, muss es so erstellt werden, dass es auch übersetzt werden kann.

Keine Sorge, es ist super einfach zu machen. Alles, was wir tun müssen, ist sicherzustellen, dass alle Zeichenfolgen eine ‚Lokalisierungsfunktion‘ durchlaufen und nicht direkt ausgegeben werden.

Statt dessen:

<?php echo 'Previous Post'; ?>

Wir tun dies stattdessen:

<?php echo __( 'Previous Post', 'my-custom-theme' ); ?>

__() ist eine Lokalisierungsfunktion, die eine Zeichenfolge und eine Textdomäne akzeptiert. Die Funktion gibt eine Übersetzung der angegebenen Zeichenfolge oder die ursprüngliche Zeichenfolge zurück, wenn keine Übersetzung verfügbar ist.

4) Plugin-Funktionalität vermeiden

Wenn ein Benutzer das Thema ändert, sollte sich nur die Präsentationsebene ändern. Inhalt und Funktionalität sollen weitgehend gleich bleiben. Dies bedeutet, dass jede Funktion, die sich auf die WordPress-Rollen auswirkt, in einem Plugin enthalten sein sollte, nicht in Ihrem Thema. Einige Beispiele für Plugin-Funktionen sind:

1. 1. • Benutzerdefinierte Beitragstypen
      • Seitenersteller
      • Teilen in sozialen Medien
      • Suchmaschinenoptimierung (SEO)

Während es bequem erscheinen mag (und möglicherweise ein Verkaufsargument), SEO-Steuerelemente in ein Thema aufzunehmen, schadet es dem Benutzer auf lange Sicht tatsächlich. In Zukunft müssen sie ihr Thema ändern, können es aber nicht, da alle ihre SEO-Konfigurationen eng mit dem aktuellen Thema verbunden sind. Im Gegensatz dazu, wenn die Konfigurationen in einem Plugin gespeichert wurden, konnten sie das Thema ändern, ohne sich Sorgen zu machen.

5) Präfix (Konflikte verhindern)

Um Konflikte zu vermeiden, sollten allen Funktionen, Klassen und globalen Variablen, die von Ihrem Thema erstellt wurden, ein Präfix vorangestellt werden. Dies ist wichtig, da es unmöglich ist zu wissen, welcher andere Code auf der Website Ihres Benutzers ausgeführt wird. Präfixe verhindern Namenskonflikte und schwerwiegende Fehler.

Der Name Ihres Themas, getrennt durch Bindestriche oder Unterstriche, wird die meiste Zeit als Präfix verwendet. Wenn der Themenname sehr lang ist, können stattdessen die Initialen verwendet werden.

Theme Name: Scaffoldclass Scaffold_Class {}function scaffold_function() {}global $scaffold_globalTheme Name: My Long Theme Nameclass MLTN_Class {}function mltn_function() {}global $mltn_global

6) Verwenden Sie die Kernfunktionalität

Wo vorhanden, sollten Sie immer die Kernfunktionalität verwenden, anstatt das Rad neu zu erfinden. Dazu gehören unter anderem Seitenleisten, Navigationsmenüs, Miniaturansichten von Beiträgen, benutzerdefinierte Kopfzeilen und benutzerdefinierte Hintergründe. Diese Funktionen wurden von Millionen von Benutzern getestet und werden aktiv gepflegt und verbessert.

Wenn Sie die Funktionalität oder Ausgabe einer Kernfunktion ändern müssen, können Sie einen der vielen Hooks und Filter verwenden, die WordPress anbietet. Zum Beispiel hat wp_nav_menu() einen ‚walker‘-Parameter, so dass Sie die vollständige Kontrolle über die Ausgabe haben können.

7) Entkommen und Bereinigen von Daten

Als Theme-Entwickler müssen Sie mit dem Entkommen und Bereinigen von Daten vertraut sein, um Ihre Benutzer vor potenziellen Exploits zu schützen.

Escaping

Escaping ist der Prozess der Überprüfung der Datensicherheit vor der Ausgabe und der Bereinigung der Daten vor dem Speichern in der Datenbank.

WordPress verfügt über Hilfsfunktionen, mit denen Sie Daten entkommen können, sodass Sie diese nicht selbst erstellen müssen. esc_html ist ein Beispiel für eine Escapefunktion. Dies ist, was eine unescaped Ausgabe aussieht:

echo get_theme_mod( 'error_page_title' );

Um der Ausgabe zu entkommen, tun wir dies:

echo esc_html( get_theme_mod( 'error_page_title' ) );

Einige andere Escaping-Funktionen, die Sie kennen sollten, sind esc_attr() , absint() , esc_url() .

Es ist auch möglich, einen String mit einer einzigen Funktion zu übersetzen und zu maskieren:

echo esc_html( __( '404 Not Found', 'my-custom-theme' ) );

Wird:

echo esc_html__( '404 Not Found', 'my-custom-theme' );// oresc_html_e( '404 Not Found', 'my-custom-theme' );

Tipp: Überall in Ihrem Thema, wo Sie echo $ haben, sollten Sie überprüfen, ob es maskiert werden muss.

Bereinigen

Wenn Sie Ihrem Design Einstellungen hinzufügen, müssen Sie sicherstellen, dass die Daten, die Benutzer in diese Einstellungen eingeben, sicher sind, bevor sie in die Datenbank gelangen. WordPress verfügt über eine Reihe von Funktionen zur Bereinigung von Eingaben.

Wenn Sie Ihrem Design mithilfe der Customizer-API eine Einstellung hinzufügen, verfügt es über einen Parameter namens ’sanitize_callback‘, der den Namen einer Sanitization-Funktion akzeptiert. Jede Eingabe, die die Einstellung vornimmt, wird von der Funktion überprüft, die Sie ’sanitize_callback‘ zur Verfügung stellen, bevor sie in die Datenbank eingegeben wird.

Es unterstreicht die Bedeutung der Desinfektion, dass, wenn auch nur eine Ihrer Einstellungen fehlt die sanitize_callback es wird nicht in das WordPress-Theme-Verzeichnis akzeptiert werden.

$wp_customize->add_setting( 'my_custom_theme_setting', array( 'sanitize_callback' => 'sanitize_text_field' // A core sanitization function. ));

Eine offizielle Liste der Bereinigungs- und Escaping-Funktionen finden Sie hier: Datenbereinigung / Escaping

Schritt #9: Verteilen Sie Ihr WordPress-Theme

Themen können je nach gewünschtem Ergebnis über verschiedene Kanäle verteilt werden. Wenn Sie einfach einen Beitrag zur Open-Source-Community leisten möchten, gibt es keinen besseren Weg, als Ihr Thema in das WordPress-Verzeichnis hochzuladen. Wenn Sie stattdessen Ihr Thema verkaufen und direkt Geld verdienen möchten, gibt es auch Möglichkeiten, dies zu tun.

Hier sind die führenden Websites für die Verteilung von Themen:

1) WordPress.org (Bester Ort, um Downloads und Benutzer zu erhalten)

Der Hauptvorteil des Hostings Ihres Themas auf WordPress besteht darin, dass Sie einen Visibilitätsschub erhalten, wenn Ihr Thema nicht nur auf WordPress angezeigt wird.org Website aber auch im wp-admin Dashboard.

Ein weiterer Vorteil des Hostings Ihres Themas mit WordPress ist das integrierte Update-System. Wenn Sie Ihr Thema aktualisieren, werden alle Benutzer in ihren wp-Admin-Dashboards benachrichtigt und erhalten einen einfachen Pfad zum Aktualisieren auf die neueste Version.

WordPress.org akzeptiert nur kostenlose Themen, aber das bedeutet nicht, dass Sie kein Geld verdienen können. Ein kostenloses Thema kann ein großartiger Kanal für die Werbung für Ihr Premium-Thema, Plugin oder Service sein.

2) WordPress.com

WordPress.com hostet sowohl kostenlose als auch Premium-Themen. Sie sind jedoch seit einigen Jahren nicht mehr offen für neue Autoreneinreichungen.

3) ThemeForest

ThemeForest ist der führende Marktplatz für Premium-Themen. Das meistverkaufte Thema (Avada) hat einen Umsatz von mehr als 5.000.000 US-Dollar.

Im Allgemeinen erwarten die Käufer von Theme Forest voll funktionsfähige „Mehrzweck“ -Themen. Alle Top-Themen verfügen über Page Builder-Funktionen und werden von Entwicklerteams unterstützt. Es ist ein sehr schwieriger Markt für neue Autoren.

4) Creative Market und Mojo Marketplace

Creative Market und Mojo Marketplace sind kleine Player auf dem Premium-Themenmarkt, weshalb wir sie zusammengefasst haben. Beide bieten effektiv den gleichen Service wie ThemeForest, jedoch in kleinerem Maßstab.

5) Github

Github ist der einfachste Weg, um Ihr kostenloses Thema öffentlich zu machen. Es gibt keinen Überprüfungsprozess und keine Richtlinien, die befolgt werden müssen. Sie profitieren jedoch nicht von der Sichtbarkeit von wordpress.org und müssen Ihren eigenen Update-Mechanismus für Benutzer erstellen, um die neuesten Versionen zu erhalten.

Schritt #10: Code testen und verbessern

1) Testen Ihres Themas

Theme Unit Test

Der Theme Unit Test ist eine Standard-WordPress-Content-Importdatei, die eine Vielzahl von Inhaltstypen und Randfällen enthält. Es ist einfach, es in Ihre Entwicklungsumgebung hochzuladen, und hebt viele Szenarien hervor, die Sie möglicherweise übersehen haben.

WP_DEBUG

Als Theme-Entwickler ist das Testen Ihres Themes mit aktiviertem WP_DEBUG das absolute Minimum, das Sie tun sollten. Ihr Theme sollte keine Fehler oder Warnungen zurückgeben, wenn WP_DEBUG auf true gesetzt ist.

Es ist auch wichtig, den Test mit den verschiedenen PHP-Versionen zu wiederholen, die Ihr Theme unterstützt. Mit jeder größeren PHP-Version gibt es neue Änderungen, Warnungen und Abschreibungen. Es ist nicht ungewöhnlich, dass ein Thema auf PHP5.6 fehlerfrei ist, aber auf PHP7 Fehler anzeigt.

Um WP_DEBUG zu aktivieren, fügen Sie den folgenden Code zu wp-config hinzu.php:

DEFINE( 'WP_DEBUG', true );

Monster Widget

Monster Widget ist ein hilfreiches Plugin, mit dem Sie Ihrer Seitenleiste 13 Kern-Widgets gleichzeitig hinzufügen können. Die Kern-Widgets verwenden eine Vielzahl von HTML-Elementen, die sie perfekt zum Testen Ihres Themas machen.

Theme Sniffer

Der Theme Sniffer ist ein Plugin, das vom Theme Review Team (TRT) erstellt wurde. Es fängt viele (aber nicht alle) Flucht- und Lokalisierungsfehler ab. Es überprüft auch Ihr Thema gegen die WordPress-Codierungsstandards.

2) Senden Sie Ihr Thema an WordPress.org

Zu Beginn dieses Handbuchs sagten wir, dass Sie bis zum Ende ein Thema haben würden, dem Sie sich unterwerfen könnten wordpress.org . Schauen wir uns diesen Prozess an.

Upload-Prozess

Der Upload-Prozess ist einfach. Erstellen oder melden Sie sich bei Ihrem WordPress-Konto an und navigieren Sie dann zu dieser Seite – https://wordpress.org/themes/upload/

Sie könnten Ihr Thema zip und laden Sie es jetzt, aber hier sind einige Dinge, die Sie vielleicht zuerst wissen wollen.

Anforderungen

Das Theme Review Team (TRT) hat strenge Anforderungen. Ihr Thema wird erst in das Verzeichnis aufgenommen, wenn es alle Anforderungen erfüllt.

Überprüfungsprozess

Wenn Sie ein Thema hochladen, muss ein zweistufiger Überprüfungsprozess durchlaufen werden, bevor es in das Verzeichnis aufgenommen werden kann.

Zunächst wird eine automatische Prüfung durchgeführt, sobald Sie Upload drücken. Hinter den Kulissen funktioniert der automatisierte Checker sehr ähnlich wie das Theme Sniffer Plugin. Wenn es irgendwelche Fehler findet, wird es das Thema ablehnen und der Upload-Prozess endet dort.

Wenn Ihr Thema die automatisierte Prüfung besteht, schließt es sich einer Warteschlange von Themen an, die auf eine menschliche Überprüfung warten. Die menschliche Überprüfung wird von Freiwilligen des TRT abgeschlossen. Die Anzahl der Themen in der Warteschlange übersteigt bei weitem die Anzahl der Rezensenten, was bedeutet, dass es oft 2-3 Monate dauern kann, bis Ihr Thema die Spitze der Warteschlange erreicht.

Es ist zwingend erforderlich, dass Ihr Thema fehlerfrei ist und alle Anforderungen erfüllt, wenn es die menschliche Überprüfungsphase erreicht, als ob es mehr als 3 signifikante Fehler hat, kann es abgelehnt werden. Wenn ein Thema in der Phase der menschlichen Überprüfung abgelehnt wird, muss es wieder in die Warteschlange hinten aufgenommen werden, was bedeutet, dass 2-3 Monate auf eine weitere menschliche Überprüfung gewartet werden muss.

Nützliche Ressource: Die häufigsten Fehler bei der Entwicklung von WordPress-Themes (und wie man sie behebt)

Es ist erwähnenswert, dass die TRT immer nach neuen Rezensenten sucht, was eine großartige Lernerfahrung und eine Möglichkeit sein kann, zur Open-Source-Community beizutragen.

3) Ihre Themenliste

Herzlichen Glückwunsch, Ihr Thema wurde genehmigt! Sie haben jetzt Ihren eigenen Eintrag, der so aussieht.

Hier ist ein Überblick, was Sie auf dieser Seite erwarten können:

1. 1. • Screenshot – Der Screenshot ist das erste, was potenzielle Benutzer sehen, also machen Sie ihn so ansprechend wie möglich. Denken Sie jedoch daran, dass es sich immer noch um eine genaue Darstellung des Themas und nicht um ein Photoshop-Rendering handeln muss. Lassen Sie sich von den beliebtesten Themen inspirieren.
      • Description – Die Beschreibung, die aus dem Stil gezogen wird.css ist ein idealer Ort, um Ihr Thema und seine wichtigsten Funktionen zu beschreiben. Es hilft auch, hier empfohlene oder erforderliche Plugins aufzulisten. Die Beschreibung unterstützt keine Formatierung (fett, kursiv, Hyperlinks) oder sogar Zeilenumbrüche.
      • Tags – Dies ist eine Darstellung der Tags, die Sie im Stil aufgelistet haben.CSS. Nur diese Tags werden hier akzeptiert.
      • Vorschau-Button – Die Vorschau wird durch wordpress.org und als Theme-Entwickler haben wir keine Kontrolle über die Ausgabe. Da der Previewer grundlegende Inhalte und keine Konfiguration verwendet, führt dies leider oft zu einer weniger als perfekten Vorschau.
      • Themenhomepage-Link – Die URL für die Vorschau-Schaltfläche wird aus dem Feld ‚Theme URI‘ in Ihrem Stil abgerufen.CSS. Es gibt strenge Anforderungen, dass diese URL nur zum Anzeigen einer Seite verwendet werden darf, auf der Informationen zu Ihrem Thema angezeigt werden.
      • Aktive Installationen – Dies ist die Anzahl der Websites, die das Thema aktiv verwenden. Die Zahl wird auf die nächsten zehn, hundert oder tausend gerundet. Es ist nicht möglich, eine genaue Nummer abzurufen.
      • Downloads pro Tag – So oft wurde Ihr Thema heruntergeladen. Ein ‚Download‘ kann ein neuer Download oder ein Theme-Update sein.
      • Bewertungen – Damit ein Benutzer eine Bewertung abgeben kann, muss er bei einem wordpress.org konto. Im Allgemeinen sind Bewertungen schwer zu bekommen, es sei denn, Sie bitten Ihre Benutzer ausdrücklich, sie einzureichen.
      • Support – Die integrierte Support-Plattform eignet sich hervorragend zum Verwalten und Beheben von Problemen mit Ihrem Thema. Der Benutzer muss angemeldet sein, um einen Support-Thread zu erstellen.
      • Übersetzungen – Die Übersetzungsplattform ist eine fantastische Ressource. Wenn Sie den Ratschlägen in diesem Handbuch zur Lokalisierung Ihres Themas gefolgt sind, können Ihre Benutzer es in andere Sprachen übersetzen und Ihre potenzielle Benutzerbasis über nur englischsprachige Benutzer hinaus erweitern.

4) Aktualisieren Ihres Themas

Wenn Sie in Zukunft Änderungen an Ihrem Thema vornehmen und die auf WordPress gehostete Version aktualisieren müssen, ist der Vorgang einfach.

Aktualisieren Sie zuerst das Feld ‚Version:‘ und das Änderungsprotokoll in der Readme.txt. Komprimieren Sie dann die Datei und laden Sie sie auf derselben Upload-Seite wie zuvor erneut hoch.

Das System erkennt es als Update und genehmigt es automatisch, sodass keine weitere Überprüfung durch einen Menschen erforderlich ist.