WordPress Template Hierarchie

Das bringt uns nochmal zur Struktur der WordPress Templates. Ruft man nämlich die Seite eines einzelnen Artikels auf, dann sucht WordPress zunächst nach der Datei “single.php”. Ist diese Datei nicht vorhanden, so wird wieder die Datei “index.php” geladen.

WordPress bietet für verschiedene Darstellungen einer Seite unterschiedliche Templates an. Für die Startseite kann man die Datei “home.php” verwenden, eine Darstellung einer Suche kann im Template “search.php” definiert werden. Weitere Templates, die in einer definierten Hierarchie angeordnet sind, sind z.B. “archiv.php”, “404.php”, “page.php”, “category.php” usw.

Eine sehr schöne Übersicht der Template Hierarchie findet man auf den Seiten von WordPress.

Die Artikelseite

Für die Darstellung eines Artikels müssen wir nun also die Datei single.php erstellen. Dies gelingt sehr einfach, in dem wir die Datei “index.php” kopieren und umbenennen.

Auf der Startseite haben wir bisher mittels der Funktion “wp_excerpt” nur einen kurzen Auszug des Textes angezeigt. Zusätzlich hatten wir einen eigenen “weiter lesen” Link eingebaut. Der Aufruf “wp_excerpt” kann nun in der Datei “single.php” gegen die Funktion “the_content” ausgetauscht werden.

Bei der Ausgabe des Titels können wir auf die Angabe des Links verzichten. Es muss also nur der eigentliche Titel mittels “the_title()” ausgegeben werden.

Nun rufen wir noch das Tag “comments_template()” auf. Damit wird das Template für die Anzeige der Kommentare geladen. Da in unserem Verzeichnis noch keine Datei “comments.php” existiert, wird die Datei aus dem “default-Template” geladen.

Der Code sieht nun folgendermaßen aus und sollte bereits auch ein erstes Ergebnis liefern. Beim Aufruf von “post_class” haben wir übrigens diesmal die Klasse “artikelseite” mit gegeben. So können wir bei Bedarf spezielle Formatierungen für diese Seite vornehmen.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class('artikelseite'); ?> id="post-<?php the_ID(); ?>">
<div class="comments_count center">
<big><?php comments_popup_link('0', '1', '%', '', __('Comments Closed', 'tutorial'));
printf('</big><br/> <span class="highlight">');
_e('Kommentare', 'tutorial');?></span>
</div>
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_content(); ?>
</div>
</div>
<hr/>
<?php comments_template(); ?>
<?php endwhile; ?>
<?php else : ?>
<h2><?php _e('Nichts gefunden', 'tutorial'); ?></h2>
<p><?php _e('Schade, leider gibt es hier keinen Artikel', 'tutorial'); ?></p>
<?php endif; ?>

Die Metadaten des Artikels

Wer gut aufgepasst hat, wird gemerkt haben, dass wir links neben dem Titel noch die Anzahl Kommentare stehen haben. Den Code aus der ursprünglichen “index.php” hatten wir hier noch nicht angepasst. Also tauschen wir diesen Code gegen die Ausgabe des Datums aus.

Das Datum wird mit der Funktion “the_time()” ausgegeben. Mit der Parameterübergabe steuert man, wie das Datum formatiert wird. Wir bauen also die Funktion an die Stelle ein, wo bisher die Kommentarzahl ausgegeben wird. Weiterhin ändern wird noch die Klasse “comments_count” in “artikeldatum”. Mit dieser Klasse werden wir demnächst das Datum noch ein wenig schöner formatieren.

Nun wollen wir noch die Kategorien, die dem Artikel zugeordnet sind und die Tags ausgeben. Das machen wir direkt nach der Ausgabe des Titels.

Die Kategorien werden mit der Funktion “get_the_category_list” und die Tags mit der Funktion “get_the_tag_list” ermittelt.

Der Code zur Ausgabe des Artikels und der Metainformationen sieht nun wie folgt aus:

<div <?php post_class('artikelseite'); ?> id="post-<?php the_ID(); ?>">
<div class="artikeldatum center">
<?php the_time("d.m"); ?></br>
<?php the_time("Y"); ?>
</div>
<h2><?php the_title(); ?></h2>
<div class="postmeta">
<?php echo "Kategorie: ".get_the_category_list(', '); ?>
<br/><?php echo get_the_tag_list('Tags: ', ', '); ?>
</div>
<div class="entry">
<?php the_content(); ?>
</div>
</div>

So, für heute war es das erst mal. Im nächsten Tutorial kümmern wir uns ein wenig um die weitere Gestaltung, sowie ein eigenes Design für die Kommentare und bauen noch die zusätzlichen Bereiche für die “Empfehlungs-Button” ein.

Die Dateien aus dem Verzeichnis “css” habe ich euch wieder als zip-Datei zusammen gestellt.

Größe und Anordnung der Bereiche einstellen

Größe des Hauptbereichs festlegen

Unser Layout der Seite soll in der Mitte positioniert sein und für eine Bildschirmgröße mit einer Breite von 1024 Pixel optimiert werden. Die entsprechenden Einstellungen finden wir in der Datei “basemod.css” im Verzeichnis “css/screens”. Die Einstellung der Zentrierung wird im “body”-Tag mit “text-align:center” und in der Klasse “.page_margin” mit einer automatischen Breite für den linken und rechten Rand (margin) definiert.

Die Breite definieren wir in der Klasse “.page_margins”. Ich habe mich diesmal für eine feste Breite  von “82em” entschieden. Da wir das Basislayout mit einer Schriftgröße von 12 Pixel definiert haben (siehe content.css) erhalten wir mit “82em” eine maximale Breite von 984 Pixel. Dann ist immer noch ein wenig Platz für z.B. Scrollbars und man sieht die ganze Seite.

/* (en) Centering layout in old IE-versions */
/* (de) Zentrierung des Layouts in alten IE-versionen */
body { text-align:center; }
.page_margins { text-align:left; margin:0 auto; }

