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 & Design

Das eigene WordPress-Theme erstellen – #2: Die style.css und die Metadaten eures Themes

    Das eigene WordPress-Theme erstellen – #2: Die style.css und die Metadaten eures Themes

Der große t3n-Guide zum eigenen WordPress-Theme. (Grafik: t3n)

In dieser Serie geht es darum, ein WordPress-Theme zu erstellen – von Grund auf. Im zweiten Teil widmen wir uns einer der wenigen Dateien, ohne die kein WordPress-Theme auskommt: Der style.css.

Die style.css ist eine der wichtigsten Dateien, wenn es um die Erstellung eines WordPress-Themes geht. Ein funktionierendes Theme kann theoretisch nur aus style.css und index.php bestehen – mehr Dateien braucht es im Grunde nicht. In die style.css-Datei kommen nämlich die sogenannten Header-Informationen eures Themes.

Notwendige Angaben für ein WordPress-Theme

Für ein funktionierendes Theme reicht die Angabe des Namens. Für das Hochladen im Theme-Directory müssen allerdings mehr Informationen eingetragen werden. Zwingend notwendig sind die folgenden Angaben:

  • Theme Name – der Name des Themes.
  • Description – eine kurze Beschreibung des Themes.
  • Author – der Name des Entwicklers.
  • Version – die Versionsnummer des Themes.
  • Licence – die Lizenz, unter der das Theme steht.
  • Licence URI – der Link zu der Lizenz.

Die ersten Punkte sollten selbsterklärend sein. Zum Thema Lizenz: Alle Themes, die in das Theme-Directory von WordPress aufgenommen werden sollen, müssen zu 100 Prozent der GPL oder einer kompatiblen Lizenz entsprechen. Darauf müsst ihr auch bei eingebundenen Skripten oder ähnlichem achten.

Wenn ihr euch mal unsicher seid, ob eine Lizenz kompatibel ist, könnt ihr beispielsweise im #themereview-Channel des offiziellen WordPress-Slack fragen. Wie ihr euch dafür registrieren könnt, zeigt eine Seite auf make.WordPress.org.

Kurz und übersichtlich: Die style.css-Datei unseres Themes

Neben diesen vorgeschriebenen Angaben gibt es noch ein paar weitere. So sieht die style.css-Datei unseres Themes aus:

/*
Theme Name: Bornholm
Theme URI: http://florianbrinkmann.de/wordpress-themes/bornholm/
Author: Florian Brinkmann
Author URI: http://florianbrinkmann.de
Description: Bornholm is great for your photoblog or portfolio website. The theme comes with two page templates. One template shows the last galleries from your categories and the other shows all your galleries on one page. Furthermore, it brings two widgets that allow you to display the last galleries and to display featured galleries. If you already have images on your blog, you should regenerate the thumbnails.
Version: 1.0.6
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: white, light, two-columns, right-sidebar, custom-menu, post-formats, sticky-post, translation-ready, threaded-comments, photoblogging
Text Domain: bornholm
*/

Zusätzlich haben wir hier noch die Theme URI eingefügt, die auf eine Seite mit genaueren Details zum Theme verweisen muss. Eine Demo-Version sollte hier nicht verlinkt werden. Die Zeile Author URI ist ebenfalls neu und enthält eine URL zur Website des Entwicklers. Mit der Angabe von Tags könnt ihr euer Theme im Theme-Directory besser auffindbar machen. Die verfügbaren Begriffe könnt ihr unter dem Punkt „Feature Filter“ auf der Theme-Seite von WordPress.org einsehen. Zum Schluss folgt noch die Angabe der Text-Domain, die für die Übersetzung des Themes notwendig ist.

Mehr werden wir in diese Datei nicht eintragen. Natürlich könnte hier auch der CSS-Code des Themes Platz finden. Dagegen spricht aber, dass sich die Datei dann nicht komplett komprimieren ließe.

Der Code zur Serie auf GitHub

Den Quelltext zu der Serie gibt es auf GitHub. Im dazugehörenden Repository findet ihr Tags, die jeweils dem Stand des Themes nach einem Teil der Reihe entsprechen. Den Tag zum Stand dieses Artikels findet ihr hier.

