Wie der Einstieg in WordPress-Themes gelingt

Dieser Eintrag soll dazu dienen einen Überblick über WordPress Themes zu bekommen.

Ein Artikel der veranschaulichen soll, was möglich ist und wie WordPress arbeitet. Weiterführende Themen werden in einzelnen Einträgen behandelt, eine Link-Sammlung dazu ist am Ende dieses Eintrags ersichtlich.
Dieser Eintrag ist für Anfänger gedacht, die noch nicht wissen, wie WordPress Themes richtig verwendet werden und wie man diese erstellen kann.

UnderscoreS

Bevor wir mit WordPress starten soll gesagt sein, dass Underscores  bereits einen wichtigen Teil der Template-Arbeit abnimmt.
Underscores bewirbt das Template mit „A 1000-Hour Head Start“, also einen Entwickler-Vorsporung von 1000 Stunden, wenn man auf Underscores als Basis für die eigene Theme-Entwicklung setzt.

Underscores ist ein Starter-Theme, dass bereits die wichtigste Dateien (und Konfigurationen) bereit stellt, ohne dass man selbst auch nur eine Zeile Code schreiben muss.

Man kann das Starter-Theme einfach auf der Website downloaden indem man den Namen des Themes eingibt und auf  die Schaltfläche „Generate“ klickt:

https://underscores.me/

Es wird ein ZIP-File generiert, die nach dem entzippen folgende Dateistruktur enthält:

Was die einzelnen Dateinamen bedeuten werde ich gleich beschrieben, kurz aber noch zum Speicherort eines WordPress Themes.

Wo kann ich WordPress Themes im Projekt finden?

Hier sieht man den Root-Folder von WordPress, für uns ist derzeit eigentlich nur der wp_content Folder von Bedeutung:

..denn hier befindet sich der Themes Ordner, in dem alle Themes in einem Unterordner gespeichert werden:

Wir können also hier bereits unsere zuvor generiertes Underscores Template in diesen Ordner packen und mit einer beliebigen IDE anpassen – wir empfehlen PhpStorm.

Achtung: In PhpStorm auch auf den korrekten Theme-Speicherplatz mappen, damit der automatische Upload zum Server auch wirklich in `/themes/THEME_NAME/` statt findet!

Anschließend können wir uns über https://WEBSITE_NAME/wp-admin/ als WordPress Admin einloggen und das Theme direkt aktivieren!

Anschließend die Schaltfläche „Aktivieren“ klicken.

Dateistruktur

Nun aber zur bereits vorhin erwähnten Dateistruktur – die Seiten werden in WordPress hierarchisch geladen, es gilt der Grundsatz:

„lex specialis derogat legi generalis“ – Das speziellere Gesetz geht dem Generelleren vor. (Ja, wir hier bei wp-entwickler sind juristisch gebildet – ein Fluch und ein Segen :p )

Was heißt das aber? Die speziellere Datei ersetzt die generelle! Vorstellen kann man sich das etwas oberflächlich so:

Zuerst nimmt WordPress immer eine Seite, die ich speziell angelegt habe, beispielsweise „page-fussball.php“, hier hab ich eine selbst designde Seite mit Logos, Text und eventuell Video-Elementen.

Suche ich nun nach dieser Seite, also über https://WEBSITE_NAME/fussball, wird genau die „page-fussball.php“ – Datei aufgerufen, gibt es diese Datei aber nicht und der User sucht nach diesem Link, sucht WordPress die hierarchisch nächste Datei, die da wären:

  1. page-54.php – die ID der Seite
  2. page.php – das Standard-File für alle Seiten
  3. singular.php – extra Fallback, sollte es page.php nicht geben
  4. index.php – das Generellste File, wird kein einziges File gefunden, wird WordPress immer auf dieses File zurückgreifen, denn dieses File muss zwingend jedes Theme beinhalten.

Das funktioniert immer nach diesem Prinzip – abhängig vom Seiten-Typ gibt es eine andere Hierarchie – als Cheatsheet kann man diesen hierarchischen Aufbau verwenden:

 

Interaktive WordPress-Hierarchie von wphierarchy.com

Was auffällt ist, dass jede Seite letztendlich zu index.php zurückführt, deshalb ist diese Datei auch von so großer Bedeutung.

Mehr dazu kann man unter der Developer-Website von WordPress finden.

Umwandlung von Standard-Templates zu WordPress-Themes

Es gibt zwei Möglichkeiten:

Entweder ich entwickle eine Website von Grund auf und erstelle die HTML/CSS/Javascript Dateien komplett individuell, oder ich wähle aus der heutigen großen Auswahl an reinen HTML/CSS Templates (die noch nicht für WordPress angepasst sind).

In der Praxis ist es häufig so, dass ein bereits bestehendes HTML/CSS- Template als WordPress Theme umgsetzt wird. Dazu ist es notwendig, dass Theme so editierbar wie möglich für den Anwender zu machen!
Die Vorgehensweise sollte wie folgt ablaufen:

  • Underscore Theme einfügen
  • Theme aktivieren
  • Bestehendes HTML/CSS Vorlage in die genierten Dateien von Underscores einpflegen:
    Hier ist es wichtig den Aufbau von WordPress einzuhalten, Header, Footer und Sidebar werden separat angegeben, das erleichtert das Arbeiten im Theme – da diese Grundstrukturen im Projekt (häufig) gleich bleiben auf allen Seiten. Die Grundstruktur sieht daher immer wie folgt aus:
<?php  get_header();  ?>     <!-- HTML TAGS HIER-->    <?php  get_sidebar();  get_footer();

Header, Footer und Sidebar werden in den dafür vorgesehenen Files header.php, footer.php und sidebar.php definiert und dann mit den entsprechenden Getter-Funktionen wie get_header() aufgerufen! Das lässt die einzelnen Dateien sehr schmal wirken und ermöglicht eine gute Übersicht!

Javascript, CSS etc einbinden

Natürlich wirkt die Website ohne Javascript und CSS etwas kahl, deshalb müssen wir die entsprechenden JavaScript und CSS Dateien richtig einbinden.

In der, von der Underscores bereits angelegten, Datei functions.php gibt man die Stylesheets und Scripte an, besser gesagt man enqueue(d) sie, siehe hier:

function custom_scripts() {  wp_enqueue_style( 'custom-style', get_stylesheet_uri() );    wp_enqueue_script( 'custom-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );  }  add_action( 'wp_enqueue_scripts', 'custom_scripts' );

Was passiert hier? Es wird eine eigene Funktion für Scripts und Styles festgelegt, in der man alle Datein mittels add_action lädt! Dabei liefert get_stylesheet_uri() die Standard styles.css Datei.
Die restlichen Script Dateien einfach mittels wp_enqueue_script laden, wichtig ist hier nur den richtigen Pfad anzugeben! In Underscores gibt es bereits einen angelegten js Folder! Durch diese Operation werden die Files im Header der Website geladen.

So weit, so gut: Das vorhandene HTML/CSS Template ist nun richtig in WordPress eingepflegt, nun geht es darum, die Website dynamisch zu machen und für den Nutzer abgestimmt. Stöbere einfach bei uns im Blogarchiv, um mehr Artikel und Tutorials zu dem Thema zu bekommen!

Nützliche Links