Individuelle Wordpress Templates
in 3 Schritten
2
Template installierenWordpress Aufbau kennenlernen
Design ändern
Grüner Text = mitmachen wäre gut
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)
4
Vorweg: Zusatzeinstellung FileZillaBearbeiten -> Einstellungen Nur ein Vorschlag
“C:\Program Files\Notepad++\notepad++.exe“
5
Zusatzeinstellung FileZillaBearbeiten -> Einstellungen Nur ein Vorschlag
php c:\Windows\system32\NOTEPAD.EXE
6
Beispieltheme downloaden
http://www.besseronlineblog.de/simplicity.zip
7
Schritt 1Theme installieren
http://www.euredomain.de/wp-admin/
8
Theme installieren
http://www.besseronlineblog.de/simplicity.zip
9
Theme installieren
10
Theme installieren
11
Theme Livevorschau
12
Templates sind unterschiedlich
• Unterschiedliche Templates = Unterschiedliche Bedienung
Livebeispiel
13
Templates mit Menüfunktion
14
Templates mit Menüfunktion
15
Menüs im Template
16
Hier: rechte Sidebar für Widgets
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
18
Templatefiles auf dem Server
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
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
21
Alternative zur Dateibearbeitung
22
Was wir brauchen zur Templateentwicklung
PHP/HTML• HTML-
Kenntnisse• PHP-
Kenntnisse• Wordpress-
Funktionen
CSS• CSS
Kenntnisse
Google Google Google
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
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()
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
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
27
Änderungen an der HTML-Struktur vornehmen
<h2 class=„blogposttitle“>
Blogposttitle dient hier als (hoffentlich) einzigartige Stelle COPY it!!!
Nur ein Vorschlag
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
29
Suchergebnis im Notepad++
Livebeispiel
30
Aufgabe 1
Footerbereich ändern
Entferne den besonderen Dank aus dem Footer
31
Aufgabe 2
Artikelseite ändern
Entferne die Metadaten, außer Datum, in der Artikelansicht
32
Aufgabe 3
• Bearbeite die Seite so, dass das Headerimage nur auf der Startseite angezeigt wird
Tipp: is_home() oder is_front_page()
33
Schritt 3CSS-Design Änderungen vornehmen
34
CSS-Design Änderungen vornehmen
35
Ergebnis der CSS-Änderung
36
CSS-Änderung on the fly
Livebeispiel
37
Weitere Tipps
Rechtsklick auf ein Element CSS-Pfad kopieren
38
CSS Pfad kopieren
{background-color: #00ffff;
}
Einfügen in style.css
39
CSS Überschreiben
Farbe ist überschrieben
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
41
Letzte Tipps
Ansprechbar mit:.menu-item{ }.menu-item-type-post{ }.menu-item-object-page{ }.current-menu-item{ }... weitere …
Kaskadierung (Gewichtung) beachten
42
Vielen Dank
@PhillipGroschupinfo@phillip-groschup.dewww.phillip-groschup.dewww.besseronlineblog.de
Fragen?