Die weiteren Teile unserer WordPress-Reihe:

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

17 Reaktionen
DrSky
DrSky

Ich wollte schon immer mal mein eigenes Wordpress-Theme bauen, hatte aber bisher noch keine einfache Anleitung gefunden. Der Artikel kommt mir daher gerade recht. Danke!

Antworten
Persa
Persa

Hallo, Florian! Wenn du neugierig auf alternative Lokalisierungsmodalitäten für die Übersetzung von WordPress Themes ist, empfehle ich dich diese Übersetzungsplattform: https://poeditor.com/

Antworten
Plueschpuschel
Plueschpuschel

Der Anfang ist spitze! Man kann sich simpel daran orientieren und mit seinem eigenen Theme beginnen. Die Idee, das später zu bündeln finde ich spitze! Gibts schon einen Zeitpunkt für das nächste Release?

Antworten
Florian Brinkmann

Hi Plüschpuschel,

mit dem Code für den nächsten Teil bin ich so gut wie fertig, es fehlt noch ein bisschen „Artikel“ ;) War etwas komplizierter, deshalb dauert es etwas länger.
Einen genauen Zeitpunkt kann ich dir nicht sagen, aber nächste Woche sollte möglich sein, denke ich, eventuell auch noch diese.

Viele Grüße,
Flo

Antworten
Christian
Christian

Wird es den Guide später auch als gebündelte Ausgabe (z.B. als PDF mit Inhaltsverzeichnis) geben? Die Aufteilung in mehreren ellenlangen Seite ist jedenfalls eher unübersichtlich.

Antworten
Florian Brinkmann

Hallo Christian,

das ist eine gute Idee! Wir schauen mal ob und wie wir das umsetzen.

Viele Grüße,
Flo

Antworten
Scrabbledo
Scrabbledo

Hallo Florian,

TOP-Artikel! Endlich mal eine verständliche Anleitung für "nicht"-Profis! Danke.

Habe auch gleich noch eine weitere Frage, die sich ggf. als zusätzliche Funktion in einen der nächsten Artikel einbauen lässt:

Ich betreibe seit einigen Jahren einen privaten Reiseblog, in dem ich meine verschiedenen Reisen durch die Welt dokumentiere. Dafür verwende ich das Adventure-Theme, werde mir aber sicherlich jetzt ein eigenes Theme individuell bauen (und WP endlich mal auf die neueste Version updaten). Das aktuell verwendete Design hat eine umgekehrt chronologische Auflistung der einzelnen Artikel (Tagesberichte), was für aktuelle Reisen auch Sinn macht, da so genau der letzte Eintrag oben steht. Wenn ich allerdings gern in den Jahren zurück (Menu enthält Jahre mit Untermenüs der Reisen) z.B. eine Reise aus 2010 nochmal nachlesen möchte, so muss man erst ganz runter scrollen um den Tag 1 lesen zu können.

Gibt es hier eine Möglichkeit, die es mir ggf. im Backend erlaubt, abgeschlossene Reisen wieder in der richtigen chronologischen Reihenfolge anzeigen zu lassen, die aktuelle Reise aber weiterhin mit dem letzten Beitrag zuoberst? Alternativ hatte ich sonst die Idee, die komplette Reise als SinglePage neu zu schreiben, was aber bei längeren Reisen und jeder Menge Bilder im Text zu ggf. recht langen Ladezeiten führen würde.

Von einer Möglichkeit das neu zu entwickelnde Theme auch mobilfähig zu machen, frage ich mal noch nicht. Eventuell hast Du das schon mit als "letztes Kapitel" vorgesehen.

Danke und Gruß,
Lars

Antworten
Scrabbledo
Scrabbledo

Hallo,
ich habe inzwischen eine ganz simple Lösung für mein Problem gefunden. Anstatt im Menü die Kategorie für den Beitrag (bei mir das Reiseziel) einfach zu verlinken, fügt man selbst einen "Link" zu dieser Kategorie (oder dem Jahr z.B.) dem eigenen Menü hinzu und ergänz den Link am Ende einfach noch mit einem ? und einem Befehl als Bsp.:
http://www.blog.de/category/?order=asc
und schon werden die dortigen Beiträge wieder chronologisch richtig sortiert, sprich der älteste zuerst.

