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: https://florianbrinkmann.com/wordpress-themes/bornholm/
Author: Florian Brinkmann
Author URI: https://florianbrinkmann.com
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
*/
Code-Sprache: CSS (css)
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 meiner WordPress-Reihe:
- Das eigene WordPress-Theme erstellen – #1: Vorbesprechung und Vorbereitung
- Das eigene WordPress-Theme erstellen – #3: Die header.php und der Kopf eures Themes
- Das eigene WordPress-Theme erstellen – #4: Die index.php und die Post-Loop
- Das eigene WordPress-Theme erstellen – #5: Die content.php
- Das eigene WordPress-Theme erstellen – #6: Das Theme auf die Übersetzung vorbereiten
- Das eigene WordPress-Theme erstellen – #7: Die Sidebar und der Footer
- Das eigene WordPress-Theme erstellen – #8: Menü, Sidebars und Theme-Support in der functions.php
- Das eigene WordPress-Theme erstellen – #9: Die Einzelansicht der Beiträge und Galerien in der single.php
- Das eigene WordPress-Theme erstellen – #10: Die Galerie-Sidebar mit Galerien aus derselben Kategorie
- Das eigene WordPress-Theme erstellen – #11: Der Kommentarbereich
- Das eigene WordPress-Theme erstellen – #12: Die Galerie und ihre Ansicht in der Blog-Übersicht
- Das eigene WordPress-Theme erstellen – #13: Die Archiv-Ansichten
- Das eigene WordPress-Theme erstellen – #14: Einzelansicht einer Seite und das 404-Template
- Das eigene WordPress-Theme erstellen – #15: Die alternative Startseite
- Das eigene WordPress-Theme erstellen – #16: Die Portfolio-Ansicht
- Das eigene WordPress-Theme erstellen – #17: Die Theme-Widgets
- Das eigene WordPress-Theme erstellen – #18: Der Customizer
- Das eigene WordPress-Theme erstellen – #19: Die Customizer-Einstellungen im Theme anwenden
- Das eigene WordPress-Theme erstellen – #20: Fertigstellung und Hochladen ins Directory
Dieser Beitrag ist eine Übernahme meines Beitrags für t3n.de.