Schlagwort: CSS

In wenigen Schritten ein „eigenes“ WordPress Theme erstellen

WordPress erlaubt es einem, das Aussehen des eigenen Blogs durch sogenannte „Themes“ zu verändern. In der Standard-Installation werden bereits einige dieser Designs („TwentyTwelve“, „TwentyThirteen“) mitgeliefert und können im Administrationsbereich under Design / Themes aktiviert werden.

Die im Theme enthaltenen Dateien können über den Editor (Design / Editor) verändert werden. Am häufigsten werden vermutlich die Stylesheets (style.css), die Kopf- und Fußzeilen (header.php und footer.php), die Vorlage für Beiträge (single.php) sowie Theme-Funktionen (functions.php) an die eigenen Bedürfnisse angepasst bzw. erweitert.

Problemtaisch wird es, wenn es ein Update des Themes gibt. Dabei gehen in der Regel alle Änderungen (z.B. geänderte Farben im StyleSheet) verloren.

Um ein Theme zu verändern, ohne die ursprünglichen Dateien zu verändern, kann man in sogenanntes „Child-Theme“ erstellen. Ein Child-Theme ist ein eigenes Theme, enthält allerdings nur diejenigen Dateien, die Du tatsächlich verändern möchtest. Die übrigen Dateien werden aus einer von Dir benannten Vorlage („Template“, „Eltern-Theme“) verwendet.

  1. Erstelle zunächst einen neuen Ordner (z.B. mit dem Namen „Mein_Design“) im Verzeichnis /wp-content/themes.
  2. Jedes Child-Theme benötigt eine Datei mit dem Namen style.css. Diese Datei wird von WordPress nach den Informationen über das Theme (Name, Autor, Eltern-Theme,…) durchsucht.
    Erstelle also eine Datei mit dem Namen style.css und folgendem Inhalt:

    /*
Theme Name:     Twenty Thirteen (Fenon)
Theme URI:      http://fenon.de/
Description:    Mein eigenes Theme basierend auf Twenty Thirteen
Author:         Vorname Nachname
Author URI:     http://fenon.de/infos/
Template:       twentythirteen
Version:        0.1
*/

    In diesem Beispiel wird das Theme „twentythirteen“ aus dem Ordner /wp-content/themes als Vorlage (Template) verwendet.

  3. Das neue Theme ist jetzt bereits mit den von Dir gemachten Angaben in den Design-Einstellungen sichtbar und kann aktiviert werden. Allerdings überschreibt diese neue style.css-Datei alle CSS-Angaben, die in der verwendeten Vorlage („twentythirteen“) gemacht wurden. In Deiner eigenen style.css-Datei stehen allerdings noch keine CSS-Angaben drin.
    Ein einfacher Weg ist, zunächst alle Angaben der Theme-Vorlage hinzu zu laden und im Anschluss eigene Angaben zu schreiben. Der Inhalt Deiner style.css-Datei könnte also folgendermaßen aussehen:

    /*
Theme Name:     Twenty Thirteen (Fenon)
Theme URI:      http://fenon.de/
Description:    Mein eigenes Theme basierend auf Twenty Thirteen
Author:         Vorname Nachname
Author URI:     http://fenon.de/infos/
Template:       twentythirteen
Version:        0.1
*/
/* Alle Angaben aus Template hinzuladen */
@import url("../twentythirteen/style.css");
 
/* Eigene Angaben machen */
header#masthead {
	background: #D0E5B7;
}
 
code {
	background: #ccc;
}
 
h1.entry-title {
	margin: .5em 0;
	padding: .5em .25em;
	border-radius: 10px;
	background: #D0E5B7;
}
  4. Bei einem Update des Themes „twentythirteen“ bleiben von nun an Deine Änderungen erhalten. Allerdings kann es durchaus passieren, dass sie unwirksam werden. Zum Beispiel dann, wenn sich durch das Update die HTML-Struktur oder die Namen von Elementen ändern.
  5. Wie bereits bei der Datei style.css, überschreiben auch alle hinzugefügten *.php-Dateien die Inhalte der PHP-Dateien der verwendeten Vorlage – mit Ausnahme der Datei functions.php. Falls Du eine eigene functions.php-Datei erstellen solltest, werden beide Dateien geladen. Dabei wird Deine eigene functions.php-Datei vor der functions.php-Datei aus der Vorlage geladen.
    Daher eignet sich die functions.php besonders gut um neue Funktionen zum Template hinzuzufügen, da man keine Angaben aus der Vorlage kopieren muss. Das gilt insbesondere dann, wenn man sie im Zusammenhang mit Action-Hooks verwendet (siehe auch: add_action()):

    <!--?php 
function nach_fusszeile( $name ) {
	?-->
	Eigener Text nach der Wordpress-Fusszeile
	<!--?php 
} // ENDE: nach_fusszeile()
add_action( 'wp_footer', 'nach_fusszeile' );
?-->

Weitere Informationen findest Du auf der WordPress Homepage, auf ThemeShaper oder Im Blog von Wlad Leirich