Ein WordPress Theme entsteht – Teil 2

WordPress Theme Idee Demo
WordPress Theme Idee Demo

In meinem 1. Artikel zu dieser WP Theme Serie wurde die index.php so gestaltet, dass sie die passenden Kategorien entweder Links oder Rechts anzeigt. Für das XHTML ist jetzt noch die header.php und die footer.php nötig. Im Footer sollen außerdem Widgets angezeigt werden können. Also siehst Du hier wie man etwas widgetfähig macht.

header.php anpassen

Als Grundgerüst für eine passablen header.php kann man den des default Themes nehmen.

Folgendes muß aber aus dieser header.php vorerst gelöscht werden.

Dies findest Du VOR /head:


<style type="text/css" media="screen">

<?php
// Checks to see whether it needs a sidebar or not
if (!empty($withcomments) && !is_single() ) {
?>

<?php } else { // No sidebar ?>
<?php } ?>

</style>

Nach body mußt Du dies alles löschen:

<div id="page">
<div id="header">
	<div id="headerimg">
		<h1><a href="<?php echo get_option('home'); ?>/">
    <?php bloginfo('name'); ?></a>
    </h1>
		<div class="description">
    <?php bloginfo('description'); ?>
    </div>
	</div></div><hr />


Nach body fügst Du jetzt untenstehendes ein.

Wie die CSS class gestaltet wurden, findest Du im Download der Musterdatei am Ende des Artikels hier.

 </head>
 <body><!--steht schon da nicht nochmals einfuegen-nur damit du weisst wo
 <div class="navaussen">
 <div class="navinnen clearfix">

 <h1>Fresh v<span class="fresh">s. Trash</span></h1>
 
 <div class="cat clearfix">
 <p>Kategorien siehe Tutorial</p>
  <p>Tags siehe Tutorial</p>
 </div><!--cat end-->
 </div>
 </div><!--navaussen end-->

 <div class="postaussen">
 <div class="postinnen clearfix">

Kategorien und Tags anzeigen

Der Blogtitel steht unter navaussen, navinnen und innerhalb dessen werden die Kategorien und die Tags angezeigt.

Das Blog ist jung, doch irgendwann werden es viele Tags und noch mehr Kategorien sein, daher empfiehlt es sich entweder nur einige Kategorien *händisch* zu verlinken oder dieses Tutorial zu lesen und anwenden

wp_list_categories.

Außerdem kann man die angezeigten Tags limitieren, das kann zb das WP Plugin Simple Tags ganz gut.

Brauchst Du Hilfe, weil Du eine horizontale Liste nicht gut anzeigen kannst, dann hilft dies sicher weiter:Horizontale Liste gestalten.

Footer.php das XHTML

Die index.php endet so:

</div><!--sidebar end-->
<?php get_footer(); ?>


d.h. all das was in der header.php anfing muß in der footer.php geschlossen werden.

postinnen und postaussen sind als divs noch nicht geschlossen.


</div></div><!--postinnen end postaussen end-->
 <div class="footeraussen">
 <div class="footerinnen clearfix">

</div></div><!--footerinnen end footeraussen end-->
</body></html>

» » Spätestens jetzt empfiehlt es sich, das XHTML zu testen: Validator. Vor Fehler ist niemand gefeit und besser ist besser :zwinker:

Im 1. Artikel war mir noch nicht klar, was da alles in den Footer reinsollte. Via PN im forum.wordpress-deutschland.org erfuhr ich, dass Widgets ganz gut wären. Obwohl noch unbekannt.

Spalten im Footer

Man kann da 3 Spalten machen oder nur 2 oder auch 4 – Wobei dies dann schon sehr eng wird ;)

Die Methode ist immer dieselbe, bei den Breitenangaben muß man sich spielen. Da geringe CSS und XHTML Kenntnisse da sind und ich flexible Designs bevorzuge, stelle ich hier eine Methode mit 3 Spalten vor:

<div class="box03">
</div>
<div class="box02">
</div>
<div class="box01">
</div>

Ich lasse die box03 und box02 nach Rechts fließen (float right), daher müssen die beiden vor box01 stehen, diese fließt nach Links (float left). Zur Demonstration bekamen die 3 einen sehr bunten Rahmen ;) .

CSS der 3 Spalten in der footer.php

.box03{width:32.1%;float:right;border:1px solid green;}
.box02{width:32.1%;float:right;margin-right:1.4%; border:1px solid blue;}
.box01{width:32.1%;float:left;border:1px solid red;}