/* (en) Layout:width, background, borders */
/* (de) Layout:Breite, Hintergrund, Rahmen */
.page_margins { width:82em; background:#fff; }
.page { padding:10px; }

Größe von Artikelspalte und Sidebar festlegen

Die Breite der Artikelspalte legen wir mit 68% fest. Ein Wert, mit dem man noch ausreichend Platz für die rechte Spalte hat. Hier orientiere ich mich zum Beispiel an möglichen Werbebannern, die in der rechten Spalte positioniert werden sollen. In der Regel haben diese eine Breite von 300 Pixeln.

Die Angabe dieser Werte muss in den Klassen für die Spalten vorgenommen werden. Spalte 1 und 2 müssen natürlich die gleiche Größe haben. Bei Spalte 3 muss man darauf achten, dass die Breite der links von ihr angeordneten Spalten als Breite für den linken Rand definiert wird. Die Breite von Spalte 3 wird auf “auto” gesetzt.

Vergessen dürfen wir dann auch nicht, die Container “#header” und “#nav” für den Headerbereich und die Menüleiste, auch auf die Breite von 68% einzustellen.

Der entsprechende Code in der Datei “basemod.css” sieht dann wie folgt aus:

#col1 { width : 68%; }
#col1_content { padding:10px 10px 10px 20px; }

#col2 { float : left; width : 68%; }
#col2_content { padding:10px 20px 10px 10px; }

#col3 { margin : 0 0 0 68%; width : auto;}
#col3_content { padding:10px; }

Subcolumns im Teaser einbauen

Das Konstrukt des “subcolumns” in YAML

Nun ergänzen wir die Spalte 1, die wir in unserem Design quasi als “Teaser” nutzen wollen, um zusätzliche Spalten. Schauen wir uns auf dem Bild nochmals das gewünschte Design an. Hier sieht man, dass der Teaserbereich quasi aus drei Spalten besteht.

Mockup der neuen Startseite

Für solche Spalten innerhalb eines Containers hat das YAML Framework auch wieder einige vorbereitete Klassen. Hierfür wird das Konstrukt der “subcolumns” verwendet. In der Datei “/yaml/core/base.css” kann man sich die dazu gehörigen Standardklassen ansehen.

Die Definition von weiteren Spalten innerhalb eines Bereichs erfolgt immer identisch. Zunächst muss ein äußerer DIV-Container mit der Klasse “subcolumns” gebildet werden. Dann definiert man die benötigten Spalten und bedient sich am besten bei einer der vordefinierten Klassen “cnnl” und “cnnr”. Wobei “nn” immer für die prozentuale Breite steht und “l” für links angeordnete Spalten sowie “r” für rechts angeordnete Spalten.

Innerhalb jeder Spalte wird dann wieder ein Container definiert in dem der Inhalt platziert wird. Hierzu stehen die vordefinierten Klassen “subc”, “subcl”, und “subcr” zur Verfügung. Auch hier stehen “l/r” wieder für die Spalten, in denen diese Container einzufügen sind.

Einbau der subcolumns in unser Design

Für unser Design benötigen wir drei Spalten. Wie nutzen dafür zunächst die Standardklassen “c20l”, “c60l” und “c20r”. Der entsprechende Code wird in die Datei “index.php” eingetragen. Dort gehört er natürlich in den Container der Spalte 1 und sieht dann wie folgt aus:

<!-- begin: #col1 - first float column -->
<div id="col1" role="complementary">
<div id="col1_content" class="clearfix">
<div class="subcolumns">
<div class="c20l">
<div class="subcl">
<p>subcolumn 1</p>
</div>
</div>
<div class="c60l">
<div class="subc">
<p>subcolumn 2</p>
</div>
</div>
<div class="c20r">
<div class="subcr">
<p>subcolumn 3</p>
</div>
</div>
</div>
</div>
</div>
<!-- end: #col1 -->

Breite der Spalten individuell anpassen

Die vordefinierten Klassen haben leider nicht ganz die Größe, die wir benötigen. Daher müssen wir diesen noch ein wenig anpassen. In der mittleren Spalte soll ja ein Werbebanner Platz finden. Diese sind in der Regel 468 Pixel breit. Mit den vordefinierten 60% für die mittlere Spalte kommen wir daher nicht aus.

Also setzen wir den Wert auf 72% und ändern die beiden äußeren Spalten auf eine Breite von je 14% (die Summer in einem Spaltenbereicht muss natürlich immer 100% ergeben). Damit wird dafür nicht extra neue Klassen definieren müssen, ändern wir die Klassendefinitionen in unserer Datei “basemod.css”. Hier fügen wir den nachfolgenden Code ein. Zusätzlich ändern wir den inneren linken und rechten Abstand der Spalte 1 noch auf 0. Dann haben wir den maximalen Platz für unseren Teaser heraus geholt.

#col1_content { padding:10px 0px; }

...

/**
* -----------------------------------------------------------
* Eigene Definitionen für unser WordPress Design
*/

/* Teaserbereich für Werbung und Social Button */
#col1_content .c20l, #col1_content .c20r  { width : 14%; }
#col1_content .c60l  { width : 72%; }

Gestaltung der Artikelanzeige auf der Startseite

Zum Abschluss unseres heutigen Teils wenden wir uns nun noch der Gestaltung des Artikelbereichs zu. In der Auflistung der Startseite soll nur eine Kurzbeschreibung des Artikels zu sehen sein. Außerdem habe ich mich entschlossen, auf der Startseite komplett auf die Meta Informationen wie Autor, Datum, Kategorie und Tags zu verzichten.

Beim Datum bin ich mir noch nicht ganz sicher. Aber designen wir die Seite jetzt erst mal nach den Vorgaben des Mockup. Schauen wir uns dazu zunächst nochmals die “Loop” an, die wir im letzten Teil in Spalte 2 eingebaut haben (index.php).

<?php while (have_posts()) : the_post(); ?>
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content(__('mehr... &raquo;', 'tutorial')); ?>
</div>
</div>
<?php endwhile; ?>

In dem Code fehlt eigentlich nur die Anzeige der Kommentare und eine horizontale Linie, zur Trennung der einzelnen Artikel. Dies ist schnell eingebaut und sieht dann wie folgt aus:

<?php while (have_posts()) : the_post(); ?>
<div <?php post_class('startseite'); ?> id="post-<?php the_ID(); ?>">
<div class="comments_count center">
<big><?php comments_popup_link('0', '1', '%', '', __('Comments Closed', 'tutorial'));
printf('</big><br/> <span class="highlight">');
_e('Kommentare', 'tutorial');?></span>
</div>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_excerpt(); ?>
<a class="rechts" href="<?php the_permalink() ?>"
title="<?php __('Artikel weiterlesen', 'tutorial') ?>">
<?php _e('mehr...', 'tutorial') ?></a>
</div>
</div>
<hr/>
<?php endwhile; ?>

Folgende Anpassungen haben wir vorgenommen:

• Dem WordPress Template Tag “post_class”, welches Standard CSS-Klassen für die Artikelanzeige ausgibt, haben wir noch die Klasse “startseite” mit übergeben. Damit haben wir die Möglichkeit, die Artikelanzeige auf verschiedenen Seiten zu variieren.
• Einbau der Funktion “comments_popup_link“. Damit werden die Anzahl Kommentare angezeigt und ein Link zu den Kommentaren bzw. zur Artikelseite ausgegeben.
• Austausch der Funktion “the_content” gegen die Funktion “the_excerpt“. Mit “the_excerpt” wird nur die Kurzbeschreibung dargestellt. Ähnliches kann man auch mit “the_content” erreichen. Dann muss man aber in seinen Text immer das Tag “more” einfügen (als HTML Kommentar). Der Text wird auf der Startseite dann nur bis zu diesem Tag angezeigt und automatisch ein “more”-Link eingefügt.
• Einfügen eines eigenen “more”-Links da “the_excerpt” diesen nicht anbietet
• Einfügen des HTML Tag “hr” zur Darstellung einer horizontalen Linie

Eingefügte Objekte mittels CSS formatieren

Damit die eingefügten Objekte jetzt auch noch richtig angeordnet und dargestellt werden, ergänzen wir in der Datei “content.css” noch ein paar CSS-Klassen.

/**
* ------------------------------------------------------------ #
* Eigene Definitionen für unser WordPress Design
*/

/* Textausrichtung eines einzelnen Objekts - z.B. more-Link */
.rechts { text-align : right; display : block; }

/* Anzahl Kommentare Anzeige */
.comments_count { float:left; width : 5em; height : 3em; border : 1px solid #000; margin-right : 1em;}
.comments_count .highlight {font-size : 85%; font-variant:small-caps;}

/* Bereich für den Artikelinhalt */
.startseite .entry { margin-left : 6em; }

Spalten in die Fußzeile einfügen

Nun müssen wir eigentlich nur noch die Fußzeile mit den zusätzlichen drei Spalten versorgen. Dies geschieht wieder mit den “subcolumns” und sieht dann in der Datei “footer.php” wie folgt aus:

<!-- begin: #footer -->
<div id="footer" role="contentinfo">
<div class="subcolumns">
<div class="c33l">
<div class="subcl">
<p>subcolumn 1</p>
</div>
</div>
<div class="c33l">
<div class="subc">
<p>subcolumn 2</p>
</div>
</div>
<div class="c33r">
<div class="subcr">
<p>subcolumn 3</p>
</div>
</div>
</div>

Footer with copyright notice and status information<br />
Layout based on <a href="http://www.yaml.de/">YAML</a>
</div>
<!-- end: #footer -->

Ausblick

Für heute solle es das erst einmal gewesen sein. Die Startseite sieht nun immer mehr so aus, wie der Designentwurf. Natürlich habe ich auch diesmal wieder alle Dateien als Zip-Datei zur Verfügung gestellt (im Verzeichnis CSS entpacken).

Im nächsten Teil werden wir uns dann um die Gestaltung der Artikel-Seite kümmern. Danach kommt dann die Befüllung der rechten Spalte. Damit haben wir das Grundgerüst und können uns wahrscheinlich einmal um die farbliche Gestaltung Gedanken machen.

Wer mittlerweile doch noch Lust bekommen hat, ein eigenes Theme zu erstellen, dem möchte ich noch mal meine Blogger Aktion ans Herz legen. Das Grundgerüst bekommt ihr dann von mir.

Doch zuvor wollen wir uns noch einem kleinen Problem widmen, welches wir im letzten Teil noch nicht gelöst haben. Entsprechend der Designskizze soll sich die Sidebar über die komplette rechte Seite bis zur Fußzeile erstrecken. Sie muss also auch rechts vom Headerbereich positioniert werden.

Für die Lösung dieses Problems müssen wir die Struktur des bisherigen YAML-Codes ein wenig anpassen. Schauen wir uns dafür zunächst an, wie die aktuellen CSS-Container strukturiert sind.

<div class="page_margins">
...<div class="page">
......<div id="header" role="banner">        </div>
......<div id="nav"  role="navigation">    </div>
...... <div id="main">
.........<div id="col1">        </div>
.........<div id="col2">        </div>
.........<div id="col3">        </div>
......</div>
......<div id="footer">    </div>
...</div>
</div>

Wie man schnell erkennt, liegt der Container “col3″, der die Sidebar bildet innerhalb des Containers “Main”. Der Header-Container jedoch liegt außerhalb des Bereiches. Damit nun der Header- und der Nav-Container links von der Sidebar angeordnet werden können, müssen wir nun den Start des Main-Containers verschieben.

Wir löschen diese Zeile also in der Datei “index.php” und fügen sie in die Datei “header.php” ein. Hier kommt sie zwischen den “div page” und “div header” Eintrag. Zusätzlich fügen wir in der Datei “basemod.css” noch den Eintrag “width : 65; float : left;” in die Deklaration des Header-Containers ein. Der nav-Container muss auch geändert werden. Dieser ist jedoch bisher nur in den Core-Dateien von YAML deklariert. Deshalb fügen wir nun eine neue Zeile in der Datei “basemod.css” ein.

Die Einträge in dieser Datei sollten jetzt wie folgt aussehen:

#header {
color:#000;
background:#fff repeat-x top left;
padding:45px 2em 1em 20px;
width : 65%;
float : left;
}

#nav {float : left; width : 65%;}

Bevor wir uns nun der Einbindung von Inhalt in unser WordPress Theme zuwenden, positionieren wir noch die “Top-Navigation” in die Sidebar. Hierzu entfernen wir die entsprechenden Zeilen aus dem Header-Bereich in der Datei “header.php” und fügen diese in den “col3″-Container der Datei “sidebar.php” ein. Diese Datei sieht nun wie folgt aus:

<!-- begin: #col3 static column -->
<div id="col3" role="main">
<div id="col3_content" class="clearfix">
<div id="topnav" role="contentinfo">
<span><a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a></span>
</div>
<h2>Column  #col3</h2>
</div>
<div id="ie_clearing">&nbsp;</div>
<!-- End: IE Column Clearing -->
</div>
<!-- end: #col3 -->

Schauen wir uns nun wieder das Preview unseres Themes an, so sollte es wie folgt aussehen:

Worpress Theme Preview unserer Designskizze

Die WordPress Loop in das Theme einbauen

Bevor wir nun weitere WordPress Funktionen zur Anzeige von Bloginhalten in unser Theme einbauen, löschen wir erst einmal die vorbelegten Beispieltexte aus unseren Dateien. Also die ganzen “Lore ipsum”-Texte aus der “index.php” und der “sidebar.php” löschen und schön aufpassen, dass nicht irgendein “div”-Eintrag dabei gelöscht wird.

Blogtitel integrieren

Zu Beginn fügen wir unseren Blogtitel in den Headerbereich ein. Um ein mögliches Hintergrundbild kümmern wir uns noch später, wenn wir die eigentlichen CSS-Eigenschaften optimieren und auf die farbliche Gestaltung des Themes eingehen.

Wir öffnen also jetzt die Datei “header.php”. Dort ist noch aus dem YAML-Beispielprojekt eine Titelzeile im Header-Container eingetragen. Die entsprechenden Zeilen löschen wir und ersetzen sie durch folgende Zeilen:

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

Mit der WordPressfunktion “get_option()” wird ein Eintrag aus der Options-Tabelle gelesen. Dort sind eine Reihe von Einstellungen zu einem Blog hinterlegt. Als Parameter erhält die Funktion den Namen einer Option, dessen Wert ermittelt werden soll. In unserem Beispiel wollen wir den Blognamen als Titel darstellen.

Weiterhin haben wir mit dem Parameter “home” die URL des Blogs ermittelt. Damit haben wir den Titel mit einem Link auf die “Home-Adresse” versehen. Schließlich haben wir die “description” noch als Untertitel dargestellt.

Artikel anzeigen

Nun kommen wir endlich zur wichtigsten Funktionalität eines WordPress Blogs. Der sogenannten “loop”. Diese “loop” ist die Schleife zur Darstellung aller Artikel, so wie man es von einer Startseite her kennt. Den nachfolgenden Code tragen wir nun in die Datei “index.php” ein. Er kommt in den Container “col2_content”. Die Datei sollte also jetzt wie folgt aussehen:

<div id="col2_content" class="clearfix">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute()); ?>"><?php the_title(); ?></a></h2>
<?php the_content(__'mehr... &raquo;'); ?>
</div>
<?php endwhile; ?>
<?php else : ?>
<h2><?php _e('Nichts gefunden', 'kubrick'); ?></h2>
<p><?php _e('Schade, leider gibt es hier keinen Artikel', 'kubrick'); ?></p>
<?php endif; ?>
</div>

