Möchten Sie Ihr eigenes benutzerdefiniertes WordPress-Theme erstellen?

Wenn Sie etwas auf eine bestimmte Weise erledigt haben möchten — nun, dann müssen Sie es vielleicht selbst tun. Obwohl viele großartige WordPress-Themes verfügbar sind, kann es schwierig sein, eines zu finden, das Ihren spezifischen Anforderungen entspricht. Auf Ihrer Suche nach der perfekten Lösung könnten Sie versucht sein, Ihr eigenes benutzerdefiniertes WordPress-Theme zu erstellen.

Glücklicherweise ist das Erstellen eines benutzerdefinierten Themes für WordPress ein relativ unkomplizierter Prozess. Überraschenderweise erfordert es nicht viel technisches Wissen oder Erfahrung mit Webentwicklung. Außerdem kann das Erstellen Ihres eigenen Themes sehr lohnend sein, da Sie Ihre Website genau so gestalten können, wie Sie es möchten.

Entwerfen einer benutzerdefinierten WordPress-Website

Sie möchten, dass Ihre Website großartig aussieht und über alle Funktionen verfügt, die Sie benötigen, deshalb schauen Sie sich das WordPress Theme Directory an:

Leider erfüllt nichts, was Sie sehen, Ihre Anforderungen, und Sie möchten nicht bei Ihrer Vision Kompromisse eingehen. Vielleicht möchten Sie etwas Einzigartiges, um Ihre Website hervorzuheben, aber Sie möchten kein Geld für ein Premium-Theme ausgeben.

Seitenersteller

Eine Option ist die Verwendung eines Page Builder Plugins. Diese Werkzeuge ermöglichen es Ihnen, ein vorhandenes Thema zu nehmen und das Layout nach Ihren Bedürfnissen neu zu arrangieren. Die meisten beliebten Page Builder bieten einfache Drag-and-Drop-Steuerungen ohne Codierungsanforderungen. Bestimmte Mehrzweck-Themen sind bereits mit dieser Funktion ausgestattet.

Block-Themes

Wenn Sie sich entscheiden, den nativen WordPress-Editor auszuprobieren, ist die vollständige Seitenbearbeitung ein Funktionsset in WordPress, das mehrere Tools umfasst, um den Designprozess für Seitenbesitzer zugänglicher zu machen.

Mit diesem neuen Site Editor können Sie Drag-and-Drop-Blöcke verwenden, um den Großteil Ihrer Website über eine einzige Schnittstelle anzupassen, einschließlich Seitenvorlagen, ohne Code zu verwenden. Hier ist unser vollständiger Leitfaden zur vollständigen Seitenbearbeitung.

Themenanpassung

Wenn Sie ein anpassbares Theme wählen, können Sie auch das Aussehen Ihrer Website ändern, ohne technisch zu werden. Mit dem WordPress Customizer und dem Theme Options Panel sollten Sie in der Lage sein, verschiedene Designelemente anzupassen:

• Farbschema: Von der Hintergrundfarbe Ihrer Website bis zum speziellen Farbton Ihres Fließtextes.
• Typografie: Dies umfasst die auf Ihrer Website verwendeten Schriftarten und wie Text in verschiedenen Inhaltstypen dargestellt wird.
• Layout: Bestimmte Themen ermöglichen es Ihnen, zwischen verschiedenen Layouts zu wechseln und zu wählen, wie Ihre Website sich an verschiedene Bildschirmgrößen anpassen soll.

Die genaue Auswahl der Optionen hier hängt von dem gewählten Theme ab und wie es mit dem Rest Ihrer Markenwerte und Marketingkampagnen koordiniert. Premium-Themes bieten in der Regel großzügigere Anpassungsfunktionen.

Erstellen eines Child-Themes

Wenn Sie mehr Kontrolle wünschen, könnten Sie erwägen, ein Child-Theme zu erstellen.

