wordpress template workshop
DESCRIPTION
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.TRANSCRIPT
![Page 1: Wordpress Template Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/1.jpg)
Individuelle Wordpress Templates
in 3 Schritten
![Page 2: Wordpress Template Workshop](https://reader033.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/6.jpg)
6
Beispieltheme downloaden
http://www.besseronlineblog.de/simplicity.zip
![Page 7: Wordpress Template Workshop](https://reader033.vdocuments.us/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.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/8.jpg)
8
Theme installieren
http://www.besseronlineblog.de/simplicity.zip
![Page 9: Wordpress Template Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/9.jpg)
9
Theme installieren
![Page 10: Wordpress Template Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/10.jpg)
10
Theme installieren
![Page 11: Wordpress Template Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/11.jpg)
11
Theme Livevorschau
![Page 12: Wordpress Template Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/12.jpg)
12
Templates sind unterschiedlich
• Unterschiedliche Templates = Unterschiedliche Bedienung
Livebeispiel
![Page 13: Wordpress Template Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/13.jpg)
13
Templates mit Menüfunktion
![Page 14: Wordpress Template Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/14.jpg)
14
Templates mit Menüfunktion
![Page 15: Wordpress Template Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/15.jpg)
15
Menüs im Template
![Page 16: Wordpress Template Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/16.jpg)
16
Hier: rechte Sidebar für Widgets
![Page 17: Wordpress Template Workshop](https://reader033.vdocuments.us/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.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/18.jpg)
18
Templatefiles auf dem Server
![Page 19: Wordpress Template Workshop](https://reader033.vdocuments.us/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.vdocuments.us/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.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/21.jpg)
21
Alternative zur Dateibearbeitung
![Page 22: Wordpress Template Workshop](https://reader033.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/29.jpg)
29
Suchergebnis im Notepad++
Livebeispiel
![Page 30: Wordpress Template Workshop](https://reader033.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/33.jpg)
33
Schritt 3CSS-Design Änderungen vornehmen
![Page 34: Wordpress Template Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/34.jpg)
34
CSS-Design Änderungen vornehmen
![Page 35: Wordpress Template Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/35.jpg)
35
Ergebnis der CSS-Änderung
![Page 36: Wordpress Template Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/36.jpg)
36
CSS-Änderung on the fly
Livebeispiel
![Page 37: Wordpress Template Workshop](https://reader033.vdocuments.us/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.vdocuments.us/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.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/39.jpg)
39
CSS Überschreiben
Farbe ist überschrieben
![Page 40: Wordpress Template Workshop](https://reader033.vdocuments.us/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.vdocuments.us/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.vdocuments.us/reader033/viewer/2022052622/5591a4011a28ab476d8b461d/html5/thumbnails/42.jpg)
42
Vielen Dank
@PhillipGroschupinfo@phillip-groschup.dewww.phillip-groschup.dewww.besseronlineblog.de
Fragen?