PHP-Daten in JavaScript einschleusen

Die Vorraussetzungen

Zum einen benötigen wir ein JS zu dem wir unsere PHP-Daten übertragen wollen. Zum anderen benötigen wir natürlich ein paar PHP-Daten. Das JS das ich hier beispielhaft verwende, ist ein kurzes JS (jQuery) welches nicht etwas wirklich sinnvolles macht (wie so oft bei Beispielen)

jQuery(function ($){
	$(document).ready(function(){
		if( $("#header").is("*") ){

			$("#blog-title").text(my_js_var);
			$("#blog-description").text(anothervar);

		}
	});
});

Das Script sucht im DOM nach einer ID mit den Namen header. Ist solch eine ID vorhanden, werden die Texte der Elemente mit den IDs blog-title und blog-description geändert. Um es etwas umgangssprachlicher zu formulieren: Das Script tauscht den Blogtitel und die Blogbeschreibung gegen andere Texte aus, zumindest bei den meisten WP-Themes die nach dem Schema-F aufgebaut sind. Über die Sinnhaftigkeit eines solchen Vorhabens muss man nicht diskutieren, es ist ein Beispiel. Genauso gut könnten es Schaltflächen sein die Übersetzt werden müssen, Benutzerdaten die ausgegeben werden wollen, oder, oder, oder.

Die Hau-Drauf-Methode

Obiges JS legt man sich als Datei ab und holt es sich via add_action und wp_enqueue_script ganz normal ins Blog rein.

add_action( 'init', 'print_scipt_enqueue' );

function print_scipt_enqueue(){
  $jsfile = plugins_url('/php2js_print_script.js', __FILE__ );

  wp_register_script( 'php2js-print', $jsfile, array('jquery'), false, true );
  wp_enqueue_script( 'php2js-print' );
}

Wie man sieht, sind im jQuery-Script weder my_js_var noch anothervar definiert, dass Script würde also nicht funktionieren. Die Definition der beiden Variablen machen wir in einen zweiten Schritt. Dazu gehen wir recht grob vor und schreiben einfach einen zweiten Script-Block in den Head-Bereich. Man kann es sogar noch grober machen und den Script-Block einfach irgendwo ins auszugebende HTML knallen, aber so grob wollen wir dann ja doch nicht sein:

add_action( 'wp_head', 'print_my_jscript' );

function print_my_jscript(){
	echo '<script type="text/javascript">var my_js_var = "Hallo Welt!"; var anothervar = "Schubidu";</script>';
}

Damit haben wir erreicht das wir im Head-Bereich einen Script-Block haben der die beiden Variablen my_js_var und anothervar definiert, die von einem jQuery-Script im Footer verwendet werden. So gesehen ist die Sache noch etwas sinnlos, man hätte das alles in einem Abwasch erledigen können. Aber wenn man nun bedenkt das man anstatt “Hallo Welt!” auch sämtliche von WordPress zur Verfügung gestellte Daten verwenden kann, dann macht das alles schon mehr Sinn.

function print_my_script(){
	$current_user = wp_get_current_user();

	if( 0 != $current_user->ID ){
		$name = $current_user->user_login;
	} else {
		$name = 'Unbekannter';
	}
	echo '<script type="text/javascript">var my_js_var = "Hallo Welt!"; var anothervar = "Willkommen ' . $name . '!";</script>';
}

Registrierte und eingeloggte Besucher würden nun mit ihren Namen begrüßt werden, unregistrierte und nicht eingeloggte Besucher mit einem “Willkommen Unbekannter!”.
Diese Methode ist nicht wirklich sauber und hat so ihre Tücken. Würde z.B. ein anderes JS ebenfalls die Variable my_js_var verwenden, käme es schnell zu chaotischen Verhältnissen.