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.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Einige Hintergründe

Scripte und Stylesheets kann man in WordPress auf verschieden Art in die Ausgabe einbringen, das gilt für Backend und Frontend. Dabei ist das klassiche Verfahren eines meta-Elementes im head oder footer-Bereich nicht zu empfehlen, denn WordPress kann seit Version 2.1 die Verwaltung der Scripte und Stylesheets übernehmen - Vorraussetzung ist die Nutzung der Möglichkeiten rund um wp_enqueue_script() und wp_enqueue_style(). Damit werden diverse Vorteile direkt duch den WordPress-Kern übernommen; komprimieren und gemeinsames Ausliefern in jeweils einer Datei alle Scripte und Stylesheets. Ebenso kümmert sich WordPress darum, dass jedes Script nur einmal in der Auslieferung vorhanden ist; also nicht ein bekanntes Problem wie die mehrfache Verwendung von jQuery zulassen.
Aktuell gibt es dazu immer wieder ähnliche Ansätze mit diversen JS-Lösungen. WordPress kann sich darum kümmern und optimiert ausliefern, jedes Script nur einmal und einfach via ID auf die Scripte zugreifen.

Um nun aber die includierten Scripte und Stylesheets sauber auszuwerten, bedarf es einiger Zugriffe oder die kleine folgende Lösung und schon sind alle eingebundenen Dateien in einer Liste. Die folgenden Funktion kippt die Adressen einfach in den Footer von WordPress, Frontend - wp_footer und Backend - admin_footer, dies kann via Hook natürlich angepasst werden; dies soll nur eine Idee sein und einen Ansatz liefern.
Parallel habe ich es im Plugin Debug Objects integriert und die neue Version sollte in den weihnachtlichen Tagen online gehen.

// view on frontend footer
add_action( 'wp_footer', 'fb_urls_of_enqueued_stuff' );
// view on backend footer
add_action( 'admin_footer', 'fb_urls_of_enqueued_stuff' );
// get engueued scripts and style urls
function fb_urls_of_enqueued_stuff( $handles = array() ) {
	global $wp_scripts, $wp_styles;
	
	// scripts
	foreach ( $wp_scripts -> registered as $registered )
		$script_urls[ $registered -> handle ] = $registered -> src;
	// styles
	foreach ( $wp_styles -> registered as $registered )
		$style_urls[ $registered -> handle ] = $registered -> src;
	
	if ( empty( $handles ) ) {
		$handles = array_merge( $wp_scripts -> queue, $wp_styles -> queue );
		array_values( $handles );
	}
	$output = '';
	foreach ( $handles as $handle ) {
		if ( ! empty( $script_urls[ $handle ] ) )
			$output .= $script_urls[ $handle ] . '<br>';
		if ( ! empty( $style_urls[ $handle ] ) )
			$output .= $style_urls[ $handle ] . '<br>';
	}
	
	echo $output;
}

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

function get_language_strings() {
    $strings = array(
        'example' => __( 'My Example String', TEXTDOMAIN_CONSTANT ),
        'foo'   => __( 'My foo string', TEXTDOMAIN_CONSTANT ),
        'bar'   => __( 'My bar', TEXTDOMAIN_CONSTANT )
    )

    return $strings;
}

Beim Aufruf der Erweiterung, Plugin oder im Theme, muss die Funktion geladen werden. Dafür stellt WordPress die Funktion wp_localize_script() bereit, die sich um alles kümmert:

wp_localize_script( 
                       'my_foo', 
                       'my_var_prefix',
                       $this->get_language_strings() // inside class
);

In den Scripten kann nun auf die Variablen zugegriffen werden:

alert( my_var_prefix.example );