Schauen wir uns den Code nun etwas genauer an. Die Schleife, die feststellt, ob ein Artikel vorhanden ist und dann für jeden Artikel ausgeführt wird startet wie folgt:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

In der Codezeile, die direkt nach dem Schleifenbeginn folgt, wird ein DIV-Container gestartet, in dem ein einzelner Artikel ausgegeben wird. Die Funktion “post_class” ist neu seit Version 2.7 und dient der Ausgabe von Klassendefinition zu Formatierung des Containers. Darauf gehen wir in einem späteren Teil des Tutorials nochmals genauer ein.

Mit der Funktion “the_id” wird die ID des Artikels ausgegeben. Hier wird sie genutzt, um ein eindeutiges Blockelement im HTML Code zu erzeugen. Damit könnte man theoretisch jedem Artikel ein eigenes aussehen verpassen, wird in der Praxis aber eher nicht dafür verwendet.

Nun folgt die Ausgabe des Titels als Link. Mit der Funktion “the_title_attribut” wird der Titel als reiner Text ausgegeben. Er enthält keinerlei HTML Tags oder andere Formatierungen. Wir nutzen die Funktion für den “Tooltip” des Titels also die Anzeige, wenn man mit der Maus über den Titel fährt.

Die Funktion “the_title” muss ich wahrscheinlich nicht näher erläutern. Damit wird wiederum der Titel des Artikels ausgegeben.

Nun kommt die Funktion “the_content“, die dafür sorgt, dass der Artikelinhalt ausgegeben wird. Wir haben ihr noch einen Parameter mit übergeben. Nutzt man in seinen Artikeln das “– more –” Tag, dann gibt die Funktion nur den Text bis zu dieser Stelle aus. Unser Parameter dient nun dazu, dass der definierte Text als “more-link” erscheinen wird.

An dieser Stelle möchte ich ganz kurz die Funktionen “__” und “e__” erläutern, die noch mehrfach auftauchen werden. Diese “Funktionen” dienen dazu, die Texte in einem Theme mehrsprachig darzustellen. Diese Funktionen suchen den angegeben Text in einer Übersetzungsdatei und geben dann den Text für die eingestellte Sprache zurück. “__” gibt dabei den String als return-Wert zurück und “e__” gibt den String in einem “echo”-Befehl aus. Diesem Thema werden wir uns auch nochmals während des Tutorials zuwenden.

Kommen wir zu den letzten beiden Zeilen des Codes. Diese werden ausgeführt, wenn kein Artikel gefunden wurde. Das kann zum Beispiel passieren, wenn gar ein Artikel im Blog vorhanden ist oder wenn z.B. eine Suche ausgeführt wurde, die kein Ergebnis geliefert hat. Wir geben an dieser Stelle zunächst nur einen Hinweistext aus.

Login Link einbauen

Damit wir auch noch in die Adminoberfläche unseres Blogs kommen, wenn wir nun unser Theme das erste Mal aktivieren, müssen wir noch den Login-Link einbauen. Diesen bauen wir in die Topnavigation ein, die wir ja vorhin in die Sidebar integriert hatten.

Der Login- bzw. Abmelde-Link wird mit der Funktion “wp_loginout” eingefügt. Wir ersetzen einfach den login-Link aus dem Beispielprojekt mit dieser Funktion. Die anderen Einträge lassen wir zunächst als Beispiel bestehen. Die Zeile sollte jetzt wie folgt aussehen:

<div id="topnav" role="contentinfo">
<span><?php wp_loginout(); ?> | <a href="#">Contact</a> | <a href="#">Imprint</a></span>
</div>

Theme aktivieren

Nun ist es endlich vollbracht. Jetzt können wir das erste Mal unser Theme in unserem Testblog aktivieren und sehen, was bei unseren Anpassungen heraus gekommen ist. Mein Tutorial Blog, bei dem ich ja die Artikel meines Golfblogs importiert hatte, sieht nun folgendermaßen aus:

Wordpress Basis Theme mit Artikelanzeige

Zugegeben, eine Schönheit ist unser Theme im Moment noch nicht. Also werden wir uns im nächsten Teil hierum ein wenig kümmern.

Nachdem das Grundgerüst nun steht und die Artikel auf der Startseite angezeigt werden, werden wir die Gestaltung des Themes ein wenig optimieren. Wir kümmern uns um die Ausrichtung, eine sinnvolle Größe der einzelnen Elemente und definieren ein paar zusätzliche Bereiche sowie CSS-Eigenschaften, damit die Startseite dann etwas attraktiver wird.

Wie immer gilt, fragen beantworte ich gerne in den Kommentaren. Natürlich habe ich auch diesmal wieder den aktuellen Stand unseres Beispielprojekts als zip-Datei bereit gestellt. Diese enthaltenen Dateien müssen wieder in das “css”-Verzeichnis entpackt werden. Die alten Dateien können überschrieben werden.

Testumgebung aufsetzen

Dafür möchte ich auf einen Artikel verweisen, den ich vor ca. 1 Jahr veröffentlicht habe. Hier hatte ich beschrieben, wie man eine WordPress Testversion auf  einem USB Stick erstellt (geht natürlich auch auf der Festplatte ). Ich werde für mein Tutorial die WordPress Version 2.9.1 verwenden.

Damit ich einige Artikel in meinem Tutorial Blog habe, nutze ich die WordPress eigene Export/Import-Funktion. Damit gelangen alle Artikel und Bilder von meinem Golfblog auf meine lokale Version (beim Import “Anhänge” anklicken). Die Plugins lasse ich erstmal komplett außen vor. So kann ich quasi mit einem “sauberen” Blog starten. Im Laufe des Tutorials werden wir dann sicherlich auch ein paar interessante Plugins einbauen.

WP Theme Verzeichnis

Nun fehlen noch die benötigten YAML-Dateien. Diese laden wir uns von der YAML-Seite. Hier gibt es eine sehr schöne Ausgangsbasis für ein neues YAML Projekt, das “Simple Project”. Ladet euch das zip-File runter und entpackt es in dem Verzeichnis, wo die WordPress Themes liegen (../tutorial/wp-content/themes).

Tutorial Verzeichnis mit YAML Projektstruktur

