Wordpress Custom Theme Development
47
Wie erstelle ich mein erstes eigenes Wordpress Theme? Daniela Wibbeke
-
Upload
daniela-wibbeke -
Category
Design
-
view
423 -
download
3
Transcript of Wordpress Custom Theme Development
Wie erstelle ich mein ersteseigenes Wordpress Theme?Daniela Wibbeke
Daniela Wibbeke
@danielawibbekedanielawibbeke.de
1. Vorteile eines eigenen Themes
Warum sollte man überhauptsein eigenes Wordpress Theme
erstellen?
Warum?
l mehr Erfahrung in CSS, HTML und PHP
l eigenes individuelles Wordpress Theme
l Änderungen am Design unkompliziert selbst tätigen
l man kann sein eigenes Theme auf Wordpress hochladen und trägt etwas zur Community bei
Es macht Spaß und man wird kreativ!
2. Das HTML Template
Vorraussetzungen
l funktionierende Wordpress Installationen
l aktiviertes Theme z.B. TwentyFifteen
l HTML Seite mit index.html und style.css
header.php
index.php
footer.php
3. Beginn der Theme Entwicklung
Theme Verzeichnis
Das Theme
4. Aufbau eines Themes
header.php
l enthält alle Elemente, die im oberen Bereich der Website angezeigt werden z.B. Navigation oder Logo
l Bereich ist immer gleich z.B. auf allen Seiten, Beiträgen, Archiven usw.
Ausgabe SeitentitelVerlinkung Stylesheet
z.B. Laden von Scripten
Ausgabe der Seiteninfos
Ausgabe des Menüs
footer.php
l enthält alle Elemente die im unteren Bereich der Website angezeigt werden z.B. Copyright, Quicklinks oder Kontaktdaten
Dateien die im Footer geladen werden
index.php
l Die wichtigste Datei des Themes
l enthält Code des Contentbereichs und legt fest wo andere Dateien eingebunden werden
l Ausgabe von Beiträgen auf der Startseite im Loop durch die index.php
Der Loop
l Ausgabe von Beiträgen überall im Theme
l dafür ist die Wordpress Funktion „The Loop“ zu ständig
l wichtiger Bestandteil, da ohne sie keine Inhalte angezeigt werden
Beginn Loop
Ende Loop
Ausgabe der Inhalte
<?php the_post_thumbnail(); ?>Beitragsbild:
<?php the_time(‘j. F Y’); ?>
<?php the_title(); ?>
Datum:
Überschrift
<?php the_content(); ?>Content
Kategorie <?php the_category(); ?>
<?php the_permalink(); ?>Verlinkung
Aufruf header.php
Wordpress Loop
Template Tags
Aufruf footer.php
page.php
l gibt Inhalte von statischen Seiten aus z.B. Impressum oder Kontakt Seite
Ausgabe Überschrift
Loop wie bei index.php
Ausgabe Content
functions.php
l nützlich um Eigenschaften und Funktionen des Themes zu erweiteren
l z.B. Aktivierung von Post Thumbnails, Sidebars oder Menüs
l Wichtig: gilt nur für das aktivierte Theme
Freischalten von Beitragsbildern
Hinzufügen des Menüs
style.css
l Theme Layout ist in der style.css hinterlegt
l style.css liegt im Theme Hauptverzeichnis
l vorhandene Datei muss mit Wordpress Style Kommentar ergänzt werden
5. Erstellung Custom Page Template
Custom Page Template
l Page Template kann von mehreren Seiten genutzt werden
l Template Name steht als PHP Kommentar in Datei
l nach Datei-Upload erscheint Template Name in der „Seite bearbeiten“-Ansicht im Adminbereich
Template Auswahl
l einfache Methode zur Page Template Erstellung:
l Kopie von page.php um vorgegeben Strukturen zu übernehmen
l Dateiname: template-ueber-mich.php
l Templatename: „Über Mich Seite“
Custom Page Template
6. Erstellung eines Custom Fields
Ausgabe Customfield
Custom Fields
l Custom Fields geben Möglichkeit Meta-Daten jedem Beitrag oder jeder Seite zuzuweisen
l Meta Daten haben immer ein „Key“ Feld und ein „Value“ Feld
l Key ist der Name des Custom Fields der „Value“ der ausgegebene Wert im Theme
angelegtes Custom Field
Ausgabe Custom Field „lieblingslied“
Das fertige Theme
https://github.com/dwibbeke/minimalistic
