Sascha Kaufmann

So nachdem wir jetzt im letzten Teil der Reihe den Header und die “Navigation” gemacht haben, schauen wir uns jetzt mal die Sidebar an…

Für den erste Schritt nehm ich heute mal ganz doll an die Hand, um eine Sidebar zu erstellen wie wir sie momentan auf Randompeople haben benötigen wir nur folgende Zeilen PHP Code:

<li><h2>Kategorien</h2>
	<ul>
		<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
	</ul>
</li>
<br \><br \>
<li>
	<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</li>
<br>
<?php $args = array(
    'orderby'          => 'name',
    'order'            => 'ASC',
    'limit'            => -1,
    'category'         => "",
    'exclude_category' => "",
    'category_name'    => "",
    'hide_invisible'   => 1,
    'show_updated'     => 0,
    'echo'             => 1,
    'categorize'       => 1,
    'title_li'         => __('Bookmarks'),
    'title_before'     => '<h2>',
    'title_after'      => '</h2>',
    'category_orderby' => 'name',
    'category_order'   => 'ASC',
    'class'            => 'linkcat',
    'category_before'  => '<li id=%id class=%class>',
    'category_after'   => '</li>' );
wp_list_bookmarks( $args );
?>

Wenn ihr die einbindet seht ihr das dort noch eine PHP Fehlermeldung erscheint, keine Sorge wir haben nur auf searchform.php verwiesen was ich für meinen Teil noch gar nicht erstellt hatte… So sieht diese aus:

<h2>Suche</h2>
<div>
<form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Suche..." />
</form>
</div>

Und so sieht das ganze dann bisher aus:

Wie ihr seht ist die Sidebar noch ziemlich Kacke formatiert, das werde ich nach Möglichkeit alles über CSS machen… Das ist aber ne Menge Arbeit und ihr wollt bestimmt euren eigenen Style, deswegen nehme ich euch da jetzt nicht an die Hand… Ich zeig euch aber sobald ich soweit bin wie es dann bei mir aussieht 😉 Aber jetzt bin ich erst mal auf dem letzten Weihnachtsessen für dieses Jahr… Also bis denne dann 😉

Nochmal zur Info, dies soll keine genaue Programmier Anleitung für WordPress Themes sein sondern nur die Besonderheiten auflisten die mir bei der Programmierung des Themes aufgefallen sind. Ansonsten gibt es schon genug Anleitungen wenn man Google bemüht. (siehe auch Quellen im ersten Beitrag der Serie).

So nach dem wir uns die Tutorials durchgesehen haben und schon ein wenig rumgespielt haben schauen wir uns mal an was wir bisher geleistet haben…

Wie man vielleicht merkt habe ich bisher nur nach dem Vorgaben von http://bueltge.de/ gearbeitet, aber das wird sich nun wohl ändern, weil das Tutorial dort leider nicht fertiggestellt wurde und wenn ich mich nicht verlesen habe Fehler enthält. Aber wenn ihr es soweit schon geschafft habt dann bin ich ja froh. Aber ich wollte euch ja Besonderheiten vorstellen. Also kommt als erstes mal der Banner.

Die auf bueltge.de vorgestellten Lösungen mit

<?php include (TEMPLATEPATH . '/example.php'); ?>
<?php include (ABSPATH . 'wp-content/themes/default/example.php'); ?>

Wollten bei mir beider nicht funktionieren, ist ja auch irgendwie klar, da wird der Absolute Pfad vom Webserver angegeben, für Includes sicherlich gut, aber ansonsten nicht zu gebrauchen. Also habe ich mich diesen Trick bedient:

<center>
  <a href="<?php bloginfo('url'); ?>/">
    <img src="<?php bloginfo('url'); ?>/wp-content/themes/randompeople/img/banner.jpg">
  </a>
</center>

Bei Bildern ist das ja kein Problem diese mit dem kompletten URL einzubinden…

Als nächstes kommen wir zur Navigation, die hatte mir früher Sorgen gemacht… Aber bei einem meiner Projekte musste ich so eine Navigation schon mal machen, deswegen wusste ich wie das ablaufen muss. Da ich aber das alte Design noch teilweise übernehmen wollte hab ich einfach die Zeile kopiert und leicht abgeändert. So hab ich das ganze dann mal notiert:

<ul class="menu">
        <li class="<?php if ( is_home() or is_archive() or is_single() or is_paged() or is_search() or (function_exists('is_tag') and is_tag()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>"><?php _e('Home','k2_domain'); ?></a></li>
        <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
        <?php wp_register('<li class="admintab">','</li>'); ?>
</ul>

/* Navigation */
    ul.menu {
        left: 20px;
        width: 90%;
    }
    ul.menu li {
        display: inline;
    }
    ul.menu, ul.menu li a {
        padding: 5px 15px 6px;
        text-decoration: none;
    }
    ul.menu li a {
        font: 1em Verdana, Helvetica, Arial, Sans-Serif;
        color: white;
        background: #FFA82C;
    }
    ul.menu li a:hover {
        background: #FFCD3A;
        color: #eee !important;
        text-decoration: none;
    }
    ul.menu li.current_page_item a, ul.menu li.current_page_item a:hover {
        color: #333 !important;
        background: #FF4924;
        text-decoration: none;
    }
    .admintab {
        padding: 50px !important;
    }

So dann mal schauen was wir die nächsten Tage so schaffen 😉