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.
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
17. Schritt 2
Wie ist Wordpress aufgebaut?
• Es dürfen nur Dateien in /wp-content/ bearbeitet werden
• In /themes/ werden die Templatedateien abgelegt
17
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
19
20. Dateien in Notepad öffnen
Alle Dateien geöffnet im Notepad++
Nach Dateispeicherung fragt FileZilla automatisch ob man die
geänderte temporäre lokale Datei wieder hochladen möchte
20
22. Was wir brauchen zur
Templateentwicklung
PHP/HTML
• HTML-
Kenntnisse
• PHP-
Kenntnisse
• Wordpress-
Funktionen
CSS
• CSS
Kenntnisse
22
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
23
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()
24
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
25
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
26
27. Änderungen an der
HTML-Struktur vornehmen
<h2 class=„blogposttitle“>
Blogposttitle dient hier als (hoffentlich) einzigartige Stelle
COPY it!!!
27
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
28
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
40
41. Letzte Tipps
Ansprechbar mit:
.menu-item{ }
.menu-item-type-post{ }
.menu-item-object-page{ }
.current-menu-item{ }
... weitere …
Kaskadierung (Gewichtung) beachten
41
