Download - Wordpress Template Workshop
![Page 1: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/1.jpg)
Individuelle Wordpress Templates
in 3 Schritten
![Page 2: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/2.jpg)
2
Template installierenWordpress Aufbau kennenlernen
Design ändern
Grüner Text = mitmachen wäre gut
![Page 3: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/3.jpg)
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)
![Page 4: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/4.jpg)
4
Vorweg: Zusatzeinstellung FileZillaBearbeiten -> Einstellungen Nur ein Vorschlag
“C:\Program Files\Notepad++\notepad++.exe“
![Page 5: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/5.jpg)
5
Zusatzeinstellung FileZillaBearbeiten -> Einstellungen Nur ein Vorschlag
php c:\Windows\system32\NOTEPAD.EXE
![Page 6: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/6.jpg)
6
Beispieltheme downloaden
http://www.besseronlineblog.de/simplicity.zip
![Page 7: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/7.jpg)
7
Schritt 1Theme installieren
http://www.euredomain.de/wp-admin/
![Page 8: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/8.jpg)
8
Theme installieren
http://www.besseronlineblog.de/simplicity.zip
![Page 9: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/9.jpg)
9
Theme installieren
![Page 10: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/10.jpg)
10
Theme installieren
![Page 11: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/11.jpg)
11
Theme Livevorschau
![Page 12: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/12.jpg)
12
Templates sind unterschiedlich
• Unterschiedliche Templates = Unterschiedliche Bedienung
Livebeispiel
![Page 13: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/13.jpg)
13
Templates mit Menüfunktion
![Page 14: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/14.jpg)
14
Templates mit Menüfunktion
![Page 15: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/15.jpg)
15
Menüs im Template
![Page 16: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/16.jpg)
16
Hier: rechte Sidebar für Widgets
![Page 17: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/17.jpg)
17
Schritt 2Wie ist Wordpress aufgebaut?
Wordpress Core
plugins
languages themes
weitere
/wp-content/
• Es dürfen nur Dateien in /wp-content/ bearbeitet werden• In /themes/ werden die Templatedateien abgelegt
![Page 18: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/18.jpg)
18
Templatefiles auf dem Server
![Page 19: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/19.jpg)
19
Welche Datei für was?Datei i.d.R. aufgerufen bei Zuständig für
header.php i.d.R. immer dient als HTML Kopfteil
footer.php (1) i.d.R. immer dient als HTML Fußteil
index.php (3) Wenn Einstellung -> Lesen „Letzte Beiträge“ gewählt ist (Startseite)
Erste aufgerufene Datei
page.php Wenn eine Seite aufgerufen wurde Seiten
single.php (2) Wenn ein Blogartikel aufgerufen wurde
Posts
sidebar.php Wird von get_sidebar() aufgerufen Sidebar
functions.php Sonderfunktionen des Templates Alles mögliche
archive.php Suchanfragen, Kategorieansichten, TAG-Ansichten
Kategorien, Tags, etc
404.php Fehlerseiten Fehlerseiten
comments.php Wird von comments_template() aufgerufen
Kommentare
![Page 20: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/20.jpg)
20
Dateien in Notepad öffnen
Alle Dateien geöffnet im Notepad++
Entsprechend der FileZilla
Einstellungen am Anfang
Nach Dateispeicherung fragt FileZilla automatisch ob man die geänderte temporäre lokale Datei wieder hochladen möchte
Nur ein Vorschlag
![Page 21: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/21.jpg)
21
Alternative zur Dateibearbeitung
![Page 22: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/22.jpg)
22
Was wir brauchen zur Templateentwicklung
PHP/HTML• HTML-
Kenntnisse• PHP-
Kenntnisse• Wordpress-
Funktionen
CSS• CSS
Kenntnisse
Google Google Google
![Page 23: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/23.jpg)
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 Googlen
![Page 24: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/24.jpg)
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
?>
<?php endwhile; endif; //Loop endet hier
?>
Code innerhalb des Loops z.B. the_content()
![Page 25: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/25.jpg)
25
Erste Einblicke in die Dateien
• Einfach zu verstehender Aufbau in den Dateien:– index.php– sidebar.php– header.php
– index.php ist Initiale Datei und ruft andere Dateien mit z.B. get_header() od. get_sidebar() auf
![Page 26: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/26.jpg)
26
Änderungen an der HTML-Struktur vornehmen
•Wo zum Geier?
Wie finde ich genau das gesuchte HTML Element im Quellcode?
• Firebug hilft -> Aufrufen mit F12
Nur ein Vorschlag
![Page 27: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/27.jpg)
27
Änderungen an der HTML-Struktur vornehmen
<h2 class=„blogposttitle“>
Blogposttitle dient hier als (hoffentlich) einzigartige Stelle COPY it!!!
Nur ein Vorschlag
![Page 28: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/28.jpg)
28
Änderungen an der HTML-Struktur vornehmen
• Weiter geht’s im Notepad++ mit den geöffneten Dateien
• Strg+F neue Suche starten nach „blogposttitle“
• Suche in allen offenen Dateien
Nur ein Vorschlag
![Page 29: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/29.jpg)
29
Suchergebnis im Notepad++
Livebeispiel
![Page 30: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/30.jpg)
30
Aufgabe 1
Footerbereich ändern
Entferne den besonderen Dank aus dem Footer
![Page 31: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/31.jpg)
31
Aufgabe 2
Artikelseite ändern
Entferne die Metadaten, außer Datum, in der Artikelansicht
![Page 32: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/32.jpg)
32
Aufgabe 3
• Bearbeite die Seite so, dass das Headerimage nur auf der Startseite angezeigt wird
Tipp: is_home() oder is_front_page()
![Page 33: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/33.jpg)
33
Schritt 3CSS-Design Änderungen vornehmen
![Page 34: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/34.jpg)
34
CSS-Design Änderungen vornehmen
![Page 35: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/35.jpg)
35
Ergebnis der CSS-Änderung
![Page 36: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/36.jpg)
36
CSS-Änderung on the fly
Livebeispiel
![Page 37: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/37.jpg)
37
Weitere Tipps
Rechtsklick auf ein Element CSS-Pfad kopieren
![Page 38: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/38.jpg)
38
CSS Pfad kopieren
{background-color: #00ffff;
}
Einfügen in style.css
![Page 39: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/39.jpg)
39
CSS Überschreiben
Farbe ist überschrieben
![Page 40: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/40.jpg)
40
Letzte Tipps
Container einen Background-color geben
Quelle: http://de.selfhtml.org/css/formate/kaskade.htm
Kaskadierung (Gewichtung) beachten
<h*> Überschriften haben von Grund auf margin
<ul> / <ol> haben margin + padding
![Page 41: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/41.jpg)
41
Letzte Tipps
Ansprechbar mit:.menu-item{ }.menu-item-type-post{ }.menu-item-object-page{ }.current-menu-item{ }... weitere …
Kaskadierung (Gewichtung) beachten
![Page 42: Wordpress Template Workshop](https://reader033.vdocument.in/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/42.jpg)
42
Vielen Dank
@PhillipGroschupinfo@phillip-groschup.dewww.phillip-groschup.dewww.besseronlineblog.de
Fragen?