SlideShare ist ein Scribd-Unternehmen logo
Wie erstelle ich mein erstes
eigenes Wordpress Theme?
Daniela Wibbeke
Daniela Wibbeke
@danielawibbeke
danielawibbeke.de
1. Vorteile eines eigenen Themes
Warum sollte man überhaupt
sein eigenes Wordpress Theme
erstellen?
Warum?
ll mehr Erfahrung in CSS, HTML und PHP
ll eigenes individuelles Wordpress Theme
ll Änderungen am Design unkompliziert selbst tätigen
ll 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
ll funktionierende Wordpress Installationen
ll aktiviertes Theme z.B. TwentyFifteen
ll HTML Seite mit index.html und style.css
Wordpress Custom Theme Development
header.php
index.php
footer.php
3. Beginn der Theme Entwicklung
Theme Verzeichnis
Das Theme
Wordpress Custom Theme Development
4. Aufbau eines Themes
header.php
ll enthält alle Elemente, die im oberen Bereich der
Website angezeigt werden z.B. Navigation oder Logo
ll Bereich ist immer gleich z.B. auf allen Seiten,
Beiträgen, Archiven usw.
Wordpress Custom Theme Development
Ausgabe Seitentitel
Verlinkung Stylesheet
z.B. Laden von Scripten
Ausgabe der Seiteninfos
Ausgabe des Menüs
footer.php
ll enthält alle Elemente die im unteren Bereich der
Website angezeigt werden z.B. Copyright, Quicklinks
oder Kontaktdaten
Wordpress Custom Theme Development
Dateien die im Footer geladen werden
index.php
ll Die wichtigste Datei des Themes
ll enthält Code des Contentbereichs und legt fest wo andere
Dateien eingebunden werden
ll Ausgabe von Beiträgen auf der Startseite im Loop durch die
index.php
Der Loop
ll Ausgabe von Beiträgen überall im Theme
ll dafür ist die Wordpress Funktion „The Loop“
zu ständig
ll 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
ll gibt Inhalte von statischen Seiten aus z.B.
Impressum oder Kontakt Seite
Wordpress Custom Theme Development
Wordpress Custom Theme Development
Ausgabe Überschrift
Loop wie bei index.php
Ausgabe Content
functions.php
ll nützlich um Eigenschaften und Funktionen
des Themes zu erweiteren
ll z.B. Aktivierung von Post Thumbnails,
Sidebars oder Menüs
ll Wichtig: gilt nur für das aktivierte Theme
Freischalten von Beitragsbildern
Hinzufügen des Menüs
style.css
ll Theme Layout ist in der style.css hinterlegt
ll style.css liegt im Theme Hauptverzeichnis
ll vorhandene Datei muss mit Wordpress Style
Kommentar ergänzt werden
Wordpress Custom Theme Development
5. Erstellung Custom Page Template
Wordpress Custom Theme Development
Custom Page Template
ll Page Template kann von mehreren Seiten
genutzt werden
ll Template Name steht als PHP Kommentar in Datei
ll nach Datei-Upload erscheint Template Name
in der „Seite bearbeiten“-Ansicht im Adminbereich
Template Auswahl
ll einfache Methode zur Page Template
Erstellung:
ll Kopie von page.php um vorgegeben Strukturen
zu übernehmen
ll Dateiname: template-ueber-mich.php
ll Templatename: „Über Mich Seite“
Custom Page Template
Wordpress Custom Theme Development
6. Erstellung eines Custom Fields
Ausgabe Customfield
Custom Fields
ll Custom Fields geben Möglichkeit Meta-Daten
jedem Beitrag oder jeder Seite zuzuweisen
ll Meta Daten haben immer ein „Key“ Feld
und ein „Value“ Feld
ll Key ist der Name des Custom Fields
der „Value“ der ausgegebene Wert im Theme
angelegtes Custom Field
Ausgabe Custom Field
„lieblingslied“
Das fertige Theme
Wordpress Custom Theme Development
https://github.com/dwibbeke/minimalistic

Weitere ähnliche Inhalte

Andere mochten auch

