So erstellen Sie auf einfache Weise ein benutzerdefiniertes WordPress-Theme (ohne jeglichen Code)

Möchten Sie ein benutzerdefiniertes WordPress-Theme von Grund auf neu erstellen?

In der Vergangenheit mussten Sie den WordPress-Codex befolgen und ein anständiges Programmierwissen haben, um ein benutzerdefiniertes WordPress-Theme zu erstellen. Aber dank der neuen WordPress-Theme-Generatoren kann jetzt jeder ein komplett benutzerdefiniertes WordPress-Theme innerhalb einer Stunde erstellen (keine Programmierkenntnisse erforderlich).

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach ein benutzerdefiniertes WordPress-Theme erstellen können, ohne irgendeinen Code zu schreiben.

Erstellen eines benutzerdefinierten WordPress-Themes für Einsteiger

Im Gegensatz zu statischen HTML-Seiten sind WordPress-Themes eine Reihe von Vorlagendateien, die in PHP, HTML, CSS und JavaScript geschrieben sind. Normalerweise müssen Sie ein gutes Verständnis all dieser Web-Design-Sprachen haben oder einen Web-Entwickler beauftragen, um ein benutzerdefiniertes WordPress-Theme zu erstellen.

Wenn Sie einen Entwickler oder eine Agentur beauftragen, können die Kosten für ein benutzerdefiniertes WordPress-Theme Tausende von Dollar erreichen.

Da sich viele Kleinunternehmer die hohen Kosten für ein individuelles WordPress-Theme nicht leisten können, begnügen sich viele von ihnen mit den Standard-Themes, die mit WordPress geliefert werden.

Diejenigen, die sich nicht mit den Standard-Themes zufrieden geben wollten und Anpassungen wünschten, verwendeten entweder einen Drag & Drop WordPress Page Builder oder sie nutzten ein Theme-Framework, um ein eigenes Theme zu erstellen.

Obwohl WordPress-Theme-Frameworks die Erstellung eines WordPress-Theme erleichtern, sind sie eine Lösung für Entwickler, nicht für den durchschnittlichen Website-Besitzer.

Auf der anderen Seite machten es WordPress Page Builder Plugins super einfach, benutzerdefinierte Seitenlayouts mit einer Drag & Drop-Oberfläche zu erstellen, aber sie waren nur auf Layouts beschränkt. Sie konnten damit keine benutzerdefinierten Themes erstellen.

Bis Beaver Builder, eines der besten WordPress-Seitenerstellungs-Plugins, beschloss, dieses Problem mit seinem Add-on namens Beaver Themer zu lösen.

Beaver Themer ist ein Site-Builder-Add-on, mit dem Sie benutzerdefinierte Theme-Layouts über eine Drag-and-Drop-Oberfläche erstellen können, ohne Code lernen zu müssen.

Schauen wir uns an, wie Sie mit Beaver Themer ganz einfach ein WordPress-Theme erstellen können.

Einrichten von Beaver Themer zum Erstellen eines benutzerdefinierten Themas

Beaver Themer ist ein Add-on-Plugin für Beaver Builder, daher benötigen Sie für diesen Artikel beide Plugins.

Zunächst müssen Sie die Plugins Beaver Builder und Beaver Themer installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Mit Beaver Themer können Sie ein benutzerdefiniertes Theme erstellen, aber Sie benötigen trotzdem ein Theme, mit dem Sie beginnen können. Wir empfehlen, ein leichtgewichtiges Theme zu verwenden, das eine Seitenvorlage mit voller Breite enthält, um als Einstiegs-Theme zu fungieren.

Sie können viele solcher Themes im Theme-Verzeichnis von WordPress.org finden. Die meisten modernen WordPress-Themes enthalten ein Full-Width-Template. Unsere Top-Entscheidungen sind:

• • Astra

– Ein kostenloses, leichtgewichtiges Allzweck-WordPress-Theme, das mit integrierter Unterstützung für Beaver Builder kommt.

• • OeanWP

– Ein weiteres beliebtes kostenloses Mehrzweck-WordPress-Theme, das mit vollständiger Unterstützung für den Page Builder geliefert wird.

• StudioPress-Themes

– Alle ihre Themes sind mit Beaver Builder kompatibel und würden hervorragend mit Beaver Themer funktionieren.