Achtung:niemals die Spalten ganz eng aneinander kleben, das bricht relativ rasch das Design und padding – also der Innenabstand ist verboten. Das ist einfach die Kurzfassung des Box-Models. ;)

Jede Spalte für sich widgetfähig machen

Dazu brauchst Du zuerst die functions.php. Als Beispiel wieder die des default Themes.

In dieser kannst Du alles löschen. Danach fügst Du ganz oben


<?php ein und ganz unten  ?>

Achtung: keine Leerzeichen vor der 1. Spitzenklammer und nach der letzten! Das ergibt Fehler.

if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));

Das da macht ein WP Theme prinzipiell widgetfähig. Damit kann man angeben wie man das html rund um die Widgetausgabe haben mag.

Wir brauchen da jetzt 3 davon, das sieht dann so aus:


if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footerbox03',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));


if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footerbox02',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));


if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footerbox01',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));


Diese Datei speichern und in den Theme Ordner geben.

Nun die footer.php öffnen:

Dort sollte das ganze dann so aussehen:



</div></div><!--postinnen end postaussen end-->
 <div class="footeraussen">
 <div class="footerinnen clearfix">

<div class="box03">
<?php if ( !function_exists('dynamic_sidebar') || 
!dynamic_sidebar('Footerbox03') ) : ?>

<?php endif; ?>
</div>
<div class="box02">
<?php if ( !function_exists('dynamic_sidebar') || 
!dynamic_sidebar('Footerbox02') ) : ?>

<?php endif; ?>
</div>
<div class="box01">
<?php if ( !function_exists('dynamic_sidebar') || 
!dynamic_sidebar('Footerbox01') ) : ?>

<?php endif; ?>
</div>

</div></div><!--footerinnen end footeraussen end-->
</body></html>

Wieso dem so ist habe ich in dem Artikel zur Theme Vorlage erklärt: WP Theme blank.

Geht das auch ohne Widgets?

Im Admincenter==>Theme/Design==>Widgets kannst Du jetzt pro Spalte andere Widgets einfügen udn nutzen. Du kannst auch eine Spalte ohne Widgets nutzen dann mußt Du hier dazwischen das einfügen was Du anzeigen magst:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footerbox01') ) : ?>
<p>Das was du haben magst ohne Widget</p>
<?php endif; ?>

Download der Musterdateien

==> Diese Musterdateien sind akut nicht aktuell, wie ich es zeitlich schaffe kommen sie wieder!

Rückmeldung

Ich freu mich über jede Art der Rückmeldung. War es hilfreich, über einen Social Bookmark oder einen Link, viel Freud .

6

6 Beiträge zu “Ein WordPress Theme entsteht – Teil 2

  1. Kommentar Autor
    Tim
    Kommentar

    Vielen Dank für die Anleitung, ich wollte mich eh bald mal rantrauen!

  2. Kommentar Autor
    Andy
    Kommentar

    Super Artikel Monika ! Hätte ich in früher gefunden wär mir eine Menge Suchen erspahrt geblieben.

  3. Kommentar Autor
    Lennart
    Kommentar

    Hi,
    ich weiß nicht ob es hier her gehört aber auf der vorherigen Seite durfte ich nicht mehr kommentieren :-)

    Ich habe ein Problem mit dem Header in einem Theme. Und zwar wird beim laden der URL http://www.edv-grauzone.de ein anderer Seiten Content geladen, als wenn ich auf den Reiter „home“ klicke. Des weiteren, wird erst nach klicken auf den Reiter „home“ die Reiter-Sortierung so angeordnet, wie ich es im Admin Bereich vorgegeben habe.

    Kannst du hier helfen?

    Danke im voraus. Tollen Blog hast du hier!

  4. Kommentar Autor
    Monika
    Kommentar

    Hi Lennart

    weil unter dem *Home* Button sicheine andere Internetadresse versteckt als unter der Domain an sich,

    das ist doppelt doof, 1. irritierst Dich und Deine Navi ;) und 2tens ist das für die Suchmaschine doof..

    diese Seite *Home*, die im Adminbereich erstellt wurde,
    sollte unter
    Admincenter==>Einstellungen==> Lesen
    als Startseite vorgegeben werden und an und für sich nicht in der Navi auftauchen,

    sondern unter *Home* sollte immer die Adresse der Domain drin sein
    also nur der Domainname als URL sonst nichts

    lg