Good Mood

Dies wird ein lustiges Tutorial sein, in dem wir untersuchen, wie Sie Ihr eigenes WordPress-Theme von Grund auf neu erstellen. Tatsächlich beginnen wir mit absolut null Dateien und null Codezeilen. Die einzige Möglichkeit zu verstehen, wie WordPress-Themes funktionieren, besteht darin, wirklich auf einem niedrigen Niveau einzuspringen und jede einzelne Sache selbst zu tun. Ja, es ist verlockend, dies zu vermeiden, da Sie WordPress dazu bringen können, alles für Sie zu tun, ohne den Code zu verstehen, der es antreibt., Dies könnte PHP, JavaScript, CSS oder sogar das grundlegende HTML sein. Am Ende dieses Schritt-für-Schritt – WordPress-Theme-Tutorials werden Sie verstehen, wie alles zusammenpasst und wie Sie WordPress mühelos nach Ihrem Willen biegen können.

Wenn Sie eine WordPress-Website betreiben, stehen Ihnen so viele kostenlose Themes zur Verfügung. Über die kostenlosen Themes hinaus können Sie auch eine Prämie für professionell erstellte WordPress-Themes zahlen, die großartig aussehen und fantastische Funktionen bieten. Warum also lernen, wie Sie Ihr eigenes Thema von Grund auf neu erstellen?, Die Antwort ist, dass egal welches Thema Sie verwenden, Es wird eine Zeit kommen, in der Sie einfache Änderungen an Ihrer Website vornehmen möchten. Einige dieser Änderungen können möglicherweise von einem einfachen Plugin oder Widget übernommen werden. Oft ist es jedoch sinnvoller zu verstehen, was Sie ändern möchten, wie Sie es ändern können, und zu vermeiden, dass Ihre WordPress-Website in ein Durcheinander von Plugins und Add-Ons verwandelt wird, die unhandlich werden. Mit nur ein wenig Grundlagenwissen sind Sie zuversichtlich, Ihr Thema zu ändern oder einfach Ihr eigenes von Grund auf neu zu erstellen., Sie wissen, welche Datei bearbeitet werden soll und welchen Code Sie hinzufügen oder ändern müssen, um das gewünschte Ergebnis zu erzielen.

Schritt 1: Erstellen Sie einen Ordner zum Speichern Ihrer Designdateien.

Wenn wir Themen erstellen möchten, müssen wir wissen, wo die Dateien, aus denen ein WordPress-Theme besteht, in einer WordPress-Installation gespeichert sind. Das ist ziemlich einfach. Wir wissen, dass eine WordPress-Installation normalerweise ein Stammverzeichnis mit dem Namen wordpress. So sieht unser Stammverzeichnis in PHP Storm aus.,

Dieses Verzeichnis enthält die folgenden Dateien und Ordner:

Dateien

Ordner

• wp-admin
• wp-content
• wp-includes

Der Ordner, an dem wir derzeit am meisten interessiert sind, ist der Ordner wp-content. Im Ordner wp-content befindet sich ein Ordner mit dem Namen themes. Weißt du, wofür dieser Ordner ist? Ja, das stimmt! Es ist der Ordner, der ein oder mehrere Themen enthält, die Sie mit Ihrer WordPress-Website verwenden möchten., In diesem Themenordner finden wir drei zusätzliche Ordner mit den Ordnern twentyfifteen, twentysixteen und twentyseventeen. Diese Ordner enthalten die drei Themen, mit denen WordPress standardmäßig ausgeliefert wird. Beachten Sie unten, dass es auch einen Ordner mit dem Namen customtheme. Gehen Sie voran und erstellen Sie diesen Ordner auch in Ihrer Installation, da wir hier unser WordPress-Theme von Grund auf neu erstellen werden.

Schritt 2: Erstellen Sie Stil.css und index.php in Ihrem benutzerdefinierten Themenordner