Angesichts der Anzahl der Auswahlmöglichkeiten im WordPress Themes-Verzeichnis werden Sie wahrscheinlich ein Theme finden, das einige (wenn nicht alle) Ihrer Anforderungen erfüllt. Anstatt von einer sehr grundlegenden Vorlage auszugehen, können Sie das vorhandene Theme an Ihre Vision anpassen.

Auf den ersten Blick funktioniert ein WordPress Child-Theme wie jedes andere Thema. Der entscheidende Unterschied besteht darin, dass ein Child-Theme Attribute von einem Eltern-Theme erbt (dem ursprünglichen Thema, das Sie gewählt haben, zu verwenden).

Diese Beziehung ermöglicht es dem Child-Theme, bestimmte Teile des Parent-Themes zu überschreiben, während der Großteil des Aussehens und der Funktionalität des Parent-Themes erhalten bleibt.

Child-Themes bieten eine effiziente Methode, ein bestehendes Theme zu personalisieren, ohne die Dateien des Eltern-Themes zu modifizieren. Das Aktualisieren der Eltern- und Child-Themes für Sicherheitsupdates und Fehlerbehebungen ist wesentlich. Meistens muss nur das Eltern-Theme aktualisiert werden.

Ein Child-Theme zu verwenden ist daher eine effektive Methode, um eine einzigartige Online-Präsenz zu schaffen, ohne zu tief in die Welt der Entwicklung einzutauchen.

Vollständige Kontrolle

Manchmal ist selbst das nicht genug. Wenn Sie etwas wirklich Einzigartiges erstellen möchten, ist es an der Zeit, darüber nachzudenken, Ihr eigenes Theme zu erstellen.

Glücklicherweise ist die Entwicklung eines Themes für WordPress einfacher als Sie vielleicht denken. Dank der benutzerfreundlichen Schnittstelle der Plattform und den zahlreichen verfügbaren Werkzeugen kann fast jeder ein benutzerdefiniertes Theme erstellen.

Wir werden Sie durch den Prozess der Erstellung Ihres ersten Themes führen. Um anzufangen, benötigen Sie zwei Dinge:

• Ihre eigene WordPress-Website
• Ein qualitativ hochwertiger Hosting-Plan

Sie profitieren auch davon, Erfahrung mit lokalen Staging-Umgebungen zu haben, da Sie eine davon verwenden werden, um Ihr Thema zu erstellen. Es ist auch hilfreich, ein gewisses Verständnis von CSS und PHP zu haben (obwohl dies nicht unbedingt erforderlich ist).

Schließlich gibt es ein wichtiges Werkzeug, das Sie haben möchten, welches den Prozess erheblich erleichtern wird: ein Starter-Theme.

Was ist ein Starter-Theme? (Und warum sollten Sie eines verwenden)

Ein Starter-Theme ist ein grundlegendes WordPress-Theme, das Sie als Basis verwenden können, um Ihr eigenes zu erstellen. Dies ermöglicht es Ihnen, auf einem soliden Framework aufzubauen, ohne sich um die Komplexitäten der Codierung eines Themes von Grund auf neu kümmern zu müssen. Es wird Ihnen auch helfen zu verstehen, wie WordPress funktioniert, indem es Ihnen die grundlegende Struktur eines Themes zeigt und wie alle seine Teile zusammenarbeiten.

Es gibt viele ausgezeichnete Starter-Themes, einschließlich Underscores, UnderStrap und Bones (um nur einige zu nennen).

Wir werden Underscores für unser Tutorial verwenden. Es ist eine solide Wahl für Anfänger, da es nur die Grundlagen enthält. Außerdem wurde dieses Starter-Theme von Automattic entwickelt (dem Team hinter WordPress.com), was bedeutet, dass es wahrscheinlicher sicher, kompatibel und langfristig gut unterstützt ist.

Wie Sie Ihr erstes WordPress-Theme entwickeln (in 5 Schritten)

Mit der Vorbereitung aus dem Weg, sind Sie endlich bereit, Ihr erstes Theme zu erstellen. Wie wir bereits erwähnt haben, werden wir für diese Anleitung ein Starter-Theme verwenden.