Für dieses Tutorial werden wir Astra verwenden, ein leichtgewichtiges und einfach anpassbares WordPress-Theme.

Einrichten Ihres Themes für Beaver Themer

Wenn Sie ein benutzerdefiniertes WordPress-Theme mit Beaver Themer erstellen, müssen Sie sicherstellen, dass Beaver Themer Zugriff auf den gesamten Umfang der Seite hat (von Rand zu Rand).

Dies ist das Standard-Astra-Layout. Wie Sie sehen können, enthält dieses Layout eine Seitenleiste, die bei der Verwendung von Beaver Themer schwierig zu handhaben sein kann.

Sie können das ändern, indem Sie das Admin-Panel Ihrer Website besuchen und dann zur Seite Erscheinungsbild “ Anpassen navigieren. Von hier aus müssen Sie zur Registerkarte Layout “ Sidebars wechseln.

Wählen Sie dort unter der Option Standard-Layout einfach „Keine Seitenleiste“ aus und klicken Sie auf die Schaltfläche Veröffentlichen, um Ihre Änderungen zu speichern.

Ihr Thema wird nun ein Layout ohne Seitenleisten verwenden. Dies ist das beste Layout für die Verwendung mit Beaver Themer.

Dieses ganzseitige Layout ermöglicht es Beaver Themer, jeden Zentimeter des Bildschirms zu nutzen, sodass Sie ein schönes durchgängiges visuelles Erlebnis schaffen können.

Die meisten WordPress-Themes enthalten eine Vorlagendatei für Seiten mit voller Breite. Wenn Sie ein anderes Theme verwenden, dann finden Sie möglicherweise eine Option zum Entfernen von Seitenleisten in Ihren Theme-Einstellungen.

Wenn Sie diese nicht finden können, wenden Sie sich an den Entwickler Ihres Themes, der Ihnen möglicherweise dabei helfen kann.

Sobald Sie Ihr Theme auf ein Full-Width-Layout eingestellt haben, sind Sie bereit, Ihr eigenes WordPress-Theme mit Beaver Themer zu erstellen.

Kurze Grundlagen zu Beaver Themer

Beaver Themer arbeitet auf dem Beaver Builder auf. Als Seitenerstellungs-Plugin ermöglicht Beaver Builder das Ziehen und Ablegen von Elementen auf einer Seite, um benutzerdefinierte Layouts zu erstellen.

Es verfügt über die folgenden Elemente, die Sie in Ihren Layouts verwenden können:

• Vorlage: Eine Sammlung von Spalten, Zeilen und Modulen, aus denen ein ganzes Seitenlayout besteht.
• Spalten: Vertikale Layoutmodule, die helfen, den Inhalt horizontal auszurichten.
• Zeilen: Horizontale Sammlung von mehreren Modulen
• Modul: Ein Element, das bestimmte Informationen ausgibt, wie z. B. Titel, Textblock, Tabelle, Galerie usw.

Bearbeiten Sie einfach eine Seite im Beaver Builder und klicken Sie dann auf die Schaltfläche „Hinzufügen“ in der oberen rechten Ecke. Sie können dann per Drag & Drop Spalten, Zeilen, Module, auf Ihre Seite ziehen und sofort mit der Bearbeitung beginnen.

Wenn Sie nicht bei Null anfangen wollen, dann wählen Sie aus einer Liste von vorgefertigten Vorlagen, um damit zu beginnen.

Mit Beaver Builder können Sie Ihre Layouts auch speichern und später als Vorlagen verwenden.

Um mehr zu erfahren, lesen Sie unseren Artikel über das Erstellen eines benutzerdefinierten Seitenlayouts mit Beaver Builder.

Wir wollen aber nicht nur Seitenlayouts erstellen. Wir wollen ein komplettes benutzerdefiniertes Thema erstellen.

An dieser Stelle kommt Beaver Themer ins Spiel.

Es fügt dem Beaver Builder ein weiteres Element namens „Themer Layout“ hinzu.

Mit Themer-Layouts können Sie benutzerdefinierte Layouts für die Kopf- und Fußzeile, Inhaltsbereiche, die 404-Seite und andere Vorlagenteile erstellen.

Dies sind die Bausteine aller WordPress-Themes, und indem Sie sie verwenden, können Sie ein benutzerdefiniertes Theme erstellen, das Ihren Anforderungen entspricht.

