Mehrere Content-Bereiche in WordPress mit WYSIWYG-Editor erstellen

Da WordPress nur einen Content-Bereich mit WYSIWYG-Editor unterstützt habe ich einen kleinen, recht eleganten Workaround gefunden. Mit diesem ist es im WYSIWYG-Editor möglich Content-Teile verschiedenen, im Theme festgelegten Bereiche zuzuweisen.

Theme anpassen:

Als erstes die unten stehende Funktion „the_filtered_content()“ in die functions.php im Theme-Verzeichnis eingefügen. Diese kann dann im Theme überall da benutzt werden, wo auch the_content() benutzt werden kann. the_filtered_content() gibt aber anstelle des kompletten Inhalts nur den Inhalt des ihm übergebenen Content-Bereiches aus. Zum Beispiel gibt the_filtered_content(’sidebar‘) den Inhalt aus der im Content-Bereich „sidebar“ stehen soll. Wenn diese Funktion ohne Parameter aufgerufen wird gibt sie den Content aus, dem kein Bereich zugewiesen wurde.

function the_filtered_content($part='main'){
	$parts=array('main', 'sidebar'); // add more content-areas here

	$default_part='main';
	$last_part=$default_part;

	ob_start();
	the_content();
	$content=ob_get_clean();

	$ctf=explode('<h6>', $content);
	$nctf=array();
	foreach($ctf as $ctb){
		$ct=explode('</h6>', $ctb);
		if (count($ct) == 2){
			if (in_array($ct[0], $parts)){
				$last_part=$ct[0];
				$nctf[$ct[0]][]=$ct[1];
			}else{
				$nctf[$last_part][]='<h6>'.$ct[0].'</h6>'.$ct[1];
			}
		}else{
			$nctf[$last_part][]=implode('</h6>', $ct);
		}
	}

	if (isset($nctf[$part])){
		echo implode('', $nctf[$part]);
	}
}

Content-Bereiche im WYSIWYG-Editor zuweisen:

Das zuweisen ist denkbar einfach: Alles was im Editor nach <h6>{Content-Bereich-Name}</h6> steht wird in dem Entsprechenden Content-Bereich ausgegeben. Wenn der Inhalt des <h6> Tags nicht dem Namen eines in „the_filtered_content()“ festgelegten Content-Bereiches entspricht, wird die <h6> Überschrift dem aktuellen Content-Bereich zugewiesen, und ganz normal ausgegeben.

Und ein Abschließendes Beispiel:

Code in der page.php:

<div class=“sidebar“>
<? the_filtered_content(’sidebar‘) ?>
</div>

<div class=“page“>
<? the_filtered_content() ?>
</div>

HTML-Code des WYSIWYG-Editors bei einer Seite:

<h1>Lorem Ipsum Dolor</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis, velit non auctor tempor, mauris mauris fermentum orci, sed cursus sapien ligula quis mauris. Mauris non risus odio.

<h6>sidebar</h6>

<h6>Mein Sidebar Inhalt</h6>

consectetur adipiscing elit, Lorem ipsum dolor sit amet.

Das Ergebnis sieht dann wie folgt aus:

HTML-Code im „sidebar“ <div>:

<h6>Mein Sidebar Inhalt</h6>

consectetur adipiscing elit, Lorem ipsum dolor sit amet.

HTML-Code im „page“ <div>:

<h1>Lorem Ipsum Dolor</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis, velit non auctor tempor, mauris mauris fermentum orci, sed cursus sapien ligula quis mauris. Mauris non risus odio.