Wordpress Custom Theme Development

1.377 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.377
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
88
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

×