Allerdings, wenn Sie alles selbst ohne Vorlage erstellen möchten, können Sie das tun, aber dieser Ansatz erfordert viel mehr Programmierkenntnisse.

Schritt 1: Richten Sie eine lokale Umgebung ein

Das Erste, was Sie tun müssen, ist eine lokale Entwicklungsumgebung zu erstellen. Dies ist effektiv ein Server, den Sie auf Ihrem Computer installieren, den Sie zur Entwicklung und Verwaltung lokaler WordPress-Seiten verwenden können. Eine lokale Seite ist eine sichere Methode, um ein Theme zu entwickeln, ohne Ihre Live-Site zu beeinflussen.

Es gibt viele Möglichkeiten, eine lokale Umgebung zu erstellen, aber wir werden Local verwenden. Dies ist eine schnelle, einfache Möglichkeit, eine lokale Version von WordPress kostenlos zu installieren und ist sowohl mit Mac als auch mit Windows kompatibel:

Um zu beginnen, wählen Sie die kostenlose Version von Local, wählen Sie Ihre Plattform, fügen Sie Ihre Daten hinzu und laden Sie den Installer herunter. Wenn die Installation abgeschlossen ist, können Sie das Programm auf Ihrem Computer öffnen.

Hier werden Sie gebeten, Ihre neue lokale Umgebung zu konfigurieren:

Dies ist ein einfacher Prozess, und Ihre lokale WordPress-Site ist in wenigen Minuten bereit. Sobald eingerichtet, wird Ihre neue Website genau wie eine live WordPress-Website aussehen und funktionieren.

Schritt 2: Laden Sie Ihr Starter-Theme herunter und installieren Sie es

Wie die meisten Starter-Themes ist Underscores sehr einfach zu beginnen. Tatsächlich müssen Sie nur die Website besuchen und Ihrem Theme einen Namen geben:

Wenn Sie möchten, können Sie auf Erweiterte Optionen klicken, um das Basisthema weiter anzupassen:

Hier können Sie weitere Informationen ausfüllen, wie den Namen des Autors, und dem Theme eine Beschreibung geben:

Es gibt auch die Option _sassify!, die Syntactically Awesome StyleSheets (SASS)-Dateien zu Ihrem Theme hinzufügt. SASS ist eine Präprozessorsprache für CSS, die es Ihnen ermöglicht, Variablen, Verschachtelungen, mathematische Operatoren und mehr zu verwenden.

Nachdem Sie Ihre Auswahl getroffen haben, können Sie auf Generieren klicken, was eine .zip Datei mit Ihrem Starter-Theme herunterladen wird. Dies ist die Kerndatei, um die herum Sie Ihr eigenes Theme entwickeln werden, also müssen Sie es auf Ihrer lokalen Seite installieren.

Nachdem Sie Ihr Theme installiert haben, können Sie Ihre Website in der Vorschau anzeigen, um zu sehen, wie sie aussieht. Es ist im Moment sehr einfach, aber das wird nicht lange so bleiben!

Schritt 3: Erfahren Sie mehr über die verschiedenen Komponenten eines WordPress-Themas

Bevor Sie Ihr Theme anpassen können, müssen Sie den Zweck seiner Komponenten verstehen und wie diese zusammenpassen.

Zuerst besprechen wir Vorlagendateien, die die Hauptbausteine eines WordPress-Themas sind. Diese Dateien bestimmen das Layout und das Aussehen des Inhalts auf Ihrer Website.

Zum Beispiel wird header.php verwendet, um einen Kopfbereich zu erstellen, während comments.php es Ihnen ermöglicht, Kommentare anzuzeigen.

WordPress bestimmt, welche Vorlagendateien auf jeder Seite verwendet werden sollen, indem es die Vorlagenhierarchie durchläuft. Das ist die Reihenfolge, in der WordPress jedes Mal nach den passenden Vorlagendateien sucht, wenn eine Seite auf Ihrer Website geladen wird.