Kein Einbinden der wp-load.php oder ähnliches, einfach auf die Inhalte zugreifen. Die Strings werden nun in allen Sprachen mit Hilfe der klassischen Methoden übersetzt und es gilt lediglich die entsprechenden Dateien anzulegen.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Gelegentlich möchte man in seiner Blog-Sidebar Dropdowns-Menüs (select-Elemente) zur Navigation der Kategorien und des Archivs unterbringen und der WordPress-Codex bietet in den Dokumentationen auch entsprechende Lösungen für Kategorien und Archiv an, die allerdings beide nur mit aktiviertem JavaScript funktionieren. In beiden Fällen wird die URL der Ziel-Seite im value-Wert der im Dropdown-Menü verbauten option-Elemente gespeichert und sobald man einen Eintrag auswählt, wird man via JavaScript auf eben jene URL weitergeleitet. Die fast gleiche Funktionalität ließe sich aber auch ganz ohne Scripts erreichen:

1. Ein altmodisches GET-Formular mit Absendebutton anlegen, das an die Basisadresse der Website sendet
2. Das select in eben dieses Formular stecken und name="cat" angeben
3. Den option-Elementen als value den Slug der Kategorien geben

Das Absenden des Formulars resultiert dann in einem Aufruf von blog.de/?cat=kategorie und damit der gewünschten Kategorie, ggf. mit einem Redirect auf die suchmaschinenfreundliche Variante der URL. Das funktioniert für den Besucher genau so gute wie die Lösung aus dem Codex, sieht man einmal davon ab, dass man einen Button anklicken muss. Doch genau hier kann man mit JavaScript eingreifen, den Button verstecken und das Absenden des Formulars über einen via Script eingefügten onclick-Handler übernehmen. Das Endresultat sieht dann für Surfer mit Script wie die Codex-Lösung aus und alle anderen kommen dann eben über einen Klick auf den Button an ihr Ziel und alle sind zufrieden. Also an die Arbeit!

Die Grundlage für das Kategorie-Dropdown bildet ein ganz normales HTML-Formular:

<form id="kategorienform" action="<?php bloginfo('url'); ?>" method="get">
    <label for="kategorienselect">Zu Kategorie springen</label>
    <select id="kategorienselect" name="cat">
        <option value="">-- Bitte auswählen</option>
        <?php
            $categories = get_categories('hierarchical=0');
            foreach($categories as $category){
                $selected = (is_category($category->cat_ID)) ? 'selected' : '';
                echo '<option '.$selected.' value="'.$category->cat_ID.'">'.$category->cat_name.' ('.$category->count.')</option>';
            }
        ?>
    </select>
    <input id="kategorienbutton" value="Kategorie abrufen" type="submit">
</form>

Dieses könnte man so in die Seitenleiste des Dokuments werfen und es würde funktionieren, doch wir wollen ja noch den Absenden-Button loswerden und die Umleitung direkt bei der Auswahl einer Kategorie starten. Hierzu braucht es nicht mehr als 6 Zeilen JavaScript, die man direkt unter dem Formular einfügen kann:

<script type="text/javascript">
    document.getElementById('kategorienselect').onchange = function(){
        if(this.value){
            document.getElementById('kategorienform').submit();
        }
    };
    document.getElementById('kategorienbutton').style.display = 'none';
</script>

Ändert der Benutzer seine Auswahl im select-Element, wird (sofern nicht gerade der „Bitte auswählen“-Eintrag gewählt wird) das Formular automatisch abgesendet, auch ohne den mit style.display = 'none' unsichtbar gemachten Button aktivieren zu müssen – und fertig ist das benutzerfreundliche und trotzdem auch ohne JavaScript funktionierende Kategorie-Dropdown! Das ist zwar etwas mehr Code als die drei Zeilen aus dem Codex, funktioniert dafür aber garantiert bei jedem Besucher. Und das Prinzip ist recht simpel, vorausgesetzt man plant von vornherein entsprechend. Da eben das bei WordPress selbst nicht passiert ist, müssen wir etwas mehr tippen – beziehungsweise im Falle des Archiv-Dropdowns sogar sehr viel mehr:

<form id="archivform" action="<?php bloginfo('url'); ?>" method="get">
    <label for="archivselect">Zu Monat springen</label>
    <select id="archivselect" name="m">
        <option value="">-- Bitte auswählen</option>
        <?php
            $query = "SELECT YEAR(post_date) AS `year`, MONTH(post_date) AS `month`, COUNT(ID) as `posts`
                FROM $wpdb->posts
                WHERE post_type = 'post' AND post_status = 'publish'
                GROUP BY YEAR(post_date), MONTH(post_date)
                ORDER BY post_date DESC";
            $key = md5($query);
            $cache = wp_cache_get('select_archives', 'general');
            if(!isset($cache[$key])){
                $arcresults = $wpdb->get_results($query);
                $cache[$key] = $arcresults;
                wp_cache_set('select_archives', $cache, 'general');
            }
            else{
                $arcresults = $cache[$key];
            }
            if($arcresults){
                global $wp_locale;
                foreach((array) $arcresults as $arcresult){
                    $value = $arcresult->year.$arcresult->month;
                    $text = sprintf(__('%1$s %2$d'), $wp_locale->get_month($arcresult->month), $arcresult->year);
                    $count = '&nbsp;('.$arcresult->posts.')';
                    $selected = (is_month() && get_query_var('year').get_query_var('monthnum') == $value) ? 'selected' : '';
                    echo '<option '.$selected.' value="'.$value.'">'.$text.$count.'</option>';
                }
            }
        ?>
    </select>
    <input id="archivbutton" value="Archiv abrufen" type="submit">
</form>

Das Problem beim Monatsarchiv ist, dass man ohne einen eigenen SQL-Query nicht an die Informationen herankommt, die man für ein Monats-Archiv braucht. So kommt man nicht drum herum, manuell die Datenbank zu bemühen und das Ergebnis händisch zu cachen. Das Prinzip ist aber identisch: einfach ein herkömmliches Formular ausgeben und wieder mit sechs kleinen Zeilen JavaScript aufwerten:

<script type="text/javascript">
    document.getElementById('archivselect').onchange = function(){
        if(this.value){
            document.getElementById('archivform').submit();
        }
    };
    document.getElementById('archivbutton').style.display = 'none';
</script>

Wir fassen zusammen: viele Zeilen Code, aber kompliziert ist das Prinzip nicht. Unobtrusive JavaScript ist eine Frage der intelligenten Planung und wenn die mal, wie bei WordPress, nicht von Haus aus mitgeliefert wird, muss man sich eben behelfen. Bei herkömmlichen Websites gibt es keinen Grund, die Bedienung komplett von JavaScript abhängig zu machen und falls doch mal etwas Mehraufwand entsteht, so ist er die saubere Trennung der Schichten und den Zugänglichkeits-Bonus allemal wert.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Es gibt noch immer Potenzial zum Reduzieren der Größe, so bin ich kein Freak im Rahmen von JavaScript und hier sehe ich noch einiges an Möglichkeiten. Nun aber die beiden Lösungen zum Vergleich.

Variante 1 hat in erster Linie ihren Bedarf im CSS, viel Code für wenig Wirkung. Man braucht aktuell für diverse Browser unterschiedliche Syntax um die Rundungen zu erzeugen. Die Animation funktioniert nur in Webkit-Browsern und auch die RGB-Farben sind recht viele Zeichen.

1. Die 4,5k Variante
2. Die 1k Variante

Um diese Sachen auf 1k zu drücken musste einiges an Code weichen; eine andere Möglichkeit habe ich nicht gesehen. Die Animation habe ich nur im Ansatz zum Test eingebaut, sie ist wesentlich simpler. Das Spiel der Farben lasse ich via Zufall ablaufen und brauche trotzdem weniger Code. Lediglich die Möglichkeit RGB-Syntax zu nutzen ist geblieben, wird aber im JS per Zufall erzeugt.

In beiden Fällen habe ich es getan, weil ich mal etwas Spielen und Versuchen wollte. Einfach mal so und trotzdem sollte der Code valide und mit aktuellen Mitteln möglich sein. Interessant ist wohl das HTML5-Markup der 1k Variante - auch diese Version ist valider Code und ist doch recht untypisches Markup.

