Wie erstelle ich mein erstes
eigenes Wordpress Theme?
Daniela Wibbeke
Daniela Wibbeke
@danielawibbeke
danielawibbeke.de
1. Vorteile eines eigenen Themes
Warum sollte man überhaupt
sein eigenes Wordpress Theme
erstellen?
Warum?
ll mehr Erfahrung in CSS, HTML und PHP
ll eigenes individuelles Wordpress Theme
ll Änderungen am Design unkomplizie...
Es macht Spaß und man
wird kreativ!
2. Das HTML Template
Vorraussetzungen
ll funktionierende Wordpress Installationen
ll aktiviertes Theme z.B. TwentyFifteen
ll HTML Seite mit ind...
header.php
index.php
footer.php
3. Beginn der Theme Entwicklung
Theme Verzeichnis
Das Theme
4. Aufbau eines Themes
header.php
ll enthält alle Elemente, die im oberen Bereich der
Website angezeigt werden z.B. Navigation oder Logo
ll Berei...
Ausgabe Seitentitel
Verlinkung Stylesheet
z.B. Laden von Scripten
Ausgabe der Seiteninfos
Ausgabe des Menüs
footer.php
ll enthält alle Elemente die im unteren Bereich der
Website angezeigt werden z.B. Copyright, Quicklinks
oder Ko...
Dateien die im Footer geladen werden
index.php
ll Die wichtigste Datei des Themes
ll enthält Code des Contentbereichs und legt fest wo andere
Dateien eingebund...
Der Loop
ll Ausgabe von Beiträgen überall im Theme
ll dafür ist die Wordpress Funktion „The Loop“
zu ständig
ll wichtiger ...
Beginn Loop
Ende Loop
Ausgabe der Inhalte
?php the_post_thumbnail(); ?Beitragsbild:
?php the_time(‘j. F Y’); ?
?php the_title(); ?
Datum:
Überschrift
?php the_conte...
Aufruf header.php
Wordpress Loop
Template Tags
Aufruf footer.php
page.php
ll gibt Inhalte von statischen Seiten aus z.B.
Impressum oder Kontakt Seite
Ausgabe Überschrift
Loop wie bei index.php
Ausgabe Content
functions.php
ll nützlich um Eigenschaften und Funktionen
des Themes zu erweiteren
ll z.B. Aktivierung von Post Thumbnails...
Freischalten von Beitragsbildern
Hinzufügen des Menüs
style.css
ll Theme Layout ist in der style.css hinterlegt
ll style.css liegt im Theme Hauptverzeichnis
ll vorhandene Datei...
5. Erstellung Custom Page Template
Custom Page Template
ll Page Template kann von mehreren Seiten
genutzt werden
ll Template Name steht als PHP Kommentar in ...
Template Auswahl
ll einfache Methode zur Page Template
Erstellung:
ll Kopie von page.php um vorgegeben Strukturen
zu übernehmen
ll Dateinam...
6. Erstellung eines Custom Fields
Ausgabe Customfield
Custom Fields
ll Custom Fields geben Möglichkeit Meta-Daten
jedem Beitrag oder jeder Seite zuzuweisen
ll Meta Daten haben ...
angelegtes Custom Field
Ausgabe Custom Field
„lieblingslied“
Das fertige Theme
https://github.com/dwibbeke/minimalistic
Wordpress Custom Theme Development
Wordpress Custom Theme Development
Wordpress Custom Theme Development
Wordpress Custom Theme Development
Wordpress Custom Theme Development
Wordpress Custom Theme Development
Wordpress Custom Theme Development
Wordpress Custom Theme Development
Wordpress Custom Theme Development
Wordpress Custom Theme Development
Nächste SlideShare
Wird geladen in …5
×

Wordpress Custom Theme Development

1.869 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
0 Kommentare
4 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.869
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
83
Aktionen
Geteilt
0
Downloads
16
Kommentare
0
Gefällt mir
4
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Wordpress Custom Theme Development

  1. 1. Wie erstelle ich mein erstes eigenes Wordpress Theme? Daniela Wibbeke
  2. 2. Daniela Wibbeke @danielawibbeke danielawibbeke.de
  3. 3. 1. Vorteile eines eigenen Themes
  4. 4. Warum sollte man überhaupt sein eigenes Wordpress Theme erstellen?
  5. 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. 6. Es macht Spaß und man wird kreativ!
  7. 7. 2. Das HTML Template
  8. 8. Vorraussetzungen ll funktionierende Wordpress Installationen ll aktiviertes Theme z.B. TwentyFifteen ll HTML Seite mit index.html und style.css
  9. 9. header.php index.php footer.php
  10. 10. 3. Beginn der Theme Entwicklung
  11. 11. Theme Verzeichnis Das Theme
  12. 12. 4. Aufbau eines Themes
  13. 13. 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.
  14. 14. Ausgabe Seitentitel Verlinkung Stylesheet z.B. Laden von Scripten Ausgabe der Seiteninfos Ausgabe des Menüs
  15. 15. footer.php ll enthält alle Elemente die im unteren Bereich der Website angezeigt werden z.B. Copyright, Quicklinks oder Kontaktdaten
  16. 16. Dateien die im Footer geladen werden
  17. 17. 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
  18. 18. 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
  19. 19. Beginn Loop Ende Loop Ausgabe der Inhalte
  20. 20. ?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
  21. 21. Aufruf header.php Wordpress Loop Template Tags Aufruf footer.php
  22. 22. page.php ll gibt Inhalte von statischen Seiten aus z.B. Impressum oder Kontakt Seite
  23. 23. Ausgabe Überschrift Loop wie bei index.php Ausgabe Content
  24. 24. 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
  25. 25. Freischalten von Beitragsbildern Hinzufügen des Menüs
  26. 26. 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
  27. 27. 5. Erstellung Custom Page Template
  28. 28. 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
  29. 29. Template Auswahl
  30. 30. 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
  31. 31. 6. Erstellung eines Custom Fields
  32. 32. Ausgabe Customfield
  33. 33. 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
  34. 34. angelegtes Custom Field
  35. 35. Ausgabe Custom Field „lieblingslied“
  36. 36. Das fertige Theme
  37. 37. https://github.com/dwibbeke/minimalistic

×