Wir wissen jetzt, wo sich WordPress-Themendateien im Dateisystem befinden., Wir haben auch einen neuen Ordner mit dem Namen customtheme in unserem Themenordner erstellt. Wir werden jetzt zwei leere Dateien in diesem Verzeichnis erstellen. Heißt index.php und der andere heißt style.CSS.

Lassen Sie uns diese Dateien jetzt mit dem Minimum füllen, das wir brauchen, um ein neues Thema in WordPress in Gang zu bringen.

Stil.css

WordPress liest tatsächlich die Kommentare, die Sie im Stil platzieren.css-Datei. Hier geben Sie spezifische Informationen zu dem Thema an, das Sie erstellen.

Der Stil.,css ist eine Stylesheet-Datei (CSS), die für jedes WordPress-Theme erforderlich ist. Es steuert die Präsentation (visuelles Design und Layout) der Webseiten.

In unserem Snippet weisen wir hier einfach einen Themennamen, den Autor, den Autor-URI und die Versionsnummer unseres Themas zu.,

index.,php

In dieser Datei möchten wir nur etwas auf dem Bildschirm ausgeben, um zu beweisen, dass unser benutzerdefiniertes Design funktioniert.

Tolle Arbeit! Ob Sie es glauben oder nicht, Sie haben Ihr erstes WordPress-Theme erstellt.,

Schritt 3: Aktivieren Sie Ihr Thema über das WordPress-Dashboard

An dieser Stelle können wir unser WordPress-Dashboard besuchen und zum Erscheinungsbild navigieren->Themes und siehe da, wir sehen das neue Thema, das wir erstellt haben.

Wir können auf“ Themendetails “ klicken, um einen Drilldown zu unserem benutzerdefinierten Thema durchzuführen und festzustellen, dass die Informationen, die wir in den Stil eingegeben haben.css-Datei hat funktioniert. Wir können sehen, dass sie einen Namen von Customtheme mit Version 1.0 vom Autor Vegibit und einen Link zu dem von uns bereitgestellten URI haben. Sehr cool.,

Und nun der moment der Wahrheit! Klicken Sie im neuen Customtheme auf „Aktivieren“ und besuchen Sie die Site. Es wird keine Webby Awards gewinnen, aber wir haben einen guten Start in ein neues benutzerdefiniertes Thema!

Schritt 4: Fügen Sie Code zur Ausgabe des Beitragstitels und des Beitragstexts hinzu

Wir haben uns die Freiheit genommen, einige Beispielbeiträge in der Datenbank zu füllen, damit wir während dieses Tutorials mit diesen Daten arbeiten können. Im Moment ist unser Thema nur ein benutzerdefiniertes Thema!, auf die Seite, wenn wir unsere Website besuchen, egal wie viele Beiträge in der Datenbank sind. Gehen wir nun zum Abrufen einiger Daten aus der Datenbank und zur Ausgabe auf die Seite. Insbesondere möchten wir den Post-Titel und den Post-Inhalt aller Posts abrufen und auf der Homepage anzeigen. Lass uns das jetzt versuchen. Lassen Sie uns zuerst sehen, was wir für Beiträge im WordPress-Dashboard haben.

Die WordPress-Schleife nutzen

Jetzt können wir ein wenig über die WordPress-Schleife sprechen. Die WordPress-Schleife ist wirklich die Engine, die WordPress zum Laufen bringt., Über diese Schleife suchen Theme-Entwickler nach Posts und zeigen sie nach Bedarf auf der Seite an. Wenn folgt das format wie folgt. Wenn die Datenbank Beiträge enthält, durchlaufen wir sie, solange noch Beiträge vorhanden sind, andernfalls teilen wir dem Benutzer mit, dass keine Beiträge vorhanden sind. Es sieht im PHP-Code so aus.,