Lest euch bitte auch noch die 5 Regeln auf der YAML-Seite und die Empfehlung für die Projektstruktur durch. Das “Simple Project” entspricht dieser Projektstruktur bereits, so dass wir direkt damit arbeiten können. Das Theme Verzeichnis und das Unterverzeichnis “Tutorial” sollten jetzt bei euch so aussehen, wie auf den Bildern.

Zum Abschluß benennen wir nun noch die Datei “my_layout.html” in “index.php” um und verschieben diese in den Ordner “css”. Im Unterverzeichnis “css” ändern wir die Datei “my_layout.css” in “style.css” um. Damit haben wir die Dateien so genannt, wie es bei WordPress üblich ist.

Wenden wir uns nun zunächst der Strukturierung des Design zu.

Designskizze in Bereiche strukturieren

Mockup der neues Startseite

Im letzten Teil des Tutorials haben wir mit Balsamiq eine Designskizze erstellt. Basis unseres heutigen Tutorials ist zunächst das Design für die Startseite. Diese muss nun in einzelne Bereiche aufgeteilt und in die YAML Strukturen überführt werden.

Schauen wir uns dazu nochmals die skizzierte Startseite an. Die Struktur meines Beispiels ist eigentlich recht einfach zu definieren. Klar dürfte sein, dass wir dort eine Sidebar auf der rechten Seite haben  und eine Fußzeile am Ende der Seite. Dann haben wir den Hauptbereich mit den Artikeln.

Schließlich haben wir noch den Headerbereich mit einem Menü. Zunächst hatte ich gedacht, den Bereich des Werbebanners auch im Header unter zu bringen. Dann habe ich mir aber überlegt, dass dieser Bereich zukünftig auch noch andere Informationen enthalten kann und deshalb in einem eigenen Bereich untergebracht werden sollte.

Die Aufteilung ist auch unter dem Gesichtspunkt, dass dieser Bereich auf anderen Seiten, wie zum Beispiel der Artikelanzeige oder einem Archiv, anders aussehen könnte. Was immer gleich bleiben wird, ist der Bereich mit dem Headerbild und dem Menü.

Somit haben wir in der Designskizze 5 Bereiche definiert, die es nun gilt in die YAML Struktur zu integrieren. Die Bereiche sind:

Sidebar Bereich

Header Bereich

Teaser Bereich

Content Bereich

Footer - Bereich

Designbereiche in YAML integrieren

Yaml Container aus der Projektvorlage "Simple Project"

Nun wird es das erste Mal ein wenig Spannend. Wie bilden wir jetzt die definierten Bereich in YAML ein. Dazu sollte man sich nochmals vor Augen führen, dass YAML ein absolut flexibles Framework ist, welches auf einer “Spaltentechnik” aufbaut. Die komplette Seite wird quasi innerhalb der Container “page_margin” bzw. “page” abgebildet.

Eine weitere Basis des Frameworks bilden drei “Content”-Bereiche. Sie werden gebildet aus den Containern “col1″, “col2″ und “col3″. Zusätzlich gibt es noch die Basiscontainer “Header” und “Footer”. Im Verzeichnis “css/screen” findet ihr die Datei “basemod.php” der Simple Project Vorlage. Dort sind diese Container definiert.

In der Projektvorlage sind die Container in der Reihenfolge “col1″, “col3″, “col2″ formatiert. Die mittlere Spalte bildet also der Container 3 und dieser ist in der Breite flexibel.

Die richtigen Container für unser Design finden

Wie passen nun unsere Bereiche in die dafür vorgesehenen Container? Die Zuordnung des Header- und Footer-Bereich ist simpel, da es diese Bereich auch bei YAML schon gibt. Nun haben wir also noch drei Container übrig. Ein kleiner SEO-Hinweis noch vorab. Man sollte immer darauf achten, dass der eigentliche Content im HTML-Code so weit oben steht, wie möglich.

Bezogen auf das YAML Framework bedeutet dies, dass man den Content idealerweise immer in “col1″ platziert, da die Anordnung der Container ihrer Nummerierung entspricht.

Nachdem Header und Footer zugeordnet sind könnten wir unseren Content-Bereich also in “col1″ platzieren. Nun haben wir noch 2 Container übrig, deren Anordnung aber etwas schwierig werden könnte. Wir könnten unseren Teaser-Bereich in “col2″ und die Sidebar in “col3″ einbauen.

Yaml Container Einstellungen für unser Design

Damit haben wir aber ein Problem, was die Anordnung unseres Teaserbereichs angeht. Dieser soll ja zwischen Header und Contentbereich liegen. Die “col2″ mit entsprechenden CSS-Formatierungen dorthin zu bekommen ist nicht so einfach möglich. Also müssen wir uns noch etwas anderes überlegen.

Grundsätzlich gibt es zwei Lösungsalternativen. Wir verwenden “col2″ gar nicht und blenden diese aus. Nun können wir einen zusätzlichen DIV-Container definieren, nennen diesen “teaser” und nutzen ihn für unseren Teaserbereich. Die andere Variante, für die ich mich entschieden habe, ist es, den Inhalt von “col1″ und “col2″ zu tauschen.

Da wir für mein Design nur 2 Spalten benötigen kann ich nun auch “col1″ für den Teaser-Bereich verwenden und “col2″ für den Content-Bereich. Die entsprechenden Einstellungen sind auf dem linken Bild zusehen. Ändert einfach die Einträge in der Datei “basemod.css”, die im Verzeichnis “screen” liegt, entsprechend.

WordPress Template Dateien anlegen

Nun sind wir nur noch wenige Schritte von dem ersten Aufruf unseres Blogs mit dem neuen Basislayout entfernt. Wir müssen nun die richtigen Template Dateien für unser WordPress Theme erstellen.

Als erstes müssen wir ein paar Kommentarzeilen in die style.css Datei eintragen, damit WordPress unser Theme auch erkennt und die Infos in der Adminoberfläche anzeigt. Die dargestellten Kommentarzeilen einfach in der Datei style.css in den oberen Kommentar rein schreiben. Natürlich könnt ihr unnötige Zeilen aus der YAML Projektvorgabe entfernen.

* Theme Name: WordPress Tutorial
* Description: WordPress theme based on YAML
* Version: 0.1
* Author: Juergen Allmich
* Tags: variable width, two columns, widgets

Nun erstellen wir die benötigten Dateien für WordPress und schreiben dort den Code hinein. Beginnen wir mit der Header Datei. Der einfachste Weg, diese Datei zu erstellen, ist die Datei “index.php” als Basis zu nutzen.

Wir editieren also die Datei index.php und speichern diese unter dem Namen “header.php” ab. Nun löschen wir alle Zeilen ab der Zeile “begin: main content area #main”. Weiterhin ändern wir noch den Aufruf der Stylesheet Datei, die wir ja nach “style.css” umbenannt haben. In Zeile 10 müsste der Eintrag “css/my_layout.css” zu finden sein. Hier muss nun die WordPressfunktion “bloginfo(‘stylesheet_url’)” integriert werden, damit das richtige Stylesheet gefunden wird. Die Zeile sollte also nach der Änderung wie folgt aussehen:

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css"/>

Nun erstellen wir die Footer Datei. Auch hier nutzen wir wieder die bestehende Datei “index.php”. Jetzt löschen wir alles von der ersten Zeile bis zur Zeile ” end: #col3 ” und speichern das Ergebnis als “footer.php”.

Bevor wir dann die Index Datei für den eigentlichen Content Bereich anpassen, nutzen wir sie noch ein letztes Mal für die Erstellung der Datei “sidebar.php”. Jetzt wird von der ersten Zeile der Datei alles bis zur Zeile ” begin: #col3 static column ” gelöscht und von Zeile ” end: #col3 ” bis zum Ende gelöscht. Die angebenen Zeilen mit den Kommentaren sollte man möglichst nicht mit löschen. Es bleibt als der Container “col3″ übrig. Die so entstandene Datei speichern wir als “sidebar.php”.

Nun ist es fast vollbracht. Jetzt können wir die “index.php” selbst bearbeiten. Zunächst löschen wir alles von Zeile 1 bis zur Zeile ” end: main navigation ” und von Zeile ” begin: #col3 static column ” bis zum Ende. Was jetzt noch fehlt ist der Aufruf der Templatedateien “header.php”, “footer.php” und “sidebar.php”, die wit gerade erstellt haben. Hierfür gibt es entsprechende Funktionen von WordPress, die wir nun noch in die “index.php” eintragen. An den Anfang der “index.php” kommt folgender Code:

<?php get_header(); ?>

Und an das Ende der Datei setzen wir folgende Aufrufe:

<?php
get_sidebar();
get_footer();
?>; 

Preview des erstellten Theme

Nun ist es fast vollbracht. Jetzt können wir schon mal in dem Adminbereich von WordPress zu den Themes wechseln und uns die Preview des Themes ansehen. Wenn alles richtig gemacht wurde, sollte die Vorschau so aussehen:

Theme Preview

Eigentlich sieht das Theme ja schon ganz gut aus. Erinnern wir uns aber an unsere Design Skizze, dann haben wir noch ein Problem zu beheben. Die Sidebar soll direkt am oberen Rand beginnen. Hierfür müssen wir noch ein paar Änderungen in den Dateien vornehmen. Da das Tutorial aber schon deutlich länger geworden ist, als geplant, verschieben wird diese Anpassungen auf den nächsten Teil. Dann werden wir auch die sogenannte “Loop” einbauen, die dafür sorgt, dass unsere Artikel angezeigt werden.