Zum Beispiel, wenn Sie die URL http://example.com/post/this-post besuchen, sucht WordPress in dieser Reihenfolge nach den folgenden Vorlagendateien:

1. Dateien, die mit dem Slug übereinstimmen, wie this-post
2. Dateien, die mit der Post-ID übereinstimmen
3. Eine allgemeine einzelne Post-Datei, wie single.php
4. Eine Archivdatei, wie archive.php
5. Die index.php Datei

Da die Datei index.php von allen Themes benötigt wird, ist sie die Standardoption, wenn keine andere Datei gefunden werden kann. Underscores enthält die gängigsten Themendateien, die sofort funktionieren. Sie können jedoch mit deren Bearbeitung experimentieren, wenn Sie ein Gefühl dafür bekommen möchten, wie sie zusammenarbeiten.

Schlüsseldateien des Themes

Zusätzlich zur Datei index.php finden Sie in den meisten WordPress-Themes die folgenden Dateien:

• header.php: Dies enthält das HTML für Ihr benutzerdefiniertes Kopfzeilentemplate, einschließlich Metadaten und Links zu Stylesheets. Beachten Sie, dass Menüs normalerweise durch die WordPress benutzerdefinierte Menüfunktion gehandhabt werden.
• footer.php: Diese Datei enthält das HTML für das Fußzeilentemplate Ihrer Website.
• sidebar.php: Wenn Sie möchten, dass Ihre Website eine Seitenleiste hat, kommt der Code hierher. Bedenken Sie, dass dies nur die Struktur ist; Widgets werden aus dem Admin-Bereich gesteuert.
• single.php: Dies ist die Template-Datei für einzelne Blogposts. Wenn Sie verschiedene Post-Typen unterstützen möchten, können Sie mehr als eine Datei erstellen.
• page.php: Das Standardlayout einzelner Seiten stammt aus dieser Datei. Auch hier können Sie mehr als ein Template erstellen — beispielsweise könnten Sie ein Produktdesign für einen Online-Shop erstellen.
• comments.php: Diese Datei steuert die Anzeige von Kommentaren unter Ihren Blogposts und auf Seiten.
• search.php: Wenn jemand die Suchfunktion auf Ihrer Website verwendet, definiert dieses Template, wie die Suchergebnisse angezeigt werden.

Im Allgemeinen müssen Sie diese Dateien nur bearbeiten, wenn Sie Inhalte hinzufügen oder das Layout Ihrer Website drastisch ändern möchten. Die meisten anderen Anpassungen können mit benutzerdefiniertem CSS in Ihrer Stylesheet-Datei vorgenommen werden.

Die Schleife

Ein weiteres wichtiges Element, das Sie verstehen müssen, ist die Schleife. WordPress verwendet diesen Code, um Inhalte anzuzeigen, also ist es in vielerlei Hinsicht das schlagende Herz Ihrer Website. Es erscheint in allen Vorlagendateien, die Beitragsinhalte anzeigen, wie index.php oder sidebar.php.

The Loop ist ein komplexes Thema, über das wir empfehlen, mehr zu lesen, wenn Sie verstehen möchten, wie WordPress Beitragsinhalte anzeigt. Glücklicherweise wird die Loop dank Underscores bereits in Ihr Theme integriert sein, sodass Sie sich vorerst keine Sorgen machen müssen.

Schritt 4: Konfigurieren Sie Ihr Theme

Es ist leicht zu denken, dass Themes rein kosmetische Zwecke erfüllen, aber sie haben tatsächlich einen großen Einfluss auf die Funktionalität Ihrer Website. Lassen Sie uns anschauen, wie Sie einige grundlegende Anpassungen vornehmen können.

Funktionalität mit Hooks hinzufügen