Beachten Sie, dass die Schleife zwei Funktionen in ihrer grundlegendsten Form verwendet. Diese sind have_posts() und the_post(). Die have_posts () Funktion macht nur eine Sache. Es sagt Ihnen, ob es irgendwelche Beiträge in der Datenbank gibt, die durchlaufen werden sollen., Diese Funktion gibt entweder true oder false und das ist es. Wenn true zurückgegeben wird, sind Beiträge zum Durchlaufen verfügbar. Wenn false zurückgegeben wird, müssen keine Posts durchlaufen werden. Die andere Funktion the_post () gibt nichts zurück. Es ist Aufgabe von WordPress, Beiträge auszugeben. Insbesondere ruft es den nächsten Beitrag ab, richtet den Beitrag ein und setzt die Eigenschaft in_the_loop auf true., Bisher gibt unsere Seite immer noch keine Informationen zu unseren Blog-Posts aus, aber wir können diese jetzt in unserem Index aktualisieren.php-Datei.

Ok cool. Wir haben jetzt zwei zusätzliche WordPress-Funktionen verwendet, the_title () und the_content (). Meistens werden diese Funktionen innerhalb der Schleife verwendet, und sie rufen den Titel und den Inhalt jedes Beitrags ab, während die Schleife über jeden in der Datenbank iteriert. Wenn die Schleife ausgeführt wird, wird sie auf den ersten Beitrag stoßen., Zu diesem Zeitpunkt gibt die funktion_title() den Titel des Beitrags auf der Seite aus und the_content() gibt den Hauptteil dieses Beitrags auf der Seite aus. In der nächsten Schleife holen diese Funktionen erneut den nächsten Titel und Inhalt ab und geben sie auf der Seite aus. Mit diesen sollten wir jetzt einige Informationen über unsere Beiträge sehen, die auf den Bildschirm gesendet werden. Lass es uns versuchen! Wir besuchen http://wordpresstutorial.dev und sehen, dass es funktioniert!,

Schritt 5: Fügen Sie einen Link zu jedem Beitrag hinzu

Was ist mit einem Link zu jedem einzelnen Beitrag, damit wir einen Beitrag für sich selbst und nicht nur als Teil der Homepage anzeigen können. Wir können das ganz einfach tun, wieder mit speziellen Funktionen, die WordPress bietet. Für diese Aufgabe können wir die Funktion the_permalik() verwenden. Wir können unseren Code folgendermaßen aktualisieren:

Jetzt können wir auf jeden einzelnen Beitragstitel klicken und zu einer Seite navigieren, die nur diesen einen Beitrag enthält. Sehr cool!,

Schritt 6: Fügen Sie dem benutzerdefinierten Thema eine Kopf-und Fußzeile hinzu

Der Titel und der Post-Inhalt sind von zentraler Bedeutung, um ein gutes Thema zu erstellen. Fast genauso wichtig ist es, einen Kopf-und Fußzeilenbereich Ihres Themas zu haben. Diese Abschnitte enthalten den Inhalt, der immer auf allen Seiten der Website sichtbar ist. Diese Abschnitte befinden sich über und unter dem Post-Inhalt. Um dies zu tun, haben Sie es erraten, werden wir spezielle Funktionen von WordPress nutzen, um die Kopfzeile und die Fußzeile zu erhalten. Sehen Sie schon ein Muster, das sich zu entwickeln beginnt?, Fast alles, was Sie als Theme-Entwickler in WordPress tun können, wurde bereits für Sie über diese benutzerdefinierten Funktionen erledigt. Sie werden also feststellen, dass es sich lohnt, diese häufig verwendeten Funktionen in der WordPress-Theme-Entwicklung auswendig zu lernen. Lassen Sie uns jetzt die Funktionen get_header() und get_footer() zu unserer Themendatei hinzufügen.

Nun würde Sie sich das an?! Wir können sehen, dass unser benutzerdefiniertes Design jetzt einen Kopf-und einen Fußzeilenbereich hat., In der Kopfzeile ist der Name und der Slogan der Website, während in der Fußzeile sehen wir den vertrauten Text, WordPress Tutorial wird stolz von WordPress angetrieben. Dies sind die Standardoptionen für Kopf-und Fußzeilen bei Verwendung dieser Funktionen. Was ist, wenn wir eine benutzerdefinierte Kopf-und Fußzeile haben möchten? Kommt gleich hoch!