Ich hoffe, dass ich heute nicht zu viele abgehängt habe mit dem ganzen Löschen und einfügen von irgendwelchen Codezeilen. Damit es etwas einfacher ist, habe ich noch eine zip-Datei eingefügt, in der alle Dateien enthalten sind, die wir heute erstellt haben. Schaut euch diese Dateien, die ins Verzeichnis “css” gehören, einfach nochmal in Ruhe an.

Fragen sind jederzeit Willkommen. Und denkt auch nochmals an meine Bloggeraktion, wenn ihr ein eigenes Design habt, was ihr gerne umgesetzt haben wollt.

In der heutigen Folge geht es erstmal um das grundsätzliche Layout des Blogs und wie ich dieses sehr schnell mit dem Mockup Tool “Balsamiq” erstellen kann. Wenn ihr vielleicht auch dieses Tool ausprobieren wollt, stelle ich es zunächst einmal kurz vor. Anschließend gehe ich dann auf die Erstellung des neuen Golfblog Designs ein.

Entwurf eines Webdesign mit Balsamiq

Balsamiq - Webdesigns schnell erstellen

Das Werkzeug Balsamiq ist im Prinzip ein Malwerkzeug, welches speziell auf die Erstellung von Webdesign ausgerichtet ist. Sogenannte Mockups sind quasi der Ersatz für den Entwurf, den man normalerweise mit Papier und Bleistift erstellt.

Nach dem Start des Programms hat man eine leere Zeichenfläche vor sich und ein Bereich mit vordefinierten Komponenten. Hierbei handelt es sich um diverse Objekte zur Darstellung verschiedenster Informationen oder Bereiche.

Natürlich sind das Buttons, Menüs, Scrollbars, Textbereiche, Fenster und und und. Diese sogenannten “Controls” kann man auch noch ergänzen. Damit dürfte eigentlich für jeden Anwendungsfall und für jedes Design ein Control zur Verfügung stehen.

Balsamiq - Bearbeitungsdialog bei Auswahl mehrerer Objekte

Man kann auch spezielle Controls einsetzen, um zum Beispiel mit Pfeilen auf bestimmte Stellen hinzuweisen oder Kommentare zu hinter lassen. Gedacht ist das Programm u.a. auch dafür, dass ein Webdesigner seine ersten Designentwürfe mit dem Kunden abstimmen kann.

Für die Anordnung und Bearbeitung der einzelnen Objekte stehen jede Menge Funktionen zu Verfügung, wie man sie auch aus Zeichenprogrammen kennt. Man kann zum Beispiel mehrere Objekte an einer Linie ausrichten, sie gruppieren oder ihre Position fixieren.

Auch Textformatierungen lassen sich vornehmen. Wenn man die Seite schon etwas bunter gestalten möchte, kann man auch Farben definieren oder sogar Bilder einbauen.

Balsamiq - Bearbeitungsdialog eines Objekts

Erstellte Mockups können auf vielfältige Art und Weise ausgegeben werden. Man kann es als Bild oder PDF exportieren, eine XML-Datei erzeugen oder eben einfach abspeichern.

Ein Hinweis zum Testen. Es gibt eine Demoversion mit ein paar Einschränkungen. So kann man das erstellte Mockup zum Beispiel nicht speichern. Allerdings kann man seine Arbeit mit einem XML Export sichern und auch wieder einlesen. Zusätzlich sind die Dialoge etwas nervig, die einem alle paar Minuten anzeigen, dass man nur eine Demoversion hat.

Wenn man einen eigenen Blog hat, auf dem man Balsamiq vorstellen kann, bekommt man kostenfrei einen Lizenzschlüssel. Hierzu muss man einfach nur eine Mail schreiben. Hat mir ohne Probleme funktioniert.

Ein neues Design entwerfen

Die Vorgaben

Nachdem wir nun erfahren haben, wie man sich mittels Balsamiq ein neues Design entwerfen kann, begeben wir uns nun an das Design des Golfblogs. Zunächst möchte ich ein paar Ziele und Rahmenbedingungen definieren, die ich in meinem Design berücksichtigen will:

• Flexibles Design mit zentraler Ausrichtung.
• 2 Spalten (breite Content Spalte und eine Sidebar auf der rechten Seite)
• Das Design sollte bereits grob die Möglichkeit für ein paar Werbeanzeigen berücksichtigen
• Artikel sollen zukünftig auf der Startseite als “Kurztext” erscheinen. Einerseits glaube ich, dass dadurch ein “ruhigeres” Design entsteht. Der zweite Grund ist die bessere Nachverfolgung in der Statistik, da der Artikel angeklickt werden muss, um ihn komplett zu lesen
• Eine Menüleiste soll auf die wichtigsten Kategorien und Seiten verweisen
• In der Fußzeile sollen einige Übersichten wie z.B. das Archiv, vielleicht die Tags usw. dargestellt werden.
• Die Größe des Design soll sich an einen Anwender richten, der eine Auflösung von 1024 Pixeln in der Breite hat.

Mockup der neues Startseite

Entwurf der Startseite

Mit diesen Vorgaben bin ich dann mittels Balsamiq in das Design eingestiegen. Zunächst habe ich die Startseite des Blogs entworfen. In sehr kurzer Zeit war bereits ein erster Entwurf fertig. Begonnen hatte ich mit einem Header über die gesamte Breite des Layouts. Dies habe ich dann aber wieder verworfen und aktuell die Sidebar direkt an den oberern Rand positioniert.

Auch mit dem Menü habe ich ein wenig gespielt und es an mehreren Stellen positioniert. Bei dem Design der Artikeldarstellung auf der Startseite habe ich mich entschlossen, keine Metainformationen darzustellen. Also keine Informationen zu Datum, Kategorie und Tags. Ich bin mir aber noch nicht ganz schlüssig, ob ich es dabei belasse. Ich denke,  dass diese Infos (bis auf das Datum vielleicht) an dieser Stelle für die Leser nicht wirklich interessant ist.

Entwurf der Artikelseite

Nachdem der Entwurf der Startseite fertig gestellt war, habe ich mich an den Entwurf der Seite für die Anzeige eines einzelnen Artikels begeben. Hierzu habe ich das vorhandene Mockup verwendet und angepasst.

Die Artikelseite habe ich im üblichen Stil entworfen. Hier werden jetzt auch die Metainformationen dargestellt.Unter dem Text soll ein Bereich für Bookmarks, eine Toolbar oder ähnliches entstehen. Damit man sich im Blog möglichst viel bewegt sollte eine Info zu ähnlichen Artikeln natürlich nicht fehlen.

Schließlich folgen die Kommentare mit dem Kommentarformular. Diesen Bereich und die Fußzeilen habe ich nicht mehr dargestellt. Die Fußzeile soll die der Startseite entsprechen.

Mockup der Artikelseite

Damit haben wir nun einen ersten Entwurf des “neuen” Blogs. In der Regel wird man immer noch ein paar Anpassungen vornehmen. Das grundsätzliche Design steht aber nun. Interessant wird noch die Farbgestaltung, die natürlich wesentlichen Einfluss auf das Aussehen des Blogs hat.

Auch bei der konkreten Gestaltung der Sidebar bin ich mir noch nicht ganz sicher. Belasse ich es bei einer breiten Spalte oder gibt es Bereiche, die ich nochmals auf zwei Spalten aufteile? Dies werde ich entscheiden, wenn ich genauer weiß, welche Infos ich in der Sidebar darstellen möchte.

Ausblick auf Teil 3 des Tutorials

Im nächsten Teil des Tutorials soll es dann erstmals etwas konkreter werden. In Teil 3 werden wir das Design in die Hauptbereiche aufteilen und diese mittels dem YAML-Framework darstellen. Am Ende von Teil 3 sollten wir also das erste Mal das Design der Startseite im Blog sehen.

Bis dahin wünsche ich evtl. viel Spaß mit dem Test von Balsamiq. Vielleicht habt ihr ja Lust direkt ein eigenes Design zu entwerfen. Gerne würde ich dann demnächst auch erläutern, wie ihr eure Entwürfe mittels YAML umsetzen könnt.

Eigentlich könnte man daraus ja eine kleine “Mitmach-Aktion” machen. Ich überlege mir mal etwas und werde dies dann ggf. in einem eigenen Artikel bekannt geben.

Da ich gerade dabei bin, meinen Blog ein wenig zu modifizieren und zu optimieren kommt dieses Projekt wie gerufen. So bekomme ich vielleicht noch ein paar weitere Anhaltspunkte, wie ich meinen Blog verbessern kann.

Heute ist die 3. Aufgabe von Konstantin gestellt worden. Ziel des Projekt ist es, dass man sich intensiver mit seinem Blog beschäftigt und natürlich auch messbare Verbesserungen erzielt.

Das Blogseminar

Die Aufgaben, die in den jeweiligen Seminaren gestellt werden, sind unterschiedlich komplex und betreffen Themen wie SEO (Suchmaschinen Optimierung), Inhalt, Design und Optimierungen im Blog-Code.

