Erstellen Sie Ihr eigenes WordPress-Theme

In früheren Artikeln haben wir untersucht, wie Sie eine WordPress-Website anpassen, Ihr eigenes untergeordnetes Thema oder Vorlagen erstellen können.

Heute werden wir uns ansehen, wie Sie Ihr eigenes WordPress-Theme erstellen können. Lasst uns anfangen!

Warum ein eigenes WordPress-Theme erstellen?

WordPress bietet mehrere Möglichkeiten, Ihre Website anzupassen. Warum sollten Sie also das Bedürfnis verspüren, Ihr eigenes Thema zu erstellen? In einigen Fällen passen Standarddesigns möglicherweise nicht zu Ihrem Markendesign oder haben nicht die Funktionen, die Sie benötigen. Ein benutzerdefiniertes Design könnte dieses Problem lösen und Ihnen genau den Stil der Website geben, den Sie möchten, mit allen Funktionen, die Sie benötigen, ohne sich auf ein Design eines Drittanbieters verlassen zu müssen.

Anforderungen vor dem Erstellen eines Designs

Um die folgenden Schritte im Beispiel unten replizieren zu können, benötigen wir eine einsatzbereite WordPress-Installation, entweder lokal oder auf einem von Ihnen verwalteten Serverbereich. Versuchen Sie dies nicht auf einer Live-Site. Erstellen Sie stattdessen eine Testumgebung.

Kenntnisse und Verständnis von CSS, PHP und HTML sind ebenfalls erforderlich.

Erstellen Sie das Design

Wir werden unser Thema „Mein erstes Thema“ nennen. Der erste Schritt besteht darin, die notwendigen Dateien zu erstellen, damit das Thema im Admin-Bereich sichtbar ist. Dazu erstellen wir eine style.css- und eine index.php-Datei.

Wir erstellen einen Unterordner für unser Design unter dem Ordner wp-content/themes/, den wir „my-first-theme“ nennen, und fügen diese 2 Dateien zu diesem Ordner hinzu.

An dieser Stelle sollte das Theme als Auswahl im Admin-Bereich sichtbar sein.

Wenn eine dieser Dateien fehlt, erhalten Sie eine Warnmeldung, dass das Design beschädigt ist. Wenn zum Beispiel index.php fehlt, sehen Sie so etwas:

In der style.css-Datei werden wir einige Kommentare hinzufügen, die WordPress über unser Thema informieren. Die wichtigste Information ist der Name, unter dem es aufgeführt wird. Abgesehen davon können Sie sagen, wer der Autor ist, oder einen Autoren-URI angeben, damit Benutzer eine Website besuchen können, um mehr über Ihr Thema zu erfahren. Geben Sie eine Beschreibung ein, die im modalen Popup-Fenster des Admin-Designs angezeigt werden soll, und die Version der Installation.

 /* Theme Name: My First Theme Author: Dev Loper Author URI: https://my-first-theme.com Description: This is my theme's description Version: 1.0 */

HINWEIS: Sie können auch Ihre Lizenz definieren. Wenn Sie möchten, dass Ihr Theme auf WordPress verteilt wird, muss Ihr Theme GPL-kompatibel sein.

Wenn Sie ein Logobild anzeigen müssen, fügen Sie eine screenshot.png-Datei an derselben Stelle ein, an der sich die Dateien style.css und index.php befinden.

Wenn Sie nun Ihr Design im Admin-Bildschirm des Designs aktivieren, sollten Sie so etwas sehen:

Und wenn Sie auf „Designdetails“ klicken, sollten Sie Folgendes sehen:

Themendateien

Jetzt ist es an der Zeit, etwas Code in die Datei index.php zu schreiben. Öffnen Sie die Datei testweise mit Ihrem bevorzugten Editor und fügen Sie zB ein beliebiges HTML-Element ein

 <h1>My First Theme's Content</h1>

Speichern Sie die Datei und besuchen Sie das Frontend. Sie sollten nur die Überschrift „Inhalt meines ersten Themas“ sehen.

An dieser Stelle müssen Sie entscheiden, welches Layout Ihr Thema haben soll.

Themenlayout

Die von hier aus zu befolgenden Routen sind unbegrenzt. Wir empfehlen Ihnen dringend, sich Zeit zu nehmen und zu studieren, wie WordPress-Themes funktionieren. Stellen Sie vor allem sicher, dass Sie die Vorlagenhierarchie vollständig verstehen, bevor Sie mit der Strukturierung Ihres eigenen Themas fortfahren.

Hosten Sie Ihre Website mit Pressidium

60- TÄGIGE GELD-ZURÜCK-GARANTIE

SEHEN SIE UNSERE PLÄNE

Kurz gesagt bietet WordPress eine Möglichkeit, verschiedene PHP-Dateien je nach Art des Inhalts aufzurufen. Dies geschieht mit Abfragen. Eine Abfrage prüft, ob die aktuell angesehene Seite Beiträge enthält oder eine Suchergebnisseite oder eine andere Art von Inhalt ist, und gibt den entsprechenden Code aus.

Ein klassisches Beispiel ist die Trennung von Kopf- und Fußzeile, indem für jede einzelne Datei eigene Dateien erstellt werden. Um ein sehr vereinfachtes Beispiel dafür zu sehen, wie Sie dies selbst tun können, fügen Sie dieses Stück Code in die Datei index.php ein.

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

Dieser Code, der die WordPress-Funktionen wp_head() und wp_footer() verwendet, bietet ein Standard-Inhaltslayout, das eine Kopfzeile mit Logo, Titel und Menü, den Hauptteil, in dem die Abfragen den richtigen Inhalt anzeigen, und eine Fußzeile mit den Informationen der Website enthält.

Wenn wir diesen Code aufteilen und separate header.php- und footer.php-Dateien verwenden möchten, sollten Sie die Dateien im Ordner des Themas erstellen.

Und teilen Sie den Code wie folgt auf:

Index.php

 <?php get_header(); ?> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <?php get_footer();

Header.php

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header>

Fußzeile.php

 <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

Und das ist es! Sie haben Ihr erstes Thema erstellt!

Starter-Themen

Wir haben uns oben angesehen, wie man ein Design manuell erstellt … welche Dateien erstellt werden sollten und welchen Code Sie einfügen können. Wenn Sie damit jedoch bereits vertraut sind, können Sie etwas Zeit sparen, indem Sie in Sekundenschnelle ein WordPress-Starter-Theme herunterladen. Probieren Sie zum Beispiel Underscore aus, wo Sie einfach einen Namen eingeben und die Design-Zip-Datei sofort herunterladen können.

Genial, oder?

Fazit

Ein benutzerdefiniertes WordPress-Theme ist eine großartige Lösung, wenn Sie als Entwickler mehr Flexibilität benötigen. Das Erstellen eines Designs kann wie ein entmutigender Prozess erscheinen. Wie dieser Artikel gezeigt hat, ist es hoffentlich ziemlich einfach. Der Schlüssel ist, sich nicht zu beeilen, bevor Sie mit dem Codieren beginnen. Treten Sie einen Schritt zurück, studieren Sie die Themenstruktur, die Ihren Anforderungen entspricht, und legen Sie dann los.