Von 2 Themendateien zu 4

Bisher haben wir in diesem Tutorial zwei Dateien, die sich in unserem Customtheme-Ordner befinden (der sich selbst im Themenordner befindet). Diese Dateien sind Stil.css und index.PHP. An diesem Punkt müssen wir weitere Dateien hinzufügen, um weiterzukommen., Erstellen Sie zwei neue Dateien im Ordner customtheme. Diese Dateien werden bequem Header genannt.php-und Fußzeile.PHP.

Diese Dateien überschreiben nun die standardmäßigen Kopf-und Fußzeilenlayouts, die standardmäßig bereitgestellt werden, wenn Sie entweder die Funktionen get_header() oder get_footer() aufrufen. Wenn wir unsere Website aktualisieren, sieht es tatsächlich so aus, als wären Kopf-und Fußzeile verschwunden. Dies liegt daran, dass wir diesen Dateien noch kein Markup hinzugefügt haben. Nur für Grins, richten Sie die Dateien so ein, um dies zu testen.

Kopfzeile.,php

footer.,php

Working with header.,php

Unser Beispiel oben hat großartig funktioniert und es zeigt uns, wie diese Datei auf der grundlegendsten Ebene funktioniert. Header.die PHP-Datei ist jedoch ziemlich wichtig, also lassen Sie uns die Details nicht zu schnell beschönigen! Hier fügen Sie Code ein, auf den alle Seiten Ihrer Website auf die eine oder andere Weise zugreifen müssen. Zunächst haben alle HTML-Seiten einen doctype. Sie würden das in dieser Datei angeben. Darüber hinaus haben alle Seiten ein öffnendes HTML-Tag, einen Head-Abschnitt und ein öffnendes Body-Tag. All dies kann in die Kopfzeile gehen.php-Datei., Lassen Sie uns schnell einige dieser Dinge hinzufügen, die alle Webseiten nutzen würden. Wir werden auch hier einige neue WordPress-Funktionen nutzen. Dies sind language_attributes (), bloginfo () und body_class ().

Kopfzeile.php

Wenn wir die Seite neu laden und dann die Quelle der Seite in unserem Browser anzeigen, können wir eine Vorstellung davon bekommen, was diese Funktionen tun. Wir heben die Zeilen hervor, die Ausgabe haben, die von diesen Funktionen unten kam:

Auch hier können wir die sehr liberale Verwendung von WordPress-Funktionen sehen, wenn Sie Ihre eigenen Themen in WordPress entwickeln., Tatsächlich haben wir noch keinen benutzerdefinierten Code geschrieben. Wir lernen einfach, was die verschiedenen WordPress-Funktionen uns bieten können, und setzen sie dann in unser benutzerdefiniertes Thema ein.

Einschließlich wp_head ()

wp_head () ist eine Art spezielle Funktion, wenn Sie mit WordPress-Themes arbeiten. Es ist nicht ganz so einfach wie alle anderen, die wir uns bisher angesehen haben. Der Zweck dieser Funktion besteht darin, die Ausgabe im Abschnitt <head> Ihres Headers abzuschließen.php-Datei., Tatsächlich soll es kurz vor dem schließenden </head> Tag gehen. Dies wird wichtig, wenn Sie verschiedene Plugins zu Ihrer Website hinzufügen. Es druckt Skripte oder Daten im Head-Tag am Frontend. Es empfiehlt sich, wp_head() immer in Ihre Themes aufzunehmen, da viele andere Plugins auf diesem Hook angewiesen sind, um Stile, Skripte oder Metaelemente in den Bereich <head> der Site hinzuzufügen. Wir werden es hier als solches hinzufügen:

Header.php

Fußzeile vervollständigen.,php