Für die Aufgaben hat Konstantin immer eine bestimmte Zeit vorgegeben. Weiterhin bekommt man immer ein paar Hilfestellungen zur Lösung der Aufgaben. Neben der “normalen” Aufgabe gibt es dann noch eine Bonusaufgabe, die man optional bearbeiten kann.

Jeder, der an dem Projekt teilnimmt, sollte über die erledigten Aufgaben und die gemachten Erfahrungen berichten. Da ich erst jetzt mit in das Projekt einsteige, hänge ich noch ein wenig mit den Aufgaben.

Zum Teil hatte ich die Aufgabenstellungen aber schon umgesetzt oder ich hatte nur kleine Veränderungen zu übernehmen.

Blogseminar von Gedankendeponie.net

Aufgabe 1

Die erste Aufgabe des Blogseminars habe ich bereits nachgeholt. Es ging darum, die Meta-Description und Meta-Keywords zu definieren bzw. zu überprüfen. Beides war bereits in meinem Blog enthalten. Da ich das Plugin “Platinum SEO” einsetze, sind Veränderungen möglich, ohne dass ich dafür eine Template Datei ändern muss. Ich habe meine Beschreibung nur etwas geändert, damit sie schon auf die Neuausrichtung meines Blogs passt.

Die Bonusaufgabe bestand darin, mindestens 5 Kommentare auf anderen Blogs zu hinter lassen.

Aufgabe 2

Die zweite Aufgabe des Blogseminars bestand darin, eine About-Seite (“Über mich”-Seite) zu erstellen, bzw. zu überarbeiten. Bei der Lösung dieser Aufgabe habe ich mit Entsetzen festgestellt, dass diese Seite auf meinem Blog komplett fehlt. Auf meinen beiden anderen Blogs gibt es diese Seite.

Da kann man mal sehen, wie “betriebsblind” man auf den eigenen Seiten sein kann. Es zeigt, wie gut es ist, wenn man ein paar Tipps von außerhalb bekommt. Nun habe ich einen ersten Entwurf meiner “Über mich”-Seite erstellt. Wahrscheinlich ist das aber eine Seite, die man immer wieder mal anpassen muss.

Die Bonusaufgabe bestand darin die RSS-Funktion zu erläutern und eine entsprechende Hilfe-Seite zu erstellen. Dies Idee finde ich so gut, dass ich daraus sogar eine ganze Artikelreihe machen möchte. Auch bei mir kommen viele Leser über Suchmaschinen. Viele davon wissen vielleicht gar nicht, was ein RSS-Feed ist und wie man ihn nutzen kann. Überhaupt gibt es wahrscheinlich viele Dinge, die in einem Blog auftauchen, womit nicht jeder sofort etwas anfangen kann.

Aufgabe 3

Die heutige Aufgabe des Blogseminars besteht darin, die Kategorien seines Blogs zu überprüfen. Hierbei sollten nicht zu viel und nicht zu wenig verwendet werden und natürlich sollten sie aussagekräftig sein. Für die Aufgabe hat Konstantin 13 Tage veranschlagt.

In der Tat ist die Aufgabe nicht so ganz leicht. Eine Überprüfung bzw. Anpassung ist auf meinem Blog, auf Grund der Neuausrichtung, auf jeden Fall erforderlich.

Zuvor muss ich aber nochmal prüfen, was zusätzlich zu tun ist. Einfach Kategorien umbenennen kann zu ein paar Problemen führen. Da die Links zu Artikeln bei mir in Verbindung mit der Kategorie gebildet werden, gibt dies Probleme mit Suchmaschinen.

Dort werden noch eine ganze Weile die alten Links vorhanden sein. Klickt dann jemand ein Suchergebnis zu meinem Blog an, wird die Seite nicht mehr gefunden. Ich muss also dafür sorgen, dass der  alte Link mit der alten Kategorie nun auf den neuen Link umgeleitet wird.

Hierzu muss ich mich erst noch mal schlau machen, bevor ich meine Kategorien überarbeite.

Dafür habe ich die Bonusaufgabe bereits in den letzten Tagen umgesetzt. Hierbei geht es darum, seinen Blog über Social Networks zu “vermarkten”. Schon seit einer Weile wird jeder Artikel von mir über meinen Twitter Account gezwitschert. Vor ein paar Tagen habe ich mir bereits eine Fan-Seite bei Facebook angelegt.

Also habe ich die aktuellen Aufgaben schon ganz gut nach gearbeitet. Wenn ich das Problem mit den Kategorien gelöst habe, werde ich auch nochmals darüber berichten. Dürfte evtl. noch mehr Blogger interessieren. Vielleicht hat jemand auch einen Tipp für mich (muss wahrscheinlich über htaccess oder ein Plugin gelöst werden).

Ich bin gespannt, wie es weiter geht und wie dieses Blogseminar meinem Blog hilft.

]]> http://www.blog-gedanken.de/webentwicklung/blog-optimieren-mit-dem-blogseminar/feed/ 0 http://www.blog-gedanken.de/webentwicklung/eigenes-wordpress-theme-mit-yaml-erstellen/ http://www.blog-gedanken.de/webentwicklung/eigenes-wordpress-theme-mit-yaml-erstellen/#comments Wed, 13 Jan 2010 11:00:12 +0000 Gedanken Blogger http://www.blog-gedanken.de/?p=3321 Wie bereits angekündigt möchte ich die Umgestaltung meines Golfblogs mit einer kleinen Artikelserie begleiten. Ich werde versuchen, jeden einzelnen Schritt in loser Reihenfolge zu kommentieren. Ziel ist es, zu beschreiben, wie man an ein neues Layout für einen Blog gelangt und dabei das CSS Framework YAML nutzt.

In der Regel beginnt dies damit, sich Gedanken zu machen, wie der Blog gestaltet werden soll. Welches Grundlayout möchte man verwenden, welche Informationen sollen dargestellt und wie sollen diese Informationen angeordnet werden. Ein Thema, mit dem ich mich persönlich immer besonders schwer tue, betrifft dann die Farbgestaltung des Blogs. Schließlich geht es dann an die Umsetzung eines konkreten WordPress Themes und die Integration von WordPress Plugins und weiteren Funktionen.

Da ich ein großer Fan des CSS Framework “YAML” bin, werde ich dieses Framework als Basis für die Entwicklung des WordPress Themes nutzen. Für eine erste Skizze meines Layouts habe ich mir diverse Mockup-Tools angesehen und mich entschieden, dass Programm “Balsamiq” zu verwenden. Diese Tools dienen dazu, eine erste Anordnung von Seitenelementen zu skizzieren und ersetzen quasi die erste Zeichnung mit Papier und Bleistift.

In der Artikelreihe werde ich in erster Linie auf die Nutzung von YAML und die Erläuterung der Theme Entwicklung mit WordPress eingehen. An Hand des praktischen Beispiel meines Golfblogs werde ich schrittweise erläutern, wie ich die einzelnen Komponenten umgesetzt habe.

Die Artikelserie soll kein ausführlicher Workshop zu den Themen YAML und WordPress Themes werden. Dafür sind diese Themen einfach zu komplex. Ziel soll es aber schon sein, dass man mit Hilfe meiner Artikelreihe in die Lage versetzt wird, ein eigenes WordPress Theme zu erstellen. Idealerweise hat man bereits Erfahrungen mit der Webentwicklung und kennt sich ein wenig mit CSS aus.

Da ich versuche, die Artikel parallel zu den tatsächlichen Umstellungsaktivitäten zu erstellen, wird es keine festen Zeiträume geben, wann ein neuer Artikel zu der Serie erscheinen wird. Auch die genauen Inhalte von jedem Artikel stehen daher noch nicht fest. Als kleine Einleitung werde ich nun noch kurz YAML und WordPress Themes ein wenig erläutern.

Was ist YAML ?

Die Basis des heutigen YAML in der aktuellen Version 3.2.1 wurde von Dirk Jesse im März 2005 entwickelt. YAML steht für “Yet Another Multicolumn Layout”. Dirk Jesse beschreibt YAML auf seiner Webseite wie folgt:

YAML ist ein (X)HTML/CSS Framework zur Erstellung moderner, flexibler Layouts auf Grundlage von float-Umgebungen. Dabei stehen ein Höchstmaß an Flexibilität für den Webdesigner und Zugänglichkeit für die Nutzer im Vordergrund.

• Basierend auf Webstandards
• Ausgerichtet auf zugängliche Webseiten
• Robustes, flexibles Layoutkonzept
• Modularer Aufbau, anwenderorienterte Funktionaliät
• Umfassende, mehrsprachige Dokumentation

Seit einiger Zeit existiert zu diesem Framework, welches im Prinzip aus diversen CSS-Dateien besteht, auch ein Generator zur Erzeugung von Basislayouts und dem entsprechenden Source Code in Form von HTML- und CSS-Dateien. Wer etwas tiefer in YAML einsteigen möchte, dem kann ich auch das ausgezeichnete Buch “CSS-Layouts – Praxislösungen mit YAML” sehr empfehlen.

Was ist ein WordPress Theme ?

Damit die Fragen zu Beginn alle geklärt sind, kommen nun noch ein paar kurze Infos zu WordPress Themes. Als Theme wird in WordPress quasi das gesamte Layout bezeichnet, in der der Blog dargestellt wird. Hierzu gehören die verwendeten CSS-Dateien sowie alle Template Dateien. Womit wir auch gleich beim nächsten Begriff sind.

