So erstellen Sie ein WordPress-Theme in 6 einfachen Schritten (2021)
Planen Sie Ihr eigenes Thema zu erstellen? In diesem Beitrag erfahren Sie genau, wie Sie ein WordPress-Theme erstellen.
WordPress ist ein beliebtes Open-Source-Content-Management-System (CMS), das weltweit eingesetzt wird. Mit Hilfe der leistungsstarken WordPress-Website-Builder-Software können Sie diese Plattform auch verwenden, um auf einfache Weise eine starke Online-Präsenz aufzubauen und Ihr Unternehmen online zu entwickeln. WordPress ist ein Kinderspiel und der einfachste Einstieg. Aus diesem Grund rät Ihnen jeder Entwickler, es als Grundlage für Ihre Website zu verwenden.
Der einzige Weg, um wirklich zu verstehen, wie WordPress-Themes funktionieren, ist, zuerst den Kopf zu bekommen und alles selbst zu machen. Ja, es ist verlockend, dies zu vermeiden, da WordPress alles für Sie erledigen kann, wenn Sie nicht wissen, wie man codiert. Am Ende dieses Tutorials erfahren Sie, wie Sie ein WordPress-Theme erstellen, besser verstehen, wie alles zusammenpasst und wie Sie WordPress in Ihrer Freizeit verwenden.
Was ist ein WordPress-Theme, genau?
Ein WordPress-Theme ist eine Sammlung von Dateien (Grafiken, Stylesheets und Code), die bestimmen, wie Ihr Blog oder Ihre Website aussieht. Themen können alles regeln, vom Stil Ihrer Website bis zu den Farben ihrer Hyperlinks. Es ist einfach, sich ein Thema als „Skin“ für Ihre Website vorzustellen, aber es ist so viel mehr.
Mit einem Thema können Sie das Erscheinungsbild Ihres Blogs verwalten, anstatt ihm nur ein Erscheinungsbild zu verleihen.
WordPress kommt mit einem eigenen Satz von Themen. In Wirklichkeit enthält die Plattform eine Vielzahl vorinstallierter Themen. Es gibt jedoch einige Gründe, warum Sie ein neues Thema auf Ihrer Website auswählen und installieren möchten:
Um die ästhetische Attraktivität Ihrer Website zu verbessern. Sie können ein geeignetes Thema auswählen und es an Ihre Anforderungen anpassen, wenn Sie eine spezielle Vision für Ihre Website haben.
Für zusätzliche Designflexibilität. Viele Themen bieten eine Vielzahl von Anpassungen, die Ihnen helfen, das perfekte Design zu erstellen, wenn Sie keine Design- oder Programmierkenntnisse haben. Ein Thema kann Funktionen in Bezug auf Ihre Nische enthalten, die Sie je nach Ihren Anforderungen nirgendwo anders finden.
Während die grundlegende oder modifizierte Version eines Themas für eine breite Palette von Websites dienen kann, gibt es Hunderte von Themen zur Auswahl, die jeweils eine einzigartige Nische oder einen Zweck ansprechen.
Warum also ein eigenes WordPress-Theme erstellen?
Die Wahl eines Themas ist einer der wichtigsten Aspekte beim Erstellen oder Verwalten einer WordPress-Site. Normalerweise haben Sie eine Reihe von Alternativen zur Auswahl. Sie können eine bestimmte Themengrundlage auswählen und dann ein Thema, das auf diesem Framework aufbaut, je nach Ihren Anforderungen.
Artikel weiter unten
Die meisten Verbraucher gehen Hunderte von kostenlosen und kostenpflichtigen Themen durch, bevor sie eines auswählen, das sie anspricht und genau widerspiegelt, was sie wünschen. Die meisten von ihnen verfügen über Änderungsoptionen, um sie sofort auf ein gewisses Niveau zu bringen, aber das allgemeine Erscheinungsbild und die Haptik bleiben gleich.
Die beste Wahl ist jedoch, bei Null anzufangen und ein maßgeschneidertes Thema zu entwerfen. Dies erfordert natürlich einige technische Kenntnisse sowie die Fähigkeit, eine Website zu entwerfen. Sobald Sie ein Design gefunden haben, das für Sie funktioniert, ist ein benutzerdefiniertes Thema der beste Weg, um es in die Tat umzusetzen.
Im Vergleich zur Verwendung eines Drittanbieter-Themas oder eines untergeordneten Themas bietet das Erstellen eines benutzerdefinierten Themas eine Reihe von Vorteilen.
- Individualität: Sie haben ein Thema erstellt, das für Ihre Website einzigartig ist. Es bedeutet, dass Ihre Website die einzige ist, die es verwendet, und es unterscheidet sich von den Zehntausenden von anderen, die das gleiche Thema verwenden, aber mit einem anderen Farbschema.
- Verbesserte Sicherheit: Das benutzerdefinierte Design weist weniger schwerwiegende Sicherheitsprobleme auf, da Sie weniger Funktionen und weniger Code verwenden. Auch wenn es wahrscheinlich schwierig ist, sich über Fehler sicher zu sein, warten Sie nicht auf einen Drittanbieter, um eine Sicherheits- oder Fehlerbehebung zu veröffentlichen. Sie können sich um sie kümmern, wenn Sie ihnen begegnen.
- Es gibt keine Funktionsüberlastung: Benutzerdefinierte Designs erfordern keine Reihe von Funktionen, die Sie niemals verwenden oder benötigen werden. All diese unerwünschten Funktionen fügen Ihrer Website eine erhebliche Menge an ausführbarem Code hinzu und verlangsamen sie möglicherweise.
- Die Verwendung von Plugins sollte eingeschränkt sein: Dies gilt insbesondere für die Plugins, mit denen Sie Ihr Material ändern und arrangieren. Dies kann die Abhängigkeit des Themas von Plugins von Drittanbietern verringern und gleichzeitig beschleunigen, indem das Einfügen von Plugin-Code zur Laufzeit entfällt. Abhängig von der Funktionalität, die es bietet, können jedoch nicht alle Plugins integriert werden.
- Statische Dateien kleiner Größe: Dadurch wird die gesamte Seitengröße minimiert und sichergestellt, dass nicht mehr CSS-Regeln oder JavaScript-Code gesendet und bereitgestellt werden als erforderlich. Da jeder Inhalt bereits in einem benutzerdefinierten Design für Ihr Design angepasst ist, benötigen Sie nicht viel Code, um ihn anpassbar zu machen. All dieser Änderungscode kann Ihre Website schwerer und langsamer machen, insbesondere wenn er falsch ausgeführt wird.
- Suchmaschinenoptimierung (SEO): ist ein Begriff, der sich auf den Prozess der Optimierung einer Website bezieht. Ein benutzerdefiniertes Thema ist im Allgemeinen sehr leicht auf Quellcode, mit fast keinem neuen Code. Der schlanke Code, der die Websites unglaublich leicht macht, ist hier der große SEO-Vorteil. Es gibt verschiedene Frameworks und Themen für Geschwindigkeit, die immer eine Option sind, aber ein benutzerdefiniertes Thema ist immer die beste Lösung.
Was sind die Voraussetzungen für die Entwicklung eines WordPress-Themes?
Sie benötigen eine Website, um loszulegen. Jede Website wird ausreichen. Sie müssen keine PHP-Kenntnisse haben oder WordPress-Vorkenntnisse haben. Aber eine Entwicklungsumgebung mit Apache, PHP, MySQL und WordPress installiert ist erforderlich, um ein WordPress-Theme zu entwerfen. Sie können WordPress von der offiziellen Website erhalten, aber Sie müssen zuerst die Datenbankanmeldeinformationen ändern.
Sie müssen auch die Struktur des Themas verstehen. In seiner einfachsten Form ist ein WordPress-Theme eine reguläre HTML-Seite, die aus den folgenden Dateien besteht:
- kopfzeile.php – eine Datei, die den Header-Code speichert.
- Fußzeile.php – enthält den Code für die Fußzeile;
- Seitenleiste.php – wo Sie die Schaltflächen an der Seite der Seite einrichten;
- Stil.css – verwaltet das ästhetische Erscheinungsbild des Themas;
- Index.php – Die auf der Hauptseite bereitgestellten Einstellungen sind hier enthalten.
- einzeln.php – enthält Code zum Anzeigen des Artikels auf einer eigenen Seite;
- Seite.php – enthält Code zum Anzeigen des Inhalts einer einzelnen Seite;
- Archiv.php – zeigt eine Liste der Elemente im Archiv sowie die vom Benutzer definierten Kategorien an;
- Funktionen.php – Diese Datei enthält Funktionen, die die Designfunktionalität verbessern, z. B. Logos, Menüs, Farben, Miniaturansichten, Skripte und Stylesheets.
- 404.php – ein Fehlercode, der anzeigt, dass die angeforderte Datei nicht gefunden werden konnte.
Um Ihre Vorlage zu personalisieren, müssen Sie auch bestimmte Bootstrap-Einstellungen übernehmen. In diesem Beitrag führen wir Sie durch die ersten Schritte dieser Anpassung. Siehe die Liste unten.
Schritt 1: Erstellen Sie einen Ordner für die Dateien, die Sie hinzufügen möchten
Wir müssen wissen, wo sich die Dateien eines WordPress-Themas in einer WordPress-Installation befinden, wenn wir Themen erstellen möchten. Dies ist eine einfache Aufgabe. Wir wissen, dass eine WordPress-Installation normalerweise ein WordPress-Verzeichnis als Stammverzeichnis enthält. So wird unser Stammverzeichnis angezeigt.
Files:
- composer.json
- index.php
- license.txt
- readme.html
- wp-activate.php
- wp-blog-header.php
- wp-comments-post.php
- wp-config.php
- wp-config-sample.php
- wp-cron.php
- wp-links-opml.php
- wp-load.php
- wp-login.php
- wp-mail.php
- wp-settings.php
- wp-signup.php
- wp-trackback.php
- xmlrpc.php
Ordner
- wp-admin
- wp-Inhalt
- wp-enthält
Themes ist ein Ordner im Ordner wp-content. Der Speicherort Ihres neuen Themas im Ordner „Themen“ kann online aktiviert und verwendet werden. Es ist auch der Ordner, in dem Sie ein oder mehrere Themen finden, die Sie mit Ihrer WordPress-Website verwenden können.
Artikel weiter unten
Schritt 2: Erstellen Sie den Index.php und Stil.css-Dateien
Sie müssen zusätzlich zwei notwendige Dateien erstellen Index.php und Stil.css, wenn Sie mit dem Erstellen Ihres Themenordners fertig sind.
- stil.css
Im Stil ist nur der Themenname erforderlich.css, damit WordPress Ihr Thema finden und auflisten kann, damit Sie es aktivieren können.
- /*
- Themenname: customtheme
- Autor: WPlift
- Autoren-URI: https://wplift.com
- Ausführung: 1.0
- */
Wir weisen unserem Thema im Beispiel einfach einen Themennamen, Autor, Autor-URI und Versionsnummer zu. Wenn Sie jedoch ein anständigeres Thema wünschen, können Sie diese Informationen unten einfügen:
Themenname – Ein Themenname sollte immer angegeben werden. Wenn Sie dies nicht tun, wird der Ordnername verwendet, in diesem Fall my-custom-theme .
Theme URI – Es sollte Benutzer zu einer Website führen, auf der sie mehr über das Thema erfahren können.
Autor – Hier geben Sie Ihren Namen ein.
Author URI – Hier können Sie einen Link zu Ihrer persönlichen oder geschäftlichen Website hinzufügen.
Beschreibung – wird sowohl im wp-Admin-Theme-Modal als auch in der WordPress-Theme-Liste angezeigt.
Version – Versionsnummern helfen Entwicklern, Änderungen zu verfolgen und sicherzustellen, dass Kunden die aktuellste Version verwenden. Um den Schweregrad von Änderungen in einem Update anzuzeigen, verwenden wir das SemVer-Nummerierungssystem.
Lizenz – Sie können wählen, wie Ihr Thema lizenziert wird, aber wenn es nicht GPL-kompatibel ist, können Sie es nicht auf WordPress verteilen.
Artikel weiter unten
Lizenz-URI – nur ein Link.
Textdomäne – Die Textdomäne wird verwendet, wenn Sie Ihr Thema in andere Sprachen übersetzen. Keine Sorge, wir werden später mehr darüber erfahren. Im Moment ist es ausreichend zu wissen, dass der Themenordner und die Textdomäne der Themenname sein sollten, der durch Bindestriche und nicht durch Leerzeichen getrennt ist.
Tags – Nur beim Hochladen eines Themas in WordPress.org theme directory werden diese Variablen verwendet. Der ‚Feature Filter‘-Prozess ist um sie herum aufgebaut.
Obwohl keines der Felder technisch notwendig ist, werden sie dringend empfohlen, wenn Sie möchten, dass Ihr Thema in wp-admin anständig erscheint. Sie sind auch wichtig, wenn Sie WordPress verwenden, um Ihr Thema zu verteilen.
- Index.php
WP lädt die Beiträge, die mit dieser Datei auf dem Bildschirm angezeigt werden. Wenn eine WP-Basisdatei fehlt, wird sie von wp verwendet.
- < h1>Benutzerdefiniertes Thema!</h1>
Schritt 3: Aktivieren Sie im WordPress-Dashboard das Thema
Gehen Sie zum WordPress-Dashboard, wählen Sie „Darstellung“ und dann „Themen“ und prüfen Sie, ob das neu erstellte Thema unter den Möglichkeiten angezeigt wird.
Um zu überprüfen, ob die im Stil eingegebenen Informationen korrekt sind, gehen Sie zu „Themendetails.“
Die CSS-Datei ist richtig.
Gehen Sie in WordPress zur Themes-Seite und verwalten Sie Ihre Themes.
Klicken Sie auf “ Aktivieren“, um Ihr neues Konto in WP zu aktivieren, und prüfen Sie dann, ob die Website die Änderungen übernommen hat.
Schritt 4: Ändern Sie die Einstellungen im Index.php-Datei
Um zu testen, ob Ihr Thema funktioniert, kehren Sie zum Index zurück.PHP-Befehlszeile und löschen Sie den Inhalt, den Sie gerade eingegeben haben.
Erstellen Sie anschließend eine Befehlszeile für WP, um die Beiträge aus der Datenbank abzurufen und auf der Seite anzuzeigen. Sie müssen den Titel und den Inhalt des Beitrags wiederherstellen, damit alle Dateien auf der Startseite angezeigt werden können.
Der Befehl „Posts haben“ weist WP an, nach Blog-Posts in der Datenbank zu suchen. Die Seite wird aktualisiert, wenn es neue Einträge gibt. Wenn nicht, wird die Nachricht für die negative Antwortbedingung, die wir im Code festgelegt haben, angezeigt (false).
Es gibt eine Funktion namens „the post“, die der while doing-Schleife „have posts“ hinzugefügt werden muss, damit WP diese Datei anzeigt, wenn die Bedingung „have posts“ erfüllt ist. WordPress sucht in dieser Schleife nach neuen Einträgen und zeigt sie bei Bedarf auf der Seite an.
Wenn die Datenbank Posts enthält, werden in Wirklichkeit alle Aktionen innerhalb der Schleife für alle Post-Dateien ausgeführt, die während der Erkennung identifiziert wurden. Andernfalls informiert WP den Benutzer darüber, dass keine Beiträge verfügbar sind. Schauen Sie sich den Code unten an:
<?php if ( have_posts() ) :while ( have_posts() ) : the_post(); ?> <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2> <?php the_content() ?> <?php endwhile; else :echo '<p>There are no posts!</p>'; endif; ?>
In dieser Schleife werden zwei Funktionen, „have posts“ und „the post“, in ihrer grundlegendsten Form verwendet. Wenn Buchungen in der Datenbank wiederholt werden müssen, verwenden Sie die Methode „Posts haben“. True oder false wird von dieser Funktion zurückgegeben, wobei true bedeutet, dass Beiträge angezeigt werden sollen. Es gibt keine, wenn es false zurückgibt.
Die Methode „Der Beitrag“ ruft den neuesten Beitrag ab und nimmt die erforderlichen Anpassungen vor, um ihn chronologisch auf der Themenseite anzuzeigen. Da dies eine Schleife ist, wird sie jedes Mal, wenn ein neuer Beitrag erstellt wird, sofort angehängt, wenn die Funktion true zurückgibt.
Der Inhalt wird mit der Funktion „Der Inhalt“ an den auf der Seite angegebenen Dateititel angehängt. Die Funktion „Der Permalink“ erstellt einen Link zu jedem einzelnen Beitrag, sodass Benutzer die Informationen anzeigen können, ohne durch den gesamten Text auf der Hauptseite scrollen zu müssen.
Verwenden Sie einfach die Methode „Der Auszug“ anstelle der Methode „Der Inhalt“, um eine kurze Zusammenfassung unter dem Dateititel mit den ersten 200 Zeichen des Inhalts hinzuzufügen. Wenn der Benutzer auf den Link klickt, erhält er daher nur den gesamten Text.
In diesem Fall müssen Sie eine neue Datei im Ordner Ihres Themas erstellen, die ähnlich wie „index.php“ (kopieren Sie einfach den Index und fügen Sie ihn ein.PHP-Schleife und ersetzen Sie die Funktion „der Auszug“ durch „den Inhalt“).
Schritt 5: Kopf- und Fußzeile hinzufügen
Erstellen Sie neue Dateien im selben Ordner wie Ihr Thema wie im folgenden Schritt, wo Stil.css und Index.php ist bereits vorhanden. Header.php und footer.php sind ihre Namen.
Es ist am besten, wp head in alle Ihre Themen aufzunehmen, da es sich um eine bestimmte Funktion handelt, die die Ausgabe in der Kopfzeile umschließt.PHP-Datei Kopf> Abschnitt. Es sollte vor dem closing /head> -Tag platziert werden, um das Hinzufügen von Plugins zur Site zu erleichtern, da dieser Hook verwendet werden kann, um Stile, Skripte oder Meta-Komponenten zur head> -Region hinzuzufügen.
- Fußzeile
Die Fußzeile.PHP-Datei kann die in den Funktionen verwendeten Tags schließen, wie unten beschrieben:
Schritt 6: Erstellen Sie die Funktionen.php-Ordner
Zu diesem Zeitpunkt verfügt das benutzerdefinierte Thema über vier Dateiordner: index.php, Stil.css, Kopfzeile.php und footer.PHP. Die nächste Datei, die Sie schreiben sollten, sind Funktionen.php, das WordPress Persönlichkeit verleiht, indem es der Befehlszeile erlaubt, das Standardverhalten des CMS zu ändern. Das Folgende sind seine Eigenschaften:
- erfordert keinen eindeutigen Kopfzeilentext; funktioniert nur, wenn das Thema aktiv ist;
- gilt nur für das aktuelle Thema;
Dieser Code enthält oder aktiviert das Stylesheet für Ihr benutzerdefiniertes Design:
Einpacken
Es ist fertig! Ihr Thema wurde erstellt und die Links, die den Besucher zu einer exklusiven Seite für jeden Artikel führen, funktionieren gut. Darüber hinaus haben Sie bereits die Kopf- und Fußzeile sowie das CSS Ihres benutzerdefinierten Themas eingefügt.
In dieser Lektion haben Sie die Grundlagen zum Erstellen eines WordPress-Themes gelernt. Da das Erscheinungsbild der Website insbesondere für Geschäftsanwendungen von entscheidender Bedeutung ist, können Sie Bootstrap verwenden, um Zeilen vorgefertigter Vorlagenskripte zu Ihrer Seite hinzuzufügen, wodurch das Hinzufügen neuer Funktionen und Funktionen erleichtert wird. Lassen Sie uns wissen, wie Sie mit diesem zu bekommen!