Die Fülle stellt aber auch das Problem dar und so ist es nicht einfach die richtigen Fonts in der Kombination zu finden. In der Vergangenheit sind mir dabei einige Lösungen unter gekommen, die ich in einer einfachen Seite gesammelt habe und nun einen recht schönen Umfang haben. Die Auswahl stammt nicht von mir, sondern in der Regel von den Designern oder Vorgaben aus dem Netz.

Die Inspiration des Aussehen habe ich von Beautiful Web Type entnommen und ebenso die Idee der Zitate. Ein wunderbarer One-pager, der es lohnt zu lesen, denn die Zitate stehen in irgendeiner Form zu mir als Person; die eine oder andere Begründung findet man auch im Source.

Das Projekt selbst liegt auf Github und soll, darf und muss erweitert werden - also bitte forken. Wer dies nicht mag, trotzdem etwas beitragen will; die bekannten Wege via Mail oder ein Issue zum Projekt im Repo gehen natürlich auch.

© 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

Innerhalb der kleinen Spielerei sind diverse Anpassungen für Media Queries drin, so dass die Seite auch einen Effekt hat, wenn man die Größe des Browsers ändert bzw. mit verschiedenen Geräten auf die Seite gelangt. Dabei habe ich keinen Wert auf Schönheit gelegt, sondern eher Pragmatismus und Effekthascherei genutzt. So nutze ich Transition via CSS3 um das Verändern etwas animiert zu gestalten und so die Darstellung zu hübschen.
Schaut euch den Code einfach an, entweder direkt auf der Seite oder im Projekt auf github, wo ich alles abgelegt habe.

Für alle, denen noch der Zusammenhang fehlt; bitte einfach die Seite besuchen und den Browser in der Größe ändern; dabei die Ausgabe am oberen Rand beachten. Alternativ dieses kleine Video.

Mir ist klar, dass dies nicht die beste Lösung ist, da Media Queries in jeder erdenklichen Form auftauchen können und die Ausgabe den größten Nutzwert hat, wenn man die Ausgabe der optimierten Größe anpasst. Aber es stellt eine einfache und schnell Lösung dar. Alternativen sind vermutlich via JavaScript denkbar, die das Stylesheet parsen und anhand der gefunden Anweisungen zu Media Queries den Viewport auswerfen – aber diese Form erfordert etwas mehr zeit und Kraft; also schnell überzogen und in meinem Fall ist die vorgestellte Lösung vollkommen ausreichend; durch die Erweiterungen von Frederic sind auch noch andere Viewports eingeflossen und in diesem Zusammenhang habe ich mir bekannte typische Größen und Ausrichtungen integriert – Portrait und Landscape. Alles weitere seht ihr in der angesprochenen debug.css und direkt auf der Seite, die den Source des Stylesheets ausgibt.

© 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 fb_move_admin_bar() {
    echo '
    <style type="text/css">
    body { 
    margin-top: -28px;
    padding-bottom: 28px;
    }
    body.admin-bar #wphead {
       padding-top: 0;
    }
    body.admin-bar #footer {
       padding-bottom: 28px;
    }
    #wpadminbar {
        top: auto !important;
        bottom: 0;
    }
    #wpadminbar .quicklinks .menupop ul {
        bottom: 28px;
    }
    </style>';
}
// on backend area
add_action( 'admin_head', 'fb_move_admin_bar' );
// on frontend area
add_action( 'wp_head', 'fb_move_admin_bar' );

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

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

// Adds classes for custom post types to body_class() and post_class()
function fb_add_body_class( $class ) {
	$post_type = 'my_example_post_type'; // der Post Type

	if ( get_query_var('post_type') === $post_type ) { // nur wenn der Post Type aktiv ist, dann erweitern
		$class[] = $post_type;
		$class[] = 'type-' . $post_type;
	}

	return $class;
}
add_filter( 'body_class', 'fb_add_body_class' );

Alternativ kann man auch die post_class() Funktion erweitern um die Klasse des Custom Post Type nicht direkt am body-Tag zu haben. Dazu verwende ich die gleiche Funktion und es muss lediglich der Hook für die post-Klassen angesprochen werden.

add_filter( 'post_class', 'fb_add_body_class' );

Beide Template Tags werden im HTML-Tag verwendet, wie auch die verlinkten Codex-Seiten aufzeigen; bzw. ein Beispiel für die Post-Klasse:

<div <?php post_class('class-name'); ?>>

Viel Freude beim austesten und nutzen. Die Kommentarfunktion steht wie immer für Verbesserungen und Diskussion offen.

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

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

Der folgende Code ist lediglich in einer PHP-Datei zu speichern und kann dann genutzt werden. Ich habe nur wenig mit CSS gespielt und angepasst; ebenfalls ist die Browserunterstützung vermutlich nicht sonderlich groß, da ich rein auf HTML5 und CSS3 setze und keine Scripte dafür hinterlege.

