Seit seiner ursprünglichen Einführung im Jahr 2003 hat sich WordPress von einem einfachen Blogging-Tool zu einem leistungsstarken und beliebten Website-Builder und einem umfassenden CMS (Content Management System) entwickelt, das von etwa 38% der Websites im Web verwendet wird! Angesichts der Beliebtheit Ihrer Website müssen Sie ein WordPress-Design erstellen, das für Ihre Website einzigartig ist, wenn Sie sich von der Masse abheben möchten.
In Wirklichkeit ist es kein Wunder, dass WordPress es bisher geschafft hat und so populär geworden ist.
Die Flexibilität und die Funktionen, die es hostet, ermöglichen eine breite Verwendung für verschiedene Website-Typen. Außerdem ist WordPress ziemlich einfach zu bedienen, mit wenig bis gar keiner Erfahrung in der Codierung oder Webentwicklung.
Dies sind die Gründe für die Erfolgsgeschichte von WordPress und genau die Gründe dafür 40 Prozent Alle Websites im World Wide Web werden von dieser Software unterstützt.
WordPress verfügt über eine Reihe praktischer Funktionen, die die Webentwicklung und -programmierung erleichtern less kompliziert und für jeden zugänglicher.
Einführung in die Entwicklung von WordPress-Themes
Ein weiteres beliebtes Feature, das WordPress so beliebt macht, sind seine Themen. Das Thema ist einfach eine Sammlung von Stylesheets und Vorlagen, die definieren, wie eine WP-basierte Site aussehen und angezeigt wird.
Die Software bietet dem Benutzer eine Vielzahl unterschiedlicher Bearbeitungsoptionen, wenn es um Themen aus dem WP-Administrationsbereich geht.
Hunderte von WordPress-Themes sind völlig kostenlos oder mit vielen anderen zu einem vernünftigen Preis von einigen zehn Dollar.
Tatsächlich hostet WordPress.org eine riesige Datenbank mit Themen in ihrem Themenverzeichnis.
Andere Websites wie Themeforest bieten ebenfalls viele Premium-Themen von verschiedenen Entwicklern.
Jedes dieser Themen verfügt über ein anderes Layout, ein anderes Entwurfsmuster und andere Funktionen.
Es ist Sache des Benutzers, eine zu finden, die den Anforderungen seiner Website am besten entspricht. In den meisten Fällen werden Themen für bestimmte Branchen oder Berufe erstellt, sodass beispielsweise Restaurantbesitzer Themen mit Buchungsfunktionen leicht finden können.
Es gibt zwar viele großartige Themen, die Ihren Anforderungen entsprechen könnten, aber wenn Sie etwas Hervorragendes machen möchten, müssen Sie es so ziemlich selbst tun. Wenn Sie nicht programmieren können, eine gute Alternative Option wäre, sich für einen freiberuflichen Softwareentwickler zu entscheiden (Preise können abhängig von verschiedenen Faktoren variieren).
In diesem Artikel werden wir jedoch ALLE Schritte durchgehen, die zum Erstellen Ihres eigenen WordPress-Themas für Ihre WP-basierte Website erforderlich sind. Wir werden uns alle wichtigen Aspekte ansehen, um sicherzustellen, dass Sie das Beste bekommen, was WordPress zu bieten hat.
Der Einstieg in die Erstellung eines eigenen Themas als Anfänger scheint auf den ersten Blick eine Mammutaufgabe zu sein.
Das Erstellen eines benutzerdefinierten Themas von Grund auf ist in WP jedoch nicht allzu kompliziert. Sie müssen kein Webentwickler sein, wenn Sie die Grundlagen des Codierens mit PHP haben, können Sie leicht lernen, wie man ein WordPress-Theme erstellt.
Darüber hinaus kann das Erstellen eines eigenen Themas sehr lohnend sein, insbesondere wenn Sie das Endergebnis live auf Ihrer Website sehen.
Erstellen Sie Ihr erstes benutzerdefiniertes WordPress-Theme
Um mit dem Erstellen eines WordPress-Themas zu beginnen, benötigen Sie einige grundlegende Dinge:
- Eine WordPress-Website
- Ein guter Hosting-Plan
- Ein wenig Erfahrung mit Dingen wie lokalen Staging-Umgebungen
- Grundlegendes Verständnis von CSS- und PHP-Codierungssprachen
- Ein Starter-Thema
Grundlegendes zur WordPress-Vorlagenhierarchie
In WordPress sind Vorlagendateien (die Bausteine Ihres Themas) modular und wiederverwendbar.
Vorlagendateien sind für die Generierung der Seiten auf Ihrer WP-Site verantwortlich. Einige dieser Dateien werden auf fast allen Ihren Seiten verwendet, während andere nur unter bestimmten Umständen verwendet werden.
Schauen Sie sich das folgende Diagramm an – es erklärt, wie die Hierarchie der WordPress-Vorlagen organisiert ist.
Vorlagendateien bestimmen das allgemeine Erscheinungsbild des Inhalts auf der Website. Wenn Sie einen Header erstellen möchten, verwenden Sie a header.php Datei, oder wenn Sie einen Kommentarbereich hinzufügen möchten, verwenden Sie die comments.php Datei.
Um die Vorlagenhierarchie zu verstehen, sollten Sie wissen, dass WordPress eine sogenannte “Abfragezeichenfolge” verwendet, um zu entscheiden, welche Vorlage oder welcher Vorlagensatz zum Erstellen und Anzeigen einer bestimmten Seite verwendet werden soll.
Die Abfragezeichenfolge besteht aus Informationen, die im Link jedes Teils der Website gespeichert sind, den Sie ändern möchten. Einfacher ausgedrückt analysiert WordPress die Informationen und durchsucht die Vorlagenhierarchie, um eine Vorlagendatei zu finden, die mit den bereitgestellten Informationen in der Abfragezeichenfolge übereinstimmt.
Dies ist im Grunde ein Schema, bei dem WP jedes Mal, wenn Seiten geladen werden, nach passenden Vorlagendateien sucht.
Zum Beispiel, wenn Sie die folgende URL eingeben http://example.com/post/this-postWordPress findet die erforderlichen Vorlagendateien in der folgenden Reihenfolge:
- Dateien, die mit dem Slug übereinstimmen, in diesem Fall: dieser Beitrag.
- Dateien, die mit der Post-ID übereinstimmen.
- Eine generische Single-Post-Datei, wie single.php.
- Eine Archivdatei, in diesem Fall archive.php.
- Das index.php Datei.
Die letzte Datei (index.php) ist in jedem Thema erforderlich, da dies die Standardeinstellung (oder der Fallback) ist, wenn im Abgleich keine andere Datei gefunden werden kann. Unterstrichen (ein WP-Starter-Thema) hat die häufigsten Dateien. Diese in diesem Thema enthaltenen Dateien funktionieren sofort.
Sie können sie bearbeiten, wenn Sie experimentieren möchten oder benutzerdefinierte Funktionen auf Ihrer Site erstellen müssen.
Was ist ein WordPress Starter Theme?
Ein Starter-Theme ist eine grundlegende Grundlage für ein benutzerdefiniertes WordPress-Theme.
Sie können es als Grundlage verwenden, um Ihr eigenes einzigartiges Thema zum Laufen zu bringen. Mit einem Starter-Theme können Sie Ihr eigenes WordPress-Theme erstellen, ohne ein ganzes Theme von Grund auf neu entwerfen oder codieren zu müssen.
WordPress-Starter-Themes enthalten alle Dateien, wie in der obigen Hierarchie definiert.
Durch die Verwendung eines Starter-Themas erhalten Sie ein besseres Verständnis der Funktionsweise von WordPress, da es Ihnen die Grundlagen, die Struktur eines Themas und die Zusammenarbeit der verschiedenen Teile zeigt.
Ein benutzerdefiniertes WordPress-Thema kann auf eine Reihe verschiedener Website-Typen angewendet werden, von Präsentationen und Verzeichnissen bis hin zu Online-Shops gebaut mit WooCommerce, soziale Medien oder was auch immer Sie sonst noch für Ihre Website benötigen.
Wenn Sie sich für Starter-Themen (wie UnderStrap, Unterstriche und Knochen) entscheiden, können Sie ein WordPress-Thema erstellen, das die Möglichkeit bietet, verschiedene Optionen zu verwenden.
Die Verwendung von Unterstrichen ist möglicherweise die beste Wahl für Anfänger, da sie die wichtigsten Funktionen bietet. Es kommt auch von einem langjährigen und zuverlässigen Entwickler. Dies bedeutet, dass es eher kompatibel, sicher und zuverlässig ist und auf lange Sicht eine bessere Unterstützung bietet.
Warum sollten Sie ein Starter-Theme verwenden?
Wie oben erwähnt, ist ein Starter-Thema eine Grundlage, eine Blaupause, mit der Sie eine einzigartige Website erstellen können. Es ist bereits voll funktionsfähig, es fehlen jedoch noch die wichtigsten Merkmale, die eine benutzerfreundliche Website ausmachen.
Im Wesentlichen muss es noch gestaltet und richtig konfiguriert werden.
Trotzdem sind Starter-Themen ideal für diejenigen, die wenig oder keine Erfahrung mit WordPress oder der Webentwicklung im Allgemeinen haben. Es ist eine großartige Möglichkeit, sich mit dem Thema Themenerstellung vertraut zu machen und die Grundlagen von WP-basierten Websites zu erlernen.
Ein WordPress Starter-Theme spart Ihnen Zeit und erfordert wenig bis gar kein Hintergrundwissen in Codierung und den restlichen WordPress-Komplexitäten.
Sie können jahrelange harte Arbeit der Entwickler des Starter-Themas nutzen und diese Richtlinien verwenden, um ein besseres Verständnis für die Funktionsweise von WordPress und Theme-Design zu erhalten.
Beliebte Beispiele für Starter-Themen
- Unterstrichen – Ein zuverlässiges und bekanntes Starter-Thema, das Anfängern einen Vorsprung verschafft Themenentwicklung. Underscores ist ziemlich einfach und perfekt, um sofort loszulegen, wenn Sie über alle erforderlichen Tools verfügen. Das Thema eignet sich hervorragend zum Verständnis der Konzepte der Themenentwicklung. Bei Underscores geht es darum, ein neues Projekt zu starten, das eher als ein sich ständig weiterentwickelndes Toolkit angesehen werden sollte und less wie ein rahmen.
- Roots – Dieses Starter-Thema bietet Ihnen einen Ansatz, der sich mehr an Entwickler richtet, da sein Markup auf dem HTML5-Boilerplate basiert. Es unterstützt auch fortgeschrittenere Tools wie Bootstrap . Grunzen. Das Roots-Starter-Thema enthält auch einen Themen-Wrapper, mit dem Sie Ihren Prozess rationalisieren und das wiederholte Aufrufen derselben Vorlagenteile vermeiden können.
Roots verwendet auch CSS-Präprozessoren und -Unterstützungen LESS, eine abwärtskompatible Spracherweiterung für CSS, die den Prozess der Entwicklung Ihres Themas erheblich beschleunigen kann.
Trotzdem bietet Roots einen pragmatischeren Ansatz und erfordert vom Entwickler etwas mehr Know-how.
6 Grundlegende Schritte zum Entwickeln Ihres WordPress-Themes
Nachdem Sie die Grundlagen behandelt haben, können Sie endlich mit dem Erstellen eines WordPress-Themas beginnen.
Da sich dieser Artikel eher an Anfänger richtet, verwenden wir ein Starter-Thema. Sie können jedoch auch alles ohne Starter-Themen von Grund auf neu erstellen.
Wenn dies der Weg ist, den Sie einschlagen möchten, vergessen Sie nicht, dass Sie viel mehr Zeit benötigen und ein wenig tiefer in die Codierung und die Webentwicklung im Allgemeinen eintauchen müssen.
1. Einrichten der Entwicklungsumgebung
Ihr erster Schritt in diesem Prozess sollte die Erstellung einer Entwicklungsumgebung sein.
Dies ist im Grunde ein Server, den Sie auf Ihrem Computer installieren müssen, um lokale WP-Sites zu verwalten und zu entwickeln. Eine Entwicklungsumgebung ermöglicht es Ihnen, Ihre Website sicher zu entwickeln und bietet Ihnen mehrere Optionen zum Erstellen einer lokalen Umgebung.
Es ist recht schwierig viele Produkte gleichzeitig zu verwenden und auch hintereinander aufzutragen. Die Wirkstoffe können nicht alle gleichzeitig aufgenommen werden und die Haut ist schließlich überfordert. Die Folge könnten Hautrötungen und Unverträglichkeiten sein. DesktopServer ist einer der idealen Wege, die Sie gehen können. Es ist eine einfache Möglichkeit, eine lokale und schnelle Version von WP zu erhalten, die sowohl mit Windows als auch mit Mac kompatibel ist. Wählen Sie die kostenlose Version aus, registrieren Sie sich, laden Sie sie herunter und installieren Sie die Software.
Öffnen Sie nach der Installation das Programm und konfigurieren Sie Ihre lokale Umgebung.
Es ist ein ziemlich einfacher Vorgang und Sie sind in wenigen Minuten fertig. Nach dem Setup verfügen Sie über eine Website und eine Entwicklungsumgebung, die wie jede Live-WP-Website funktionieren und aussehen.
2. Laden Sie ein Starter-Theme herunter und installieren Sie es
Die grundlegendsten Starter-Themen (wie Unterstriche) sind für Anfänger leicht zu erlernen.
Im Gegensatz zu den meisten grundlegenden Themen ermöglicht der Unterstrich das Anpassen von Optionen über seine Erweiterte Optionen (wie Autor und Beschreibung) nach der Benennung Ihres Themas.
Sie können auch Syntactically Awesome StyleSheets oder hinzufügen SASS Dies ist eine CSS-Vorverarbeitungssprache, mit der Sie Funktionen wie Verschachtelung, mathematische Operationen, Verwendung von Variablen usw. einführen können.
Nachdem Sie Ihre Auswahl getroffen haben, müssen Sie nur noch auf Generieren klicken, um die ZIP-Datei mit Ihrem Starter-Design herunterzuladen.
Installieren Sie nun die Datei auf Ihrer lokalen Site. Wenn Sie alles richtig gemacht haben, können Sie jetzt eine einfache Basisversion Ihres benutzerdefinierten WordPress-Themas sehen.
Grundlegendes zu den WordPress-Grundprinzipien
Nachdem die Grundlagen eingerichtet sind, können Sie mit der Arbeit beginnen. Bevor Sie jedoch in den Anpassungsprozess eintauchen, müssen Sie sich mit den Grundprinzipien und Komponenten des Erstellens eines WordPress-Themas unter Verwendung der Grundprinzipien von WP vertraut machen.
Zunächst müssen Sie etwas darüber lernen Vorlagendateien, die Hauptbausteine eines Themas in WP.
Vorlagendateien bestimmen im Wesentlichen, wie Ihr Layout und Ihr Inhalt auf Ihrer Website angezeigt werden. Wenn Sie eine Kopfzeile erstellen möchten, sollten Sie die verwenden header.php Datei, während comments.php würde verwendet, um Kommentare anzuzeigen.
Wie oben erläutert, verwendet WP seine Vorlagenhierarchie, um zu bestimmen, welche Vorlagendatei ausgewählt wird, um den Inhalt auszuführen, den ein Benutzer anfordert / benötigt. Sie können mit diesen Dateien so arbeiten, wie sie sind. Da Sie jedoch hier sind, um ein WordPress-Design zu erstellen, besteht Ihre Hauptaufgabe darin, diese Dateien an Ihre Bedürfnisse anzupassen.
Wenn wir über WP-Kernprinzipien sprechen, sollten Sie auch das Konzept dahinter verstehen The Loop.
Dies ist der Code, den WP hauptsächlich zum Anzeigen Ihrer Inhalte verwendet. Er ist in allen Inhalten enthalten, in denen Vorlagendateien angezeigt werden, z index.php or Seitenleiste.php. Es ist ein ziemlich komplexes Thema, aber glücklicherweise wird es mit dem Starter-Thema (wenn Sie Unterstriche verwenden) gebündelt, was bedeutet, dass Ihr Prozess einfacher sein sollte.
Sie müssen das Konzept verstehen und damit arbeiten. Schauen Sie sich einige der Beispiele im obigen Link an, um besser zu verstehen, wie die Schleife verwendet wird und wie Sie den Code an Ihre Bedürfnisse anpassen können.
3. Erstellen Sie Themendetails
WordPress Themes sind keine rein kosmetischen Komponenten.
Es gibt viele verschiedene Funktionen, die Sie Ihrer Site hinzufügen können, um die Funktionalität zu verbessern. Wir werden diskutieren, wie Sie einige grundlegende Funktionen implementieren, um Ihre Website aufzupeppen.
Hinzufügen Haken Sie können bei Bedarf verschiedene PHP-Aktionen ausführen, andere Informationen anzeigen oder Styling-Daten einfügen.
Hooks sind Codefragmente, die in Vorlagendateien eingefügt werden. Die meisten von ihnen sind direkt als Teil des Kerns von WordPress implementiert, aber einige Hooks sind auch beim Anpassen von Themen sehr nützlich.
Hier ist eine Liste der häufigsten Hooks und ihrer Rollen:
- wp_head () – wird dem hinzugefügt Element in header.php. Es aktiviert Skripte, Stile und andere Informationen, die ausgeführt werden, wenn die Site geladen wird.
- wp_footer () – normalerweise zu footer.php vor dem hinzugefügt Tag, das am häufigsten zum Einfügen von Code für Google Analytics oder anderen Codes verwendet wird, der auf jeder Seite angezeigt werden muss, aber zu schwer ist, um in den Header geladen zu werden.
- wp_meta () – Wird normalerweise unter sidebar.php gefunden und wird am häufigsten verwendet, um zusätzliche Skripte einzuschließen (z. B. eine Tag-Cloud).
- comment_form () – Wird direkt vor dem Schließen der Datei zu comment.php hinzugefügt Tag, um Kommentare anzuzeigen.
Wenn Sie Unterstriche verwenden, sind diese Hooks bereits im Thema enthalten. Es ist jedoch immer eine gute Idee, mehr über sie zu erfahren und alle verfügbaren Hooks anzuzeigen. Mit Hooks können Sie die Funktionen Ihres benutzerdefinierten Themas erweitern.
4. Hinzufügen von Stilen mithilfe von CSS
Cascading Style Sheets oder CSS definiert das Erscheinungsbild des Inhalts auf der von Ihnen erstellten Website.
Durch die Verwendung der style.css Datei, die bereits in Ihrem Thema enthalten ist, können Sie jeden der hier gefundenen Stile bearbeiten und speichern, um zu sehen, wie sich Ihr Design ändert. Standardmäßig enthält es nur das grundlegende Styling.
CSS wird verwendet, um die Präsentation und Trennung der Inhalte auf Ihrer Website zu ermöglichen, vom Layout über Schriftarten bis hin zu Inhalten. CSS kann dazu beitragen, den Inhalt Ihrer Website zugänglicher und flexibler zu machen.
Eine eingehende Beschreibung der Verwendung des Stylings mit WordPress-Themen kann ziemlich haarig werden und geht über den Rahmen dieses Artikels hinaus. Wenn Sie sich nicht sicher sind, sollten Sie mehr über CSS erfahren, bevor Sie fortfahren.
5. Einschließlich JavaScript
Wenn Sie Ihrem Thema bei Bedarf JavaScript-Dateien hinzufügen, können Sie die interaktiven Funktionen und Fähigkeiten verbessern und eine besser funktionierende Website erstellen. Dies ist besonders praktisch, wenn Sie Plugins von Drittanbietern in Ihre Websites integrieren möchten, z. B. bestimmte Video- oder Audioplayer, z. B. Schieberegler, Popup-Unterstützung und andere Bibliotheken von Drittanbietern, um erweiterte Funktionen zu erstellen.
Um Javascript mit Ihrer benutzerdefinierten Site zu verwenden, können Sie mithilfe der folgenden Syntax einen Aufruf erstellen, um die Skriptdatei zum Thema hinzuzufügen.
Alternativ können Sie das Skript direkt in Ihrem verwenden header.php Vorlagendatei zwischen den Meta-Tags und dem Stylesheet-Link, wie Sie es bei einer HTML-Seite tun würden. Wenn Sie es in der Header-Datei verwenden, sollte es ungefähr so aussehen:
Wenn Sie JS direkt verwenden möchten, fügen Sie den Aufruf für die Dateien direkt wie unten beschrieben hinzu. Wenn Sie die Funktion “An Freund senden” festlegen möchten, können Sie sie unter den Post-Titel setzen. Das würde ungefähr so aussehen:
” rel=”bookmark”>