Optionen aus WordPress an JavaScripts übergeben #1

Von PHP auf Werte in der DB zugreifen und an JavaScript übergeben, das JSON Objekt ist eine Möglichkeit dies zu tun und dieses Beispiel soll es verdeutlichen.

Auch in WordPress bleibt man nicht konstant in der PHP-Welt und so müssen Einstellungen, Daten aus der Datenbank an Scripte übergeben werden. In vielen Plugins findet man Lösungen in dem die wp-load.php geladen wird und damit der Zugriff auf alle Funktionen von WordPress. Vor geraumer Zeit hat Otto (Samuel Wood) auf diesen Umstand schon aufmerksam gemacht und der Artikel zeigt Lösungsansätze. Noch immer kommen dazu Fragen auf und noch immer erscheinen Plugins, die die wp-load.php genau auf Grund solcher Probleme laden.

Eine ähnliche Problematik stellt sich, wenn man den Source der Scripte nicht einfach in den Footer-Bereich von WordPress schreibt, sondern sauber in eine Datei auslagert und via wp_enqueue_script() inkludiert. Nur so kann WordPress diese Scripte mit verwalten, packen und optimiert ausliefern. Daher möchte ich in zwie Beispielen aufzeigen, wie man Daten von PHP an JS übergibt.

Die ersten Schnipsel nutzen die Übergabe von Werten via JSON; wobei ich die Werte aus der Datenbank mit den gängigen Mitteln in PHP hole und das Script direkt im head der Seite die Werte als Objekt ablegt.


add_action( 'admin_enqueue_scripts', 'fb_print_scripts' );

function fb_print_scripts() {
	global $current_screen;
	
	if ( isset( $current_screen -> id ) && ! in_array( $current_screen -> id, array( 'post', 'page' ) ) )
		return;
	
	if ( is_plugin_active_for_network( plugin_basename( __FILE__ ) ) )
		$options = get_site_option( 'my_options_id' );
	else
		$options = get_option( 'my_options_id' );
	
	if ( ! $options )
		return;
	?>
	<script type="text/javascript">
		var my_json_object = <?php echo htmlspecialchars( json_encode( $options ) ); ?>;
	</script>
	<?php
}

Die obige Funktion gibt nun die Werte aus der Datenbank als JSON-Objekt in den head im Backend, da im ersten Schritt der Funktion die Seite abgefragt wird. Mittes $current_screen wird geprüft, so dass nur ausgeliefert wird, wenn man auf der definierten Seiten (post, page) ist.

Der folgende Schritt ist üblich und best practice in WordPress um Scripte einzubringen. Dabei inkludiere ich das JS-File, welches dann auf das JSON-Objekt zugreift.


add_action( 'admin_enqueue_scripts', 'fb_admin_enqueue_scripts' );

function fb_admin_enqueue_scripts( $where ) {
	
	if ( ! in_array( $where, array( 'post.php', 'post-new.php', ) )
		return;
	
	$suffix = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? '.dev' : '';
	
	wp_enqueue_script(
		self :: get_textdomain() . '_script', 
		plugins_url( '/js/my_script' . $suffix. '.js', __FILE__ ), 	
		array( 'jquery', 'my_other_script' ),
		'',
		TRUE
	);
	
}

Im Script wird dann direkt auf das Objekt zugegriffen, welches verarbeitet wird.


jQuery( document ).ready( function( $ ) {
	
	if ( typeof my_json_object == 'undefined' )
		return;

// debug in console of Browser
console.dir( my_json_object ); 

});

Eine weitere Lösung soll im Folgebeitrag der diesjährigen Serie vorgestellt werden; der Link folgt. - hier nun der Link, nach dem der Artikel online ist.

Kommentare sind geschlossen.