<!DOCTYPE html> 
<html> 
<head> 
	<meta charset=utf-8 /> 
	
	<title>Simple Media Queries Tester</title> 
	
	<meta name="description" content="Simple Media Queries Tester" /> 
	<meta name="author" content="Frank Bueltge - http://bueltge.de" /> 
	
	<style type="text/css" media="screen">
	/*<![CDATA[*/
		body { background:#fff;font-family:Arial,Helvetica,sans-serif;font-size:100%;margin:20px; }
		a { text-decoration:none; color:#1152c8; }
		fieldset { border:1px solid #ccc; margin:0 0 20px 0; }
		form#mediaqueriestest input { margin:auto; }
		form#mediaqueriestest button { margin:auto;text-shadow:0 1px 1px #000;text-transform:uppercase; }
		form#mediaqueriestest button:hover { background:#1152c8;color:#000;cursor:pointer; }
		form#mediaqueriestest input:active, form#mediaqueriestest input:focus { outline:none;border:1px solid #333;background:#fff;color:#000;-moz-border-radius:20px;-webkit-border-radius:20px;-khtml-border-radius:20px;border-radius:20px; }
		form#mediaqueriestest fieldset, form#mediaqueriestest legend, form#mediaqueriestest input, form#mediaqueriestest button, iframe, footer {
background:#333;color:#fff;padding:7px 25px;border:1px solid #333;-moz-border-radius:20px;-webkit-border-radius:20px;-khtml-border-radius:20px;border-radius:20px; }
		form#mediaqueriestest fieldset, form#mediaqueriestest legend { background:#ccc;color:#000;margin:10px;padding-bottom:25px; }
		form#mediaqueriestest legend { padding:7px 25px;-webkit-box-shadow: 2px 2px 2px #333; }
		iframe { margin:0 auto; border:1px solid #ccc; margin:10px; }
		footer { display:block; color:#333; margin:20px 0 0 0; border:2px solid #ba0100; background:#fff; }
	/*]]>*/
	</style>

</head> 
<body>
	<header>
		<h1><a href="http://bueltge.de/" title="to the weblog of the author">Simple Media Queries Tester</a></h1>
	</header>
	
	<section>
		<form id="mediaqueriestest" action="<?php echo htmlspecialchars( strip_tags($_SERVER['PHP_SELF']) ); ?>" method="get">
		<fieldset>
		<legend>Test your URL</legend>
		<label for="testurl">Test URL</label>
			<input type="text" name="testurl" id="testurl" placeholder="Input your test url here" size="70">
			<button type="submit">Test it!</button>
		</fieldset>
		</form>
		<?php
		if ( !empty($_GET['testurl']) ) {
			$newURL = htmlspecialchars( strip_tags($_GET['testurl']), ENT_QUOTES );
			if (preg_match("/^(www.)/i", $newURL) )
				$iframeurl = 'http://'.$newURL;
			elseif (preg_match("/^(http:\/\/)/i", $newURL))
				$iframeurl = $newURL;
			else
				$iframeurl = 'http://www.' . $newURL;
			
			echo '<iframe name="fullsize" id="fullsize" width="960" height="450" seamless="seamless" src="' . $iframeurl . '"></iframe>';
			echo '<iframe name="netbook" id="netbook" width="650" height="450" seamless="seamless" src="' . $iframeurl . '"></iframe>';
			echo '<iframe name="mobile" id="meinframe" width="450" height="450" seamless="seamless" src="' . $iframeurl . '"></iframe>';
		} else {
			echo '<p>keine Seite geladen - Adresse Eingeben</p>';
		}
		?>
	</section>
	
	<footer>
		<p>
		&copy; 2010 <a href="http://bueltge.de/">bueltge.de</a> &middot; <a href="http://bueltge.de/impressum/">Impressum</a>
		</p>
	</footer>

</body>
</html>

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

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

body {
	background-repeat:no-repeat !important;
	background-position:center center !important;
	background-attachment:fixed !important;
	-o-background-size: 100% 100%, auto !important;
	-moz-background-size: 100% 100%, auto !important;
	-webkit-background-size: 100% 100%, auto !important;
	background-size: 100% 100%, auto !important;
}

Das CSS ist nicht in allen Browsern nutzbar, siehe Übersicht, liefert daher nur in den aktuellen Browsern den erwarteten Effekt. Der Internet Explorer, Browser kann man ihn ja schlecht nennen, hat hiermit so seine Schwierigkeiten.

Eine Alternative ist es den Callback für die Funktion mitzugeben und eine eigene kleine Funktion in der functions.php abzulegen, die sich um das Ausgeben des CSS kümmert. Die folgende Funktion tut dies statisch, fragt also nur das Bild ab und nutzt die Werte aus dem Backend nicht.

function fb_header_callback() {
  
  $background = get_background_image();
  if ( !$background )
    return;

  if ( $background ) {
    $image = " background-image: url('$background');";
  
    $style  = 'background-repeat:no-repeat;';
    $style .= 'background-position:center center;';
    $style .= 'background-attachment:fixed;';
    $style .= '-o-background-size: 100% 100%, auto;';
    $style .= '-moz-background-size: 100% 100%, auto;';
    $style .= '-webkit-background-size: 100% 100%, auto;';
    $style .= 'background-size: 100% 100%, auto;';

    $style .= $image . $style;
  }
?>
<style type="text/css">
body { <?php echo trim( $style ); ?> }
</style>
<?php
}

Diese Funktion muss in der Funktion als Callback mitgeben, sie kann natürlich beliebig angepasst werden. In der functions.php des Themes sollte es, wenn es die Background-Image-Funktionalität schon gibt, die Funktion add_custom_background() geben. Dieser muss im ersten Parameter mit der neuen Funktion erweitert werden und nun wird der Standard-Callback von WordPress nicht mehr aufgerufen.

	// This theme allows users to set a custom background
	add_custom_background( 'fb_header_callback' );

Als Hinweis, der Style wird dann via Hook wp_head direkt im head ausgegeben, eher unschön - wie ich finde, und daher solltet ihr diese Formatierung wohl besser im Stylesheet ablegen, da sie eh statisch ist und nicht vom User angepasst werden kann. Ebenso ist wichtig das der Hook auch im Theme vorhanden ist, was aber auch für andere Plugins oder Funktionen wichtig ist.

Werte aus dem Backend nutzen

Als letzter kleiner Tipp für eure eigenen Anpassungen möchte ich noch zeigen, wie man die Werte aus dem Backend bekommt und nutzt.
Die Hintergrundfarbe der Optionen zum Hintergrundbild wird mit folgender Funktion zurück gegeben:

$color = get_background_color();

Das Bild bekommt via:

$background = get_background_image();

Und einzelne Einstellungen zum Style werden via get_theme_mod($name); abgefragt:
Der folgende kleine Schnipsel gibt die gesetzten Werte zum Theme zurück.

$mods = get_theme_mods();
var_dump($mods);

Dies könnte beispielsweise für das Standard Theme Tweny Ten wie folgt aussehen

string 'Twenty Ten' (length=10)

array
  'background_image' => string 'http://localhost/wpbeta/wp-content/uploads/2010/12/apple-touch-icon.png' (length=71)
  'background_image_thumb' => string 'http://localhost/wpbeta/wp-content/uploads/2010/12/apple-touch-icon.png' (length=71)
  'background_repeat' => string 'no-repeat' (length=9)
  'background_position_x' => string 'center' (length=6)
  'background_attachment' => string 'scroll' (length=6)
  'background_color' => string '' (length=0)

Aufgrund dieser Werte im Array kann man beispielsweise den Wert background_repeat holen,

$repeat = get_theme_mod( 'background_repeat' );

der in diesem Beispiel no-repeat zurück gibt.

Mit den anderen Werten kann man genauso verfahren; eine Menge an Spielraum und Möglichkeiten.
Zum den Themen CSS und Hintergrund findet man einen ausführlichen Artikel bei Chris: Perfect Full Page Background Image

© 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

Vor zehn Jahren haben A List Apart einen Aufruf gestartet Much Ado About 5K. Weniger als 5 kByte waren zulässig um kleine Websites zu machen - diese Arbeiten sind aus meiner Sicht in erster Linie Anregung zu eigenen Gedanken und Inspiration für neue Arbeiten. Die Gemeinschaft der Webentwickler diskutiert gerne und so sind diese Formen der Themenanregung beliebt. Neben der Größe der Website von 10 k gibt es einige weitere Bedingungen - Standards: html5 und die Darstellung in Firefox, IE9, Safari und Chrome & diverse Bibliotheken - und damit ist zehn Jahre später ein neuer Wettbewerb 10k Apart durch fast das gleiche Team ins Leben gerufen. Zeit ein wenig Spaß zu haben und eine eigene kleine Arbeit bereit zu stellen.

Auch ich habe mich ein wenig von der vielen Arbeit erholt und mal eine kleine Spielerei gemacht, die man nun dort als App besichtigen kann - nichts besonderes, aber unterhaltsam und eine schöne Abwechslung. Ich wollte jeden Tag einen neuen Wert geben und uns die Erinnerung an jeden neuen Tag geben - 10k sollten dabei dicke reichen und so habe ich html5, CSS3 und JavaScript eingesetzt. Ebenfalls spiele ich mit den Animationsmöglichkeiten von CSS3, die allerdings aktuell nur in Webkit-Browsern wie Safari und Chrome laufen. Schaut es euch an und vielleicht nutzt es dem Lernen und dem Verständnis der neuen Mittel. Aber vielleicht motiviert es euch auch um ebenfalls an der Challange zu 10k Apart teilzunehmen.
Die Gallerie hat schon jetzt tolle Sachen dabei - auch wenn nicht alle Apps die 10k einhalten - zumindest wenn man mit Libraries wie jQuery arbeitet . Aber im Ende ist es eine tolle Aktion und die Teilnahme inspiriert. Es macht Spaß mit den neuen Möglichkeiten zu arbeiten und kein ToDo für alte Browser zu implementieren.

* Alternativ kann man sich die Spielerei auch in meinem kleinen Labor ansehen.

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

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

Die Funktion der Child Themes kann im Grunde bei jedem Theme angewandt werden und die neuen Funktionen erleichtern den Zugriff und das Erstellen einen Child Themes. Im Vorfeld gab es auch Möglichkeiten ein Theme zu verändern ohne die eigentlichen Dateien des Themes stark zu verändern. Mit Hilfe der Unterstützung von Child Themes ist dies nun aber komplett unabhängig und so kann man ein Theme nutzen, kann ohne Problem updaten, und trotzdem eigene Ideen realisieren.

In einigen Beiträgen des Netzes wurde die Child Themes schon angesprochen und ich habe bisher nur Artikel gefunden, die die Aktivierung und Änderung des Stylesheets ansprechen. Daher möchte ich dazu nur kurz eingehen, dass ist im Grunde auch recht einfach und dann die verschiedenen Möglichkeiten im Bezug der Template-Dateien aufzeigen.

Vorteile der Idee Child Theme

Mehr oder weniger versucht jeder Administrator einer WordPress Installation etwas Individualismus zu leben. Dabei gehen nicht alle den Weg eines eigens erstellen Themes. Nicht selten wird ein freies oder kommerzielles Theme genutzt und dann an die eigenen Bedürfnisse angepasst. Dabei haben diverse Themes unterschiedliche Optionen, die aber trotzdem nur selten für das Anpassen ausreichen. Will man die einzelnen Darstellungen anpassen, beispielsweise die Sicht einer Kategorie, führt dies schnell zu sehr starken Veränderungen des Themes. Egal wie umfangreich, ein Update eines Themes ist nicht mehr ohne Probleme realisierbar. Hier kommen die Child Themes ins Spiel.

Mit einem Child Theme kann ein Theme angepasst werden oder man kann ein Theme als "Framework" nutzen und dabei komplett eigene Ideen umsetzen. Egal wie umfangreich, das eigentliche Theme bleibt unangetastet und kann ein Update erfahren.

Nachteile der Verwendung Child Theme

Wie so oft, wo Vorteile sind, sind auch Nachteile. Nicht selten sind die "Framework" Themes sehr umfangreich und bringen sehr viele Funktionen mit, die man als Laie nicht mehr überschauen kann und das Anpassen kann viel Mühe und Zeit kosten. Hier können auch die Child Themes nicht helfen.
Einen großen Nachteile sehe ich in der Performance, muss WordPress doch einnen Schritt weiter gehen und sich in zwei Bereichen nach den Templates umsehen und entsprechend ziehen.
Im weiteren werden in der Regel die Stylesheets, wenn man auf sie aufbaut, via @-Regel eingebunden, die Nachteile in der Performance hat.

In allen negativen Punkten kommt es auf Können und Wissen des Entwicklers an, also wie man das Theme bzw. Child Theme erstellt. Damit kann man die Punkte entkräften. Wichtig: die neue Funktion ist kein Freibrief, sie sollte genauso überlegt eingesetzt werden. Aber sie sorgt dafür, dass man sein erstandenes Theme nicht anfassen muss und trotzdem sehr überschaubar Anpassungen vornehmen kann.

Child Theme anlegen

Genug der Vorrede, die man sicher erweitern und diskutieren kann. Am Beispiel Theme TwentyTen soll nun eine angepasstes Theme entstehen - ich nenne es TwentyTenJump

Im ersten Schritt wird ein neuer Ordner angelegt, in dem wir alle Template-Dateien, Bilder, Scripte und Stylesheets ablegen - was man im Grunde für das Child Theme benötigt. In diesem Beispiel ist das der Ordner twentytenjump. Um ein Child Theme zu erzeugen und WordPress dieses erkennbar zu machen bedarf es lediglich der style.css innerhalb der neuen Ordners mit diversen Strings in einem Kommentar.

Innerhalb der style.css sieht es wie folgt aus.

@charset "UTF-8";

/**
 * Theme Name:     TwentyTenJump
 * Theme URI:      http://bueltge.de/?p=1192
 * Description:    Child theme for the Twenty Ten theme. Realized for a small tutorial to child themes in WordPress.
 * Author:         Frank Bültge
 * Author URI:     http://bueltge.de/
 * Template:       twentyten
 * Version:        0.1.0
 */

@import url('../twentyten/style.css');

Entscheidend sind die Schlüssel Theme Name und Template. Der Schlüssel Template verweist auf den Ordner-Namen des Theme, welches als Basis gezogen wird - in diesem Beispiel das Theme Twentyten.

Folgenden Aufbau habe ich nun innerhalb der Installation von WordPress.

• wp-content
  • themes
    • twentyten

    (das Basis-Theme, inkl. aller Template-Dateien)

    • style.css
    • index.php
    • ...
    • twentytenjump
      • style.css (muss diese Namenskonvetion erfüllen: style.css)

Damit sind die ersten Voraussetzungen geschaffen und man kann das neue Theme im Backend von WordPress aktivieren.
Achtung: der Verweis auf das Basis-Theme ist nicht sonderlich auffällig, so dass man die Abhängigkeit übersehen könnte. Darum also immer kontrolliert ein Theme löschen. Am verwendeten Theme gibt es keinerlei Hinweis, dass ein anderes Theme als Child-Theme auf dieses Theme zugreift.

Am Stylesheet drehen

Ab nun kann man jede beliebe Änderung in dem eigenen Stylesheet ablegen. Ebenfalls kann natürlich der Aufruf des Stylesheets @import url('../twentyten/style.css'); aus dem Basis-Theme entfallen und man kann sich komplett eigene Stylesheet-Strukturen aufbauen.

Man nutzt quasi die Template-Dateien, den Aufbau und das PHP-KnowHow vom Basis Theme, in dem Fall Twenty Ten. Man kümmert sich ausschließlich um das Design und das im beliebigen Umfang. Beispielsweise könnte das im einfachsten Fall eine Farbänderung des Hintergrund sein und alternativ kann ein komplett eigenes Design kreiert werden.

Templates ersetzen

Die Funktionalität des Child Theme lässt aber mehr zu als das Änderung des Aussehen. So kann man bestehende Template-Dateien des Basis-Themes ersetzen. WordPress sucht quasi im ersten Schritt im übergeordneten Child Theme und dann im Basis-Theme nach dem möglichen Template. Durchläuft dabei die Hierarchie der Template-Dateien.

An vielen Punkten vom Theme kann man via Hook eingreifen, was aber nicht jedem Nutzer liegt und kompliziert erscheint. So wird nicht selten die Ausgabe des Titel im head einer Website mit eigenen Funktionen oder von Plugins ersetzt. Man kann entweder via Hook den Titel bearbeiten oder die Ausgabe über eine Funktion steuern. Für das Beispiel soll nun der Titel mit einer Funktion aus einem Plugin ausgegeben werden. In dem Fall muss die header.php bearbeitet werden und darum muss man wie folgt vorgehen, so dass das Basis-Theme unangetastet bleibt.

Es ist lediglich die header.php, die den head-Abschnitt für das Theme enthält in das eigene Child Theme zu kopieren und hier kann sie beliebig bearbeitet werden. Ab nun zieht WordPress diese header.php und nicht mehr die Original-Datei aus dem Basis Theme Twenty Ten.

Damit kann nun auch die angesprochene Funktion in den Title integriert werden, ein Beispiel:

<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 * We filter the output of wp_title() a bit -- see
	 * twentyten_filter_wp_title() in functions.php.
	 */
	if ( function_exists('seo_title_tag') )
		seo_title_tag();
	else
		wp_title( '|', true, 'right' );

	?></title>

Das Basis-Theme bleibt unangetastet, kann weiterhin via Updates auf dem neusten Stand gehalten werden und ab nun zieht WordPress die header.php immer aus dem Child Theme.

Wie in diesem kleinen Beispiel kann man jedes Template ersetzen und so an die eigenen Anforderungen angepasst werden. Trotzdem sollte man bedenken, dass man das Template komplett ersetzt - in dem Beispiel-Fall würde man also ein Update der header.php nicht mitbekommen. Insofern kann es nützlich sein, wenn man auf diverse Bereiche besser via Hook zugreift und diese in eigenen Funktionen abbildet, dazu gleich mehr.

Wichtig: eine Ausnahme ist die functions.php, dazu im Anschluss mehr.

Templates erweitern

Um eigene Anforderungen zu erfüllen, kann es sein, dass man neue Templates benötigt, Template-Dateien die es im Ist-Zustand nicht im Basis-Theme nicht gibt. Im Sinne der Hirarchie kann man immer erweitern. Beispielsweise besitzt Twenty Ten keine home.php - sollte man die aber definieren wollen, also dann wenn die definierte Home-Seite des Backend im Frontend geladen wird, dann kann man diese Datei einfach in das Child-Theme ablegen und WordPress zieht diese Datei, wenn der Zustand is_home() wahr ist.

Mit WordPress Version 3.0 gibt es aber eine weitere Möglichkeit außerhalb der Template-Hirarchie um eigene Templates einzubringen - get_template_part().
Diese Funktion wird konsequent innerhalb von Twenty Ten verwendet - damit muss man in diversen Fällen keine eigenen Templates für den kompletten Aufruf anlegen, sondern lediglich den Abschnitt des Loop.
Beispielsweise nutzt Twenty Ten für die Darstellung der Kategorie-Archive den Aufruf get_template_part( 'loop', 'category' );. Damit ist es möglich, dass in unserem Child Theme ein Template abgelegt wird, was diesen Loop bedient. Es ist also lediglich eine Datei loop-category.php anzulegen und dort alle notwendigen Infos abzulegen.
Im folgenden Beispiel passe ich den Loop an, wenn man sich einem der vier Kategorien befindet. Weitere Änderungen sind möglich, so dass man volle Kontrolle und Flexibilität erhält.

// Anpassungen des Loop
if ( in_category( array(47, 37, 27, 45) ) ) {
	query_posts( 'cat='.$cat.'&posts_per_page=-1&orderby=title&order=ASC' );
}	else {
	query_posts( 'cat='.$cat.'&posts_per_page=20&paged='.$paged );
}
while ( have_posts() ) : the_post(); ?>

Ähnlich könnte man so den Loop für die index.php anpassen - Template Datei loop-index.php wäre dann im Spiel

Funktionen einbringen

Natürlich kann man auch innerhalb des Child-Theme eigene Funktionen einbringen. Wenn man eine eigene functions.php im Child Theme ablegt, dann ersetzt diese Datei nicht die functions.php des Basis-Theme!
Es werden immer die Funktionen des Basis-Theme genutzt; man muss sie via Hook deaktivieren. Die Möglichkeit wird auch in einer Doku in der Datei functions.php erklärt.

add_action( 'after_setup_theme', 'my_child_theme_setup' );
function my_child_theme_setup() {
		// We are providing our own filter for excerpt_length (or using the unfiltered value)
		remove_filter( 'excerpt_length', 'twentyten_excerpt_length' );
		...
}

Innerhalb der Funktion my_child_theme_setup() kann man nun Funktione des Basis-Theme deaktivieren und eigene Funktionen einbringen.

Weitere Funktionen gehören in die functions.php des Child Themes - das Basis-Theme bleibt immer unangetastet. Im folgenden Code dazu ein Beispiel.
Dabei deaktiviere ich die Funktion des Basis Theme Twenty Ten zur Länge des Excerpt und lade dazu eine eigene Funktion twentytenjump_excerpt_length() und es wird ein Widget eingebracht.

<?php
function twentytenjump_setup() {
	
	remove_filter( 'excerpt_length', 'twentyten_excerpt_length' );
	add_filter( 'excerpt_length', 'twentytenjump_excerpt_length' );
	
	add_action( 'widgets_init', 'register_limited_catagories_widget' );
}
add_action( 'after_setup_theme', 'twentytenjump_setup' );

function twentytenjump_excerpt_length( $length ) {
	return 10;
}

class limited_catagories_list_widget extends WP_Widget {
	
	function limited_catagories_list_widget(){
		$widget_ops = array( 'classname' => __('Selective categories'), 'description' => __('Show a list of Categories, with the ability to exclude categories') );
		
		$control_ops = array( 'id_base' => 'some-cats-widget' );
		$this->WP_Widget( 'some-cats-widget', __('Selective Catagories'), $widget_ops, $control_ops );
	}
 
	function form ( $instance){
		$defaults = array( 'title' => __('Catagories'), 'cats' => '', 'count' => 0 );
		$instance = wp_parse_args( (array) $instance, $defaults );
		$count = isset($instance['count']) ? (bool) $instance['count'] :false;
		?>
		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
			<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" class="widefat" />
		</p>
		<p>
			<input type="checkbox" class="checkbox" id="<?php echo $this->get_field_id('count'); ?>" name="<?php echo $this->get_field_name('count'); ?>"<?php checked( $count ); ?> />
			<label for="<?php echo $this->get_field_id('count'); ?>"><?php _e( 'Show post counts' ); ?></label><br />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id( 'cats' ); ?>"><?php _e( 'Categories to exclude (comma separated list of Category-IDs): ' ); ?></label>
			<input id="<?php echo $this->get_field_id( 'cats' ); ?>" name="<?php echo $this->get_field_name( 'cats' ); ?>" value="<?php echo $instance['cats']; ?>" class="widefat" />
		</p>
		<?php
	}
 
	function update($new_instance, $old_instance) {
			$instance = $old_instance;
			$instance['title'] = strip_tags( $new_instance['title'] );
			$instance['count'] = !empty($new_instance['count']) ? 1 : 0;
			$instance['cats']  = strip_tags( $new_instance['cats'] );
			return $instance;
	}
 
	function widget($args, $instance){
		extract( $args );
		$title = apply_filters('widget_title', $instance['title'] );
		$c     = $instance['count'] ? '1' : '0';
		$cats  = $instance['cats'];
		echo $before_widget;
		if ( $title )
			echo $before_title . $title . $after_title;
		echo '<ul>';
		wp_list_categories("exclude=$cats&title_li=&show_count=$c");
		echo '</ul>';
		echo $after_widget;
	}

}

function register_limited_catagories_widget(){
	register_widget('limited_catagories_list_widget');
}
?>

Fazit

Ich meine aktuell, dass durch die Einführung des neuen Standard-Theme Twenty Ten sicher einige neue schöne Funktionen hinzugekommen sind. Ich denke aber ebenso, dass Twenty Ten sehr ungeeignet ist um die Arbeit von WordPress im Bereich des Themes zu verstehen. Gerade Einsteiger und PHP-Neulinge werden sich schwer tun. Trotzdem entstehen so neue Möglichkeiten und will man Child Themes sauber nutzen, dann kommt man um das Verständnis der Hooks in der WordPress API nicht herum. WordPress führt die Idee der Hooks konsequent fort, schon immer in Plugins beliebt, machen sie sich nun auch in Themes breit. Alles hat Vor- und Nachteile.
Nutzt man aber ein gut gepflegtes Theme oder Framework, dann wird man die neuen Möglichkeiten schätzen und kann so immer ohne Probleme Updaten. Entscheidend wird das eigene Wissen um WordPress sein - je nach Interesse, Wissensstand und Arbeitsweise kann man eigene Themes erstellen. Man sollte sich im Vorfeld Gedanken machen und nicht blind loslegen und wie so oft, am Theme schrauben.

Download:

Zum Abschluss noch das Theme mit den entsprechenden Template-Dateien als Downlaod, so dass man einen kleinen Start zum Spielen hat.

Ist die Arbeit nicht 1 Euro wert?
Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.
Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.
Download als zip-Datei: twentytenjump.zip - 5 kByte
Einen Stand online einsehbar und erweiterbar, eventuell gepflegt findest du auf Github: github.com/bueltge/TwentyTenJump

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

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

Alternativ kann man mit der ID der Seite oder des Beitrags arbeiten, Funktion the_ID() übergibt diese. Aufpassen, IDs und Klassen dürfen nicht mit einem Zahlenweert beginnen und daher muss ein String ergänzt werden, beispielsweise

<div id="page-<?php the_ID(); ?>">

Als letzte Alternative möchte ich erwähnen, dass man die Funktion body_class() via Hook mit eigenen Klassen erweitern kann. So kann man auch den Titel einer Seite/Beitrags via Hook in diese Funktion bringen und ausgeben lassen.

function fb_title_body_class($classes) {
	global $post;
	
	$classes[] = sanitize_title_with_dashes( get_the_title( $post->ID ) );
	
	return $classes;
}
add_filter( 'body_class', 'fb_title_body_class' );

Im folgenden der einfachste Fall via Titel, so dass man lediglich diese Klasse ausgibt und body_class() wird nicht genutzt.

Mit Hilfe des Titel

in den header des Themes kommt das Stylesheet:

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/custom.css" type="text/css" media="screen" />

Alternativ wird dieses via Hook wp_head eingebunden, wenn die entsprechende Seite geladen wird, so lädt man das explizite Stylesheet nur, wenn es benötigt wird und der header ist lesbar. Alles spielt sich in der functions.php des Themes ab.

in den body-Tag der page.php kommt der Titel der Seite:

<body class="<?php echo sanitize_title_with_dashes( get_the_title() ); ?>">

Damit hat die Seite "My Home" den body-Tag:

<body class="my-home">
und so weiter...

in der custom.css definierst du nun alle Styles für class home: bsp.

.my-home a { color: #090; text-decoration: none; }
.my-home a:visited { color: #999; text-decoration: none; }
.my-home a:hover { color: #f60; text-decoration: none; }

in dem original-Theme sieht das so aus:

a { color: #009; text-decoration: underline; }
a:visited { color: #999; text-decoration: underline; }
a:hover { color: #c00; text-decoration: underline; }

Wie ich finde, ein Ansatz mit viel Potential und dies überlasse ich gern eurer Kreativität. Wer also mit WordPress für jede Seite ein anders Stylesheet laden möchte, hat so einen Ansatz für eine Lösung.

Plugin-Lösung

Auf Wunsch einiger Leser habe ich ein kleines Plugin erstellt, welches den Titel des Beitrags in die Funktion body_class() schreibt. Man muss also lediglich das Plugin aktivieren und die WordPress Standard-Funktion body_class() im body-Tag verwenden - wenn sie nicht schon im Theme integriert ist. In der Regel findet das im Template header.php statt.

<body <?php body_class(); ?>>

Die Version 0.1 sieht wie folgt aus:

<?php
/**
 * Plugin Name: Title 2 body_class
 * Plugin URI: http://bueltge.de/wordpress-theme-in-abhaengigkeit-des-titel/397/
 * Text Domain: title2bodyclass
 * Domain Path: /languages
 * Description: Add the title of the post to the boy_class-function
 * Author: Frank B&uuml;ltge
 * Version: 0.1
 * Author URI: http://bueltge.de/
 * Donate URI: http://bueltge.de/wunschliste/
 * License: GPL
 * Last change: 26.07.2010 10:37:23
 */ 

/**
License:
==============================================================================
Copyright 2010 Frank Bueltge  (email : frank@bueltge.de)

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA

Requirements:
==============================================================================
This plugin requires WordPress >= 2.8 and tested with PHP Interpreter >= 5.2.9
*/

if ( !class_exists('title2body_class') ) {
	
	global $wp_version;
	if ( !function_exists ('add_action') || version_compare($wp_version, "2.8alpha", "<") ) {
		if (function_exists ('add_action'))
			$exit_msg = 'The plugin requires WordPress 2.8 or newer. <a href="http://codex.wordpress.org/Upgrading_WordPress">Please update WordPress</a> or delete the plugin.';
		else
			$exit_msg = '';
		header('Status: 403 Forbidden');
		header('HTTP/1.1 403 Forbidden');
		exit($exit_msg);
	}
	
	class title2body_class{
	
		function __construct() {
			
			add_action( 'body_class', array( &$this, 'title_body_class' ) );
		}
		
		function title_body_class($classes) {
			global $post;
			
			$classes[] = sanitize_title_with_dashes( get_the_title( $post->ID ) );
			
			return $classes;
		}
	}
	
	function title2body_class_start(){
		new title2body_class();
	}

	add_action('plugins_loaded', 'title2body_class_start');
}
?>

Download des Plugins Title 2 body_class: title2body-class.zip (1 kByte)

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

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

© 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

Da sich HTML5 aber schon geraume Zeit auf meiner ToDo-Liste befindet und ich ein Thema benötige um zu starten, habe ich begonnen das Basis Theme in HTML5 zu bauen, so dass WordPress direkt damit arbeiten kann. Dabei habe ich auch gleich ein Beispiel-Stylesheet beigelegt, so dass es ein Design gibt.

Zusätzlich gibt es eine kleines Stylesheet, welches die neuen Bereiche und ihre Tags darstellt, so dass man bei einem Einstieg in HTML5 ein wenig visueller arbeiten kann. Das Stylesheet ist nicht im Code verdrahtet und kann zum Beispiel einfach und unkompliziert mit Hilfe des WebDeveloper-Toolbar hinzugefügt werden. Zu finden ist das Stylesheet in der Struktur unter layout/html5areas/html5areas.css. Ein Beitrag ist damit wie folgt ersichtlich.

Diverse Punkte sind aktuell nur im Opera > 9.5 sichtbar. Dazu zählen alle Inhalte des Kommentar-Formulars. Dort wurde unter anderem Pflichtfelder übergeben, wenn sie durch WordPress gesetzt werden und die type-Attribute haben der Aufgabe bezogen ihren Wert erhalten, daher die Image-Zuordnung im Opera.

Arbeit mit...

Als Nachschlagewerk dient mit die Übersicht des w3c und das Blog zum Thema HTML5. Leider ist die Arbeit beim Validieren aktuell nicht so einfach, da mir kein Validator bekannt ist, der lokal validieren kann. Über Tipps würde ich mich daher freuen. Für den IE liefere ich ein Script mit, welches ihm den Umgang mit diversen Elementen beibringt.

• HTML 5
• html5doctor
• HTML5 Validator
• HTML5 enabling script

Warum das alles?

Ich würde mir wünschen, dass der eine oder andere mal drüber schaut, vielleicht Leute, die schon mehr mit HTML5 gearbeitet haben und tief in der Materie stecken. Rückmeldungen wären toll und vielleicht erweitert der eine oder andere das Theme um bestimmte Tags oder Elemente.

Wie komme ich daran?

Es gibt hier keinen Download und die Arbeit daran wird in der freien Zeit weiter gehen und daher wird es immer wieder Veränderungen geben. Aktuell stehen nur wenige Grundzüge und es soll den gleichen Stand wie das WP Basis Theme bekommen. Um sich in das Theme einzuarbeiten oder einfach mal drüber zu schauen steht ein Repository bereit. Dort kann auch Kommentiert und diskutiert werden.

Der Ordner mit allen Inhalten findet sich im Bereich trunk/basis-html5 des SVN.

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

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

Aktuell macht Jane Wells im WordPress Team sich einige Gedanken zum Backend Design und ruft zu Ideen auf, die das Backend nicht neu gestalten, nur optimieren, so dass Nutzer nicht verschreckt werden. Aus meiner Sicht ist es gerade da sinnvoll, dass man die Hooks in WordPress nutzt und optionale Design einbringt, die der jeweilige Nutzer wählen kann. SO hole ich auch diverse Designs in Backend und überlasse die Wahl dem Nutzer. Lediglich die übergeordneten Themen, wie Farben und Logo, gebe ich im Rahmen des Corporate Designs vor. Da ich Adminimize in den letzten Nächten erweitert haben, besonders gepuscht durch den Spendenmarathon der lieben Leserin Samantha Phoumarath.

Der obige Screenshot mag auf den ersten Blick nicht sonderlich das Design von WordPress verändern, aber es ist anders, anders in der Arbeitsweise - Header und Menu sind fix, so dass man aus jeder Scrollposition darauf zugreifen kann. Eine ganze Reihe von Nutzern empfinden das Arbeiten so besser und angenehmer. Als Hinweis sei aber vermerkt, dass meine jetzige Lösung nur in Browsern funktioniert, die fixed via CSS akzeptieren.

Im weiteren habe ich diverse Bereiche verkleinert, so sind Meta Boxen wesentlich schmaler; es ist mehr Platz ohne den Whitespace zu reduzieren.

Im weiteren habe ich ein alternatives Design im Plugin untergebracht, welches den Header verändert und die Navi damit um 50 Pixel nach oben holt. Auch dies wird gern genutzt, wobei hier schon der Wunsch des fixed Menu aufkam, aber bisher nicht umgesetzt wurde.

Vielleicht hat der eine oder andere Ideen, Wünsche und Hinweise zum Plugin, zum Design, die Kommentarfunktion steht offen.

Das Plugin selbst ist vorrangig für andere Zwecke erstellt und verfügt aktuell über sehr viele Optionen, so kann man den Bereich Schreiben Beitrage und Seiten einschränken, die Oberfläche der Links beeinflussen, globale Bereiche verändern, HEader-Bereiche einschränken, verändern, Dashboard und Footer deaktivieren, umleiten mit eigenen Inhalten befüllen oder auch eigene Optionen hinzubringen, in dem man Klassen und IDs hinterlegt, einen Namen vergibt und diese dann wieder abhängig von der Benutzerrolle, wobei auch eigene Rollen unterstützt werden, deaktivierbar sind.

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

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

Der klare Umschwung ist bei mir nach dem Lesen des Buches „High Performance Websites“ von Steve Souders, Chief Performance Yahoo! bei Yahoo!, gefallen und ich löse nun alles per <link.
Nun ist mir aber die öffentlich zugängliche Seite des Buchautors wieder unter gekommen und dort publiziert Steve einen Beitrag zum Thema. Diesen Link möchte ich damit einfach mal als Begründung, Rechtfertigung oder Lesetipp hier präsentieren.

Die klare Aussage: Kein @import nutzen.

Spannender Artikel, der sicher bei dem einen oder anderen Veränderungen hervorruft. Daher der Tipp, den Beitrag don’t use @import zum Buch zu lesen.

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

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

Hintergründe, wieso, weshalb und warum sind im Artikel und in den Kommentaren zum Naked Day ´08 und im folgenden Artikel zu finden.

Auch in diesem Jahr kann man sich wieder registrieren und Code-Unterstützung integrieren, um sich nicht händisch um das de- und aktivieren des Stylesheets zu kümmern.

Der Naked Day ist eine kontroverse Aktion, der eine mag diese Idee und der andere hasst sie. Entscheidet selbst, lest die Hintergründe, denkt darüber nach oder diskutiert in geeigneter Runde. Aus meiner Sicht kann ein Naked Day nicht nur schamlos sein, er kann die Makel und Verbesserungen hervorrufen, die in der Basis statt finden und nicht via Schönheits-OP mit CSS.

View this site in alternate languages: English, Czech, Chinese, French, Korean

Die Idee

Hinter dieser Aktion steht die Idee die Webstandards zu fördern. Dazu gehören der korrekte Gebrauch von (x)HTML, semantisches Markup, hierarchische Struktur und zu letzt das Spiel der Wörter - der Inhalt. Es ist an der Zeit, deinen <body> der Öffentlichkeit zu zeigen. Damit zeigt man, dass gute Webseiten auch ohne Design leserlich sind.

Wie macht man mit?

Fülle das kleine Formular aus und deine Webseite wird in die offizielle Liste aufgenommen.

Am 9.April 2009 werden alle Formatierungen der Webseite entfernt, völlige Befreiung vom Design.

(optional): Setze den folgenden Hinweis am obersten Punkt deiner Seite.

<h3>What happened to the design?</h3>
<p>To know more about why styles are disabled on this website visit the
<a href="http://naked.dustindiaz.com" title="Web Standards Naked Day Host Website">
Annual CSS Naked Day</a> website for more information.</p>

Dieser Hinweis dient unter anderem als Hinweis für deine Besucher und sie wissen schnell warum und wieso dein <body> nackt ist.

Warum wieder?

Einige Leser sind interessiert und wollen wissen, warum es am 9.April zu dieser Aktion kommt.

• Die Aktion soll auf einen Dienstag, Mittwoch oder Donnerstag fallen (Viel-Traffic-Tage)
• Möglichst in der ersten Woche des April
• Es soll nie am 1.April sein (internationaler Scherz- und Streichtag)
• Es soll ausreichend Zeit zur Ankündigung sein

Einbinden via PHP

Um die nackten Tatsachen zu zeigen, kann man mittels PHP-Funktion den Naked Day automatisch einleiten. Folgende Funktion dient dieser Aufgabe.
WordPress User hinterlegen diese Funktion beispielsweis ein der Datei functions.php oder direkt im Template, die header.php. Alternativ kann auch das Plugin „WordPress Naked Day“ genutzt werden.

<?php
function is_naked_day($d) {
  $start = date('U', mktime(-12, 0, 0, 04, $d, date('Y')));
  $end = date('U', mktime(36, 0, 0, 04, $d, date('Y')));
  $z = date('Z') * -1;
  $now = time() + $z; 
  if ( $now >= $start && $now <= $end ) {
    return TRUE;
  }
  return FALSE;
}
?>

Die Funktion gibt TRUE aus, wenn es sich um den 9.April 2008 handelt. Daher gilt es nun die Funktion auszuwerten und jeweils zu reagieren. Dazu muss der Link zum Stylesheet in die if-Abfrage.

<head>
...
<?php
if ( is_naked_day(9) ) {
  echo '<!-- Naked Day hat kein Style -->';
} else {
  echo '<link rel="stylesheet" type="text/css" href="styles.css" /%gt;';
}
?>
...
</head>

In WordPress sollte das dann in der header.php eingepflegt werden. Das könnte dann beispielsweise so aussehen:

<?php
if ( is_naked_day(9) ) {
  echo '<!-- Naked Day hat kein Style -->';
} else { ?>
	<style type="text/css" media="screen">
		@import url(<?php bloginfo('stylesheet_url'); ?>);
	</style>
<?php }
?>

Warte… sind das 48 Stunden?

Das ist richtig. CSS Naked Day dauert für den Zeitraum eines internationalen Tages. Vom technischen Standpunkt aus ist der „9. April“ überall in der Welt 48 Stunden lang. Um zu garantieren, dass die Website für jeden auf der ganzen Welt Nackt ist, sind die 48 Stunden pure Nacktheit zu präsentieren.

Tools und Plugins

Die Aktion ist unter einer ganzer Reihe von Entwicklern bekannt und so gibt es auch eine große Anzahl von Tools und Plugins um die Aktion zu unterstützen. Schau die auf der Aktions-Seite um, dort findet man eine aktuelle Liste der Tools und Plugins; um nur Einige zu nennen: WordPress Plugin, PHP class, Rails Helper, Serendipity Plugin, LifeType Plugin, ...

© 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 WordPress Version 2.8

Mit WordPress 2.8 kommt ein neuer Wert in die nutzereigenen Optionen pro Seite im Backend. Damit kann jeder Nutzer seine Vorlieben in dem Umfang der Beiträge, Seiten und Kommentare einstellen. Will man das ganze übergreifend lösen und auch schon im Vorfeld von WordPress 2.8, dann kann die folgende Syntax helfen.

Alternative Plugin

Einbetten sollte man die Syntax in ein Plugin, um die Lösung zu kapseln.
Ich stelle hier bewusst kein Plugin zur Verfügung, da mich Support der bestehenden Lösungen eh schon überfordert. Es ist also eher als Basis für Leute gedacht, die hier ansetzen wollen und als Speicher für mich, wenn ich es wieder mal benötige.

Einige Bemerkungen habe ich direkt am Quellcode hinterlegt, so dass es verständlicher wird. Ebenso lade ich eine CSS-Datei, der Inhalt ist im Anschluss zu finden, die bei der großen Anzahl an Einträgen, dass Design etwas ändert und so ein wenig mehr Übersicht schaft.

// Wert für Beiträge
define( 'FB_CAP_PER_POST', 100 );
// Wert für Seiten
define( 'FB_CAP_PER_PAGE', 100 );
// Wert für Kommentare
define( 'FB_CAP_PER_COMMENT', 100 );

// nur im Adminbereich
if ( is_admin() ) {
	global $pagenow;
	
	if ( $pagenow == 'edit-pages.php' ) {
		add_filter( 'manage_pages_query', 'page_ChangeAdminPagination' );
		add_action( 'admin_print_styles', 'AddMyStylesheet' );
	}
	if ( $pagenow == 'edit.php' ) {
		add_action( 'admin_head', 'post_ChangeAdminPagination' );
		add_action( 'admin_print_styles', 'AddMyStylesheet' );
	}
	if ( $pagenow == 'edit-comments.php' )
		add_filter( 'comments_per_page', 'comment_ChangeAdminPagination' );
}
	
function post_ChangeAdminPagination() {
	global $wp_query;
	
	if ( $wp_query->query_vars[s] == '' ) {
		$per_post = (int) FB_CAP_PER_POST;
		$wp_query->query( 'showposts=' . $per_post );
	}
}

function page_ChangeAdminPagination($query) {
	global $per_page;
	
	$per_page = (int) FB_CAP_PER_PAGE;
	//$query['posts_per_page'] = $per_page;
	$query['posts_per_archive_page'] = $per_page;
	
	return $query;
}

function comment_ChangeAdminPagination($count) {

	$per_comment = (int) FB_CAP_PER_COMMENT;
	
	return $per_comment;
}

function AddMyStylesheet() {
	
		$myStyleFile = WP_PLUGIN_URL . '/change_admin_pagination/css/style.css';
		wp_register_style( 'change_admin_pagination', $myStyleFile );
		wp_enqueue_style( 'change_admin_pagination');
}

Der folgende Inhalt dient nur dazu, dass der Bereich zum Bearbeiten der jeweiligen Seite oder Beitrags neben dem Eintrag dargestellt wird. Damit wird die Zeile kleiner und man hat mehr Einträge im Blickfeld.

/**
 * style for smaller tables in admin of WordPress
 * @author Frank Bültge
 * @date 01.04.2009 20:51:59
 */
.post-title strong {
	float: left;
}

.row-actions {
	float: left;
	margin-left: 1% !important;
}

.check-column, tr td {
	padding-bottom: 0 !important;
}


.column-date {
	width: 15% !important;
}

td.date {
	font-size: .6em;
}

td.date abbr {
	float: right;
}

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

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

Mit dieser Lösung kann man dann beispielsweise in Abhängigkeit einer Seite ein spezielles Layout laden und das Frontend so an diverse Anforderungen anpassen. Diese kleine Anforderung nehme ich mal als Beispiel und zeige eine Funktion, die mir die Abfragen zu Seite/Unterseiten gibt und zeige im Anschluss ein Beispiel im Einsatz.

Hintergrund

Erstellt man in WordPress eine neue Seite, keinen Beitrag, dann kann man diesen in den Attributen als Unterseite einer bestehenden Seite definieren. Damit lassen sich nicht nur Baumansichten erstellen, sondern auch Strukturen abbilden, die nicht selten in einem CMS benötigt werden.

Will man in Abhängigkeit der Seite eine Ausgabe steuern, dann nutzt man den Conditional Tag is_page(),mit welchem man dann die Anforderung umsetzt. Um nun aber nicht für jede Seite diesen Tag zu nutzen und das Template damit ständig anfassen zu müssen, kann man eine einfache Funktion nutzen, die nach Abfragen der Hauptseite auch ein wahr (true) zurück gibt, wenn es sich um eine Unterseite der Hauptseite handelt.

Lösung

Diese Funktion, folgende Syntax, kommt in die functions.php des Themes.

// check ID post and child-post
function has_parent( $post, $post_id ) {
	if ($post->ID == $post_id)
		return true;
	elseif ($post->post_parent == 0)
		return false;
	else
		return has_parent( get_post($post->post_parent), $post_id );
}

Diese kleine Funktion prüft, ob die ausgegeben Seite ein Seite oder Unterseite einer Seite mit der übergebenen ID ist; klingt kompliziert, liegt aber nur am Satzbau. Irgendwie ist es schon zu spät; ja, ich weiß – ihr lest es später, denn ich nutze das zeitversetzte Veröffentlichen. Aber zurück zur Technik. Diese Funktion kann nach dem Ablegen im Theme nun in allen Templates genutzt werden. Das folgende Beispiel prüft, ob es sich um eine Seite oder Unterseite der ID 1 handelt und wenn ja, dann wird das Stylesheet Alternative 1 (alternative_1.css) ausgegeben.

Anderweitig wird auf ID 2 geprüft oder passt keines der Abfragen, dann kommt das Standard-Stylesheet zum Einsatz.

Um die Möglichkeiten noch ein wenig zu erweitern, setze ich in der Abfrage die Variable $bodyclass, die ich im body-Tag zur Ausgabe bringe. Damit habe ich dann eine weitere Anlaufstelle und eine entsprechendes Design je nach Seite zu realisieren.

    <?php
    $bodyclass = '';
    if ( function_exists('has_parent') ) {
	    if ( has_parent($wp_query->post, 1) ) {
	        echo '<link rel="stylesheet" href="' . get_bloginfo('stylesheet_directory') . '/alternative_1.css" type="text/css" media="screen" />' . "\n";
	        $bodyclass = 'class="alternative_1"';
	    } elseif ( has_parent($wp_query->post, 2) ) { 
	        echo '<link rel="stylesheet" href="' . get_bloginfo('stylesheet_directory') . '/alternative_2.css" type="text/css" media="screen" />' . "\n";
	        $bodyclass = 'class="alternative_2"';
	    } else {
	    	echo '<link rel="stylesheet" href="' . get_bloginfo('stylesheet_directory') . '/default.css" type="text/css" media="screen" />' . "\n";
	    }
  	} ?>

</head>
<body<?php echo ' ' . $bodyclass; ?>>

Fazit

Ich denke, dass diese kleine Möglichkeit eine große Wirkung in der Ausgabe haben kann und vielfältige Möglichkeiten zeigt. Ebenfalls kann man diese Lösung mit dem Wechsel des kompletten Theme realisieren, wie ich es schon im Beitrag „WordPress Theme in Abhängigkeit wechseln“ gezeigt habe.
Vielen Dank für das Lesen und noch mehr Danke ich für Verbesserungen zum Beitrag in den Kommentaren.

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

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

Nutzt man den „Mediauploader" in WordPress nicht nur um das Bild hoch zuladen, sondern auch zur Integration in den Beitrag oder die Seite, dann wird, sobald man einen Bildtitel zum Bild hinterlegt, der Shortcode angelegt und in den Content eingefügt. Der Titel sollte aber gepflegt werden, da er als alt-Attribut zum img-Tag genutzt wird.

Nicht jeder Nutzer ist mit dieser Ausgabe zufrieden und ich zeige mal, wie man darauf zugreifen kann und die Ausgabe ändert.

Ist zum Bild ein Titel vorhanden, dann wird der Shortcode immer eingefügt, der dann einen div zur Ausgabe bringt, der beispielsweise wie folgt aussieht.

<div id="attachment_34" class="wp-caption alignnone" style="width: 160px"><img class="size-thumbnail wp-image-34" title="1" src="pfad_zum_bild" alt="Caption, Bildtitel" width="150" height="150" />
<p class="wp-caption-text">Caption, Bildtitel</p>
</div>

Nun möchten aber nicht alle Nutzer diesen Shortcode nutzen und die Ausgabe daran anpassen. Man kann im Grunde mit drei Möglichkeiten die Ausgabe beeinflussen.

1. Nach dem Einfügen händisch löschen oder eigenes HTML einbauen
2. CSS erweitern und den entstehenden div ausblenden
3. Per Hook eingreifen und den div vor der Ausgabe filtern oder an die eigenen Bedürfnisse anpassen

Aus meiner Sicht scheidet Punkt 2 sofort aus, da er nur im Zusammenhang mit CSS funktioniert und damit das Markup noch immer so unzureichend bleibt.
Den ersten Punkt kann man ebenso nicht sauber vertreten, da Risiko beim Vergessen und der Mehraufwand beim Erstellen von Artikeln nicht wirklich angenehm ist.

Widmen wir uns daher Punkt 3 der ausgewählten Möglichkeiten und greifen mit ein wenig PHP ein. Auch dabei gibt es diverse Ansätze und so möchte ich drei recht unterschiedliche Wege zeigen und die Entscheidung zur Nutzung überlasse ich dann euch. Je nach Anforderung wird das sicher auch sehr verschieden ist.

Schön beim Einfügen löschen

WordPress fragt den Filter disable_captions ab und lässt damit den Shortcode erstellen: if ( ! apply_filters( 'disable_captions', '' ) ) {. Hier setze ich an und gebe eine Funktion ein, die ein true zurück gibt. Damit geht kein Shortcode mehr in der Editor beim Bilder einfügen.

add_filter( 'disable_captions', create_function('$a', 'return true;') );

Die Funktion legt man entweder in einem Plugin ab oder in der functions.php des Themes.

Filtern in der Ausgabe

Nun will man aber eventuell nicht immer den Shortcode entfernt haben, und in einigen Sichten des Frontend die Möglichkeit schon nutzen. Das heißt, der Shortcode darf nur in einigen Fällen genutzt werden.
Auch dafür hat WordPress eine Funktion hinterlegt, die ich im folgenden Anspreche und direkt im Frontend keinen div erzeugen lasse.

img_caption_shortcode($attr, $content = null)
The Caption shortcode.

Allows a plugin to replace the content that would otherwise be returned. The
filter is 'img_caption_shortcode' and passes an empty string, the attr
parameter and the content parameter values.

The supported attributes for the shortcode are 'id', 'align', 'width', and
'caption'.

Das Zitat entstammt der Beschreibung der Funktion und lässt schon die erwünschen Möglichkeiten hoffen.

add_filter( 'img_caption_shortcode', create_function('$a, $b, $c', 'return $c;'), 10, 3 );

Auch diese Funktion legt man in der functions.php des Themes oder in einem Plugin ab. Ab nun wird im Frontend keine Markup mehr aus dem Shortcode erzeugt.

Diesen Filter kann man natürlich auch mit diversen Conditional Tags kombinieren und so den Filter nur anwenden, wenn es sich um eine bestimmte Ausgabe handelt. Das folgenden Beispiel filtert daher nur, wenn man auf der Homepage des Blog ist.

if ( is_home() )
add_filter( 'img_caption_shortcode', create_function('$a, $b, $c', 'return $c;'), 10, 3 );

Eigenes HTML liefern

Hat man einen gewissen Anspruch im Markup, dann helfen aber auch diese Funktionen nicht und man muss das eigene Markup generieren. Als Beispiel gebe ich mal den Titel zum Bild in einer Definitionsliste aus. Diese Möglichkeit gefällt mir am besten und wurde schon in den Kommentaren eines älteren Artikel diskutiert.

Ich zeige mal eine einfache Lösung, die man gern an seine Bedürfnisse anpassen kann. Das entstehende Markup ist damit frei nutzbar und die möglichen Variablen habe ich drin, so dass das Anpassen nicht so schwer sein sollte. Daraus resultiert aber auch, dass das entstanden Markup recht umfangreich ist, was aber nur der Demo nutzt und so alle Möglichkeiten zeigt. Ansonsten sollte man aus meiner Sciht zum Beispiel kein Inline-Style in der Definitionsliste haben.

Im Ergebnis der folgenden Funktion, die wieder in ein Plugin oder die functions.php ausgelagert werden muss, erzeugt dann beispielhaft das folgende Markup.

<dl id="attachment_34" class="wp-caption alignnone" style="width: 160px">
<dt><a href="pfad_zum_bild"><img class="size-thumbnail wp-image-34" title="1" src="pfad_zum_bild" alt="Caption, Bildtitel" width="150" height="150" /></a></dt>
<dd class="wp-caption-text">Caption, Bildtitel</dd>
</dl>

function fb_img_caption_shortcode($attr, $content = null) {

// Allow plugins/themes to override the default caption template.
$output = apply_filters('img_caption_shortcode', '', $attr, $content);
if ( $output != '' )
return $output;

extract(shortcode_atts(array(
'id'	=> '',
'align'	=> 'alignnone',
'width'	=> '',
'caption' => ''
), $attr));

if ( 1 > (int) $width || empty($caption) )
return $content;

if ( $id ) $id = 'id="' . $id . '" ';

return '<dl ' . $id . 'class="wp-caption ' . $align . '" style="width: ' . (10 + (int) $width) . 'px"><dt>'
. do_shortcode( $content ) . '</dt><dd class="wp-caption-text">' . $caption . '</dd></dl>';
}

add_shortcode('wp_caption', 'fb_img_caption_shortcode');
add_shortcode('caption', 'fb_img_caption_shortcode');

Ich hoffe, dass damit dem einen oder anderen Webdesigner der Eingriff leichter fällt und das tägliche Fluchen über dieses Thema ein wenig abnimmt.
Anregungen, Kritik und Fehlerhinweise sind wie immer erwünscht und der Artikel stellt sich wieder eurem kritischen Auge.

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

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

Das Thema spricht mich gerade wieder an, denn diverse Kundenanfragen zeigen, wie wenig man sich mit diesen Themen beschäftigt und man sich eher um die Farbe des Logos streitet. Der Leser des Blog wird viel zu oft nicht oder erst am Ende beachtet. Da in der Regel das Blog aber für Leser gemacht ist, sollte es auch auf ihn zugeschnitten sein. Beachtet daher die Wünsche der Nutzer, lasst sie mitreden und hört nie auf, das Blog in Frage zu stellen.
Ein weiterer Punkt, der mich zu diesem Artikel bewegte, ist der Beitrag „10 Features That Will Make Twitter Better“ von Jacob Gube, der einschlägige Punkte zeigt, die Twitter besser machen würden. Auch wenn man Twitter nicht direkt mit einem Blog vergleichen kann, so gibt es doch hinreichende Parallelen und die Punkte sprechen für sich und gehören in den Wissensstand eines jedes Nutzers, der sich mit Themen rund um Blogs und Usability beschäftigt.
Aus diesem Zusammenhang hier mal meine Liste von Punkten, die ich für relevant halte, ohne Wertung in der Priorität und sicher nicht vollständig. Aber dazu steht die Kommentarfunktion weit offen und ich danke schon jetzt für jede sinnvolle Erweiterung und konstruktive Kritik.

• Besucher stehen im Mittelpunkt

  Verliere niemals den Leser des Blog aus den Augen. Die Website wird nur besser, wenn man Veränderung zulässt, Ziele definiert und kontrolliert. Das Thema ist vielschichtig und sollte daher nicht unterschätzt werden.

• Text Links im Artikel

  Links sollten ein Aussage treffen und nicht nur unter versteckten Silben zu finden sein. Ebenso gehören Links sichtbar gekennzeichnet. Das Suchen mit der Mouse nach Veränderung ist nicht der Sinn von Links. Das title-Attribut kann einen erhöhten Mehrwert darstellen und sollte nicht vergessen werden.

• Kommentar Threading

  Die Baumansicht der Kommentare kann die Zusammenhänge der Diskussion besser darstellen, sie kann aber auch den Lesefluss nehmen und die Lust am Kommentieren vernichten. Hier gilt es den Spagat zu finden und dem Leser eine nützliche und überschaubare Lösung zu präsentieren. Das Thema ist für mich auch unter dem Gesichtspunkt der Zielgruppe zu beachten.

• Kommentare nutzerfreundlich gestalten

  Kommentieren im Blog ist in der Regel erwünscht – daher ist es wichtig, dass die Barriere so klein wie möglich ist. Unnütze Registrierung ohne Mehrwert und Captchas sind dafür nicht geeignet. Je einfaches es ist, seine Meinung in den Kommentaren abzugeben, um so mehr wird es geben. Auch das Weglassen von Pflichtfeldern kann dazu beitragen, so wie es schon Robert getan hat, nach dem wir es besprochen hatten. Die Pflichtfelder sind kein Spam-Schutz, sie haben andere Vorzüge. So nutze ich sie beispielsweise, um mit den Lesern über Mail ab und dann zu kommunizieren. So komme ich an sie und nutze sie. Aber auch hier ist der Block auf die Zielgruppe wichtig, techn. aversierte Nutzer sind da offen, kenne das Spiel mit den Pflichtfeldern.

• Wiedererkennung des Kommentierenden

  Sind Kommentare eindeutig der Person zuzuordnen, dann fühlen sich viele Kommentierende wohler. Nutze diesen Aspekt und gib einen gewissen Wiedererkennungswert zurück, sei es in Form der Avatare als auch spezifischen Content für den bekannten User zurück zu geben. Je nach Leserkreis kann das unterschiedlich ausfallen und sehr verschieden im Mehrwert sein.

• Sidebar für mehr Information nutzen

  Der Sidebar ist ein Element des Blog, welches sich durchgesetzt hat und übergreifend anerkannt ist. Darum nutzt den Sidebar um Mehrwert für den Leser zu generieren, sei es statisch oder dynamisch. Je besser der Inhalt auf den Besucher zugeschnitten ist, desto länger wird er bleiben und sich wohl fühlen. Beispiele dafür gibt es viel im Netz, die bekannteste Plattform und die, bei der man es am deutlichsten sieht ist sicher Amazon. Allerdings kommt hier wieder der Spagat zum Tragen - Registrierung, Speicherung von Nutzerdaten. Aber auch ohne diese Hürde kann man etwas tun - ich denke nur an die Übergabe der Suchbegriffe und die damit verbunden Landing Page (mehr zum Thema in Verbindung mit WordPress) für Besucher, die von Suchmaschinen kommen.

• Hervorheben des Autors

  Autoren eines Artikels sollten auch in der Diskussion zum Artikel hervorgehoben sein – dies kann den Lesefluss bestärken und eindeutig signalisieren, wer hier für Freischaltung und Beitrag verantwortlich ist. Eine kleine Spielerei im Stylesheet, die einen hohen Mehrwert haben kann. Gerade bei Bezug auf den Artikel und damit den Autor kann diese Möglichkeit viel Übersicht schaffen

• Suche nicht vergessen

  Für mich sind Sitemaps noch immer nicht aus dem Alltag weg zu denken, trotzdem ist die Suche immer mehr das elementare Werkzeug um explizit auf das Blog etwas zu finden. Daher gehört sie zum Umfang eines jedes Blog. Je nach Anforderung und Können kann diese Suche verschieden mächtig ausfallen. Unterstütze die Leser beim Suchen, helfe mit Ergebnissen, die sinnvoll sind und halte trotzdem das Suchen recht einfach. Hier ist Google Vorzeigeobjekt und man kann viele Bereiche auf das eigene Blog beziehen.

• Text/Raum

  Blogs sind für Leser – daher unterstützt das Lesen auch. Lesen heißt Arbeit für die Augen, Arbeit für den Geist und den Willen. Alle Punkte sollten optimiert für den Leser sein und schon liest der eine oder andere mehr und bis zum Ende. Inhalt ist immer noch der König einer Website für mich, egal ob es sich um techn. Tutorials, spannende Alltagsgeschichten, Videos oder Photos handelt. Daher sollte die Site für die jeweilige Zielgruppe optimiert sein. Viel Text braucht Raum – Whitespaces ist hier das Schlagwort in der Scene. Gib dem Leser die Möglichkeit das Lesen zu genießen.

• Druckoptimierung

  Leider noch immer kein Standard – was mir unverständlich ist. Nicht immer will man am Rechner lesen und der Druck ist ein Prozess den man nur dem Besucher überlassen sollte. Die Unterstützung eines sauberen Druck ist für mich daher elementar und gehört zu jedem guten Design eines Webprojektes. Auch wenn es nicht tagtäglich im Vordergrund ersichtlich ist, gehört es zum Erarbeiten eines Design. In den Artikeln „Design für den Druck mit CSS“ und „WordPress Druckversion“ habe ich mich dazu umfassend geäußert und stelle Lösungen zur Vergütung, die das Erstellen eines Print-Stylesheets vereinfache. Durchdachte CSS-Frameworks stellen ebenso eine Vorlage dazu bereit, in YAML beispielsweise ist es elementar und ist dabei um genutzt zu werden.

Wie sicher erkennbar ist, habe ich zu jedem Punkt nur eine kurze Ausführung gegeben. Dies ist Absicht und zu jedem einzelnen Punkt könnte man Artikel schreiben und Diskussionen anzetteln. Ich möchte, dass man als Betreiber des Blog über seinen Blog nachdenkt, ihn vergleicht und die Nutzer im Bezug auf das Blog beachtet. Ebenso sind hier nur 10 Punkte zum Tragen gekommen, aber eventuell nimmt der eine oder andere Leser das Thema auf und vervollständigt es. Die Vernetzung von Blogs kann dann ihr übriges tun und weitere Artikel zum Thema können nur Bewusstsein schaffen. In einem anderen Artikel, in dem ich die Betreiber von Websites zu FullFeed bitte, war nicht so angelegt, zeigt aber schön, wie ein Thema die Runde machen kann, was für ein Benefit die Kommentarfunktion hat und wie ein Thema aus der Vielzahl von Themen heraus stechen kann.

Zu fast allen Themen und oft im Bezug mit WordPress gibt es hier im Blog Artikel, nutzt die Suche und nutzt das Wissen, was ich in den Artikeln zur Verfügung stelle. Viele Artikel aus diesem Themenspektrum sind schon älter, was aber nicht heißt, dass sie nicht mehr nutzbar sind. Schaut euch um, nutzt das Suchfeld im oberen Drittel des Blog oder nutzt die erweiterte Suche. Alternativ könnt ihr euch die Suche in den Browser holen, was ich mit Open Search realisiert habe.

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

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

Hintergründe, Wieso, weshalb, warum - dazu verweise ich auf den Artikel „CSS Naked Day“ des vergangen Jahres, der die Aktion bestens erklärt. Ebenso findet man dort die entsprechenden Code-Schnippsel oder Plugin-Lösungen für verschiedene Applikationen um den Prozess automatisch zu starten bzw. zu beenden.

Im letzten Jahr war die Aktion mehr als ein Spaß und nicht weniger hatten diverse Erkenntnisse, die sie in ihrem Markup umsetzen konnten. Sicher wird es auch in diesem Jahr wieder Erkenntnisse und Diskussion geben. So eine Aktion ruft immer die verschiedenen Parteien zum Diskutieren auf, was ich wunderbar finde. Nur so werden eingeschliffene Themen angesprochen und in Frage gestellt.

Im letzten Jahr habe ich ebenso auf Wunsch eine kleine Auswertung geschrieben, in der man ein wenig erfährt, wie es nach dem darstellen meiner nackten Tatsachen aussah – „Beobachtungen zum Naked Day 2008“.

Also, macht mit – ich freue mich auf eure Nacktheit. Nackt ist „in“

© 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 2.7 Login Design anpassen
• WordPress 2.5 und Theme-definiertes Login

In beiden Artikeln bin ich aber nicht darauf eingegangen, wie man das Standard-layout von WordPress deaktiviert, da ich das Beispiel-CSS immer auf Basis des Stylesheet von WordPress aufgebaut habe. Das Stylesheet von WordPress ist aber nicht gerade sehr schlank und warum soll man unnötig Daten laden, die man nicht benötigt?

Mit einem kleinen Hook und einer entsprechenden Funktion entferne ich daher das Laden des Stylesheet von WordPress und lade dann nur das eigene CSS - wie das geht, steht in den beiden Artikeln zum Theme Login Bereich anpassen.

if ( basename($_SERVER['PHP_SELF']) == 'wp-login.php' )
	add_action( 'style_loader_tag', create_function( '$a', "return null;" ) );

Packt man die obige Syntax in die functions.php, ist das ausreichend und auch an richtiger Stelle - der Eingriff ist im Bezug auf das Theme und abhängig vom Theme aus meiner Sicht. Damit stellt man sicher, dass beim Wechsel oder deaktivieren des Themes auch diese Funktion deaktiviert wurde. Aus dem Theme raus kann daher ohne Probleme das Frontend, das Backend und der Login-Bereich angepasst werden. Dies ist aus meiner Sicht und Erfahrung mit entsprechenden Business-Bereichen auch notwendig, wenn auch oft nur in kleinen Bereichen des Backend und des Login. In dem Zusammenhang gilt es auch für mich im Bezug für ein „perfektes“ Theme.

© 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 nun aber die Funktion der „Threaded Comments“ entsprechend darzustellen und für den Besucher ansprechend zu formatieren stehen eine ganze Reihe von Klassen zur Verfügung. Nicht alle muss man nutzen und viele entstehen auch nur durch die Unterstützung der Semantik mit Mikroformaten in WordPress.

Alle möglichen Zugriffe via CSS sind im folgenden gelistet und helfen dem einen oder anderen aber beim Erarbeiten des CSS und ersparen ein wenig Arbeit mit Hilfe von Firebug und co.

ol.commentlist {}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {}
ol.commentlist li.comment div.comment-meta a {}
ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.comment div.reply {}
ol.commentlist li.comment div.reply a {}
ol.commentlist li.comment ul.children {}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {}
ol.commentlist li.comment ul.children li.depth-3 {}
ol.commentlist li.comment ul.children li.depth-* {}
/* * steht für die Einstellungen der Antwort-Tiefe im Backend */
ol.commentlist li.comment ul.children li.depth-10 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}
ol.commentlist li.pingback div.comment-author {}
ol.commentlist li.pingback div.vcard {}
ol.commentlist li.pingback div.vcard cite.fn {}
ol.commentlist li.pingback div.vcard cite.fn a.url {}
ol.commentlist li.pingback div.vcard span.says {}
ol.commentlist li.pingback div.commentmetadata {}
ol.commentlist li.pingback div.comment-meta {}
ol.commentlist li.pingback div.comment-meta a {}
ol.commentlist li.pingback * {} 
/* * steht für Tags; z.B.: p, em, strong, blockquote, ul, ol, etc. */
ol.commentlist li.pingback div.reply {}
ol.commentlist li.pingback div.reply a {}
ol.commentlist li.pingback ul.children {}
ol.commentlist li.pingback ul.children li {}
ol.commentlist li.pingback ul.children li.alt {}
ol.commentlist li.pingback ul.children li.bypostauthor {}
ol.commentlist li.pingback ul.children li.byuser {}
ol.commentlist li.pingback ul.children li.comment {}
ol.commentlist li.pingback ul.children li.comment-author-admin {}
ol.commentlist li.pingback ul.children li.depth-2 {}
ol.commentlist li.pingback ul.children li.depth-3 {}
ol.commentlist li.pingback ul.children li.depth-4 {}
ol.commentlist li.pingback ul.children li.depth-* {}
/* * steht für die Einstellungen der Antwort-Tiefe im Backend */
ol.commentlist li.pingback ul.children li.depth-10 {}
ol.commentlist li.pingback ul.children li.odd {}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

via Chris Harrison

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

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

Sie basieren auf einem absichtlich eingebauten „HTML-Kommentar“ und daher kann man sie bedenkenlos nutzen. Dies soll nicht heißen, dass man immer diese Möglichkeit nutzen sollte. Aber aus meiner Sicht stellt diese Möglichkeit ein effektives bedenkenloses Werkzeug dar.

In diesem Artikel möchte ich aber eine Überlegung darstellen, die aus meiner Sicht nicht abwegig ist, wenn auch aufwendig. Nicht selten sieht man Websites diverser Entwickler, die bewusst ein unterschiedliches Design in Nicht-IE- und IE-Browsern entwickeln. Der Anwender wird das in der Regel nicht mitbekommen, denn wer surft schon mit zwei Browsern gleichzeitig auf einer Website? Aber der Hintergrund dieser Lösung ist aus meiner Sicht ein anderer. Diese Form der Lösung zeigt, dass man eventuell explizit ein Stylesheet für den IE und Nicht-IE-Browsern machen sollte und nicht ein Stylesheet für Nicht-IE-Browser plus diverse Korrekturen, Hacks und Differenzen.

Im Grunde entwickelt eine Vielzahl der Webentwickler sicher so (ausgenommen ist Version 8 des IE, in dem Fall könnte es anders werden, aber bis dahin ist sicher noch ein weiter Weg):

1. Style via CSS erstellen, welches in Nicht-IE-Browsern (< Version 8) läuft
2. Anpassen an des Stylesheet für den IE kleiner 8
3. Diverse Hacks im Stylesheet, mitunter viel Code, den Browser mit Standard-Interpretation nicht benötigen

Schon jetzt arbeiten aber auch eine ganze Reihe von Entwicklern einen anderen Weg ab. Dieser ist nur in kleinen Punkten abwegig, aus meiner Sicht hat er aber eine große Wirkung.

1. Style via CSS erstellen, welches in Nicht-IE-Browsern (< Version 8) läuft
2. Stylesheet für den IE kleiner Version 8 erstellen
3. Einbinden des Stylesheet für den IE mit Hilfe von Conditional Comments

Die zweite Lösung sorgt dafür, dass Nicht-IE-Browser keinen unnötigen Code verarbeiten und das Stylesheet schlank bleibt. Conditional Comments haben den Vorteil, sie arbeiten nur im Internet Explorer. Damit sind sie wunderbar geeignet um Anweisungen nur für den IE abzulegen. Dabei kann man zwischen den unterschiedlichen Versionen des IE wählen. Im folgenden sind dazu Beispiele hinterlegt, die das Nutzen an kleinen Beispielen zeigen und die unterschiedlichen Möglichkeiten zeigen.

IE: Entweder oder

Parallel dazu möchte ich aber noch eine andere Methode zeigen, die dabei sehr direkt unterscheidet. Die beiden folgenden Abfragen gehen davon aus, dass man also ein Stylesheet hat, welches für Nicht-IE-Browser ist und eines, welches explizit für den IE ist. Das heißt, dass das Stylesheet für den IE alle notwendigen Angaben enthält und der IE keine Mischung aus Stylesheet für alle Browser und dem speziellen Stylesheet bekommt.

Für IE

<!--[if IE]>
	<link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
<![endif]-->

Nicht (!) für IE

<!--[if !IE]>-->
	<link rel="stylesheet" href="standard.css" type="text/css" media="screen" />
<!--<![endif]-->

IE: Diffizile Abfragen

Im Gegensatz zur obigen Methode kann man alternativ auch nur diverse Stylesheets erarbeiten, die die Probleme im IE mit dem Standard-Stylesheet bearbeiten und je nach Version des IE einbinden. Dazu stehen diverse Conditional Comments-Abfragen bereit.

Alternativ kann man aber auch, wenn es denn sein muss/soll, diverse eigenständige Stylesheets für die jeweilige betroffene Version des IE erstellen und wie oben angesprochen einbinden.

Für IE 5 und größer

<!--[if gte IE 5]>
	<link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
<![endif]-->

Für IE, kleiner als Version 6

<!--[if lt IE 6]>
	<link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
<![endif]-->

Für IE, kleiner oder gleich als Version 5.5

<!--[if lte IE 5.5]>
	<link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
<![endif]-->

Für IE, größer als Version 6

<!--[if gt IE 6]>
	<link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
<![endif]-->

Hinweis zum Syntax

• gt: greater than (größer als)
• gte: greater than or equal to (größer als oder gleich)
• lt: less than (kleiner als)
• lte: less than or equal to (kleiner als oder gleich)

Via PHP

Aber auch PHP gibt uns die Möglichkeit den Browser abzufragen und ab und dann kann die Lösung sinnvoll sei. Aus meiner Sicht ist sie es aber nicht für die Implementierung des Stylesheet für den IE. Dort sind die Conditional Comments sehr gut geeignet.
Der Vollständigkeit aber und da man ab und dann die Lösung gebrauchen kann, lege ich meine Codeschnippsel hier ab.

<?php
	if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Gecko') ){
		if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Netscape') ){
			$browser = 'Netscape (Gecko/Netscape)';
		}
		else if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') ){
			$browser = 'Mozilla Firefox (Gecko/Firefox)';
		}
		else{
			$browser = 'Mozilla (Gecko/Mozilla)';
		}
	}
	else if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') ){
		$browser = 'Internet Explorer (MSIE/Compatible)';
	}
	else if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Safari') ){
		$browser = 'Safari';
	}
	else if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') === true){
		$browser = 'Opera';
	}
	else{
		$browser = 'andere Browser';
	}
	echo '<h2>Dein Browser ' . $browser . '</h2>';
?>

<?php
	if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Safari') ) {
?>
		<link rel="stylesheet" type="text/css" href="safari.css" media="screen" />
<?php
	}
?>

Via JavaScript

Auch im Bereich JavaScript kann man diverse Abfragen starten um den Browser zu erkennen, allerdings geht das nur, wenn JS beim Anwender auch aktiv ist. Für diese Möglichkeit gibt es die unterschiedlichsten Möglichkeiten und eine sehr kleine Funktion stammt dabei aus meinem Archiv.
Auch dieses soll hier nicht groß erläutert werden, ich denke, dazu gibt es ausreichend und bessere Seiten.

function getBrowserType() {
	var detect = navigator.userAgent.toLowerCase();
	var browser;
	var doCheckIt = function (bString) {
		place = detect.indexOf(bString) + 1;
		return place;
	};
	if (doCheckIt('konqueror')) { browser = "konqueror"; }
	else if (doCheckIt('safari')) { browser = "safari"; }
	else if (doCheckIt('omniweb')) { browser = "omniweb"; }
	else if (doCheckIt('opera')) { browser = "opera"; }
	else if (doCheckIt('webtv')) { browser = "webtv"; }
	else if (doCheckIt('icab')) { browser = "icab"; }
	else if (doCheckIt('msie')) { browser = "msie"; }
	else if (doCheckIt('firefox')) { browser = "firefox"; }
	else if (!doCheckIt('compatible')) { browser = "nn"; }
	return browser;
}

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

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