Wir haben die Grundlagen dessen, was wir in der Kopfzeile benötigen, fertig hinzugefügt.php-Datei. Lassen Sie uns nun die Fußzeile abrunden.php-Datei. Das sind ein paar Dinge, die wir tun müssen. Erinnern Sie sich daran in unserem Header.php-Datei Wir haben öffnende HTML – und Body-Tags. Diese müssen irgendwann geschlossen werden. Fußzeile.php-Datei ist ein perfekter Ort, das zu tun. Daher fügen wir zusätzlich zu einem Aufruf der Funktion wp_footer() die Tags </html> und </body> hinzu.
Fußzeile.,php

Ändern der Site-Informationen im WordPress-Dashboard

Sie fragen sich vielleicht, warum wir all diese ausgefallenen Funktionen nutzen mussten, um unser Thema aufzubauen. Wenn wir beispielsweise den Namen und den Slogan unserer Website auflisten wollten, haben wir die Funktion bloginfo() verwendet, die Parameter für Name und Beschreibung übergibt., Der Grund dafür ist, dass Sie diese Werte im Allgemeinen niemals fest auf Ihrer Website codieren möchten. Dies sind Informationen, die sich ändern könnten. Darüber hinaus, wenn Sie Ihr Thema für die Öffentlichkeit zugänglich machen, werden sie ihren eigenen Namen und Slogan für ihre Website haben. Sie sollten in der Lage sein, einfach das Admin-Dashboard in WordPress zu besuchen und ihre allgemeinen Einstellungen zu aktualisieren, damit diese Daten automatisch ausgefüllt werden.

Erstellen des Site-Titels Link zur Homepage

Die meisten Themen bieten die Möglichkeit, auf den Titeltext der Website zu klicken und den Benutzer auf die Homepage der Website zu leiten., Auf diese Weise kann der Benutzer, egal wo er sich auf der Website befindet, immer auf diesen Titeltext klicken und direkt zur Hauptseite der Website zurückkehren. Fügen wir diesen Link jetzt im Header hinzu.PHP.

Schritt 7: Fügen Sie eine Funktion hinzu.php-Datei zu Ihrem Thema

An dieser Stelle haben wir vier Dateien in unserem benutzerdefinierten Thema. Diese sind index.php, Stil.css-header.php-und Fußzeile.PHP. Wahrscheinlich ist die nächste wichtigste Datei, die wir haben müssen, sind die Funktionen.php-Datei.

Die Funktionen.php-Datei in WordPress macht viele Dinge für Ihr Thema. Es ist die Datei, in der Sie Code platzieren, um das Standardverhalten von WordPress zu ändern., Sie können fast an die Funktionen denken.php als eine Form eines Plugins für WordPress mit ein paar wichtigen Punkten zu erinnern:

• Erfordert keine eindeutige Header-Text
• In dem Ordner gespeichert, die Ihre Theme-Dateien hält
• Führt nur, wenn in der aktuell aktivierten Theme-Verzeichnis
• Gilt nur für das aktuelle Thema
• aufrufen können PHP-Funktionen, WordPress-Funktionen oder benutzerdefinierte Funktionen

Eine Sache, die wir dringend brauchen in unserem Thema ist einige bessere Styling! Lassen Sie uns eine Funktion in unseren Funktionen erstellen.php-Datei, um den Stil.css-Datei in unser Thema., Hier ist, wie wir dieses Ziel erreichen können.

Dieser Code enthält oder aktiviert das Stylesheet unseres benutzerdefinierten Designs. Jetzt fragen Sie sich vielleicht, warum wir eine benutzerdefinierte Funktion verwenden, wenn es so aussieht, als könnten wir genauso einfach manuell auf das Stylesheet selbst in der Kopfzeile verlinken.php-Datei. Nun, das kommt darauf an, ein wenig mehr Arbeit im Voraus für eine größere Rendite auf Ihre Bemühungen später zu tun. Wenn Themen komplexer werden und mehr Assets hinzugefügt werden, werden Sie glücklich sein, diese eine Funktion zu haben, die das ganze schwere Heben für Sie bewältigen kann.,

