Daten aus WordPress an JavaScript übergeben #2

Im ersten Artikel dieser kleinen Serie habe ich aufgezeigt, wie man von PHP an JS mittels JSON übergibt. Alternativ kann man dies auch mittels der WordPress-Funktion wp_localize_script() tun, die einige Fallstricke bereit hält. Dazu dieses kleine Tutorial und ihr solltet euch mit diesen beiden Lösungen den Weg mi Vorfeld gut überlegen.

Die Funktion dient der Übergabe von Strings, in erster Linie zum Lokalisieren; also dem Übersetzungsthema mittels Javascript. Daher kann man aber bequem Werte übergeben und in Javascript abfragen. Der wichtigste Punkt ist wohl, dass die Funktion HTML Entities decodiert. Wichtig ist ebenso, dass das Script im Vorfeld bekannt ist; also mittels wp_enqueue_script() einbinden.

Ein Beispiel soll es verdeutlichen.

// im Admin Bereich die Scripte einbinden; Verwaltung, Reihenfolge übernimmt WP
add_action( 'admin_enqueue_scripts', 'fb_admin_enqueue_scripts' );
function fb_admin_enqueue_scripts( $where ) {
	// trennung dev und live version des scriptes
	$suffix = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? '.dev' : '';
	
	// Script einbinden, Identifiziert an dem id-String
	wp_enqueue_script(
		'example_script_id', 
		plugins_url( '/js/my-example-script' . $suffix. '.js', __FILE__ ), 	
		array( 'jquery' ),
		'',
		TRUE
	);
	
	// Daten innerhalb eines Array
	// array with data; also possible via get_option( 'my_option_string' )
	$data = array( 
		'some_string' => __( 'Some string to translate' ),
		'a_value' => '10'
	);
	// lokalisiere die Daten für das bekannte Script
	wp_localize_script( 'example_script_id', 'js_object_name', $data );
}

Mit diesem kleinen Beispiel ist PHP-seitig alles erledigt; die Inhalt des Array werden nun als Objekt js_object_name bekannt und können über den name-String js_object_name in JS genutzt werden.

Nun aber einige Hinweise, die helfen sollen, wenn es zu Problemen kommt oder die direkt zur Lösung mittels JSON verweisen.
Die Funktion wp_localize_script() dekodiert HTML Entities, was inhaltlich wichtig ist, aber nicht immer die ideale Lösung darstellt. Die Funktion nutzen json_encode(), was bei mehrdimensionalen Arrays im Zusammenhang mit dem Dekodieren von Entities zu Problemen führt. Sobald das Array mehr als eine Dimension hat, ist meine Empfehlung JSON ohne die WP Core Lösung mittels wp_localize_script().

Mit WordPress 3.4 soll sich dies bessern und die Funktion in diese Richtung nutzbarer sein - lassen wir uns überraschen, aktuell nutze ich bei mehreren Dimensionen lieber direkt JSON.