Antworten
Scorch
Scorch

Nette Idee das Ganze. Ist schon abzuschätzen, wieviele Kapitel es geben wird und liegen dazwischen immer 2 Wochen?

Antworten
Florian Brinkmann

Hallo Scorch,

das Intervall zwischen den Artikel-Teilen wird vermutlich variieren und wie viele es genau geben wird, ist noch nicht klar – drei weitere werden es aber denke ich auf jeden Fall noch werden.

Antworten
Norbert Zahl
Norbert Zahl

XXAMP weigert sich aber nur in C: installiert zu werden???

Antworten
Florian Brinkmann

Hi Norbert,
ob das wirklich so notwendig ist, weiß ich nicht ganz aktuell, vielleicht läuft es auch einwandfrei, wenn du es in einen anderen Ordner installierst. Ich handhabe das immer so, da es bei meiner ersten Installation vor ein paar Jahren ein Problem gab, wenn ich XAMPP in einen Unterordner installiert habe und die Installation direkt unter C die Lösung war.
Was genau funktioniert bei dir denn nicht, bzw. welchen Fehler bekommst du?

Viele Grüße,
Flo

Antworten
Norbert Zahl
Norbert Zahl

Alles klar !

Antworten
Harald
Harald

Super Artikel werde ich auch mal machen ein eigens WordPress-Theme erstellen Danke

Antworten
Daniel
Daniel

@nk: Der "sinnfreie" WP-Loop ist die eigentliche Kernfunktion von Wordpress und damit alles andere als "sinnfrei", sondern essentiel. Und diese Funktion muss für Einsteiger erstmal verständlich gemacht werden, sonst bringt ein solches Tutorial nichts. Der angehende Pilot fliegt ja auch nicht gleich Jumbo und Übersee. Einem erfahrenen Entwickler muss niemand XAMPP erklären, damit gehe ich davon aus, dass sich der Workshop an interessierte Anfänger richtet. Und je mehr Mitgestalter (ich denke an so manche Grafiker) sich für Technik und Umsetzung interessieren, umso besser. Das macht es allen einfacher.

Natürlich kann man ein WP-Theme beipielsweise noch mit Widgets, Plugins, Custom Post Types und individuellen Menüs anreichern und deutlicher individualisieren. Aber das würde (denke ich) für die angedachte Zielgruppe zu weit führen (und einen solchen Workshop in die Länge ziehen).

Und eine Lanze muss ich brechen: Wordpress-Entwicklung ist Webentwicklung. Punkt. Nicht immer das TYPO3-, Drupal-, etc - Ross reiten und den Rest als Ponyhof abtun. Ich betreue zwar in der Mehrheit Projekte auf T3-Basis (und bin absolut überzeugt davon), bei kleinen Sites mit übersichtlichen Seitenumfang reicht Wordpress, ist für den Redakteur übersichtlicher, in der Wartung oft einfacher und damit kostengünstiger für den Kunden und wenn ein Blog mit bei sein soll, dann drängt sich WP förmlich auf.

Antworten
nk
nk

"bei Windows müsst ihr darauf achten, dass ihr es direkt im obersten Verzeichnis installiert. Also in C: und nicht in C:/xampp."

Was für ein Schwachsinn. Wenn man den Kopf einschaltet und nicht alles nur installiert, ohne sich damit auseinanderzusetzen, kann man auch gleich den Trojaner aus dem E-Mail-Anhang starten. "t3n - digital pioneers". OmG, seid Ihr Pioniere... Traurig.

Und immer wieder der sinnfreie WP-Loop, egal ob man auf einer Single-Page ist. Bestätigt mal wieder den Eindruck, dass WP-User lediglich Copy-and-Paste-Anwender sind. Aber bezeichnet Euch doch bitte nicht als Webentwickler.

Antworten
Stefan
Stefan

Super Artikel, genau so etwas kann ich gerade brauchen. Vielen Dank dafür und bin schon auf die weiteren Ausgaben gespannt!

Antworten

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

Abbrechen