Beide schmeißt man gerne mal durcheinander. Ein Template ist ein Ausschnitt bzw. eine Komponente eines Themes und bildet das Musteraussehen eines bestimmten Bereichs. Jedes WordPress Theme hat mindestens zwei Dateien. Die Datei “style.css” und die Template-Datei “index.php“. In der Datei “style.css” sind alle CSS-Formatierungen untergebracht und in der “index.php” wird das Layout der Seite beschrieben.

Normalerweise gibt es aber noch mehr Template Dateien. So werden mindestens die Templates “header.php”, “footer.php” und “sidebar.php” verwendet. Aber auch “post.php” oder “comment.php” sind häufig zu finden. Ich denke, die Namen der Dateien sagen genug aus, wofür die jeweiligen Template-Dateien zuständig sind. In den folgenden Teilen der Serie gehe noch etwas detaillierter auf die Strukturierung von WordPress Themes ein.

Eine besondere Rolle spielt auch noch die Datei “functions.php”. Hier werden die Theme spezifischen Funktionen hinterlegt. So ist hier zum Beispiel häufig der Funktionsaufruf zur Definition der Sidebar als widgetable zu finden.

Weitere wichtige Komponenten eine WordPress Themes sind die sogenannten Template Tags. Sie dienen dazu, dynamische Informationen eines Blogs anzuzeigen. Mit dem Template Tag “the_title” wird zum Beispiel der Titel eines Blogartikels ausgegeben. Über Parameter kann die Ausgabe der jeweiligen Infos noch gesteuert werden. Eine Übersicht über alle Template Tags von WordPress findet man u.a. auf den CODEX Seiten von WordPress. Auf diesen Seiten findet man auch umfangreiche Infos zu Erstellung bzw. Verwendung von Themes.

Im nächsten Artikel dieses Tutorials geht es dann los mit den ersten Ideen zur Gestaltung des Golfblogs und der Verwendung des Mockup Tools “Balsamiq“.

Da wahrscheinlich jeder, der sich für die Erstellung von WordPress Themes interessiert, bereits erste Erfahrungen gesammelt und weil YAML nicht in drei Sätzen zu beschreiben ist und es eine sehr ausführliche Dokumentation gibt, verzichte ich auf eine einleitende detaillierte Erläuterung beider Themen.

Ich werde versuchen, an den Stellen, wo man etwas tiefer in die Thematik einsteigen muss, entsprechende Erläuterungen zu geben. Diese Vorgehensweise hat auch einen netten Nebeneffekt. So hoffe ich, dass ich mit dem Tutorial schnelle Ergebnisse erziele, die man möglichst nach jedem Serienteil selbst testen kann. Bei einer längeren Einleitung würde es wahrscheinlich drei bis vier Teile dauern, bis endlich ein erstes Theme-Gerüst entstanden ist.

Wollen wir also beginnen.

Was ist YAML ?

Ein paar Worte muss ich natürlich über YAML verlieren. Die Basis des heutigen YAML in der aktuellen Version 3.1 wurde von Dirk Jesse im März 2005 entwickelt. YAML steht für “Yet Another Multicolumn Layout”. Dirk Jesse beschreibt YAML auf seiner Webseite wie folgt:

YAML ist ein (X)HTML/CSS Framework zur Erstellung moderner, flexibler Layouts auf Grundlage von float-Umgebungen. Dabei stehen ein Höchstmaß an Flexibilität für den Webdesigner und Zugänglichkeit für die Nutzer im Vordergrund.

• Basierend auf Webstandards
• Ausgerichtet auf zugängliche Webseiten
• Robustes, flexibles Layoutkonzept
• Modularer Aufbau, anwenderorienterte Funktionaliät
• Umfassende, mehrsprachige Dokumentation

Seit einiger Zeit existiert zu diesem Framework, welches im Prinzip aus diversen CSS-Dateien besteht, auch ein Generator zur Erzeugung von Basislayouts und dem entsprechenden Source Code in Form von HTML- und CSS-Dateien. Wer etwas tiefer in YAML einsteigen möchte, dem kann ich auch das ausgezeichnete Buch “CSS-Layouts – Praxislösungen mit YAML” sehr empfehlen.

Was ist ein WordPress Theme ?

Damit die Fragen zu Beginn alle geklärt sind, kommen nun noch ein paar kurze Infos zu WordPress Themes. Als Theme wird in WordPress quasi das gesamte Layout bezeichnet, in der der Blog dargestellt wird. Hierzu gehören die verwendeten CSS-Dateien sowie alle Template Dateien. Womit wir auch gleich beim nächsten Begriff sind.

Beide schmeißt man gerne mal durcheinander. Ein Template ist ein Ausschnitt bzw. eine Komponente eines Themes und bildet das Musteraussehen eines bestimmten Bereichs. Jedes WordPress Theme hat mindestens zwei Dateien. Die Datei “style.css” und die Template-Datei “index.php“. In der Datei “style.css” sind alle CSS-Formatierungen untergebracht und in der “index.php” wird das Layout der Seite beschrieben.

Normalerweise gibt es aber noch mehr Template Dateien. So werden mindestens die Templates “header.php”, “footer.php” und “sidebar.php” verwendet. Aber auch “post.php” oder “comment.php” sind häufig zu finden. Ich denke, die Namen der Dateien sagen genug aus, wofür die jeweiligen Template-Dateien zuständig sind. Im nächsten Teil der Serie gehe noch etwas detaillierter auf die Strukturierung von WordPress Themes ein.

Eine besondere Rolle spielt auch noch die Datei “functions.php”. Hier werden die Theme spezifischen Funktionen hinterlegt. So ist hier zum Beispiel der Funktionsaufruf zur Definition der Sidebar als widgetable zu finden.

So, für den Start sollten die Erläuterungen zunächst genügen. Kommen wir nun zu der Vorbereitung unserer Umgebung, damit wir das Theme direkt in WordPress ausprobieren und weiterentwickeln können.

Vorbereitung der Theme-Entwicklungsumgebung

Theme-Verzeichnis anlegen

Eifrige Leser meines Blogs werden sich hoffentlich an meinen Artikel “WordPress Testversion auf USB-Stick installieren” erinnern. Nun ist die Zeit gekommen, dass wir diese Installation benötigen. Natürlich muss man WordPress nicht auf dem USB Stick nutzen. Eine lokale Installation entsprechend der Anleitung geht natürlich auch.

Zuerst erstellen wir uns einen neuen Theme-Ordner “ThemeTutorial” (oder wie immer ihr ihn nennen wollt). Dieser Ordner gehört in das Verzeichnis “?:/xampplite/htdocs/testblog/wp-content/themes”. Wobei das “?” für euren Laufwerksbuchstaben steht und “testblog” für euer WordPress Verzeichnis steht. Rechts im Bild ist die Verzeichnisstruktur zu sehen.

Nun haben wir ein Entwicklungsverzeichnis angelegt, welches genau dem Platz entspricht, wo normalerweise die fertigen Themes hin gehören. Aber Vorsicht ! So lange wir noch keine Dateien mit sinnvollem Inhalt in dem Template Verzeichnis haben, sollte man in WordPress nicht auf dieses Theme umschalten. – Man sieht nämlich nur einen leeren Browser und kann sich somit auch nicht mehr in die Admin-Oberfläche einloggen.

Allerdings funktioniert ein Umschalten erst, wenn alle Basisdateien vorhanden sind. Wer es trotzdem nicht sein lassen kann, hier die URL für das Admin-Login “http://localhost/testblog/wp-admin/”.

Installation der YAML Dateien

Nun benötigen wir noch die YAML-Dateien. Diese können wir natürlich auf der Internetseite von YAML direkt herunterladen. Hier sollte man sich auch die Dokumentation besorgen.

Ein Wort noch zu den Lizenzbestimmungen von YAML. Das Framework ist unter der Creative Commons Attribution 2.0 Lizenz (CC-A 2.0) veröffentlicht. Somit ist das Framework sowohl kommerziell als auch nicht-kommerziell einsetzbar. Einzige Bedingung ist die Verlinkung auf “www.yaml.de”.

Auch das Theme, welches im Rahmen dieses Tutorials entsteht und welches ich als Download anbieten werde, entspricht somit dieser Lizenz. Bei Verwendung des Themes muss auch ein Link auf meinen Blog gesetzt werden.

Nach dem Herunterladen von YAML sollte das ZIP-File erstmal entpackt werden. Hier sind einige Dateien zu finden, die wir im Moment nicht benötigen. Der wichtigste Ordner ist “yaml”, den wir nun auch in unser Theme-Verzeichnis kopieren.

Während unseres Tutorials werden wir Dateien in diesem Verzeichnis nicht verändern. Wenn eine neue YAML Version erscheint, kann man das entsprechende Verzeichnis einfach mit der neuen Version überschreiben, ohne dass eigene Änderungen davon betroffen sind. Also “Finger weg” von diesem Ordner.

Die eigentliche Vorbereitung ist damit abgeschlossen. Nun können wir uns an die Erstellung des Themes begeben. Ich hoffe, es nicht bereits zu viel für den ersten Teil ? Aber wir wollen doch möglichst ein erstes Ergebnis haben – oder ?

