Childthemes 2

@pixolin
MeetUp Köln
Themes ändern,
aber richtig
Child Themes &
Template Hierarchy
© Monica Holli/flickr/CC BY

@pixolin
MeetUp Köln
Das Theme gefällt mir soweit ganz gut, aaaber …
Wie werde ich "Dieser Beitrag wurde unter  
Allgemein abgelegt am 16. Juni, 2014." wieder los?
Und wie ändere ich die Schriftart?

@pixolin
MeetUp Köln
Bitte nicht …
Theme direkt ändern:
• wird bei Update
überschrieben
• Änderungen/Original  
sind schlecht
auseinanderzuhalten

@pixolin
MeetUp Köln
Bitte nicht …
Design > Editor verwenden:
• Macht unter Umständen
die Website unbrauchbar!  
 
Beispiel:  
"White Screen of Death"
bei function bla( {}
da fehlt was

@pixolin
MeetUp Köln
Child Themes
@pixolin

@pixolin
MeetUp Köln
Child Theme, Deﬁnition
Ein WordPress Child Theme ist ein
Theme, das die Funktionalität eines
anderen Themes, des so genannten
Parent Themes, erbt.
Child Themes sind Ergänzungen, bzw.
Ersetzungen des Parent Themes.  
Sie sind ohne Parent Theme nicht
verwendbar.

@pixolin
MeetUp Köln
Bitte nicht …
Komplettes Parent Theme
oder komplette style.css
kopieren
Das Child Theme soll das
Parent Theme ergänzen!
(aber: Templates kopieren  
ist erlaubt.)

@pixolin
MeetUp Köln
Woraus besteht ein Child Theme mindestens?
header.php index.php style.css
mit Template Header und  
Verweis auf Parent Theme!

@pixolin
MeetUp Köln
Template Header
/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Fourteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfourteen
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar,
responsive-layout, accessibility-ready
Text Domain: twenty-fourteen-child
*/
!
@import url("../twentyfourteen/style.css");
!
/* =Theme customization starts here
--------------------------------------------------------------
*/

@pixolin
MeetUp Köln
Template Header (mindestens!)
/*
Theme Name: WP Meetup Köln
Template: twentytwelve
*/
!
@import url("../twentytwelve/
style.css");
!
/* =Theme customization starts here
-------------------------------- */

@pixolin
MeetUp Köln
Cascading Style Sheets
heißen so, weil sie in einer
verschachtelten HTML-
Struktur eine Style-Regel so
lange vererben, bis der Wert
durch eine andere Regel
überschrieben wird.

@pixolin
MeetUp Köln
<html>
<head>
</head>
<body>
<h1></h1>
<p></p>
<p><span class="wichtig"></span></p>
</body>
</html>
"Cascades" © Darren Johnson/flickr/CC BY

@pixolin
MeetUp Köln
body { color: #333; }  
gilt für alle nachfolgenden
Selektoren, sofern keine
speziﬁschere Regel greift
.wichtig { color: #d12525; }

@pixolin
MeetUp Köln
Wiederholen sich Regeln,
überschreibt das zuletzt
geladene Style Sheet die
vorherigen
<link rel="stylesheet" type="text/css"  
href="reset.css">
href="style.css">
href="mein-style.css">

@pixolin
MeetUp Köln
Template Header
/*
Theme Name: WP Meetup Köln
Template: twentytwelve
*/
!
@import url("../twentytwelve/style.css");
!
/* Google Web Font Dancing Script */
@import url(http://fonts.googleapis.com/css?
family=Dancing+Script);
!
.site-header h1 a { font-family: 'Dancing
Script', cursive; }

@pixolin
MeetUp Köln
Template Hierarchy
WordPress versucht immer, das  
"am besten geeignete" Template zu
verwenden. Beispiel: Kategorie "Hobbits"
category.php 
?
archive.php 
?
index.php 
!
category-
hobbits.php 
?

@pixolin
MeetUp Köln
http://codex.wordpress.org/Template_Hierarchy

@pixolin
MeetUp Köln
front-page.php
Unter Einstellungen > Lesen kann man
festlegen, was als Startseite angezeigt
wird.
Statische Seite ➛ front-page.php 
Blogseite ➛ home.php
Existiert das Template nicht,  
kann man es anlegen!

@pixolin
MeetUp Köln
Templates ändern?
• Mit Plugin (z.B. "What The File")
nachschauen, welches Template für
die Anzeige verwendet wird.
• Template kopieren, nach Text suchen
und HTML editieren.
• Wird der Text mit einer theme-
eigenen Funktion erzeugt/verändert?

@pixolin
MeetUp Köln
PHP erlaubt nicht,  
zuvor deklarierte
Funktionen neu zu
deﬁnieren oder die
Deﬁnition zu löschen.

@pixolin
MeetUp Köln
Fatal error
Kopieren der
kompletten 
functions.php  
führt häuﬁg zu einem  
Fatale error, weil
(mindestens) ein
Funktionsname
doppelt vorkommt.

@pixolin
MeetUp Köln
Fatal error: Lösung 1
Das Parent Theme ist darauf
vorbereitet und verwendet
if( ! function_exists(…) ) 
bzw.
if( ! isset(…) )

@pixolin
MeetUp Köln
Fatal error: Lösung 2
Funktionen werden in WordPress
Schnittstellen hinzugefügt
add_action('hook', 'function');
und lassen sich genauso auch wieder entfernen
remove_action('hook', 'function');
anschließend eigene Funktion hinzufügen
add_action( 'hook', 'myfunction' );

@pixolin
MeetUp Köln
Happy Child Theming!
Two children playing with a seated older man. © Boston Public Library/Flickr/CC BY
M
G!Heute

Childthemes 2

Weitere ähnliche Inhalte

Empfohlen (20)

Childthemes 2