Template-Design

Header:

var j = jQuery.noConflict();

j(document).ready(function() {

	j("a#toggleSidebar").click().toggle(function(){
		j('#sidebar').animate({
			width: 'hide',
			opacity: 'hide'
		}, 'slow');
		j(this).toggleClass('sidebarcollapse');
		j(this).toggleClass('sidebarexpand');
	}, function(){
		j('#sidebar').animate({
			width: 'show',
			opacity: 'show'
		}, 'slow');
		j(this).toggleClass('sidebarcollapse');
		j(this).toggleClass('sidebarexpand');
	});

});

Content:

<a id="toggleSidebar" class="sidebarexpand" title="ein-/ausblenden" href="#">X</a>

CSS:

#toggleSidebar {margin:1em;float:right;text-decoration:none;width:15px;height:15px;}
    .sidebarcollapse {height:15px;text-align:right;background:url(images/arrow_l.png) no-repeat;}
    .sidebarexpand {height:15px;text-align:right;background:url(images/arrow_r.png) no-repeat;}

Zuallererst muss (wenn nicht schon vorhanden) im Theme-Verzeichnis die functions.php erstellt werden und mit wenigstens folgendem Code befüllt werden:

if(function_exists('register_sidebar')){
    register_sidebar();
}

Möchte man mehrere Sidebars registrieren, so übergibt man der Funktion register_sidebar() einfach die Anzahl der Widgets:

if(function_exists('register_sidebar')){
    register_sidebar(2);
}

Um die HTML-Ausgabe zu beeinflussen, kann man den Code noch erweitern:

if(function_exists('register_sidebar')){
    register_sidebar(array(
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => ''));
}

Nun muss noch die Widget-Fähigkeit ins Template eingebaut werden. Hierzu fügen wir folgenden Code in die sidebar.php:

<ul>
<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar()) : endif; ?>
</ul>