Website B & E Software

Vor kurzem habe ich die neue Website von B & E Software fertig gestellt. Ein paar Features: WordPress wurde als CMS eingesetzt, auf der Homepage kommt der Nivo Slider zum Einsatz, die dynamische Schriftersetzung mit Cufón bindet die Schriftart Anivers ein und jCarousel Lite wurde für die Rotation der Kundenmeinungen in den Sidebars verwendet.

Link: http://be-software.de/

Mehrere dynamische Sidebars

Um eine widget-fähige Sidebar in WordPress zu aktivieren muss man zumächst in der functions.php den widget Bereich registrieren. Wenn man etwa 2 neue Sidebars haben möchte, sollte der Code so aussehen:


	< ?php  
         if (function exists('register_sidebar'))
	    register_sidebar( array(  
	        'name' => 'left-sidebar',  
	        'before_widget' => '<ul><li>',  
	        'after_widget' => '</li></ul>',  
	        'before_title' => '<h3>',  
	        'after_title' => '</h3>'  
	    ) );  
	    register_sidebar( array(  
	        'name' => 'right-sidebar',  
	        'before_widget' => '<ul><li>',  
	        'after_widget' => '</li></ul>',  
	        'before_title' => '<h3>',  
	        'after_title' => '</h3>'  
             ) );  
	?> 

Im Adminbereich kann man nun unter dem Menüreiter Design > Widgets die beiden neuen Sidebars sehen. Diese können jetzt nach belieben mit Widgets (bsp. Archiv, Kalender, Meta, Letzte Kommentare etc.) befüllt werden.
Um den Widgetbereich zu aktivieren, muss man den Code der dynamischen Sidebars in die aktuellen sidebar Dateien integrieren. Meist ändert man hierbei die sidebar.php.


< ?php 
	if (is_home() )
	{
          if ( function_exists('dynamic_sidebar')) 
           { !dynamic_sidebar('sb-blog') ;}
         }
	?>

< ?php if (!dynamic_sidebar("left-sidebar") ) : ?>  
// Standard-Sidebar erscheint hier 
< ?php endif; ?>  

< ?php if (!dynamic_sidebar("right-sidebar") ) : ?>  
// Rechte Sidebar erscheint hier... 
< ?php endif; ?>  

Der Code zwischen den PHP Tags wird angezeigt, falls kein besonderes Widget genutzt wird.

Mehrere statische Sidebars

Man kann seine WordPress Website mit unterschiedlichen Sidebars etwas komfortabler gestalten.

In der statischen Form muss man zunächst in seinem Theme-Verzeichnis die Vorlagedateien verändern, in denen hauptsächlich die sidebar.php aufgerufen wird. Das sind die Basisdateien: page.php, single.php, index.php und archiv.php.
Die Seitenleiste wird über das Template Tag < ?php get_sidebar(); ?> automatisch aufgerufen. Für die unterschiedlichen Seitenleisten müssen jetzt jeweils eigene Templatedateien mit den gewünschten Inhalten geschrieben werden. Den Aufruf der Templatedateien kann man mit Conditional Tags erneuern. Statt < ?php get_sidebar(); ?> ersetzt man den Code beispielsweise durch:


< ?php 
if(is_page('Home'))
  {
    include (TEMPLATEPATH . '/sb-home.php');
  } 
   else
    { 
     if(is_page('Kontakt'))
      {
       include (TEMPLATEPATH . '/sb-kontakt.php');
      }									
      else
	 {
	    get_sidebar();
	 }
     }	
 ?>

Bsp.: Ruft man die Kontaktseite auf, so bekommt man per include Anweisung die sb-kontakt.php als Seitenleiste eingebunden. Beachten muss man hierbei, dass der Code lediglich statische Inhalte ausgibt und keine dynamischen (widgetfähigen) Sidebars produziert.

Update

Ich habe ein kleines Update in meine Website eingebettet: damit das Layout noch übersichtlicher geordnet ist, fußt es jetzt auf dem Grid-basierten CSS Framework „960 Grid System“ von Nathan Smith. 960 Grid wurde zunächst für ein schnelles Prototyping entworfen, wird aber nun häufiger als CSS Framework genutzt. Eine Breite von 960 Pixeln für das Layout ergibt sich durch die Annahme, dass die Bildschirmauflösung von 1024×768 Pixeln mittlerweile als Minimalstandard gilt, ferner wird der Scrollbalken hinzugezählt und links und rechts noch etwas Platz gelassen. Die Raster lassen sich in 12 oder 16 Spalten aufteilen. Die einzelnen Blöcke beginnen bei 60 Pixeln (12 Sp.) bzw. 40 Pixeln (16 Sp.) Breite und jeweils einem Margin von 20 Pixeln. Bei mir war es bis auf ein paar kleinere Anpassungen sehr gut übertragbar. Zunächst werden durch das reset.css von Eric Meyer alle Standard-Browsereinstellungen überschrieben und zurückgesetzt, dies war vor allem für die Darstellung im IE6 von Vorteil. Nachdem ich die Schriftgröße und ähnliches angepasst hatte, zeigt sich die Website jetzt ganz solide strukturiert.

Andere CSS Framework Alternativen wie Blueprint, jQuery UI, Elements, YUI Grids, The Golden Grid oder Yaml habe ich mir zwar angesehen, aber bin dann doch zu 960 Grid zurückgekehrt, weil es sehr schnell verwendbar war.

Während ich die Webseiten durchsucht habe, bin ich zufälligerweise auf ein interessantes Firefox Addon gestoßen. Den GridFox 1.2., mit ihm kann man schnell über jede beliebige Website ein Grid-Layout legen. Man kann die Firefox Extension auch modifizieren und andere Spalten und Abstände definieren.

Die Website mit dem Raster des Grid Layouts.

Die Website mit dem Raster des Grid Layouts.