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 😉

Also erstes hab ich mir natürlich auch im Internet verschiedene Quellen angesehen um zu erkennen wie das erstellen von eigenen WordPressdesigns funktioniert. Einige gute Quellen sind zum Beispiel (werden später ergänzt):

http://bueltge.de/wp-tutorial-wir-schreiben-ein-wordpress-theme-teil-1/498/

http://webdesignblog.de/uncategorized/eigenes-wordpress-template/

http://wordpress.lernenhoch2.de/handbuch/eigenes-wordpress-template-erstellen/schritt-2/single-php-template-fur-beitrageposts/

Dann habe ich mir überlegt wie das WordPressdesign von Randompeople aussehen sollte. Da ich zum Glück beruflich mit der Entwicklung von Webanwendungen zu tun habe, habe ich mir diese und andere Webseiten angesehen und mir eine grobe Vorstellung davon gemacht wie ich das gerne bei Randompeople hätte. Da die meisten meiner Projekte nur Firmen intern laufen und auch teilweise im Design des jeweiligen Kunden angepasst sind. Darf ich hier leider keine Screenshots anzeigen. Daher versuche ich mal in einigen kurzen Worten anzugeben was ich verwirklichen möchte.

Das grobe Design von Randompeople sollte erhalten werden, nur an einigen stellen sollte es etwas “freundlicher” aussehen… Zum Beispiel oben die Navigation find ich gut, bleibt ähnlich… Die Site Bar links will ich auch unbedingt haben, also bleibt diese auch, wird nur an der ein oder anderen Stelle etwas anders aussehen und ergänzt. Dann zum Content. Die Leiste mit den Seiten find ich eigentlich doch nicht so schön ehrlich gesagt… Ich werd wahrscheinlich wieder auf Perv-Next umsetzt aber diesmal mit Deutschen Text… Dann find ich auf der Startseite die Artikel irgendwie alle nur so dahin geklatscht, es sollte meiner Meinung nach schon besser erkennbar sein wo ein Artikel aufhört und ein neuer Anfängt… Und außerdem nervt mich das total wenn z.b. YouTube Videos drin sind die dann über den Seiten Rand ragen. Naja versuchen wir mal das zu ändern… Dann die einzelne Artikel anzeige… Ich persönlich finde da sollte noch ein kurzer Text über den Autor stehen, das hab ich auch schon an einigen Stellen gesehen, schauen wir mal was wir hier hinbekommen, dann möchte ich die Artikelserien Anzeige und Ähnliche Artikel anzeige noch ein wenig freundlicher gestallten, die ganzen Texte auf Deutsch und schauen wir mal was uns bis dahin noch alles so einfällt… Dann natürlich Forum und Kalender noch ein wenig verbesser 😉

Wie in den Quellen bereits erwähnt sollte man gute Kenntnisse in HTML, CSS, PHP und möglicherweise auch JavaScript und MySQL haben… Desweiteren benötigen wir bevor wir Anfangen eine laufende WordPress Installation, ich habe dafür lokal Xampp installiert und das Backup von Randompeople geladen 😉