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?