Verwenden von Beaver Themer-Vorlagen zum Erstellen eines benutzerdefinierten WordPress-Themes

In der folgenden Anleitung führen wir Sie durch die Schritte, die nötig sind, um die beliebtesten benutzerdefinierten Theme-Elemente zu erstellen. Wenn Sie fertig sind, haben Sie Ihr Basis-Theme vollständig in ein benutzerdefiniertes WordPress Child-Theme verwandelt.

Erstellen eines benutzerdefinierten Headers für Ihr Theme

Beginnen wir mit dem Header-Bereich Ihrer Website. Ein benutzerdefinierter Header ist ein wesentlicher Bestandteil eines Themes und die Erstellung eines solchen kann mit herkömmlichen Methoden schwierig sein.

Glücklicherweise hat Beaver Themer Header-Funktionen eingebaut. Sie können entweder die vorgefertigte Vorlage verwenden oder die Menü- und Bildmodule mit einem zweispaltigen Layout verwenden.

Um zu diesem Header-Bereich zu gelangen, müssen wir zunächst ein Header-Layout in Beaver Themer einrichten. Besuchen Sie Beaver Builder “ Neue Seite hinzufügen und geben Sie einen Titel für Ihre Kopfzeile an.

Danach wählen Sie als Typ „Themer Layout“ und als Layout-Option „Header“. Sobald Sie fertig sind, klicken Sie auf die Schaltfläche „Themer Layout hinzufügen“, um fortzufahren.

Dies bringt Sie zur Seite mit den Layout-Einstellungen. Hier müssen Sie „Entire Site“ als den Ort auswählen, an dem die Kopfzeilenvorlage angezeigt werden soll.

Klicken Sie anschließend auf die Schaltfläche „Beaver Builder starten“, um die Benutzeroberfläche des Builders zu öffnen.

Beaver Builder wird mit einem einfachen einspaltigen und zweizeiligen Kopfzeilen-Layout als Ausgangspunkt gestartet.

Sie können die gleichen Beaver Builder Drag-and-Drop-Tools verwenden, um den Hintergrund, die Farben, den Text usw. zu ändern. Sie können auch andere Module hinzufügen, vorgefertigte Vorlagen laden und Zeilen/Spalten hinzufügen, indem Sie auf die Schaltfläche „Hinzufügen“ in der oberen rechten Ecke klicken.

Wenn Sie mit dem Design zufrieden sind, klicken Sie auf die Schaltfläche „Fertig“, um Ihr Layout zu speichern oder zu veröffentlichen.

Sie können nun Ihre Website besuchen, um Ihren benutzerdefinierten Themenheader in Aktion zu sehen. Wie Sie sehen können, haben wir das Header-Layout auf unser benutzerdefiniertes Thema angewendet.

Abgesehen von der Kopfzeile wird noch kein Inhalt angezeigt, und Sie werden wahrscheinlich den Fußzeilenbereich Ihres Basis-Themas sehen.

Lassen Sie uns dies ändern.

Erstellen einer benutzerdefinierten Fußzeile für Ihr Theme

Sie können eine benutzerdefinierte Fußzeile für Ihr Theme mit dem Beaver Themer erstellen, genauso wie Sie eine benutzerdefinierte Kopfzeile erstellt haben.

Gehen Sie zu Beaver Builder “ Add New page und geben Sie einen Titel für Ihr Footer-Layout ein. Wählen Sie dann „Themer-Layout“ als Typ und „Fußzeile“ als Layout-Option.

Klicken Sie auf die Schaltfläche „Themer-Layout hinzufügen“, um fortzufahren.

Dies bringt Sie zur Seite mit den Layout-Einstellungen. Hier müssen Sie „Entire Site“ als den Ort auswählen, an dem die Vorlage angezeigt werden soll.

Danach klicken Sie auf die Schaltfläche „Beaver Builder starten“, um die Benutzeroberfläche des Builders zu öffnen.

Beaver Builder wird mit einem dreispaltigen Fußzeilen-Layout gestartet. Sie können dieses Layout als Startpunkt verwenden und mit der Bearbeitung beginnen.

Sie können Module, Textblöcke oder alles andere hinzufügen, was Sie möchten. Sie können jederzeit Farben und Schriftarten ändern, ein Hintergrundbild hinzufügen und mehr.

Wenn Sie mit dem Design zufrieden sind, klicken Sie auf die Schaltfläche „Fertig“, um Ihr Layout zu speichern oder zu veröffentlichen.

Inhaltsbereich für Beiträge und Seiten erstellen

Nun, da wir Kopf- und Fußzeilen für jede Seite und jeden Beitrag auf der Website erstellt haben, ist es an der Zeit, den Beitrags- oder Seitenkörper (den Inhaltsbereich) zu erstellen.

Wir beginnen auf die gleiche Weise, wie wir die Kopf- und Fußzeile erstellt haben, indem wir das Layout „Singular“ auf der Seite „Neu hinzufügen“ hinzufügen.

Als nächstes wählen Sie, wo dieses Layout angezeigt werden soll. Sie können Singular wählen, um es für alle einzelnen Beiträge und Seiten zu verwenden, oder Sie können Beiträge oder nur die Seiten wählen.

Danach klicken Sie auf die Schaltfläche „Beaver Builder starten“, um die Builder-Oberfläche zu öffnen.

Der Beaver Builder lädt ein Beispiel für ein einzigartiges Layout mit dem Titel des Beitrags/der Seite oben, gefolgt vom Inhalt, der Autoren-Bio-Box und dem Kommentarbereich.

Sie können auf jedes dieser Elemente zeigen und klicken, um es zu bearbeiten oder neue Module, Spalten und Zeilen nach Bedarf hinzuzufügen.

Wenn Sie mit dem Layout zufrieden sind, klicken Sie auf die Schaltfläche „Fertig“, um Ihre Änderungen zu speichern und zu veröffentlichen.

Sie können nun Ihre Website besuchen, um sie in Aktion zu sehen.

Archiv-Layouts für Ihr benutzerdefiniertes Thema erstellen

Jetzt, wo Ihr benutzerdefiniertes Theme in Form gekommen ist, können Sie damit fortfahren, Layouts für andere Teile Ihrer Website zu erstellen. Archivseiten sind die Bereiche, in denen WordPress Ihre Kategorien, Tags, Autoren und Monatsarchive anzeigt.

Lassen Sie uns ein Layout für Archivseiten in Ihrem benutzerdefinierten Thema erstellen.

Sie beginnen, indem Sie Beaver Builder “ Neue Seite hinzufügen aufrufen und einen Titel für Ihr Archiv-Layout angeben.

Danach wählen Sie als Typ „Themer Layout“ und als Layout-Option „Archiv“. Klicken Sie auf die Schaltfläche „Themer-Layout hinzufügen“, um fortzufahren.

Dies bringt Sie zur Seite mit den Layout-Einstellungen. Hier müssen Sie „All Archive“ als den Ort auswählen, an dem die Vorlage angezeigt werden soll. Sie können auch separate Layouts für jeden einzelnen Archivtyp wie Datum, Suchergebnisse, Kategorie, Tags usw. erstellen.

Danach klicken Sie auf die Schaltfläche „Beaver Builder starten“, um die Builder-Oberfläche zu öffnen.

Beaver Builder wird mit einem einfachen einspaltigen Archiv-Layout gestartet. Der Titel des Archivs wird oben angezeigt, gefolgt von den Beiträgen.

Sie können auf jedes Element zeigen und klicken, um seine Eigenschaften zu bearbeiten. Sie können auch neue Module, Zeilen und Spalten nach Bedarf hinzufügen.

Klicken Sie anschließend auf die Schaltfläche „Fertig“, um Ihre Änderungen zu speichern und zu veröffentlichen.

Andere Layouts für Ihr benutzerdefiniertes WordPress-Theme erstellen

Mit Beaver Themer können Sie auch Layouts für andere Seiten in der Vorlagenhierarchie erstellen, z. B. 404-Seite, Vorlagenteile, Suchergebnisseite und mehr.

Mit der eingebauten Drag-and-Drop-Funktionalität des Beaver Builders können Sie ganz einfach Ihr eigenes benutzerdefiniertes WordPress-Theme von Grund auf erstellen, ohne jemals Code zu schreiben. Dies ist wirklich die anfängerfreundlichste WordPress-Theme-Entwicklungsmethode, die es gibt.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie ein benutzerdefiniertes WordPress-Theme erstellen können, ohne Code zu lernen.