Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung

Das eigene WordPress-Theme erstellen – #1: Vorbesprechung und Vorbereitung

    Das eigene WordPress-Theme erstellen – #1: Vorbesprechung und Vorbereitung

In dieser Artikelreihe geht es darum, ein WordPress-Theme zu erstellen – von Grund auf. Im ersten Teil treffen wir die notwendigen Vorbereitungen und besprechen kurz das Theme.

Einige von euch werden sich vielleicht noch daran erinnern, dass ich vor etwa einem Jahr schon ein paar Stücke dieser Reihe begonnen habe. Aus verschiedenen Gründen ist das nicht zuende geführt worden: Zum einen bin ich mit der Programmierung nebenbei nicht hinterher gekommen und zum anderen habe ich nach dem dritten Teil den Code des Themes noch mal komplett überarbeitet. Das soll dieses Mal nicht passieren und deshalb habe ich erst in Ruhe das Theme fertiggestellt. Jetzt kann es also noch mal losgehen.

Bevor wir mit den Vorbereitungen beginnen, könnt ihr euch hier eine Demo des fertigen Themes anschauen: Da werden wir am Ende der Reihe landen.

Besonderheiten des Themes

Ansicht der alternativen Startseite des WordPress-Themes. (Screenshot: Eigene Installation)
Ansicht der alternativen Startseite des WordPress-Themes. (Screenshot: Eigene Installation)

Das Theme richtet sich an Fotografen und bietet zwei Seiten-Templates: Das eine ist für eine alternative Startseite, auf der die neuesten Galerien aus den verschiedenen Seitengalerien angezeigt werden. Das andere Template zeigt alle Galerien der Seite und bietet sich für eine Art Portfolio-Seite an.

Des Weiteren gibt es noch zwei eigene Widgets, um die neuesten Galerien anzuzeigen und bestimmte Galerien hervorzuheben. Auf der Einzelseite einer Galerie werden unterhalb des Beitrags Galerien angezeigt, die in derselben Kategorie veröffentlicht wurden. Anpassen lässt sich das alles über den Customizer.

Vorbereitungen für die Erstellung des eigenen WordPress-Themes

Bevor wir beginnen, müssen wir ein paar Vorbereitungen treffen. Zuerst müssen wir uns natürlich WordPress installieren. Wie das funktioniert, könnt ihr in diesem Beitrag nachlesen.

Nachdem wir jetzt eine WordPress-Installation vorliegen haben, können wir uns schnell ein paar Beiträge, Seiten und andere Inhalte anlegen, indem wir die Testdaten von WP Test importieren. Geht dafür im WordPress-Backend auf „Werkzeuge“ > „Import“ und wählt dort den Punkt „WordPress“ in der Tabelle aus. Anschließend werdet ihr aufgefordert, das entsprechende Plugin zu installieren und könnt danach die XML-Datei importieren, die sich in dem ZIP-Archiv befindet.

Um das Theme während der Entstehung immer mal wieder auf Fehler zu überprüfen, installieren wir uns jetzt noch das Plugin „Theme Check“. Alle anderen Plugins solltet ihr deaktivieren, wenn es sich nicht um weitere Entwickler-Plugins handelt. In eurer wp-config.php-Datei setzen wir jetzt noch die Konstante WP_DEBUG auf true (die entsprechende Zeile sieht dann so aus:

define('WP_DEBUG', true);

Im nächsten Teil kümmern wir uns dann um die style.css-Datei.

Die weiteren Teile unserer WordPress-Reihe:

Finde einen Job, den du liebst zum Thema TYPO3, PHP

Alle Jobs zum Thema TYPO3, PHP
17 Reaktionen
davisbrown562
davisbrown562

Ich erstelle meine WordPress-Theme mit Theme-Generator "TemplateToaster"

Antworten
Nabil
Nabil

Gefällt mir sehr! Wird auch eine mobile Version für Smartphones und Tablets beachtet? Ich denke, das ist unverzichtbar.

Antworten
72f2d461d0bfb014
72f2d461d0bfb014

Hallo,

tolle Idee! Ich habe zwei Fragen:
Ich bin zwar inzwischen recht erfahren, was den Seitenaufbau mit Wordpress betrifft. In Sachen Programmierung habe ich aber leider noch sehr wenig Erfahrung. Ist die Serie auch für Anfänger (mit Grundkenntnissen) geeignet?
Wann kommt denn der zweite Teil, bzw. in welchen Abständen ist denn die weitere Veröffentlichung geplant?

Ich freue mich schon auf die nächsten Teile und hoffe, dass ich viel lernen kann :)

Antworten
Florian Brinkmann