Hooks sind Code-Schnipsel, die in Vorlagendateien eingefügt werden, welche es Ihnen ermöglichen, PHP-Aktionen in verschiedenen Bereichen einer Website auszuführen, Styling einzufügen und andere Informationen anzuzeigen. Die meisten Hooks sind direkt in die WordPress-Kernsoftware implementiert, aber einige sind auch für Theme-Entwickler nützlich.

Lassen Sie uns einen Blick auf einige der häufigsten Hooks werfen und wofür sie verwendet werden können:

• wp_head(): Hinzugefügt zum <head>-Element in header.php. Es aktiviert Stile, Skripte und andere Informationen, die geladen werden, sobald die Website lädt. Dies wird oft verwendet, um Google Analytics Code einzufügen.
• wp_footer(): Hinzugefügt zu footer.php kurz vor dem </body>-Tag.
• wp_meta(): Erscheint normalerweise in sidebar.php, um zusätzliche Skripte (wie eine Tag-Wolke) einzuschließen.
• comment_form(): Hinzugefügt zu comments.php direkt vor dem schließenden </div>-Tag, um Kommentardaten anzuzeigen.

Diese Haken sind bereits in Ihrem Underscores-Theme enthalten. Wir empfehlen jedoch, die Hooks-Datenbank zu besuchen, um alle verfügbaren Haken zu sehen und mehr darüber zu erfahren.

Stile mit CSS hinzufügen

Cascading Style Sheets (CSS) definieren das Aussehen aller Inhalte auf Ihrer Website. In WordPress wird dies mit der style.css Datei erreicht. Diese Datei ist bereits in Ihrem Thema enthalten, enthält aber derzeit nur die grundlegende, standardmäßige Gestaltung:

Wenn Sie ein schnelles Beispiel dafür sehen möchten, wie CSS funktioniert, können Sie hier jeden Stil bearbeiten und die Datei speichern, um die Effekte zu sehen. Zum Beispiel finden Sie den folgenden Code (normalerweise in Zeile 485):

a {
color: royalblue;
}

Dieser Code steuert die Farbe von unbesuchten Hyperlinks, die standardmäßig königsblau erscheinen:

Lassen Sie uns sehen, was passiert, wenn wir versuchen, dies durch den folgenden Code zu ersetzen:

a {
color: red;
}

Speichern Sie die Datei und schauen Sie sich Ihre lokale Website an. Wie Sie erwarten, werden jetzt alle nicht besuchten Links hellrot angezeigt:

Sie könnten bemerken, dass der besuchte Link oben seine Farbe nicht geändert hat. Das liegt daran, dass er tatsächlich vom nächsten Abschnitt im Stylesheet gesteuert wird:

a:visited {
color: purple;
}

Dies ist ein sehr grundlegendes Beispiel dafür, wie das Bearbeiten von style.css das Aussehen Ihrer Website beeinflusst. CSS ist ein umfangreiches Thema, das wir Ihnen empfehlen weiter zu erkunden, wenn Sie mehr über das Erstellen von Webdesigns erfahren möchten. Es gibt viele Ressourcen zu diesem Thema für Anfänger.

Schritt 5: Exportieren Sie das Theme und laden Sie es auf Ihre Website hoch

Wenn Sie mit der Anpassung Ihres Themes fertig sind, ist es Zeit sicherzustellen, dass es ordnungsgemäß funktioniert. Dafür können Sie die Theme Unit Test-Daten verwenden.

Dies ist eine Reihe von Dummy-Daten, die Sie auf Ihrer Website hochladen können. Sie enthält viele verschiedene Variationen von Stilen und Inhalten, und es ermöglicht Ihnen zu sehen, wie Ihr Theme mit unvorhersehbaren Daten umgeht.

Wenn Sie Ihr Theme gründlich getestet haben und überzeugt sind, dass es den erforderlichen Standards entspricht, bleibt nun nur noch, es zu exportieren.

Zuerst müssen Sie den Speicherort Ihrer Website auf Ihrem lokalen Rechner finden. Sie werden ihn wahrscheinlich in einem Ordner namens Websites, in Ihrem standardmäßigen Dokumente-Verzeichnis finden.

