Wordpress Template Workshop

40.260 Aufrufe

Veröffentlicht am

In diesem Wordpress Template Workshop zeige ich anhand viele Screenshots wie man ein ein vorgebenen Wordpress Template individualisieren kann.

Dabei gehe ich auf Wordpress Funktionen sowie die Editierung der Wordpress Template PHP Dateien ein.

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
40.260
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
36.745
Aktionen
Geteilt
0
Downloads
13
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Wordpress Template Workshop

  1. 1. IndividuelleWordpress Templatesin 3 Schritten
  2. 2. Template installierenWordpress Aufbau kennenlernenDesign ändern2Grüner Text = mitmachen wäre gut 
  3. 3. Für diesen Teil benötigten Tools• Für Entwicklung geeigneter Editor (vzw. Notepad++)• Firebug (Addon für Moz. Firefox od. Chrome)• FTP-Programm (vzw. FileZilla)3
  4. 4. Vorweg: Zusatzeinstellung FileZillaBearbeiten -> Einstellungen4“C:Program FilesNotepad++notepad++.exe“
  5. 5. Zusatzeinstellung FileZillaBearbeiten -> Einstellungen5php c:Windowssystem32NOTEPAD.EXE
  6. 6. Beispieltheme downloadenhttp://www.besseronlineblog.de/simplicity.zip6
  7. 7. Schritt 1Theme installierenhttp://www.euredomain.de/wp-admin/7
  8. 8. Theme installierenhttp://www.besseronlineblog.de/simplicity.zip8
  9. 9. Theme installieren9
  10. 10. Theme installieren10
  11. 11. Theme Livevorschau11
  12. 12. Templates sind unterschiedlich• Unterschiedliche Templates= Unterschiedliche Bedienung12Livebeispiel
  13. 13. Templates mit Menüfunktion13
  14. 14. Templates mit Menüfunktion14
  15. 15. Menüs im Template15
  16. 16. Hier: rechte Sidebar für Widgets16
  17. 17. Schritt 2Wie ist Wordpress aufgebaut?• Es dürfen nur Dateien in /wp-content/ bearbeitet werden• In /themes/ werden die Templatedateien abgelegt17
  18. 18. Templatefiles auf dem Server18
  19. 19. Welche Datei für was?Datei i.d.R. aufgerufen bei Zuständig fürheader.php i.d.R. immer dient als HTML Kopfteilfooter.php (1) i.d.R. immer dient als HTML Fußteilindex.php (3) Wenn Einstellung -> Lesen „LetzteBeiträge“ gewählt ist (Startseite)Erste aufgerufene Dateipage.php Wenn eine Seite aufgerufen wurde Seitensingle.php (2) Wenn ein Blogartikel aufgerufenwurdePostssidebar.php Wird von get_sidebar() aufgerufen Sidebarfunctions.php Sonderfunktionen des Templates Alles möglichearchive.php Suchanfragen, Kategorieansichten,TAG-AnsichtenKategorien, Tags, etc404.php Fehlerseiten Fehlerseitencomments.php Wird von comments_template()aufgerufenKommentare19
  20. 20. Dateien in Notepad öffnenAlle Dateien geöffnet im Notepad++Nach Dateispeicherung fragt FileZilla automatisch ob man diegeänderte temporäre lokale Datei wieder hochladen möchte20
  21. 21. Alternative zur Dateibearbeitung21
  22. 22. Was wir brauchen zurTemplateentwicklungPHP/HTML• HTML-Kenntnisse• PHP-Kenntnisse• Wordpress-FunktionenCSS• CSSKenntnisse22
  23. 23. Erste gängige Wordpress Funktionen• get_bloginfo(name)– Gibt Informationen zum Blog aus• the_content()– Gibt den Inhalt eines Beitrages aus (nur im Loop)• the_title();– Gibt den Titel eines Beitrages aus (nur im Loop)• get_header();– Gibt den Inhalt der Header.php aus• get_sidebar();– Gibt den Inhalt der sidebar.php aus• get_footer();– Gibt den Inhalt der footer.php aus• the_author();– Gibt den Autor eines Beitrages aus (nur im Loop)Mehr im Wordpress Codex(http://codex.wordpress.org)Und viel Googlen23
  24. 24. Der Wordpress Loop<?php//Loop aufrufen$my_query = new WP_Query();$my_query->query(orderby=date);if ($my_query->have_posts()) :while ($my_query->have_posts()) :$my_query->the_post();//Loop beginnt hier?><?phpendwhile; endif; //Loop endet hier?>Code innerhalb des Loops z.B. the_content()24
  25. 25. Erste Einblicke in die Dateien• Einfach zu verstehender Aufbau in denDateien:– index.php– sidebar.php– header.php– index.php ist Initiale Datei und ruft andereDateien mit z.B. get_header() od. get_sidebar()auf25
  26. 26. Änderungen an derHTML-Struktur vornehmen• Wo zum Geier?Wie finde ich genau das gesuchte HTMLElement im Quellcode?• Firebug hilft -> Aufrufen mit F1226
  27. 27. Änderungen an derHTML-Struktur vornehmen<h2 class=„blogposttitle“>Blogposttitle dient hier als (hoffentlich) einzigartige Stelle COPY it!!!27
  28. 28. Änderungen an derHTML-Struktur vornehmen• Weiter geht’s im Notepad++ mitden geöffneten Dateien• Strg+F  neue Suche starten nach„blogposttitle“•  Suche in allen offenen Dateien28
  29. 29. Suchergebnis im Notepad++29Livebeispiel
  30. 30. Aufgabe 1Footerbereich ändernEntferne den besonderen Dank aus dem Footer30
  31. 31. Aufgabe 2Artikelseite ändernEntferne die Metadaten, außer Datum, in der Artikelansicht31
  32. 32. Aufgabe 3• Bearbeite die Seite so, dass das Headerimage nur auf derStartseite angezeigt wird32Tipp: is_home() oder is_front_page()
  33. 33. Schritt 3CSS-Design Änderungen vornehmen33
  34. 34. CSS-Design Änderungen vornehmen34
  35. 35. Ergebnis der CSS-Änderung35
  36. 36. CSS-Änderung on the flyLivebeispiel 36
  37. 37. Weitere TippsRechtsklick auf ein Element  CSS-Pfad kopieren37
  38. 38. CSS Pfad kopieren{background-color: #00ffff;}Einfügen in style.css38
  39. 39. CSS ÜberschreibenFarbe ist überschrieben39
  40. 40. Letzte TippsContainer einenBackground-color gebenQuelle: http://de.selfhtml.org/css/formate/kaskade.htmKaskadierung (Gewichtung) beachten<h*> Überschriften haben vonGrund auf margin<ul> / <ol> haben margin + padding40
  41. 41. Letzte TippsAnsprechbar mit:.menu-item{ }.menu-item-type-post{ }.menu-item-object-page{ }.current-menu-item{ }... weitere …Kaskadierung (Gewichtung) beachten41
  42. 42. Vielen Dank@PhillipGroschupinfo@phillip-groschup.dewww.phillip-groschup.dewww.besseronlineblog.deFragen?42

×