Wordpress Customize API angetestet

Mit der kürzlich veröffentlichten Version 3.4 von Wordpress kam ein neues Feature hinzu, was bisher unter dem Namen »Gandalf« gehandelt wurde und von mir jetzt einfach mal als Customize-API bezeichnet wird: Die Möglichkeit, seine Theme-Optionen in einem Vorschau-Fenster ad hoc einzustellen und – wenn man zufrieden ist – zu übernehmen.

Gandalf, der Bunte – die neue Customize-Ansicht. Jede Farbe, die links eingetragen wird, wird augenblicklich rechts dargestellt.

Prinzipiell kann man mit der Customize-API alle Eigenschaften des Themes ansprechen, die irgendwo in einer Option oder einem Theme-Mod gespeichert sind. Dazu kann man die Settings-API nutzen, die mehrere Werte in einem Array zusammenfasst. Da das ein ganz eigenes Thema ist, hier nur die prinzipielle Struktur der Option:

$default_options = array(
	'bg_color' => '#ffffff'
);
add_option( 'mt_customs', $default_options);

Ich habe zum testen Toschos Mini-Theme um eine Funktion erweitert, die diese Option ausliest und in ein Style-Element in den Header schreibt.

function mt_custom_background() {

	$option = get_option( 'mt_customs', array() );

	if ( empty( $option[ 'bg_color' ] ) )
		return;

	$style = '<style type="text/css"> body { background-color: %s;}</style>';
	printf( $style, $option[ 'bg_color' ] );
}
add_action( 'wp_head', 'mt_custom_background' );

Bis hierhin nichts neues. Die Customize-Ansicht (Design → Themes) kann jetzt um weitere, so genannte »Sections« erweitert werden. Im Screenshot ist »Body Background« eine von mir angelegte Section. Man arbeitet dabei objektorientiert über Methodenaufrufe der Klasse WP_Customize_Manager. Die jeweilige Option, die man ändern möchte meldet man mit add_setting() an und mit add_controll() hängt man das Formularfeld für dieses Setting an die gewünschte Section. Diese hat man zuvor mit add_section() angelegt. Lange rede kurzer Code: die folgende Funktion bekommt eine Instanz von WP_Customize_Manager übergeben:

/**
 * @param WP_Customize_Manager $cm
 * @return void
 */
function customizer( $cm ) {

	$defaults = get_option( 'mt_customs' );

	# a new section
	$cm->add_section( 'body-bg', array(
		'title'    => 'Body Background',
		'priority' => 50,
		) 
	);
	$cm->add_setting( 'mt_customs[bg_color]', array(
		'type'              => 'option',
		'default'           => $defaults[ 'bg_color' ],
		'sanitize_callback' => 'sanitize_hex_color',
		)
	);
	$cm->add_control( 'mt_customs[bg_color]', array(
		'section'    => 'body-bg',
		'type'       => 'text',
		)
	);
}

Und woher bekommt Sie diese? Von dem Action-Hook, auf dem Sie aufgerufen wird:

add_action( 'customize_register', 'mt_customizer' );

Dem geübten Auge werden die Parallelen in der Benennung der Optionen auffallen. Der erste Parameter 'mt_customs[body_bg]' für add_setting() legt ein Setting (intern ein Objekt der Klasse WP_Customize_Setting) für den Schlüssel 'body_bg' eines Array an, dass unter dem Namen 'mt_customs' als Option gespeichert wurde. Den Rest erledigt Wordpress, in dem es einen Filter setzt, der den Abruf dieser Option abfängt und den temporären Wert setzt.

Die Eingaben des Nutzers können zuvor noch durch eine Sanitize-Funktion geschickt werden um sicher zu stellen, dass kein Mumpitz mehr drin steht, wenn die Option zum Einsatz kommt (die im Beispiel verwendete sanitize_hex_color() bringt Wordpress, wie viele Andere übrigens, mit). Es bieten sich viele weitere Möglichkeiten an, das Customize-Formular zu erweitern. Einen ersten Einblick erhält man, in der inc/theme-options.php des aktuellen Twenty-Eleven-Themes. Die Funktion twentyeleven_customize_register() nutzt einige dieser Möglichkeiten.

Aus Entwicklersicht stellt sich die Frage: wozu der ganze Aufwand? Die Customize-API (bestehend aus den Klassen WP_Customize_Manager, WP_Customize_Control, WP_Customize_Setting und WP_Customize_Section) hat sicher einiges an Entwicklungsarbeit gekostet. Aber nur um ein paar Theme-Optionen (die vorher schon möglich waren) zu Testen bevor man sie übernimmt? Mal ehrlich, wer braucht das? Mehr als ein USP für allgemeine Themes dürfte das nicht sein.

Kommentare

Es wurden noch keine Kommentarte zu diesem Artikel geschrieben.

Fragen, Ideen oder Kritik? – Hier ist Platz dafür!

Dein Kommentar

Um ein Kommentar abzugeben, reicht der Text im Kommentarfeld. Die Angabe eines Namens wäre nett, ist aber nicht erforderlich.

Du darfst folgenden HTML-Code verwenden, musst aber nicht:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>