Öffnen Sie den Ordner der Website und greifen Sie auf /wp-content/themes/ zu, wo Sie Ihr Theme finden:

Sie können jetzt ein Komprimierungswerkzeug, wie WinRAR, verwenden, um eine .zip Datei basierend auf dem Ordner zu erstellen. Klicken Sie einfach mit der rechten Maustaste auf den Ordner und wählen Sie die Option, die es Ihnen ermöglicht, ihn zu zippen, wie Komprimiere „Ordner.“

Wenn der Ordner gezippt wurde, ist er bereit, auf jeder WordPress-Seite hochgeladen und installiert zu werden, genau wie Sie Ihr Underscores-Theme am Anfang installiert haben.

Tipps zur Entwicklung Ihres ersten benutzerdefinierten Themes

Wenn Sie das erste Mal mit Code herumhantieren, ist es immer möglich, ein paar Fehler zu machen. Aus diesem Grund ist es eine gute Idee, sich Zeit zu nehmen, um Ihr erstes Theme zu entwickeln, und in Ihrer lokalen Umgebung zu experimentieren.

Hier sind einige zusätzliche Maßnahmen, die Sie ergreifen können, um sicherzustellen, dass Ihr Thema in der Wildnis gedeihen wird:

• Versionskontrolle verwenden: Systeme wie Git helfen Ihnen, Änderungen an Ihrem Code über die Zeit zu verfolgen und Fehler rückgängig zu machen.
• Überprüfen Sie Ihren Code: Verwenden Sie Tools wie Theme Check und den W3C Validator, um Fehler in Ihrem Code zu finden. Häufige Überprüfungen können Ihnen helfen, Probleme frühzeitig zu erkennen.
• Testen Sie Ihr Theme: Versuchen Sie, Ihr Theme auf verschiedenen Browsern und Geräten zu laden, um Layout- oder Darstellungsprobleme zu identifizieren. Ein Design, das auf Ihrem eigenen Computer perfekt funktioniert, kann auf einer anderen Plattform zusammenbrechen.
• Verwenden Sie Code-Kommentare: Sich selbst Notizen zu hinterlassen, die erklären, was alles tut, kann Ihnen helfen, Probleme zu einem späteren Zeitpunkt zu beheben.

Erstellen Sie ein benutzerdefiniertes WordPress-Theme

Ein benutzerdefiniertes WordPress-Theme von Grund auf neu zu erstellen, ist keine kleine Leistung. Der Prozess mag jedoch nicht so schwierig sein, wie Sie denken.

Um zusammenzufassen, hier sind die fünf einfachen Schritte zur Entwicklung eines WordPress-Themas:

1. Richten Sie eine lokale Umgebung ein, mit Local.
2. Laden Sie ein Starter-Theme herunter und installieren Sie es, wie z.B. Underscores.
3. Erfahren Sie mehr über die verschiedenen Komponenten eines WordPress-Themas.
4. Konfigurieren Sie Ihr Thema.
5. Exportieren Sie das Thema und laden Sie es auf Ihre Website hoch.

Indem Sie den Richtlinien auf der Codex-Dokumentationsseite folgen, können Sie ein Theme entwickeln, das den Qualitätsstandards entspricht. Sie könnten sogar erwägen, es im WordPress Theme-Verzeichnis einzureichen!

Starten Sie Ihre einzigartige WordPress-Site mit DreamPress

Ein großartiges Thema zu erstellen ist der erste Schritt zum Erstellen einer erfolgreichen Website. Wir haben die Werkzeuge, um Ihnen bei der Restgestaltung zu helfen.

Mit dem DreamPress verwalteten Hosting können Sie jedes Theme oder Plugin online mit einem Klick-Staging testen. Wir bieten auch kugelsichere Backups, sodass Sie Änderungen jederzeit zurücksetzen können, und integrierten Cache für optimale Leistung.

Melden Sie sich heute an, um Ihre WordPress-Site zu starten!