Wie erstelle ich mein erstes eigenes WordPress Theme? Eine kurze Einführung in die Erstellung eines einfachen, zeitgemäßen WordPress Themes.

1. Wie erstelle ich mein erstes
eigenes Wordpress Theme?
Daniela Wibbeke

2. Daniela Wibbeke
@danielawibbeke
danielawibbeke.de

3. 1. Vorteile eines eigenen Themes

4. Warum sollte man überhaupt
sein eigenes Wordpress Theme
erstellen?

5. Warum?
ll mehr Erfahrung in CSS, HTML und PHP
ll eigenes individuelles Wordpress Theme
ll Änderungen am Design unkompliziert selbst tätigen
ll man kann sein eigenes Theme auf Wordpress
hochladen und trägt etwas zur Community bei

6. Es macht Spaß und man
wird kreativ!

7. 2. Das HTML Template

8. Vorraussetzungen
ll funktionierende Wordpress Installationen
ll aktiviertes Theme z.B. TwentyFifteen
ll HTML Seite mit index.html und style.css

10. header.php
index.php
footer.php

11. 3. Beginn der Theme Entwicklung

12. Theme Verzeichnis
Das Theme

14. 4. Aufbau eines Themes

15. header.php
ll enthält alle Elemente, die im oberen Bereich der
Website angezeigt werden z.B. Navigation oder Logo
ll Bereich ist immer gleich z.B. auf allen Seiten,
Beiträgen, Archiven usw.

17. Ausgabe Seitentitel
Verlinkung Stylesheet
z.B. Laden von Scripten
Ausgabe der Seiteninfos
Ausgabe des Menüs

18. footer.php
ll enthält alle Elemente die im unteren Bereich der
Website angezeigt werden z.B. Copyright, Quicklinks
oder Kontaktdaten

20. Dateien die im Footer geladen werden

21. index.php
ll Die wichtigste Datei des Themes
ll enthält Code des Contentbereichs und legt fest wo andere
Dateien eingebunden werden
ll Ausgabe von Beiträgen auf der Startseite im Loop durch die
index.php

22. Der Loop
ll Ausgabe von Beiträgen überall im Theme
ll dafür ist die Wordpress Funktion „The Loop“
zu ständig
ll wichtiger Bestandteil, da ohne sie keine Inhalte
angezeigt werden

23. Beginn Loop
Ende Loop
Ausgabe der Inhalte

24. ?php the_post_thumbnail(); ?Beitragsbild:
?php the_time(‘j. F Y’); ?
?php the_title(); ?
Datum:
Überschrift
?php the_content(); ?Content
Kategorie ?php the_category(); ?
?php the_permalink(); ?Verlinkung

25. Aufruf header.php
Wordpress Loop
Template Tags
Aufruf footer.php

26. page.php
ll gibt Inhalte von statischen Seiten aus z.B.
Impressum oder Kontakt Seite

29. Ausgabe Überschrift
Loop wie bei index.php
Ausgabe Content

30. functions.php
ll nützlich um Eigenschaften und Funktionen
des Themes zu erweiteren
ll z.B. Aktivierung von Post Thumbnails,
Sidebars oder Menüs
ll Wichtig: gilt nur für das aktivierte Theme

31. Freischalten von Beitragsbildern
Hinzufügen des Menüs

32. style.css
ll Theme Layout ist in der style.css hinterlegt
ll style.css liegt im Theme Hauptverzeichnis
ll vorhandene Datei muss mit Wordpress Style
Kommentar ergänzt werden

34. 5. Erstellung Custom Page Template

36. Custom Page Template
ll Page Template kann von mehreren Seiten
genutzt werden
ll Template Name steht als PHP Kommentar in Datei
ll nach Datei-Upload erscheint Template Name
in der „Seite bearbeiten“-Ansicht im Adminbereich

37. Template Auswahl

38. ll einfache Methode zur Page Template
Erstellung:
ll Kopie von page.php um vorgegeben Strukturen
zu übernehmen
ll Dateiname: template-ueber-mich.php
ll Templatename: „Über Mich Seite“
Custom Page Template

40. 6. Erstellung eines Custom Fields

41. Ausgabe Customfield

42. Custom Fields
ll Custom Fields geben Möglichkeit Meta-Daten
jedem Beitrag oder jeder Seite zuzuweisen
ll Meta Daten haben immer ein „Key“ Feld
und ein „Value“ Feld
ll Key ist der Name des Custom Fields
der „Value“ der ausgegebene Wert im Theme

43. angelegtes Custom Field

44. Ausgabe Custom Field
„lieblingslied“

45. Das fertige Theme

47. https://github.com/dwibbeke/minimalistic