Les marques vont elles devenir les premiers médias ?
Les marques vont elles devenir les premiers médias ?Les marques vont elles devenir les premiers médias ?
Les marques vont elles devenir les premiers médias ?
LaNetscouade
 
Journée Agilité à Ei.Cesi (17 avril 2013)
Journée Agilité à Ei.Cesi (17 avril 2013)Journée Agilité à Ei.Cesi (17 avril 2013)
Journée Agilité à Ei.Cesi (17 avril 2013)
Fabrice Aimetti
 
Daten fakten zum gesundheitswesen fopi status nov 2013
Daten fakten zum gesundheitswesen fopi status nov  2013Daten fakten zum gesundheitswesen fopi status nov  2013
Daten fakten zum gesundheitswesen fopi status nov 2013
casatch
 
50 Ways to Become More Professionally Excellent
50 Ways to Become More Professionally Excellent50 Ways to Become More Professionally Excellent
50 Ways to Become More Professionally Excellent
Leslie Bradshaw
 
Deep Dive into SharePoint Topologies and Server Architecture for SharePoint 2013
Deep Dive into SharePoint Topologies and Server Architecture for SharePoint 2013Deep Dive into SharePoint Topologies and Server Architecture for SharePoint 2013
Deep Dive into SharePoint Topologies and Server Architecture for SharePoint 2013
K.Mohamed Faizal
 
Data Encoding
Data EncodingData Encoding
Data Encoding
Luka M G
 
Mathematics high school level quiz - Part I
Mathematics high school level quiz - Part IMathematics high school level quiz - Part I
Mathematics high school level quiz - Part I
ITfC-Edu-Team
 
Engaging Learners with Technology
Engaging Learners with TechnologyEngaging Learners with Technology
Engaging Learners with Technology
Dean Shareski
 
Pythonによる機械学習入門 ~Deep Learningに挑戦~
Pythonによる機械学習入門 ~Deep Learningに挑戦~Pythonによる機械学習入門 ~Deep Learningに挑戦~
Pythonによる機械学習入門 ~Deep Learningに挑戦~
Yasutomo Kawanishi
 
J2 me
J2 meJ2 me
J2 me
Daba Niang
 
Thai tech startup ecosystem report 2017
Thai tech startup ecosystem report 2017Thai tech startup ecosystem report 2017
Thai tech startup ecosystem report 2017
Techsauce Media
 
Mri brain anatomy Dr Muhammad Bin Zulfiqar
Mri brain anatomy Dr Muhammad Bin ZulfiqarMri brain anatomy Dr Muhammad Bin Zulfiqar
Mri brain anatomy Dr Muhammad Bin Zulfiqar
Dr. Muhammad Bin Zulfiqar
 
Pharmaceuticals Solutions dosage form
Pharmaceuticals Solutions dosage formPharmaceuticals Solutions dosage form
Pharmaceuticals Solutions dosage form
Umair hanif
 
Microeconomics: Utility and Demand
Microeconomics: Utility and DemandMicroeconomics: Utility and Demand
Microeconomics: Utility and Demand
Manuel Salas-Velasco, University of Granada, Spain
 
Deep Learning through Examples
Deep Learning through ExamplesDeep Learning through Examples
Deep Learning through Examples
Sri Ambati
 
R Knitr - generating reports
R Knitr - generating reportsR Knitr - generating reports
R Knitr - generating reports
Mark Heckmann
 
O Passe Magnético - seminário
O Passe Magnético - seminárioO Passe Magnético - seminário
O Passe Magnético - seminário
home
 
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die ZukunftMobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
netlive IT AG
 
A era do globalismo – resumo do livro
A era do globalismo – resumo do livroA era do globalismo – resumo do livro
A era do globalismo – resumo do livro
Luci Bonini
 
Twitter für Geschäftsleitung
Twitter für GeschäftsleitungTwitter für Geschäftsleitung
Twitter für Geschäftsleitung
Ellen Girod
 

Andere mochten auch (20)

Les marques vont elles devenir les premiers médias ?
Les marques vont elles devenir les premiers médias ?Les marques vont elles devenir les premiers médias ?
Les marques vont elles devenir les premiers médias ?
 
Journée Agilité à Ei.Cesi (17 avril 2013)
Journée Agilité à Ei.Cesi (17 avril 2013)Journée Agilité à Ei.Cesi (17 avril 2013)
Journée Agilité à Ei.Cesi (17 avril 2013)
 
Daten fakten zum gesundheitswesen fopi status nov 2013
Daten fakten zum gesundheitswesen fopi status nov  2013Daten fakten zum gesundheitswesen fopi status nov  2013
Daten fakten zum gesundheitswesen fopi status nov 2013
 
50 Ways to Become More Professionally Excellent
50 Ways to Become More Professionally Excellent50 Ways to Become More Professionally Excellent
50 Ways to Become More Professionally Excellent
 
Deep Dive into SharePoint Topologies and Server Architecture for SharePoint 2013
Deep Dive into SharePoint Topologies and Server Architecture for SharePoint 2013Deep Dive into SharePoint Topologies and Server Architecture for SharePoint 2013
Deep Dive into SharePoint Topologies and Server Architecture for SharePoint 2013
 
Data Encoding
Data EncodingData Encoding
Data Encoding
 
Mathematics high school level quiz - Part I
Mathematics high school level quiz - Part IMathematics high school level quiz - Part I
Mathematics high school level quiz - Part I
 
Engaging Learners with Technology
Engaging Learners with TechnologyEngaging Learners with Technology
Engaging Learners with Technology
 
Pythonによる機械学習入門 ~Deep Learningに挑戦~
Pythonによる機械学習入門 ~Deep Learningに挑戦~Pythonによる機械学習入門 ~Deep Learningに挑戦~
Pythonによる機械学習入門 ~Deep Learningに挑戦~
 
J2 me
J2 meJ2 me
J2 me
 
Thai tech startup ecosystem report 2017
Thai tech startup ecosystem report 2017Thai tech startup ecosystem report 2017
Thai tech startup ecosystem report 2017
 
Mri brain anatomy Dr Muhammad Bin Zulfiqar
Mri brain anatomy Dr Muhammad Bin ZulfiqarMri brain anatomy Dr Muhammad Bin Zulfiqar
Mri brain anatomy Dr Muhammad Bin Zulfiqar
 
Pharmaceuticals Solutions dosage form
Pharmaceuticals Solutions dosage formPharmaceuticals Solutions dosage form
Pharmaceuticals Solutions dosage form
 
Microeconomics: Utility and Demand
Microeconomics: Utility and DemandMicroeconomics: Utility and Demand
Microeconomics: Utility and Demand
 
Deep Learning through Examples
Deep Learning through ExamplesDeep Learning through Examples
Deep Learning through Examples
 
R Knitr - generating reports
R Knitr - generating reportsR Knitr - generating reports
R Knitr - generating reports
 
O Passe Magnético - seminário
O Passe Magnético - seminárioO Passe Magnético - seminário
O Passe Magnético - seminário
 
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die ZukunftMobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
 
A era do globalismo – resumo do livro
A era do globalismo – resumo do livroA era do globalismo – resumo do livro
A era do globalismo – resumo do livro
 
Twitter für Geschäftsleitung
Twitter für GeschäftsleitungTwitter für Geschäftsleitung
Twitter für Geschäftsleitung
 

Ähnlich wie Wordpress Custom Theme Development

WordPress- eine Einführung
WordPress- eine EinführungWordPress- eine Einführung
WordPress- eine Einführung
Johannes Fruth
 
Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
Benjamin Zekavica Projects
 
Social Media Tools
Social Media ToolsSocial Media Tools
Social Media Tools
statistikwerkstatt
 
Wordpress Praxisseminar HW Berlin
Wordpress Praxisseminar HW BerlinWordpress Praxisseminar HW Berlin
Wordpress Praxisseminar HW Berlin
Hagen Kohn
 
Wordpress Themes
Wordpress ThemesWordpress Themes
Wordpress Themes
guestbce9cd
 
Linkwheels - Aufbau und Betrieb
Linkwheels - Aufbau und BetriebLinkwheels - Aufbau und Betrieb
Linkwheels - Aufbau und Betrieb
Campixx-Linkwheel-Vortrag
 
Mini Handbuch-Joomla1.7
Mini Handbuch-Joomla1.7Mini Handbuch-Joomla1.7
Mini Handbuch-Joomla1.7
schulpraxis
 
Input o2thinkbig
Input o2thinkbigInput o2thinkbig
Input o2thinkbig
aseubert
 
Wordpress Template Workshop
Wordpress Template WorkshopWordpress Template Workshop
Wordpress Template Workshop
phillipgroschup
 
Arbeiten mit Childthemes
Arbeiten mit ChildthemesArbeiten mit Childthemes
Arbeiten mit Childthemes
KirstenSchelper
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
Stefan Fröhlich
 
Mit WordPress durchstarten
Mit WordPress durchstartenMit WordPress durchstarten
Mit WordPress durchstarten
Frank Schmittlein
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisieren
Torsten Landsiedel
 
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD
 
WordPress Themes – ein Rundumschlag
WordPress Themes – ein RundumschlagWordPress Themes – ein Rundumschlag
WordPress Themes – ein Rundumschlag
Caspar Hübinger
 
Magento2 - Frontend under the hood
Magento2 - Frontend under the hoodMagento2 - Frontend under the hood
Magento2 - Frontend under the hood
Mathias Elle
 
15 DocPublisher - Anpassung Aussehen und Funktionen
15 DocPublisher - Anpassung Aussehen und Funktionen15 DocPublisher - Anpassung Aussehen und Funktionen
15 DocPublisher - Anpassung Aussehen und Funktionen
Notes IT
 
Word Press Als Blog Und Cms O
Word Press Als Blog Und Cms OWord Press Als Blog Und Cms O
Word Press Als Blog Und Cms O
sol777
 

Ähnlich wie Wordpress Custom Theme Development (20)

WordPress- eine Einführung
WordPress- eine EinführungWordPress- eine Einführung
WordPress- eine Einführung
 
Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
 
Social Media Tools
Social Media ToolsSocial Media Tools
Social Media Tools
 
Joomla
JoomlaJoomla
Joomla
 
Wordpress Praxisseminar HW Berlin
Wordpress Praxisseminar HW BerlinWordpress Praxisseminar HW Berlin
Wordpress Praxisseminar HW Berlin
 
Wordpress Themes
Wordpress ThemesWordpress Themes
Wordpress Themes
 
Linkwheels - Aufbau und Betrieb
Linkwheels - Aufbau und BetriebLinkwheels - Aufbau und Betrieb
Linkwheels - Aufbau und Betrieb
 
Mini Handbuch-Joomla1.7
Mini Handbuch-Joomla1.7Mini Handbuch-Joomla1.7
Mini Handbuch-Joomla1.7
 
Input o2thinkbig
Input o2thinkbigInput o2thinkbig
Input o2thinkbig
 
Wordpress Template Workshop
Wordpress Template WorkshopWordpress Template Workshop
Wordpress Template Workshop
 
Arbeiten mit Childthemes
Arbeiten mit ChildthemesArbeiten mit Childthemes
Arbeiten mit Childthemes
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
 
Mit WordPress durchstarten
Mit WordPress durchstartenMit WordPress durchstarten
Mit WordPress durchstarten
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisieren
 
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
 
WordPress Themes – ein Rundumschlag
WordPress Themes – ein RundumschlagWordPress Themes – ein Rundumschlag
WordPress Themes – ein Rundumschlag
 
Blogs webinar 2012
Blogs webinar 2012Blogs webinar 2012
Blogs webinar 2012
 
Magento2 - Frontend under the hood
Magento2 - Frontend under the hoodMagento2 - Frontend under the hood
Magento2 - Frontend under the hood
 
15 DocPublisher - Anpassung Aussehen und Funktionen
15 DocPublisher - Anpassung Aussehen und Funktionen15 DocPublisher - Anpassung Aussehen und Funktionen
15 DocPublisher - Anpassung Aussehen und Funktionen
 
Word Press Als Blog Und Cms O
Word Press Als Blog Und Cms OWord Press Als Blog Und Cms O
Word Press Als Blog Und Cms O
 

Wordpress Custom Theme Development