<!DOCTYPE html>
<meta charset="utf-8"> 
<title>one day at a time in 1k</title>
<style>body{background:#FFF;font:16px/23px Georgia,Times,serif;margin:20px}h1{font-size:45px}h3{display:none}time{font-size:50px;border:3px solid #F9F5EB;-webkit-box-shadow:4px 4px 6px #545454;-moz-box-shadow:4px 4px 6px #545454;box-shadow:4px 4px 6px #545454;padding:30px 40px}div{margin:120px 0}</style>
<script>function d(){var n=new Date(),t=n.getDate(),m=n.getMonth(),y=n.getFullYear(),y=t+'.'+m+'.'+y;if(t<10)t="0"+t;if(m<10)m="0"+m, datetime=y+'-'+m+'-'+t,x=document.createTextNode(y);d=document.getElementById('d');d.appendChild(x);d.setAttribute("datetime",datetime);setInterval('d.style.background="rgba("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+",0.4)"',600);setInterval('d.style.margin=Math.floor(Math.random()*20)+"%"',500)}window.onload=d;</script>
<header><h1>Carpe diem (1k)</h1></header>
<div><h3>Today's date</h3><time id="d">&nbsp;</time></div>

Die style- und script-Elemente kann man im Grunde unbeachtet lassen, es geht um die anderen Tags, hier wird dem typischen Markup von HTML einiges entzogen.

Das html-, head- und body sind ganz entfallen. Gleiches kann man auch für colgroup und tbody machen. Andere Elemente dürfen nur das schließende Tag weg lassen: li, dt, dl, p, option und einige mehr.

Im Gegensatz dazu die Variante mit xHTML-Schreibweise und kompletten Tags.

<!DOCTYPE html> 
<html lang="en"> 
	<head> 
		<meta charset="utf-8"> 
		
		<title>one day at a time</title>
		
		<meta name="description" content="one day at a time - Small Sample Application">
		<meta name="language" content="en" />
		<link rel="stylesheet" href="style.css" />

		<script>
			function addDate(){
				var now   = new Date();
				var day   = now.getDate();
				var month = now.getMonth();
				var mname = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
				var year  = now.getFullYear();
				var date  = day + '.' + mname[month] + ' ' + year;
				if (day < 10) day = "0" + day;
				if (month < 10) month = "0" + month;
				var datetime = year + '-' + month + '-' + day;
				var dtxt   = document.createTextNode(date);
				document.getElementById('date').appendChild(dtxt);
				document.getElementById('date').setAttribute("datetime", datetime )
			}
			window.onload = addDate;
		</script>
	</head>
	<body>
		
		<div id="wrap">
			
			<header>
				<hgroup>
					<h1>one day at a time</h1>
					<h2>Carpe diem &mdash; <a href="http://en.wikipedia.org/wiki/Carpe_diem">Seize the day</a>.</h2>
				</hgroup>
			</header>
			
			<section>
				<h3>Today's date</h3>
				<div class="pulse">
					<time id="date">&nbsp;</time>
				</div>
			</section>
			
			<footer>
				<p>View in an HTML5 browser such as: <a href="http://ie.microsoft.com/testdrive/">IE9 Developer Preview</a>, <a href="http://www.mozilla.com/en-US/firefox/firefox.html">Firefox</a>.</p>
				<p>See animation only on webkit browser such as: <a href="http://www.apple.com/safari/">Safari</a> or <a href="http://www.google.com/chrome/index.html?hl=en&amp;brand=CHMB&amp;utm_campaign=en&amp;utm_source=en-ha-na-us-sk&amp;utm_medium=ha">Chrome</a>.</p>
			</footer>
			
		</div>
		
	</body>
</html>

Natürlich sind hier auch einige Inhalte mehr und vor allem wesentlich mehr Semantik unter gebracht. Eine schöner Vergleich der vielleicht zum Nachdenken anregt und mir wieder die Unterschiede und Möglichkeiten aufgezeigt hat.

Vielleicht Lust bekommen, zu spielen, zu testen und die neuen Möglichkeiten mit HTML5 und CSS3 zu versuchen - wenn ja, dann hat sich der Artikel gelohnt. Solltest du Hinweise für meine Spielerei oder Fehler gefunden haben - dann bin ich sehr dankbar und der Artikel hat sich noch viel mehr gelohnt.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Ab und an braucht man aber etwas bestimmtes und einiges davon wiederholt sich und daraus sind einige Code-Schnippsel entstanden, die hier nun abgelegt sind. Dabei möchte ich speziell am Beispiel jQuery zeigen, wie das geht - liegt zum einen daran, dass jQuery mit vielen Plugins im Core von WordPress vorhanden ist und dass die Arbeit mit jQuery recht unkompliziert ist. Prinzipiell gelten die Hooks und Aufrufe aber auch für eigene Scripte und andere Bibliotheken.

Die Hooks zum einhaken

WordPress bietet die Hooks um an bestimmten Punkten im Core einzuhaken. Hier ist einer der Stärken von WordPress und die folgenden drei Hooks sind insbesondere für das inkludieren von Scripten bei Themes interessant. Die nachfolgenden Beispiele zeigen die Verwendung auf.

• init
• template_redirect
• after_setup_theme ab WordPress 3.0

jQuery von WordPress im Theme mit der Google AJAX Library ersetzen

Im folgenden Source wird die jquery-Library von Google CDN geladen; die Nutzung von jQuery kann aber ungestört genutzt bleiben. Andere Plugins können also via wp_enqueue_script() sehr einfach auf die Bibliothek zugreifen.

function fb_greyfoto_init() {
	if ( !is_admin() ) { // prinzipiell überflüssig, da der Hook nur im Theme zieht
		wp_deregister_script( 'jquery' ); // deregister Schlüssel jquery
		wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2'); // registriere Schlüssel jquery mit der URL von Google CDN
		wp_enqueue_script( 'jquery' ); // binde jquery ein
	}
}
// nur für Theme, ab WordPress 3.0
add_action( 'after_setup_theme', 'fb_greyfoto_init' ); // Theme aktiv, inkludiere Funktion

jQuery Library im Footer

Der Standard-Aufruf von wp_enqueue_script( 'jquery' ) im Theme sorgt zwar dafür, dass man jQuery von WordPress holt und wenn alle Plugins und Themes die Bibliothek so referenzieren, dann wird die Bibliothek auch nur einmal eingebunden, aber jQuery wird nicht im Footer geladen, sondern im head der Site. Daher muss der Aufruf umgestellt werden und der Parameter für "lade im Footer" mitgegeben werden.
Im Aufruf des Beispiel zeigt sich auch der Unterschied der Hooks, da after_setup_theme erst ab WordPress 3.0 zur Verfügung steht.

function fb_greyfoto_init() {
	if ( !is_admin() ) {
		wp_deregister_script( 'jquery' );
		wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.4.2', true ); // lade im Footer - true
		wp_enqueue_script( 'jquery' );
		
		// js vom Theme laden, Vorraussetzung jQuery
		wp_enqueue_script( 'styleswitcher', get_bloginfo( 'template_directory') . '/js/styleswitcher.jquery.php', array( 'jquery'), '1.3.2', true ); // lade mein Script mit Schlüssel styleswitcher im Footer und benutze jquery
		wp_enqueue_script( 'greyfoto', get_template_directory_uri() . '/js/photoblogfb.js', array( 'jquery', 'styleswitcher'), '1.1.3.1', true ); // nutze jquery und styleswitcher und lade dann Script greyfoto
	}
}

// auch für WP < version 3.0
global $wp_version;
if ( version_compare($wp_version, "3.0alpha", "<") ) {
	add_action( 'init', 'fb_greyfoto_init' );
} else {
	add_action( 'after_setup_theme', 'fb_greyfoto_init' );
}

Das obige Beispiel kann man noch ein wenig eleganter lösen und so das Laden der Scripte an WP übergeben; wichtig ist, dass die eigenen Scripte über einen Schlüssel registriert sind und diese Schlüssel gibt man dann nur als Voraussetzung mit.

function fb_greyfoto_init() {
	if ( !is_admin() ) {
		wp_deregister_script( 'jquery' );
		wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.4.2', true ); // lade im Footer - true
		wp_register_script( 'styleswitcher', get_template_directory_uri() . '/js/styleswitcher.jquery.php', array( 'jquery'), '1.3.2', true ); // registrier mein Script mit Schlüssel styleswitcher für das Laden im Footer und Vorraussetzung jquery
		wp_register_script( 'greyfoto', get_template_directory_uri() . '/js/photoblogfb.js', array( 'jquery', 'styleswitcher'), '1.1.3.1', true ); // nutze jquery und styleswitcher und lade dann Script greyfoto
		
		wp_enqueue_script( array('greyfoto') ); // greyfoto braucht styleswitcher und jquery
	}
}

add_action( 'after_setup_theme', 'fb_greyfoto_init' );

Script bei spezieller Seite laden

Manche Scripte braucht man explizit nur auf bestimmten Templates, Seiten oder Beiträgen - dazu sind die Conditional Tags da; es gilt sie zu nutzen. Hier beginnt Performance-Optimierung. Das folgende Script wird nur beim Template custom-page.php geladen.

function fb_greyfoto_page_init() {
	if ( !is_page_template( 'custom-page.php' ) )
		return;

	wp_enqueue_script( 'mypagescript', get_template_directory_uri() . '/js/my_script_4_page.js', array('jquery'), '0.1', true );
}
add_action( 'template_redirect', 'fb_greyfoto_page_init' );

Die Verwendung des $

Auch innerhalb der Scripte gibt es einiges zu beachten.
Um mit $ zu arbeiten, wie viele mit jQuery gewohnt sind, muss Jquery aan $ übergeben werden; einfach und schnell passiert und nun kann man wie gewohnt arbeiten. Die Kurzvariante $(function() {} ); sollte man sich innerhalb von WordPress angewöhnen.

jQuery(function ($) {
	// hier kann man nun ohne Probleme $ als Referenz auf jQuery nutzen
});

Um zu prüfen, ob das HTML geladen ist, nutzt man den folgenden Aufruf. So stellt man sicher, dass der DOM geladen ist und man via jQuery das DOM durchsuchen kann und nun die eigentliche Arbeit des Scriptes starten kann. Ein klare Empfehlung also für diese Variante. Die vielen Vorteile möchte ich nicht erklären, dies kann man genau und umfangreich im Beitrag Introducing $(document).ready() nachlesen.

jQuery(document).ready(function ($) {
	$('#id').toggle({
		//paramter für bsp. toggle
	});
});

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

// onyl css, when post has a gallery
function gallery_stylesheet($posts) {
	if ( empty($posts) )
		return $posts;

	$found = false;

	foreach ($posts as $post) {
		if ( stripos($post->post_content, '[gallery') )
			$found = true;
			break;
		}

	if ($found)
		wp_enqueue_style( 'gallery-stylesheet', get_bloginfo('stylesheet_directory') . '/gallery.css', false, false, 'screen' );

	return $posts;
}
add_action('the_posts', 'gallery_stylesheet');

Diesen Ansatz kann man natürlich auch nutzen für das Laden von Scripten,

// onyl js, when post has a gallery
function my_script($posts) {
	if ( empty($posts) )
		return $posts;

	$found = false;

	foreach ($posts as $post) {
		if ( stripos($post->post_content, '[gallery') )
			$found = true;
			break;
		}

	if ($found)
		wp_enqueue_script( 'my-script', get_bloginfo('stylesheet_directory') . '/script.js', false, false, true );

	return $posts;
}
add_action('the_posts', 'my_script');

Weitere Hinweise zum Einbinden von JavaScript- und CSS-Dateien gibt es in einem anderen Beitrag zum Thema.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

WordPress stellt eine Funktion bereit, die es einfach erlaubt, das Suchformular zu nutzen: get_search_form(). Ist genauso zu verstehen wie beispielsweise die Template Tags get_sidebar() oder get_header(), die die meisten Themes nutzen. Verfügbar ist die Funktion seit WordPress Version 2.7 und ist zu finden in wp-includes/general-template.php.

HTML-Resultat

Die Ausgabe ohne Veränderung der Funktion sieht dann im HTML wie folgt aus.

<form role="search" method="get" id="searchform" action="http://example.com/">
	<div>
		<label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
		<input type="text" value="" name="s" id="s" />
		<input type="submit" id="searchsubmit" value="Suche" />
	</div>
</form>

Inhalt im Inputfeld

Nun bietet die Funktion einen Hook an, um auf das Suchfeld Einfluss zu nehmen. In diesem Beispiel soll der Text im Suchfeld beeinflusst werden, so dass der User eine Info dort vorfindet.
Dies wird über Filter Hook the_search_query realisiert. Innerhalb der Funktion, die an diesen Hook übergeben wird, wird zusätzlich noch geprüft, ob schon ein Wert im Feld steht und wenn dies nicht der Standard-Wert ist, sondern zum Beispiel der zurückgegeben Wert aus der Suche, dann wird nicht der Wert im Suchfeld gesetzt, sondern unverändert gelassen.
Diese Funktion gehört klassisch in die functions.php des Themes und kann natürlich an die eigenen Bedürfnisse angepasst werden.

function fb_get_search_query() {
	$return = stripslashes( get_query_var( 's' ) );
	if ( $return == '' )
		$return = __( 'Hier Suchbegriff eingeben...', FB_BASIS_TEXTDOMAIN );
	else
		$return = apply_filters( 'get_search_query', $return );
	
	return $return;
}
add_filter( 'the_search_query', 'fb_get_search_query' );

Suchfeld und eigene Bedürfnisse

Nun ist das Suchformular aber eventuell nicht immer, wie man sich das wünscht und daher bietet es sich an, ein eigenes Suchfeld zu erstellen und zu nutzen. Um dabei aber die Möglichkeiten von WordPress weiterhin anzubieten, ist es sinnvoll, auch diese Möglichkeit als Funktion oder auch Template mit dem Namen searchform.php, siehe nähere Infos weiter unten, im Theme einzubinden und die Hooks mit vorzusehen. So können eventuell genutzte Plugins darauf zugreifen. Auch dazu ein kleines Beispiel, bei dem als Veränderung eine kleine JavaScript-Funktion eingebunden werden soll.

Als erstes die Funktion für die functions.php des Themes.

function fb_get_search_form() {
	do_action( 'get_search_form' );

	$form = '<form method="get" id="searchform" action="' . get_option('home') . '/" >
	<div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
	<input type="text" value="' . esc_attr(apply_filters('the_search_query', get_search_query())) . '" name="s" id="s" onfocus="clearSearch();" />
	<input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
	</div>
	</form>';

	echo apply_filters('get_search_form', $form);
}

Die Funktion ernthält den schon oben angesprochenen Hook the_search_query und außerdem die Erweiterung des JavaScript onfocus="clearSearch();". Dies kleine Funktion sorgt nur dafür, dass der Inhalt des Suchfeldes gelöscht wird, wenn man in die Box klickt. Wobei ich den Inhalt prüfe und nur dann lösche, wenn der Inhalt explizit dem vorgegebenen Syntax Hier Suchbegriff eingeben... entspricht.

function clearSearch() {
	queryBox = document.getElementById('s');

	if ( queryBox.value == 'Hier Suchbegriff eingeben...' ) {
		queryBox.value = '';
	}
	queryBox.style.color = '#292929';
}

Das kleine Script ist in einer Datei abgelegt und wird ebenfalls aus der functions.php des Themes geladen. Dazu dient der folgende Aufruf; nähere Infos zur Funktion wp_enqueue_script finet ihr beispielsweise im Artikel JavaScript-Bibliotheken in und aus WordPress nutzen.
wp_enqueue_script( 'fb_scripts', get_bloginfo('template_directory') . '/js/script.js', '', '', true );


Alternativ eine Lösung mit Hilfe von jQuery

$(document).ready(function() {  
$("input#s").val("Enter your search text here");  
   textFill($('input.text1'));  
});  
    function textFill(input){ //input focus text function  
    var originalvalue = input.val();  
    input.focus( function(){  
        if( $.trim(input.val()) == originalvalue ){ input.val(''); }  
    });  
    input.blur( function(){  
        if( $.trim(input.val()) == '' ){ input.val(originalvalue); }  
    });  
} 

Das Template searchform.php

Natürlich besteht auch weiterhin die Möglichkeit extra ein Template für das Suchformular anzulegen. Dabei sucht WordPress nach dem Template searchform.php im Theme. Dabei sucht WordPress im ersten Schritt nach diesem Template, wird dies nicht gefunden, dann wird seit Version 2.7 von WordPress das Formular aus dem Template Tag get_search_form() genutzt.

Welchen Weg man geht, das ist sicher von der Arbeitsweise und Gewohnheit abhängig, aber damit ist ein Standard vorhanden, der einfach als Template Tag zur Verfügung steht und es kann bei nicht sonderlich ausgefallenen Anwendungen ein Template gespart werden.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Eine neue Lösung namens CiteDrag von Elijah Grey ermöglicht es, dass man Elemente einfach per Drag&Drop in das Textfeld holt, Markieren und ziehen oder Elemente direkt ziehen.

Schlank und benutzerfreundlich kann die Lösung die eine oder andere Website aufwerten, daher sicher einen Blick wert: CiteDrag. Demo und Syntax sind verfügbar, Hintergründe sind im Artikel von Elijah zu finden.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Um so schöner, dass es auch für die neue Version (alte Version) ein übersichtliches CheatSheet gibt, was beim Umgang ein leichten Zugriff erlaubt. Einfach mal drüber schauen.
Alternativ kann man noch immer auf das Firefox Add-on oder die Air-Applikation zurückgreifen.

Aufgefallen bei Technikwürze 132

Update: Cheat Sheet für jQuery Version 1.4 gibt es unter neuen Adresse

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Diesem Thema hat Andrés Nieto verschrieben und es lohnt den Artikel zu überfliegen, die Übersetzungsfunktion bringt sicher nicht das beste Ergebnis, aber mit ein wenig Verständnis und Mühe ist das Ergebnis seiner Bemühungen ersichtlich. Daher meine Empfehlung: „Carga asíncrona de grandes cantidades de dátos con Ajax“ lesen.

In letzter Zeit hört man immer wieder gern, das JSON sich wunderbar ansprechen lässt und gerade im Bezug auf JavaScript kann sich der Entwickler hier schon eine Menge an Zeichen sparen. Schaut euch den Code im Verhältnis zu den Diagrammen an, es lohnt.
Ich denke, dass die Ergebnisse dem einen oder anderen Informationen liefern, die die Entscheidung zu einem Format leichter machen können.
Wer unschlüssig ist, kann auch den Code direkt im Artikel nutzen und eigene Werte ermitteln, wobei es sicher nochmal spannend ist, den Vergleich auf unterschiedliche Browser zu erweitern.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Ich wünsche mir, dass damit die Fragen für mich klarer werden und die Nutzung einfacher wird. Ebenso kann es natürlich genutzt werden um sich auf spezielle Bereiche oder auch nur Wörter zu beziehen, sei es wegen einer Diskussion, Korrektur oder einfach nur Rechtschreibfehler. Ich würde mich freuen, wenn ich ein Feedback bekomme, ob die Funktion sinnvoll erscheint und wie das Handling ist.

Hinweise

Die Möglichkeit besteht nur, wenn mein Blog mit aktivem JavaScript besucht wird. Ich habe es unter diversen Browsern getestet und bisher keine Fehler entdeckt, lediglich Unterschiede in der Darstellung, die aber nur auf Grund des entsprechenden Stylesheets zu erwarten waren.

Die Technik

Der eine oder andere möchte vielleicht mehr dazu wissen und die gleiche Möglichkeit involvieren, daher hier in einigen wenigen Worten, wo das ganze her ist und wie man es integriert.

Das JavaScript um diese Möglichkeit anzubieten wurde von Jim Jeffers mit Hilfe von jQuery erstellt. Da ich hier auch im Blog jQuery für diverse Umsetzungen nutze, wollte ich gern diesen Mehrwert ebenso hinterlegen. Natürlich muss das Framework jQuery vorhanden sein, minimal Version 1.2.6. Ist dieses eingebunden, so muss man lediglich das Script von Jim hinterlegen und den Bereich, der die Funktion haben soll mit einer entsprechenden Klasse ausstatten. Im Standard ist das die Klasse quotable.

Hinweis: Wenn ihr WordPress ab Version 2.7 einsetzt und den Template Tag post_class() nutzt, dann muss diese Funktion lediglich um die Klasse erweitert werden, ein Beispiel: