WordPress-Features in alte Themes einbauen

Mit jeder neuen Version von WordPress werden auch neue Features eingeführt. Diese sind aber nur dann tatsächlich nutzbar, wenn das gewählte Theme sie auch unterstützt. Bei älteren Themes ist das logischerweise nicht der Fall — wie sollen sie auch Features unterstützen, die es zum Zeitpunkt der Erstellung noch gar nicht gab?

Glücklicherweise ist der Einbau neuer Core-Funktionen gar nicht besonders schwer und in der Regel in wenigen Minuten erledigt. Man fügt im Wesentlichen ein paar Zeilen in die functions.php ein, ruft das Feature dann in den Theme-Templates auf (index.php, single.php etc.) und ändert das Aussehen bei Bedarf noch via CSS.

Im Folgenden erläutere ich mit Code-Beispielen aus dem heiligen WP-Codex, wie man alte Themes wieder fit macht.

• Post Thumbnail / Featured Image / Artikelbild
• Custom Menu / Benutzerdefinierte Navigation
• Custom Background / Benutzerdefinierter Hintergrund
• Custom Header / Benutzerdefinierte Header
• Custom Post Types / Benutzerdefinierte Inhaltstypen
• Post Formats / Formatvorlagen

Post Thumbnail / Featured Image / Artikelbild

Mit Artikelbilder lässt sich z.B. eine Liste von Artikeln mit vorangestellten Thumbnails versehen oder an einer vorab definierten Stelle im Artikel ein Bild anzeigen, ohne sich um Alignments kümmern zu müssen. Eine weitere Möglichkeit besteht darin, Artikelbilder im Header anzuzeigen — im Standard-Theme TwentyEleven ist das der Fall.

1. add_theme_support(‘post-thumbnails’) in functions.php

if ( function_exists( 'add_theme_support' ) ) { 
add_theme_support( 'post-thumbnails' ); 
}

Im Post-Editor erscheint nun auf der rechten Seite die Meta-Box “Artikelbild”.

2. the_post_thumbnail() in Templates einfügen

Um sie später auch tatsächlich auf der Seite anzuzeigen, müssen die Artikelbilder in die Templates eingefügt werden. An die gewünschte Stelle im Theme (z.B. in die single.php, index.php usw.) wird dazu Folgendes eingetragen, am besten vor the_content():

if ( has_post_thumbnail() ) {
the_post_thumbnail();
}

Die Größe des Artikelbilds ist Einstellungssache:

the_post_thumbnail('thumbnail');      // 150px x 150px
the_post_thumbnail('medium');         // 300px x 300px
the_post_thumbnail('large');          // 640px x 640px
the_post_thumbnail('full');           // Originale Größe
the_post_thumbnail( array(100,100) ); // Eigene Größe

3. (Optional) CSS anpassen mit wp-post-image

Artikelbilder werden automatisch der CSS-Klasse wp-post-image zugeordnet. Eine weitere Zuordnung basiert auf der angegebenen Größe des Bildes:

img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full

 

Custom Menu / Benutzerdefinierte Navigation

Eigene Navigationsleisten widgetartig per Drag’n’Drop über das Admin-Interface erstellen: Warum auch nicht?

1. register_my_menus() in functions.php

function register_my_menus() {
  register_nav_menus(
    array('header-menu' => __( 'Header Menu' ) )
  );
}
add_action( 'init', 'register_my_menus' );

Es können auch gleich mehrere Navigationsleisten nach dem folgenden Schema registriert werden:

array( 'header-menu' => __( 'Header Menu' ), 
'footer-menu' => __( 'Footer Menu' ))

2. wp_nav_menu() in Templates einfügen

Danach muss das Menü nur noch an die gewünschte Stelle im Theme eingefügt werden, z.B. in die header.php:

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

Jetzt kann im WP-Admin unter Design → Menüs die Navigationsleiste per Drag’n’Drop erstellt werden. — Wenn noch kein Custom Menu existiert, greift die Fallback-Funktion auf wp_page_menu zurück, mit der sämtliche Seiten des Blogs als Menüelemente dargestellt werden.

 

Custom Background / Benutzerdefinierter Hintergrund

Mit der Funktion Custom Background lässt sich die Hintergrundfarbe bzw. das Hintergrundbild einer WordPress-Seite direkt über den Admin-Bereich bestimmen.

1. add_custom_background() in functions.php

add_custom_background();

2. Hintergrundfarbe oder -bild einstellen

Unter Design → Hintergrund kann nun ein eigenes Hintergrundbild hochgeladen bzw. die Hintergrundfarbe per HTML-Colorpicker bestimmt werden. — WordPress fügt den Aufruf automatisch der header.php hinzu (muss also nicht manuell eingefügt werden).

<style type="text/css">
body { background-color: #EDE8E2; }
</style>

 

Custom Header / Benutzerdefinierte Header

Ähnlich wie der Webseiten-Hintergrundfarbe lässt sich auch das Aussehen des Headers mitsamt Headerbild über den Admin-Bereich bestimmen.

1. Header-Konstanten in functions.php

Mit den folgenden vier Zeilen werden Standardwerte für Ort, Breite und Höhe des Headerbilds sowie die Textfarbe definiert.

define('HEADER_IMAGE', '%s/img/header.jpg'); // %s = Template-URI
define('HEADER_IMAGE_WIDTH', 600);
define('HEADER_IMAGE_HEIGHT', 150);
define('HEADER_TEXTCOLOR', '000000');

2. add_custom_image_header() und Header Style in functions.php

Anschließend wird die Funktion add_custom_image_header sowie die Callbacks header_style (für den Header selbst) und admin_header_style (für die Ansicht im Adminbereich) eingefügt.

function header_style() {
    ?><style type="text/css">
        #header {
            background: url(<?php header_image(); ?>);
        }
    </style><?php
}

function admin_header_style() {
    ?><style type="text/css">
        #heading {
            width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
            height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
            background: no-repeat;
        }
    </style><?php
}
add_custom_image_header('header_style', 'admin_header_style');

Danach ist unter Design → Kopfzeile der Custom Header zu finden und kann nach Belieben verändert werden.

 

Custom Post Types / Benutzerdefinierte Inhaltstypen

Custom Post Types sind nützlich, wenn man neben klassischen Artikeln, Seiten und Attachments noch andere Inhaltsarten darstellen möchte, z.B. Produkte.

1. register_post_type() in functions.php

Mit diesem Snippet wird eine neuer Post Type namens meine_produkte erstellt. Es empfiehlt sich einen einzigartigen Namen zu vergeben, um nicht vorab definierten Post Types aus Plugins / Themes in die Quere zu kommen. Damit die URLs sauber bleiben (/produkte/ statt /meine_produkte/) kann das Element rewrite genutzt werden:

add_action( 'init', 'create_post_type' );
function create_post_type() {
	register_post_type( 'meine_produkte',
		array(
			'labels' => array(
				'name' => __( 'Produkte' ),
				'singular_name' => __( 'Produkt' )
			),
		'public' => true,
		'has_archive' => true,
                'rewrite' => array('slug' => 'produkte')
		)
	);
}

Ein paar weitere Elemente: menu_position (Wo werden Post Types im WP-Admin angezeigt?), capabilities (Wer darf sie bearbeiten / erstellen?), supports (Welche Elemente werden im Post-Editor angezeigt)

2. Option A: Post Types in bestehende Templates einfügen

Nach der Registrierung müssen die Post Types in die Templates kommen, damit WP sie auch darstellen kann. Dazu wird eine neuer WP_Query definiert:

$query = new WP_Query( 'post_type=meine_produkte' );

Wenn mehrere Arten von Post Types gleichzeitig angezeigt werden sollen:

$query = new WP_Query( array( 'post_type' => array( 'meine_produkte', 'meine_musik', 'meine_buecher' ) ) );

3. Option B: Neue Templates für Post Types erstellen

Statt mit WP_Query zu hantieren können auch neue Templates für die Einzelansicht (single-meine_produkte.php, seit WP 3.0) und die Archivansicht (archive-meine_produkte.php, seit WP 3.1) erstellt werden. WordPress nutzt dann automatisch die richtigen Templates, wenn der entyprechende Post Type angezeigt werden soll.

 

Post Formats / Formatvorlagen

Formatvorlagen bieten sich an, wenn man das Aussehen eines Artikels von der Art des Inhalts abhängig machen möchte. WordPress bietet dafür standardisierte Vorlagen an: Link, Status, Image, Gallery, Quote, Aside, Audio, Video und Chat. Im Gegensatz zu Post Types handelt es sich bei Post Formats um Artikel- bzw. Seitenvorlagen — es werden keine neuen Artikeltypen erstellt.

1. add_theme_support(‘post-formats’) in functions.php

In diesem Beispiel werden die Formatvorlagen Status und Image unterstützt.

add_theme_support( 'post-formats', array( 'aside', 'image' ) );

2. Formatvorlagen in Templates einfügen

Inhalte können nun im Zusammenspiel mit dem Condtional Tag has_post_format spezifisch dargestellt werden. Die single.php könnte zum Beispiel um folgende Bedingung erweitert werden:

if ( has_post_format( 'aside' ) ) {
   // Inhalt des Aside-Formats
}

3. (Optional) CSS anpassen mit .format-[name]

Richtig interessant werden Formatvorlagen natürlich erst dann, wenn sie mit CSS unterschiedlich gestylt werden. So könnte man bei Asides z.B. auf die Darstellung des Titels verzichten, um deutlich zu machen, dass es sich um eine Nebenbemerkung und keinen vollständigen Blogartikel handelt. WordPress bietet dafür die post_class-Funktion an, die für Asides z.B. so genutzt werden kann:

.format-aside .post-title {
display:none;
}

Alternativ lässt sich die Anzeige des Seitentitels auch über einen entsprechenden Einsatz von has_post_format direkt unterbinden.