Das Theme (Glorious Day), welches ich hier für diesen Blog einsetze, hat von Haus aus zwei Sidebars. Da ich aber über diesen einen weiteren Block mit Tabbing-Funktion einsetzen wollte, war ich gezwungen, eine weitere Sidebar zu erstellen und diese entsprechend anzupassen.

Hierzu muss im Theme-Verzeichnis die sidebar.php geöffnet werden. Dort habe ich den Code für die erste Sidebar als Vorlage genommen und für meine Bedürfnisse angepasst. Hier der Original-Code:

<div id="sidebar1" class="sidecol">
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?>
<li>
	<h3><?php _e('Latest Posts'); ?></h3>
	<ul><?php wp_get_archives("type=postbypost&limit=6")?></ul>
</li>
<li>
  <h3><?php _e('Search'); ?></h3>
	<form id="searchform" method="get" action="<?php bloginfo('siteurl')?>/">
		<input type="text" name="s" id="s" class="textbox" value="<?php echo wp_specialchars($s, 1); ?>" />
		<input id="btnSearch" type="submit" name="submit" value="<?php _e('Go'); ?>" />
	</form>
  </li>  
<?php if (is_home()) wp_list_bookmarks('title_li='); ?>      
<?php endif; ?>
</ul>
</div>

Der Teil zwischen dem : else : ?> und dem <?php endif; ?> dient dazu, die letzten Beiträge, die Suchmaske und die Lesezeichen auszugeben, sollten dieser Sidebar im Admin-Bereich keine Widgets zugeordnet worden sein. Da ich nun eine neue 'saubere' Sidebar benötigte, habe ich den überflüssigen Code entfernt, als Platzhalter einen 'About'-Text eingefügt und den folgenden Code ganz oben in der sidebar.php platziert, da er ja über den beiden anderen Seitenleisten erscheinen soll.

<div id="sidebar3" class="tabbedsidebar">
 
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(3) ) : else : ?>
<li>
  <h3><?php _e('About'); ?></h3>
  <p><img src="<?php bloginfo('stylesheet_directory');?>/img/admin-medium.jpg" alt="Profile Image" title="Profile Image" /><br/>
  Write a little something about the author of this website here. You might also want to link to the <a href="#" title="About Page">about page</a> from here.<br/>This text is completely editable in sidebar.php.</p>
 
</li>
    <?php endif; ?>
</div>

Das <div id="sidebar1" class="sidecol"> habe ich durch <div id="sidebar3" class="tabbedsidebar"> ersetzt, um die neue Sidebar über CSS individuell gestalten zu können. Wichtig ist, bei dynamic_sidebar() eine noch nicht vergebene Nummer zuzuweisen, da dies die ID der Leiste ist und diese eindeutig sein muss. Da 1 und 2 schon vergeben waren und die bereits eingebauten Widgets nicht unnötig hin und her schieben wollte, habe ich die bestehende Zuordnung nicht geändert.

Um die neue Sidebar nutzen zu können muss noch die functions.php im Theme-Verzeichnis geändert werden.

<?php 
if ( function_exists('register_sidebar') ) 
{
register_sidebar(array('name'=>'Left Sidebar',
		'before_widget' => '<li>', 
		'after_widget' => '</li>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',     
		));
register_sidebar(array('name'=>'Right Sidebar',
		'before_widget' => '<li>', 
		'after_widget' => '</li>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',     
		));
}

Dazu wird vor die schließende geschweifte Klammer ein weiterer Codeblock eingefügt, welcher sich nur durch den Namen von den anderen Blöcken unterscheidet:

register_sidebar(array('name'=>'Top Sidebar',
		'before_widget' => '<li>', 
		'after_widget' => '</li>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',     
		));

Damit ist die Sidebar nun im Widget-Menü des Admin-Bereichs verfügbar und kann mit Widgets bestückt werden.

Um das Design noch entsprechend anzupassen, sollte die style.css im Theme-Verzeichnis geändert werden. Dazu können natürlich die Designelemente der anderen beiden Sidebars kopiert und angepasst werden. Ich habe dazu als Vorlage den Code der ersten (linken) Sidebar genommen.

#sidebar1 {
	float: left;
	width: 205px;		
	padding: 5px 5px 0 15px;	
	font-size:0.9em;
	margin:0px;	
}

Der neue Code:

#sidebar3{
	float: left;
	width: 380px;
	padding: 15px 5px 0px 20px;	
}
 
#sidebar3.tabbedsidebar h3{
	font-size:1.2em;
}
 
#sidebar3.tabbedsidebar li{
	font-size:0.9em;
}

Um Tabs verwenden zu können, fiel meine Wahl auf das 'Fun with Sidebar Tabs'-Plugin. Damit wird sozusagen eine weitere virtuelle Sidebar angelegt, welche wiederum als Widget in die richtige Sidebar eingebunden wird. Jedes Widget, welches nun in die virtuelle 'Tabbed Sidebar' eingefügt wird, erscheint nun 'tabbed'.

Das Design kann anschließend über den CSS-Code in der style.css und die Eigenschaften des 'Tabbed Sidebar'-Widgets angepasst werden.

Ich hoffe, ich konnte einigen mit der Anleitung helfen. Über Verbesserungen und Ergänzungen in den Kommentaren würde ich mich freuen.

Tags: Blog, Sidebar, Wordpress

Trackback URI | Comments RSS