Das Layout

Fragen zum Layout

Die wichtigste Frage, die wir uns nun stellen müssen, ist die des Basis Layouts. Soll es ein Zweispalter werden, die Sidebar links oder rechts. Soll die Sidebar evtl. geteilt werden ? Mit diesen und weiteren Fragen beginnt in der Regel ein Theme-Projekt.

Da wir ja heute jedoch nur ein erstes einfaches Theme testen wollen, werde ich mich zunächst auf ein möglichst simples Beispiel Theme beschränken. Dieses soll auch nur dazu dienen, ein erstes Theme zu haben, mit dem man vielleicht schon ein wenig herumspielen kann.

Euer Wunschlayout

In die Erstellung des eigentlichen Themes würde ich euch gerne mit einbinden. Interessiert euch die Erstellung eines bestimmten Layouts (möglichst nicht zu kompliziert). Oder hat jemand eine Vorstellung von einem Layout, welches er einmal für seinen Blog umsetzen wollte?

Sendet mir eure Vorschläge einfach per Mail oder besser noch, beschreibt sie als Kommentare. Dann haben alle etwas davon und vielleicht entsteht so ein gemeinsames “Wunschlayout”. Ich versuche dann ein geeignetes Layout aus den Vorstellungen zu entwickeln, welches ich in den nächsten Teilen nutzen werde.

Ein simples Mini Layout

Also das heutige Layout wird zunächst komplett ohne Spalten auskommen und dient nur dazu, die Artikel anzuzeigen. Wir verzichten auch auf Header, Footer und die Navigationsleiste.

Damit wir auch den Generator von YAML kennen lernen, werden wir zur Erstellung der beenötigten Dateien den “YAML Builder” verwenden. Dieser stellt sich nach dem Aufruf wie folgt dar:

Für unser Layout nehmen wir nun folgende Einstellungen vor:

• Reiter “Basics”: Layout Preset auf “Freestyle” einstellen
• Reiter “Extended”: Optional Layout Elements: “header”, “footer” und “nav” ausschalten

Das Ergebnis sieht wie folgt aus:

Jetzt können wir uns den Code mit dem Button “Get Code” besorgen. Zunächst kopieren wir uns den XHTML-Code (hierzu auf “views plan text” gehen). Den HTML-Code fügen wir in eine leere Datei ein und speichern diese unter dem Namen “index.php” in unser Theme Verzeichnis.

Wir erinnern uns, mindestens diese Template-Datei brauchen wir für ein WordPress Theme. Gleiches machen wir nun mit der CSS-Datei aus dem YAML-Builder. Den  Code in eine neue Datei kopieren und unter dem Namen “style.css” in das Theme Verzeichnis speichern (dies war die andere wichtige Datei). Nun noch genauso mit den beiden Dateien “basemod.css” und “patch_my_layout.css” verfahren. Diese Dateien nennen wir genauso, wie der YAML Builder dies vorgegeben hat. Die Datei “basemod.css” enthält die CSS-Tags, die für die Seiten Struktur benötigt werden. Die Datei “patch_my_layouts.css” enthält spezielle Hacks, damit das Layout insbesondere auch in älteren Microsoft Browsern läuft.

Unser Theme Verzeichnis sollte nun aussehen, wie rechts abgebildet.

Das erste Basis Theme

Einmal tief Luft holen, wir nähern uns dem heutigen Ziel. Nachdem nun alle Dateien vorliegen, die wir für ein erstes einfaches Theme benötigen, müssen wir nun noch ein wenig WordPress Code einfügen. Denn irgendwie müssen die Artikel auch angezeigt werden.

Die Datei style.css

Wie bereits mehrfach erwähnt, wird die Datei “style.css” in jedem WordPress Theme benötigt. Aus dieser Datei liest WordPress auch die Beschreibung aus, die im Theme-Bereich angezeigt wird. Damit der Code in unserer Datei “style.css” für unsere Verzeichnisstruktur richtig funktioniert, müssen wir noch ein paar Änderungen vornehmen.

Zunächst können wir die “Import”-Zeile für das Drucklayout löschen. Die benötigen wir nicht. Auch die Zeile mit dem Import der Datei “content.css” können wir löschen. Nun ersetzen wir noch die Zeichen “..” durch “core” in der Zeile für den Import der “base.css”. Schliesslich soll ja die richtige Datei aus dem “core”-Verzeichnis geladen werden. In der Zeile für den Import der Datei “basemod.css” entfernen wir einfach den Pfad, da die Datei “basemod.css” im gleichen Verzeichnis liegt, wie die Datei “style.css”. Nun sollte die Datei “style.css” wie folgt aussehen:
/* import core styles | Basis-Stylesheets einbinden */
@import url(yaml/core/base.css);
/* import screen layout | Screen-Layout einbinden */
@import url(basemod.css);

Wo wir gerade dabei sind, die Pfade richtig zu setzen, sollten wir das auch in der Datei “patch_my_layout.css” machen. Hier muss in der Zeile mit dem Import alles bis zu “yaml” entfernt werden. Die Zeile sollte dann so aussehen: “@import url(yaml/core/iehacks.css);”

WordPress Template Tags

Vorbereitung der Datei index.php

Nun kommen wir langsam dazu, die Funktionen zur Anzeige von Artikeln in unser Basis Template einzubauen. Normalerweise strukturiert man das Theme in mehrere Template Dateien, wie oben bereits erwähnt. Wir belassen es aber heute bei einer Datei (index.php), da ich nur das Grundprinzip darstellen will und eine erste Anzeige von Artikeln umgesetzt werden soll.

Damit Daten in einem Theme angezeigt werden, benötigt man unter anderem die Template Tags von WordPress. Hierbei handelt es sich quasi um “Funktionen”, die Daten z.B. aus der Datenbank ermitteln und die Werte im Template an der Stelle positionieren, wo das Tag zu finden ist. Bei Template Tags können auch Parameter übergeben werden. Der Aufruf erfolgt quasi als php-Code.

Gehen wir also nun in unsere Datei “index.php” und schauen uns diese etwas genauer an. Neben allgemeinen Header-Definitionen für eine XHTML-Seite finden wir hier auch zwei Zeilen, die unsere Stylesheet Dateien einbinden. Hier müssen wir wieder Hand anlegen, da natürlich nicht die richtien Verzeichnisse angesprochen werden. Die erste “<link>”-Zeile soll unsere Datei “style.css” einbinden. Hierzu ersetzen wir diese Zeile durch folgende Zeile
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css"/>
Dann kommt noch eine Zeile, die nur zum Tragen kommt, wenn ein Explorer vor Version 7 verwendet wird. Die Zeile ersetzen wir durch folgende Zeile:
<link href="<?php bloginfo('stylesheet_directory');?>/patch_my_layout.css" rel="stylesheet" type="text/css" />

Einbau der “Artikel”-Loop

Nun kommen wir zur Defnition der eigentlichen Seitenstruktur. In diesem Teil möchte ich noch nicht näher darauf eingehen. Wir kämpfen uns vor bis zum Eintrag “<div id=”main”>”. Dies div-Container umschliesst den Hauptbereich der Seite, in dem der eigentliche Inhalt platziert werden solltee.

An dieser Stelle fügen wir nun die sogenannte “Loop” von WordPress ein. Hierbei handelt es sich um die Schleifenanweisung mit den Tags zur Darstellung aller Artikel. Diese “Loop” ist daher in jedem WordPress Theme zu finden. Dieser Code sollte danach in an der entsprechenden Stelle stehen

<div id="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_date('','<h2>','</h2>'); ?>
<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>

In dieser “Loop” geben wir nun alle Artikel aus. Zu jedem Artikel wird das Datum mit dem Tag “the_date” asugegeben. Mit dem Tag “the_permalink” wird die URL zum Artikel ausgegeben. Der Titel eines Artikels wird dem Tag “the_title” ausgegeben. Schließlich wird noch mit dem Tag “the_content” der eigentliche Inhalt dess jeweilgen Artikels ausgegeben. Nähere Erläuterungen zu den Tags im nächsten Teil.

Bevor wir nun das Theme erstmals testen sollten wir noch den Link zum Admin-Login einfügen. Sonst kommen wir nicht mehr so einfach in die Admin-Oberfläche von WordPress zurück.

Hierzu nutzen wir den Link “login” der im Bereich der “Navigation” als Beispiel bereits vorhanden ist. Hier ersetzen wir das “#” durch “/testblog/admin”. Damit haben wir das erste simple Theme auf Basis von YAML erstellt. Nachdem wir das Theme in WordPress ausgewählt haben, sollte die Ausgabe wie folgt aussehen:

Der bisher einzige Artikel nach einer WordPress Installation wird angezeigt. Ihr könnt ja noch ein paar Beispielartikel erstellen, damit ihr seht, dass die Loop auch wirklich funktioniert.

Ich hoffe, dass euch dieser erste Einstieg in die Theme-Erstellung mit YAML gefallen hat und freue mich auf entsprechende Kommentare und auch Hinweise auf Unklarheiten oder Fehler. Wie bereits erwähnt, Ideen für ein Layout, welches wir hier in den nächsten Serienteilen entwickeln wollen, sind gerne gesehen.