Hi,
ich hoffe doch, dass ich die Reihe so hinbekomme, dass sie auch für Anfänger geeignet ist. Ich gehe auf alle genutzten WordPress-Funktionen ein und versuche sie kurz zu erklären.

An dem nächsten Teil sitze ich bereits und werde versuchen, ihn bis Ende dieser Woche fertig zu bekommen.

Antworten
Aline
Aline

Super Idee, ich bin gespannt. Mich würde interessieren - falls es nicht sowieso geplant ist - und ich fände es ganz hilfreich einen kurzen Einblick in den Aufbau von WP überhaupt zu bekommen, d.h. wie hängen die Dateien miteinander zusammen o.ä. Das ist ziemlich basic, aber vielleicht ist dafür ja irgendwo noch Platz?

Antworten
Stefan
Stefan

Ist vielleicht auch eher was für das Fazit, aber mich würde mal interessieren wie es nach der Entwicklung von einem Theme weitergeht. Damit mein ich was muss ich beachten wenn neue WordPress Versionen raus kommen, muss ich dann jedes mal nachschauen ob mein Code noch funktioniert und wenn ja wo muss ich da schauen oder reicht es ein plugin zu installieren das mir das sagt?

Schöne Artikelreihe

Antworten
Tanja Berger
Tanja Berger

Mich unteressiert, wie eine sinnvolle .htaccess-Datei aussieht. Es gibt gute Bücher zum Thema WP-Theme. Wie eine .htaccess-datei aufgebaut wird, ist dort nicht beschrieben. Leider.

Antworten
Nio.t
Nio.t

Ich fände es gut, wenn weniger auf CSS & JS eingegangen wird (wie z.B. die Frage mit dem Menü... btw.: position:fixed), sondern auf die Wordpress-spezifischen Möglichkeiten eingegangen wird.

-> z.B. Möglichkeiten zum nachträglichen ändern von der Hintergrund- und Schriftfarbe. Also alles, was unter http://domainname.de/WordPress/wp-admin/customize.php steht.

Der Rest ist ja - sobald man the_loop() und nen wengle PHP verstanden hat relativ einfach.

LG

Antworten
Picco
Picco

Das sehe ich ganz genauso! Lieber mal die aktuellen PHP Schnipsel von WP in Deutsch erklären und mit den essentiellsten davon ein Minimalblog entwickeln. Als Erweiterung wäre interessant wie man Seitenmodule (z.B. Mitarbeiterverzeichnis, Gallerie oder Portfolio-Seiten) mit dem neuen WP erstellt. Habe mich seit 5 Jahren nicht mehr mit WP beschäftigt.

Antworten
Florian Brinkmann

Hallo Nio.t,
auf den Theme-Customizer werde ich auf jeden Fall eingehen!
Viele Grüße aus dem t3n-HQ,
Flo

Antworten
Paul
Paul

Auch wenn es sicherlich zur fortgeschrittenen Templateentwicklung gehört, wäre es interessant, wie Admin-Konfigurationseinstellungen und Plugins für das Template integriert werden können.

Antworten
Jogt
Jogt

Sehr schöne Idee! Werde die Serie mal verfolgen. Bisher habe ich mich immer etwas vor dem Schritt eines Eigenbaus gesträubt.

Antworten
Clemens
Clemens

Es wäre schön, wenn es zu Beginn ein gutes Tutorial geben könnte, wie man zusammen mit XAMPP o.ä. WordPress auf dem eigenen PC instalieren und nutzen kann.

Antworten
Benjamin
Benjamin

Hi Clemens,

dafür gibt es eine wahnsinnig starke Lösung von Bitnami.
Schau dir mal diesen Link an: https://bitnami.com/stack/wordpress
Hier kannst du ohne Xampp oder ähnliches zu installieren, Wordpress als Paket herunter laden, mit wenigen Klicks installieren und loslegen!

Wenn Du noch Fragen hast, kannst Du dich gerne jederzeit an mich wenden.

LG, Benjamin

Antworten
benimike
benimike

Webseite ist hinterlegt ;)

Thomas
Thomas

Das ist mal eine gute Idee. Ich werde diese Serie sehr interessiert verfolgen. Im Moment bin ich mit meinem Theme sehr zufrieden, aber wer weiß, vielleicht komme ich ja auf den Geschmack des selber machens.

LG Thomas

Antworten
Wolfram
Wolfram

Hallo,

die Idee von euch kommt mir genau passend. Was mich besonders interessieren würde ist, wie mach ich es das das Menü beim scrollen oben am Bildschirm Rand bleibt. Des weiteren wäre interessant wie ein von links aufklappbares Menü erstellt werden kann, das sich durchs scrollen einklappt bzw separat gescrollt werden kann.

Bin sehr gespannt :-)

Grüße Wolfram.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen