Hinweis: Der folgende Artikel hilft Ihnen weiter: So erstellen Sie ein benutzerdefiniertes WordPress-Theme in 5 Schritten ohne Code
Möchten Sie benutzerdefinierte WordPress-Themes für Ihre Website erstellen?
Um Ihr eigenes WordPress-Theme von Grund auf zu erstellen, mussten Sie früher komplexen Code schreiben oder Theme-Entwickler engagieren, um ein Theme für Sie zu erstellen. Aber dank neuer und benutzerfreundlicher WordPress-Theme-Generatoren kann jeder ein benutzerdefiniertes WordPress-Theme erstellen, ohne Code schreiben zu müssen.
In diesem Artikel erfahren Sie Schritt für Schritt, wie Sie ein benutzerdefiniertes Theme in WordPress erstellen.
Was ist ein WordPress-Theme?
WordPress-Themes sind Vorlagendateien, die in PHP, HTML, CSS und JavaScript geschrieben sind. Jede Datei arbeitet zusammen, um das Design und die Funktionalität Ihrer WordPress-Site zu erstellen.
Ein typisches WordPress-Theme umfasst einige, wenn nicht alle, der folgenden Theme-Dateien:
- footer.php
- header.php
- index.php
- page.php
- sidebar.php
- archive.php
WordPress-Themes enthalten außerdem eine Datei „functions.php“ und eine Datei „style.css“.
Normalerweise benötigen Sie solide Kenntnisse in mehreren Webdesign-Sprachen oder einen Webentwickler, der ein benutzerdefiniertes WordPress-Theme erstellt.
Erstellen benutzerdefinierter WordPress-Themes für Anfänger
Wenn Sie einen Entwickler oder eine Webentwicklungsagentur beauftragen, können die Kosten für die Erstellung eines benutzerdefinierten Themes von Grund auf Tausende von Dollar betragen. Da sich viele kleine Unternehmen die Kosten für benutzerdefinierte WordPress-Themes nicht leisten können, geben sie sich mit den standardmäßigen WordPress-Themes zufrieden, die mit der Plattform geliefert werden.
Wenn Sie jedoch ein Websitebesitzer sind, der sich nicht mit Standardeinstellungen zufrieden geben möchte, können Sie entweder ein Theme-Framework wie beispielsweise Genesis von StudioPress oder ein WordPress-Seitenerstellungs-Plugin verwenden, um ein benutzerdefiniertes Theme für Ihre WordPress-Site zu erstellen .
WordPress-Theme-Frameworks erleichtern die Erstellung eines WordPress-Themes, indem sie einen Großteil des Designs und der Funktionalität automatisch verwalten. Allerdings handelt es sich immer noch um eine etwas komplizierte Lösung, die beispielsweise untergeordnete Themen erfordert, sodass sie eher für Entwickler als für den durchschnittlichen Website-Besitzer geeignet sind.
Auf der anderen Seite machen WordPress-Seitenersteller das Erstellen benutzerdefinierter Seitenlayouts mithilfe einer Drag-and-Drop-Oberfläche super einfach, haben aber auch ihre Grenzen. Mit Seitenerstellern können Sie nur Layouts erstellen und normalerweise nicht zum Erstellen benutzerdefinierter Designs verwenden.
Bis SeedProd, der beste WordPress-Website-Builder für benutzerdefinierte Themes, beschloss, dieses Problem mit seinem WordPress-Theme-Builder zu lösen.
Was ist der SeedProd Theme Builder?
SeedProd ist bereits ein leistungsstarker Drag-and-Drop-Seitenersteller, der von über 1 Million Website-Besitzern verwendet wird. Aber mit dem Theme-Builder kann jeder technisch nicht versierte Benutzer ein komplett individuelles WordPress-Theme ohne Code erstellen.
Anstatt mit wp-Inhaltsdateien zu jonglieren, können Sie mit nur wenigen Klicks Themes von Grund auf erstellen. SeedProd erstellt Ihr Stylesheet sogar automatisch.
SeedProd kommt mit:
- Visuelle Drag-and-Drop-Oberfläche
- Über 150 Pro-Vorlagen
- 2 Millionen Stockfotos
- WooCommerce-Unterstützung
- Abonnentenverwaltungs-Dashboard
- E-Mail-Marketing-Integrationen
Und so viele zusätzliche Funktionen und Widgets, die Sie benötigen, um schnell eine benutzerdefinierte Website mit WordPress zu erstellen.
Schauen wir uns vor diesem Hintergrund an, wie Sie mit SeedProd ein benutzerdefiniertes WordPress-Theme erstellen, ohne eine einzige Codezeile schreiben zu müssen.
So erstellen Sie ein benutzerdefiniertes WordPress-Theme ohne Code
Um mit SeedProd ein benutzerdefiniertes WordPress-Theme zu erstellen, benötigen Sie zunächst eine WordPress-Website, um das SeedProd-Plugin zu installieren. Wenn Sie noch keine WordPress-Installation haben, können Sie diese Schritte zum Lernen befolgen wie man eine WordPress-Website erstellt.
Auf Ihrer Website sollte außerdem ein einfaches WordPress-Theme installiert sein. Viele kostenlose Lösungen finden Sie im WordPress-Theme-Verzeichnis. Sie müssen sich keine Gedanken darüber machen, wie das Design aussieht, da SeedProd es überschreibt, wenn Sie Ihre Anpassungen veröffentlichen.
Es ist auch eine gute Idee, beim Ändern Ihres WordPress-Themes eine Entwicklungsumgebung zu verwenden, um zu verhindern, dass Ihre Website versehentlich beschädigt wird. Beliebte WordPress-Hosting-Unternehmen wie BlueHost bieten standardmäßig Testumgebungen an.
Sie sollten auch Ihre Website sichern, bevor Sie wichtige Änderungen vornehmen. Hier ist eine Liste der beste WordPress-Backup-Plugins Sie können verwenden.
Sobald Ihre WordPress-Site fertig ist, führen Sie die folgenden Schritte aus, um ein benutzerdefiniertes WordPress-Theme ohne Code zu erstellen.
Schritt 1. Installieren und aktivieren Sie SeedProd
Der erste Schritt besteht darin, das SeedProd-Website-Builder-Plugin zu installieren und zu aktivieren. Für den Zugriff auf die Theme-Builder-Funktion benötigen Sie eine SeedProd Pro- oder Elite-Lizenz.
Nachdem Sie die ZIP-Datei des SeedProd-Plugins auf Ihren Computer heruntergeladen haben, laden Sie sie hoch, installieren und aktivieren Sie sie auf Ihrem WordPress-Dashboard. Wenn Sie bei diesem Schritt Hilfe benötigen, folgen Sie dieser Anleitung auf Installation eines WordPress-Plugins.
Navigieren Sie nach der Installation von SeedProd zu SeedProd ≫ Einstellungen in Ihrem WordPress-Administrationsbereich und geben Sie Ihren SeedProd-Lizenzschlüssel ein.
Sie können Ihren Lizenzschlüssel finden, indem Sie Ihren besuchen SeedProd-Kontobereich und kopieren Sie es von der Registerkarte „Downloads“.
Jetzt können Sie gehen SeedProd ≫ Theme Builder und sehen Sie sich die Theme Builder-Übersicht an. Hier können Sie eine Vorlagenhierarchie für Ihr WordPress-Theme erstellen.
Mit anderen Worten: Hier können Sie alle einzelnen Teile erstellen, aus denen Ihr Thema besteht, wie zum Beispiel die folgenden:
- Header
- Fusszeile
- Einzelner Beitrag
- Einzelne Seite
- Archiv (Blogseite)
- Startseite
- Seitenleiste
Sie können jeden dieser Thementeile einzeln erstellen, indem Sie auf klicken Neue Theme-Vorlage hinzufügen Taste.
Aber wenn Ihnen das für Ihren ersten Versuch zu überwältigend vorkommt, gibt es eine andere Möglichkeit, Ihr Thema zu erstellen.
Mit den vorgefertigten Theme-Vorlagen von SeedProd können Sie schnell das Grundgerüst für Ihr Theme erstellen und es ohne Code an Ihre Designanforderungen anpassen. Da diese Lösung für Anfänger sehr einfach ist, konzentrieren wir uns in diesem Tutorial darauf.
Note: SeedProd bietet außerdem Hunderte von responsiven Landingpage-Vorlagen, die Ihnen bei der Erstellung benutzerdefinierter Landingpages helfen.
Schritt 2. Wählen Sie eine Designvorlage
Der Theme Builder von SeedProd hat bereits mehrere Themes für Sie erstellt. Um sie zu finden, klicken Sie auf Themen Taste.
Zum Zeitpunkt der Erstellung dieses Leitfadens gab es 9 Themenvorlagen, darunter:
- Starter-Thema
- Modernes Geschäft
- Marketingagentur
- Produktdesign-Thema
- Haustierpflegeunternehmen
- Thema „Digitale Strategie“.
- Live-Musik-Thema
- Thema „Hypothekenmakler“.
- Restaurantthema
Um eine Designvorlage für Ihre Website auszuwählen, bewegen Sie den Mauszeiger über die Miniaturansicht und klicken Sie auf das Häkchensymbol. Für diese Anleitung verwenden wir das Starter-Theme von SeedProd.
Nachdem Sie Ihre Vorlage ausgewählt haben, erstellt SeedProd automatisch alle Teile, aus denen Ihr Theme besteht.
Wenn Sie eine bestimmte Funktion nicht auf Ihrer Website anzeigen möchten, können Sie auf den Schalter unter der Überschrift „Veröffentlichen“ klicken und diesen Thementeil deaktivieren.
Wenn Sie auf den Link „Bedingungen“ für jeden Vorlagenteil klicken, können Sie dessen Namen, Typ und Priorität ändern und auswählen, wann und wo er auf Ihrer Website angezeigt wird.
Schritt 3. Passen Sie Ihre WordPress-Theme-Teile an
Nachdem die Grundbausteine Ihres Themes vorhanden sind, ist es nun an der Zeit, mit der Bearbeitung jedes Theme-Abschnitts zu beginnen, um ein wirklich individuelles WordPress-Theme für Ihre Website zu erstellen.
Um einen Themenabschnitt zu bearbeiten, bewegen Sie den Mauszeiger darüber und klicken Sie auf Design bearbeiten Verknüpfung.
Wir beginnen mit der Bearbeitung der Kopfzeile.
Benutzerdefinierte Kopf- und Fußzeile des WordPress-Themes
Wenn Sie einen Themenabschnitt in SeedProd bearbeiten, gelangen Sie zum visuellen Drag-and-Drop-Builder. Sie können die Kopfzeile Ihres Themas auf diesem Bildschirm anpassen, indem Sie einfach darauf zeigen und klicken.
Wie Sie sehen können, verfügt das Starter-Theme über eine zweispaltige Kopfzeile mit einem Logo und einem Navigationsmenü. Sie können es so anpassen, dass Ihr benutzerdefiniertes Logo angezeigt wird, indem Sie in der Live-Vorschau auf das Logo klicken.
Von dort aus können Sie das Platzhalterlogo im linken Bereich löschen und ein neues von Ihrem Computer oder Ihrer WordPress-Medienbibliothek hochladen.
Sie können die Größe und Ausrichtung Ihres Logos im selben Bereich anpassen und einen benutzerdefinierten Link hinzufügen, z. B. die URL Ihrer primären Website.
Wenn Sie die Hintergrundfarbe Ihrer Kopfzeile ändern möchten, bewegen Sie den Mauszeiger über den Kopfzeilenabschnitt, bis dieser eine violette Umrandung aufweist, und klicken Sie dann darauf, um die Abschnittseinstellungen im linken Bereich anzuzeigen. Von dort aus können Sie Ihrer Kopfzeile eine benutzerdefinierte Hintergrundfarbe und ein Bild geben und die Breite der Kopfzeile auswählen.
Und in der Fortschrittlich Auf der Registerkarte können Sie den Schatten, den Abstand, den Rahmen und mehr Ihrer Kopfzeile anpassen.
Wenn Sie mit Ihrem benutzerdefinierten WordPress-Header zufrieden sind, klicken Sie auf Speichern Klicken Sie auf die Schaltfläche in der oberen rechten Ecke und kehren Sie zum Theme Builder zurück.
Wiederholen Sie nun diese Schritte, um Ihre WordPress-Fußzeile zu bearbeiten. Klicken Design bearbeiten um es im visuellen Editor zu öffnen, und klicken Sie auf ein beliebiges Element, um den Inhalt, die Farben, Links und mehr anzupassen.
Erstellen Sie eine benutzerdefinierte WordPress-Theme-Homepage
Als Nächstes passen wir die Startseite Ihrer WordPress-Site an, die häufig die erste Seite ist, die Benutzer sehen, wenn sie Ihre Website besuchen. Öffnen Sie also den Abschnitt „Homepage“ im visuellen Editor.
Da wir das Design der Kopf- und Fußzeile bereits angepasst haben, werden Ihre neuen Designs oben und unten auf Ihrer Homepage angezeigt. Aber keine Sorge, die Änderungen, die Sie auf diesem Bildschirm vornehmen, wirken sich nicht auf Ihre Kopf- oder Fußzeile aus; Sie dienen lediglich als visuelle Orientierungshilfe.
Die Starter-Theme-Vorlage von SeedProd verfügt über alle Funktionen, die die meisten Unternehmenswebsites benötigen, einschließlich:
- Heldenbereich
- Kundenlogos
- Merkmale
- Referenzen
- FAQ-Bereich
Genau wie die Kopfzeile können Sie jeden Zentimeter individuell anpassen, um ihn einzigartig zu machen. Beginnen wir mit der Änderung des Heldenbereichs.
Der Heldenbereich verfügt über folgende Funktionen:
- Abschnitt
- 2-Spalten-Layout
- Bild
- Überschrift
- Text
- Taste
Um das Standardbild zu ändern, klicken Sie einfach darauf und laden Sie ein neues Bild hoch, wie Sie es mit Ihrem Logo getan haben.
Sie können auch die Überschrift und Beschreibung bearbeiten, indem Sie auf jeden Block klicken und den Inhalt durch Ihren benutzerdefinierten Text ersetzen.
Wenn Sie auf den Schaltflächenblock klicken, können Sie den Schaltflächentext, den Link, die Ausrichtung und mehr ändern.
Alle diese Elemente finden Sie im linken Blockbereich. Auf diese Weise können Sie einen Block von links ziehen und auf Ihrem Design ablegen, um Ihrem Thema mehr Inhalt hinzuzufügen.
Befolgen Sie diesen Prozess, um den Rest Ihrer Homepage anzupassen, bis sie Ihr Unternehmen widerspiegelt. Im Abschnitt „Funktionen“ können Sie beispielsweise Informationen zu den Dienstleistungen Ihres Unternehmens hinzufügen oder Ihre Produktfunktionen hervorheben.
Dann können Sie den integrierten Testimonials-Block von SeedProd verwenden, um positive soziale Beweise von Ihren bestehenden Kunden und Kunden hinzuzufügen.
Wir haben auch die Hintergrundfarbe dieses Abschnitts geändert, um sie an die Kopfzeile unseres Themas anzupassen, indem wir die Abschnittseinstellungen geöffnet und eine andere Farbe ausgewählt haben.
Nachdem Sie Ihre Homepage angepasst haben, können Sie auf das Vorschausymbol für Mobilgeräte klicken, um zu sehen, wie Ihr Design auf Mobilgeräten aussieht.
Wenn etwas nicht richtig aussieht, können Sie es verschieben, bis Ihr mobiler Bildschirm ein gutes Benutzererlebnis bietet.
Wenn Sie mit dem Aussehen Ihrer Homepage zufrieden sind, klicken Sie auf Speichern Klicken Sie auf die Schaltfläche und kehren Sie zum Theme Builder zurück.
Benutzerdefiniertes WordPress-Theme Blog-Seite, einzelne Beiträge und Seiten
Möglicherweise möchten Sie eine benutzerdefinierte Seite für Blogbeiträge in Ihr neues WordPress-Theme einbinden. Die gute Nachricht ist, dass SeedProd über einen Thementeil verfügt, den Sie speziell für diesen Zweck anpassen können.
Dieser Abschnitt heißt Blog-Index, Archive, Suche im Theme Builder. Damit können Sie Ihre Blog-Beitragsseite, Beitragsarchive und Suchergebnisseite so anpassen, dass sie zum restlichen Branding Ihrer Website passen.
Klicken Sie also auf Design bearbeiten Link zum Öffnen dieses Thementeils im Drag-and-Drop-Builder.
Auf dieser Seite verwendet das Starter-Theme Template-Tags, um dynamische Informationen aus WordPress abzurufen, einschließlich des Archivtitels und der Beiträge. Wenn Sie auf einen dieser Blöcke klicken, werden deren Einstellungen im linken Bereich angezeigt.
Wenn Sie beispielsweise auf das Vorlagen-Tag „Beiträge“ klicken, können Sie Beiträge standardmäßig, benutzerdefiniert (Beiträge, Medien oder benutzerdefinierte Beiträge) oder manuell anzeigen, indem Sie bestimmte Abfrageparameter eingeben.
Sie können auch die Anzahl der Spalten und Beiträge pro Seite auswählen, das vorgestellte Bild ein- oder ausblenden, einen Auszug anzeigen und vieles mehr.
Nachdem Sie Ihr Archiv oder Ihre Blog-Seite angepasst haben, kehren Sie zum Theme-Builder zurück und bearbeiten Sie das Einzelne Beiträge Abschnitt.
Dieser Thementeil verwendet die folgenden Vorlagen-Tags, um Informationen zu einzelnen WordPress-Beiträgen abzurufen:
- Beitragstitel
- Beitragsinfo
- Inhalte posten
- Autorenbox
- Kommentar schreiben
- Beitragsnavigation
Sie können jeden dieser Blöcke wie jeden anderen SeedProd-Block bearbeiten. Klicken Sie einfach auf ein beliebiges Element und passen Sie es im Einstellungsfeld an.
Wenn Sie beispielsweise auf klicken Beitragsinfo Block können Sie weitere Metainformationen hinzufügen, die Ausrichtung ändern und die Symbolfarben anpassen.
Viele WordPress-Websites verwenden immer noch Seitenleisten, um Besuchern wichtige Informationen wie ihre Social-Media-Profile, neuesten Beiträge und das Newsletter-Anmeldefeld anzuzeigen. Aber im Gegensatz zu vielen vorgefertigten WordPress-Themes können Sie mit SeedProd eine benutzerdefinierte WordPress-Seitenleiste mit seinen visuellen Bausteinen erstellen.
Klicken Sie dazu auf Design bearbeiten im Seitenleisten-Vorlagenteil. Von dort aus können Sie beliebige Inhalte per Drag & Drop auf Ihr Seitenleistendesign ziehen.
Das Starter-Theme umfasst standardmäßig ein Suchfeld, Social-Media-Symbole und Beitragskategorien. Aber Sie können hier alles hinzufügen, was Sie möchten. Beispielsweise möchten Sie möglicherweise eine Liste der letzten Blogbeiträge oder ein Bild mit einem Link zu einem Affiliate-Partner anzeigen.
Sie können auch den Opt-in-Formularblock von SeedProd verwenden und E-Mail-Adressen sammeln, um Ihre Liste direkt in Ihrer Seitenleiste zu erweitern. Das Beste daran ist, dass Sie dafür keine technischen Kenntnisse benötigen.
Benutzerdefiniertes globales WordPress-Theme-CSS
Mittlerweile haben Sie den Großteil Ihres benutzerdefinierten WordPress-Themes ohne Code erstellt. Aber es gibt noch einen weiteren Teil, den Sie beachten sollten, um sicherzustellen, dass in Ihrem gesamten Thema alles konsistent ist.
Das ist Dein Globales CSS, das den globalen Stil, die Typografie, die Farben und das Layout Ihres Themes steuert. Also klicken Design bearbeiten auf diesen Thementeil, um ihn im Seiteneditor zu öffnen.
Wie Sie sehen, haben Sie auf dieser Seite die Kontrolle über einen Großteil des Stils Ihres Themes. Im linken Bereich befinden sich Abschnitte für:
- Farben
- Schriftarten
- Hintergrund
- Tasten
- Formen
- Layout
- Benutzerdefinierte CSS
Sie können beispielsweise die öffnen Tasten Abschnitt und wählen Sie eine benutzerdefinierte Farbe. Dann wird diese Farbe auf jeder Schaltfläche in Ihrem Theme angezeigt.
Dasselbe können Sie auch im tun Schriftarten Überschrift und weisen Sie jedem Link in Ihrem Theme eine benutzerdefinierte Farbe zu.
Passen Sie also diese Einstellungen an, bis Ihr Design genau so aussieht, wie Sie es möchten, und klicken Sie dann auf Speichern Klicken Sie auf die Schaltfläche, um Ihre Änderungen zu speichern.
Schritt 4. Verbinden Sie Ihren E-Mail-Marketingdienst
Wenn eines Ihrer Geschäftsziele darin besteht, Ihre E-Mail-Liste zu erweitern, haben Sie wahrscheinlich irgendwo in Ihrem WordPress-Theme-Design ein Anmeldeformular hinzugefügt. Um jedoch automatisch neue Kontakte zu Ihrer Liste hinzuzufügen, müssen Sie Ihr Formular mit Ihrem E-Mail-Marketingdienst verbinden.
SeedProd lässt sich direkt in viele beliebte E-Mail-Marketing-Dienste wie Constant Contact, Mailchimp, Drip usw. integrieren. Und die Verknüpfung mit Ihrem Konto ist ein Kinderspiel.
Bearbeiten Sie einfach einen beliebigen Thementeil und klicken Sie auf Verbinden Registerkarte oben auf dem Bildschirm.
Klicken Sie dann auf eine beliebige Integration in der Liste und befolgen Sie die Anweisungen auf dem Bildschirm. Dadurch wird jeder, der Ihr Anmeldeformular ausfüllt, automatisch zu Ihrer E-Mail-Liste hinzugefügt.
Schritt 5. Aktivieren Sie Ihr benutzerdefiniertes WordPress-Theme
Der letzte Schritt beim Erstellen eines benutzerdefinierten WordPress-Themes mit SeedProd besteht darin, das Theme auf Ihrer Website live zu schalten. Finden Sie dazu die Aktivieren Sie das SeedProd-Theme Klicken Sie auf die Überschrift in der oberen rechten Ecke und stellen Sie den Schalter auf „Ein“.
Ihr neues Theme überschreibt Ihr Standard-Theme, sodass Sie Ihre Anpassungen im Frontend Ihrer Website sehen können.
Das ist es! Ihr neues benutzerdefiniertes WordPress-Theme ist live auf Ihrer Website. Mal sehen, wie es aussieht.
Hier ist die Homepage mit Ihrer neuen Kopf- und Fußzeile:
Hier ist die Blog-Seite mit Ihrer benutzerdefinierten WordPress-Seitenleiste:
Häufig gestellte Fragen
Kann ich mit SeedProd zwischen verschiedenen Themes wechseln?
Ja, Sie können mit SeedProd problemlos zwischen verschiedenen Themen wechseln. Sie können mehrere Themes erstellen, speichern und bei Bedarf aktivieren, ohne dass Anpassungen verloren gehen.
Ist SeedProd mit WooCommerce kompatibel?
Ja, SeedProd ist mit WooCommerce kompatibel und ermöglicht Ihnen die Gestaltung benutzerdefinierter WooCommerce-Produktseiten, Shop-Seiten und anderer E-Commerce-Elemente.
Kann ich mit SeedProd benutzerdefinierte Schriftarten verwenden?
SeedProd ermöglicht Ihnen die Verwendung benutzerdefinierter Schriftarten durch die Integration mit Google Fonts, Adobe Fonts und anderen beliebten Schriftartenbibliotheken.
Wie exportiere ich mein mit SeedProd erstelltes benutzerdefiniertes Design?
Sie können Ihr WordPress-Theme mit der Import-/Exportfunktion von SeedProd als ZIP-Datei exportieren. Befolgen Sie diese Anleitung, um zu erfahren, wie Sie ein WordPress-Theme mit SeedProd exportieren.
Glückwunsch!
Sie wissen jetzt, wie Sie ein benutzerdefiniertes WordPress-Theme ohne Code erstellen.
Mit dem einfachen und leistungsstarken WordPress-Theme-Builder von SeedProd benötigen Sie weder technische Erfahrung noch WordPress-Entwickler noch ein riesiges Budget, um ein benutzerdefiniertes WordPress-Theme zu erstellen.
Die Leistung und Funktionalität liegt direkt in Ihren Händen, sobald Sie das Plugin installieren.
Also, worauf wartest Du?
Danke fürs Lesen. Bitte folgen Sie uns weiter YouTube, TwitterUnd Facebook für weitere hilfreiche Inhalte zum Wachstum Ihres Unternehmens.