Jetzt ist es Zeit, macht die Dinge ein wenig schöner aussehen. Zuerst fügen wir eine Verpackung <> mit der Klasse container. Die Öffnung <div> befindet sich im Header.php, während das Schließen <div> in der Fußzeile sein wird.PHP. Wir werden auch die Post-Ausgabe in Index wickeln.php mit einem <Artikel> – tag mit einer Klasse der post. Dies gibt uns Klassen, um in unserem Stil zu zielen.,CSS-Datei, damit wir unter anderem die Seitenbreite festlegen können. Wir werden auch ein besseres Styling zum Stil hinzufügen.css in diesem Schritt.

Schritt 8: Fügen Sie Ihrem Thema Einen Stil hinzu

Header.php
das Hinzufügen einer öffnung <> in der Kopfzeile.php-Datei.

Fußzeile.php
Hinzufügen eines schließenden </div> in die Fußzeile.php-Datei.

index.php
Verpackung werden die post-Ausgabe mit einem <Artikel> – tag

Stil.,css
Schließlich fügen wir einige verschiedene CSS-Stil Verbesserungen, um das Thema ein bisschen schöner aussehen.

Wenn wir unsere Testwebsite jetzt im Browser besuchen, können wir sehen, dass das WordPress-Theme, das wir Schritt für Schritt in diesem Tutorial entwickelt haben, ziemlich gut aussieht!

WordPress Theme Development Tutorial Schritt für Schritt Zusammenfassung

Lassen Sie uns alles überprüfen, was wir in diesem grundlegenden Schritt für Schritt WordPress Theme Tutorial für Anfänger gelernt haben., Wir haben gelernt, wie wir unser erstes benutzerdefiniertes Thema in WordPress erstellen, indem wir unseren eigenen Ordner neben dem Themenordner unserer WordPress-Installation erstellen. In diesem Ordner haben wir verschiedene Dateien hinzugefügt, die verschiedenen Abschnitten Ihrer Website entsprechen. In unserem Tutorial haben wir mit den nackten Minimums begonnen, die Sie in einem WordPress-Theme haben sollten. In Zukunft würden Sie diesem Ordner viel mehr Dateien hinzufügen als das, was wir behandelt haben. Lassen Sie uns jede Datei überprüfen, die wir in diesem Tutorial erstellt haben, und was sie für uns getan haben.

• Stil.,css In dieser Datei fügen Sie einige CSS-Kommentare hinzu, damit WordPress einige Informationen zu Ihrem benutzerdefinierten Thema kennt. Es enthält auch das benutzerdefinierte CSS-Styling, das Sie auf Ihr Thema anwenden.
• „index“.php Diese Datei steuert die HTML-und allgemeine Ausgabe Ihres Themas. Es ist die Hauptdatei für die Ausgabe von Daten auf Ihrer Homepage verwendet.
• Kopfzeile.,mit php können Sie einen Bereich angeben, in dem wichtige Informationen zu Ihrer Website gespeichert sind <head> Bereich sowie einschließlich Öffnen <html>, <body>, und, <div class=“container“> tags.
• Fußzeile.php Die Fußzeile schließt alle öffnenden Tags, die Sie im Header-Bereich angegeben haben, und gibt Ihnen einen Platz zum Aufrufen der Funktion wp_footer ().
• Funktionen.,mit PHP können Sie Funktionen aufrufen, sowohl PHP als auch integriertes WordPress, und Ihre eigenen Funktionen definieren, um das Standardverhalten von WordPress

zu ändern, damit Sie es haben! Wir konnten ein voll funktionsfähiges benutzerdefiniertes WordPress-Theme mit nur 5 Dateien erstellen. Dies gibt uns das Grundwissen, um fortgeschrittenere WordPress-Themes und-Funktionen zu erstellen. Great Job!