Im ersten Teil dieses Tutorials habe ich die grundlegenden Prinzipien eines WordPress-Themes erklärt – jetzt geht es daran, das Ganze in die Praxis umzusetzen.
Bitte lies dir zunächst Teil 1 durch!
Im Folgenden stelle ich die einzelnen Dateien unseres Themes kurz vor – selbstverständlich sind die einzelnen Funktionen, die sie beinhalten, nur ein Richtwert. Es bleibt dir überlassen, ob du ihnen etwas hinzufügst oder doch lieber auf einige Dinge verzichten willst, etwa die Angabe des Autors bei einem Blogeintrag.
Die Kommentare im Code sollen dir helfen, ihn besser zu verstehen.
header.php
All das, was – wie bei jeder anderen Webseite auch – im Head-Bereich steht, kommt in die header.php, ebenso wie ein Stück des Body-Bereichs, der sich auf jeder Seite wiederholt.
Allerdings verwendet WordPress bereits hier einige Template Tags, da etwa der verwendete Zeichensatz im Backend eingestellt werden kann.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archiv <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a>
<?php bloginfo('description'); ?>
footer.php
Die footer.php enthält das, was am Ende einer jeden Seite angezeigt werden soll – dies kann zum Beispiel eine einfache Copyright-Angabe sein oder aber auch eine Übersicht über die zuletzt geschriebenen Postings oder Kommentare. Deiner Phantasie sind hier keine Grenzen gesetzt.
Der Einfachheit halber sind hier nun ein Link zu WordPress Deutschland enthalten sowie die beiden Links zu den RSS-Feeds für die Beiträge und Kommentare.
<?php bloginfo('name'); ?> läuft stressfrei mit <a href="http://wordpress.org/">WordPress</a> | <a href="http://wordpress-deutschland.org">WPD</a>
<br /><a href="<?php bloginfo('rss2_url'); ?>">Beiträge (RSS)</a> und <a href="<?php bloginfo('comments_rss2_url'); ?>">Kommentare (RSS)</a>
<?php wp_footer(); ?>
</body>
</html>
sidebar.php
Das Menue soll in unserem Beispiel
<?php /**/ wp_list_bookmarks('categorize=0&show_description=1&title_before=&title_after&title_li=&category_before=&category_after= '); ?>
<ul>
<!-- falls keine Widgets verwendet werden, erscheinen in der Sidebar folgende Funktionen -->
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Right Sidebar') ) : else : ?>
<!-- das Suchfeld -->
<li>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</li>
<!-- Auflistung deiner statischen Seiten -->
<?php wp_list_pages('title_li=<h2>Seiten</h2>' ); ?>
<!-- das Monats-Archiv -->
<li><h2>Archiv</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<!-- Auflistung deiner Kategorien, dahinter die Anzahl der enthaltenen Postings-->
<?php wp_list_categories('show_count=1&title_li=<h2>Kategorien</h2>'); ?>
<!-- deine in der Blogroll eingetragenen Links -->
<?php wp_list_bookmarks(); ?>
<?php endif; ?>
</ul>
index.php
Die index.php stellt die Startseite dar. Üblicherweise erscheint hier eine Übersicht über die zuletzt geschriebenen Beiträge – aber du kannst natürlich beliebig variieren. Hier erscheint einfach der Beitrag samt Angabe des Autors, des Datums, der Kategorie, in der er abgelegt wurde, der Tags sowie der Kommentare.
Header, Footer und Sidebar werden eingebunden.
f<!-- Einbinden der header.php -->
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!-- der Beitrag startet, zunächst mit dem Titel... -->
<!-- der Titel des Beitrags -->
<a id="post-<?php the_ID(); ?>" href="<?php the_permalink() ?>" rel="bookmark" title=" <?php the_title(); ?>"><?php the_title(); ?></a>
<!-- das Datum, wann er geschrieben wurde--> <?php the_time('j. F Y') ?>
<!-- der Autor des Beitrags --> <?php the_author() ?> >
<!-- der Beitrag selber --> <?php the_content('Den ganzen Beitrag lesen »'); ?>
<!-- wichtig, wenn andere Nicht-Wordpress-Blogs Trackbacks hinterlassen wollen --><!--<?php trackback_rdf(); ?>-->
<!-- Tags des Beitrags, seine Kategorie, die Kommentare, Edit-Link für den Admin-->
<?php the_tags('Tags: ', ', ', '<br />'); ?> |
Kategorie <?php the_category(', ') ?> |
<?php comments_popup_link('0 Kommentare »', '1 Kommentar »', '% Kommentare »'); ?>
<?php edit_post_link('bearbeiten'); ?>
<!-- Ende des Beitrags --><?php endwhile; ?>
<?php next_posts_link('« Vorherige Einträge') ?>
<?php previous_posts_link('Nächste Einträge »') ?>
<?php else : ?>
<!-- wenn kein entsprechender Beitrag gefunden wurde, erscheint eine Meldung samt Suche -->
Sorry, aber ich habe nichts gefunden.
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
single.php
Wenn ein einzelner Artikel aufgerufen wird, kommt die single.php ins Spiel. Interessant wird sie etwa dann, wenn in der index.php immer nur die ersten hundert Wörter eines Beitrags gezeigt werden – um den Beitrag ganz zu lesen, ruft man über einen Klick auf seine Überschrift die single.php auf.
In unserem Beispiel entspricht die single.php weitestgehend der index.php, weswegen ich mir hier die Kommentare gespart habe, allerdings wird hier unterhalb des Postings noch ein zusätzlicher kleiner Text angezeigt, der dem Besucher deines Blogs sagt, was er alles tun kann (kommentieren, Trackbacks setzen, den Feed abonnieren).
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- der vorherige und nächste Artikel werden verlinkt -->
<?php previous_post_link('« %link') ?>
<?php next_post_link('%link »') ?>
<a href="<?php echo get_permalink() ?>" rel="bookmark" id="post-<?php the_ID(); ?>" title=" <?php the_title(); ?>"><?php the_title(); ?></a>
<?php the_content(''); ?>
<!--<?php trackback_rdf(); ?>-->
<?php wp_link_pages(array('before' => '<p><strong>Seiten:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
<?php the_tags( '<p>Tags: ', ', ', '</p>'); ?>
Der Beitrag wurde am <?php the_time('l,') ?> den <?php the_time('j. F Y') ?> um <?php the_time('H:i') ?> Uhr veröffentlicht
und wurde unter <?php the_category(', ') ?> abgelegt.
Du kannst die Kommentare zu diesen Eintrag durch den <?php comments_rss_link('RSS 2.0'); ?> Feed verfolgen.
<?php if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) {// wenn Kommentare und Trackbacks erlaubt sind ?>
du kannst einen <a href="#respond">Kommentar schreiben</a>, oder einen <a href="<?php trackback_url(true); ?>" rel="trackback">Trackback</a> auf deiner Seite einrichten.
<?php } elseif (!('open' == $post-> comment_status) && ('open' == $post->ping_status)) {// wenn nur Trackbacks erlaubt sind ?>
Kommentare sind derzeit geschlossen, aber du kannst dennoch einen <a href="<?php trackback_url(true); ?> " rel="trackback">Trackback</a> auf deiner Seite einrichten.
<?php } elseif (('open' == $post-> comment_status) && !('open' == $post->ping_status)) {// wenn nur Kommentare erlaubt sind ?>
du kannst einen Kommentar hinterlassen. Pingen ist im Augenblick nicht erlaubt.
<?php } elseif (!('open' == $post-> comment_status) && !('open' == $post->ping_status)) {// weder Kommentare, noch Trackbacks sind erlaubt ?>
Kommentare und Pings sind derzeit nicht erlaubt.
<?php } edit_post_link('Beitrag bearbeiten.','<strong>|</strong> ',''); ?>
<!-- Einbinden der Kommentare (comments.php) --><?php comments_template(); ?>
<?php endwhile; else: ?>
sorry, ich habe nichts gefunden
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
page.php
Sehr übersichtlich gestaltet sich die page.php, die für die Anzeige statischer Seiten zuständig ist:
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_title(); ?>
<?php the_content(''); ?>
<?php wp_link_pages(array('before' => '<p><strong>Seiten:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
<?php endwhile; endif; ?>
<?php edit_post_link('Beitrag bearbeiten.', '<p>', '</p>'); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
archive.php
Die archive.php zeigt eine Übersicht der Beiträge an, nach denen im Archiv gesucht wurde: entweder nach Monaten, nach Jahren, Tagen, Autoren, oder nach Kategorien. Der Übersichtlichkeit wegen wird von jedem Beitrag nur ein Auszug angezeigt.
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
<?php /* wenn Kategorien-Archiv */ if (is_category()) { ?>Archiv der Kategorie <?php single_cat_title(); ?>
<?php /* wenn Tages-Archiv */ } elseif (is_day()) { ?> Tagesarchiv für den <?php the_time('j. F Y'); ?>
<?php /* wenn Monats-Archiv */ } elseif (is_month()) { ?> Monatsarchiv für <?php the_time('F Y'); ?>
<?php /* wenn Jahres-Arhiv */ } elseif (is_year()) { ?> Jahresarchiv für <?php the_time('Y'); ?>
<?php /* wenn Autoren-Archiv */ } elseif (is_author()) { ?>Autoren-Archiv
<?php /* wenn Seiten-Archiv */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {
?>Blog-Archiv
<?php } ?>
<?php next_posts_link('« Vorherige Einträge') ?>
<?php previous_posts_link('Nächste Einträge »') ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" id="post-<?php the_ID(); ?>" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
<?php the_time('l,') ?> den <?php the_time('j. F Y') ?>
<!-- nur ein Auszug des Beitrags wird angezeigt --> <?php the_excerpt() ?>
<?php the_tags( '<p>Tags: ', ', ', '</p>'); ?>
Kategorie <?php the_category(', ') ?> |
<?php comments_popup_link('0 Kommentare »', '1 Kommentar »', '% Kommentare »'); ?>
<?php edit_post_link('Bearbeiten'); ?>
<?php endwhile; ?>
<?php next_posts_link('« Vorherige Einträge') ?>
<?php previous_posts_link('Nächste Einträge »') ?>
<?php else : ?>
Sorry, ich habe nichts gefunden.
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
comments.php
Damit deine Besucher Kommentare hinterlassen können und diese auch angezeigt werden können, wird die comments.php benötigt.
<?php
if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Bitte diese Seite nicht direkt aufrufen. Danke!');
if (!empty($post->post_password)) { // falls der Beitrag passwortgeschützt ist...
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // ... und das Passwort nicht im Cookie enthalten ist
?>
<p>Auch die Kommentare sind durch das Passwort geschützt.</p>
<?php
return;
}
}
/* die Kommentare erhalten eine abwechselnde Klasse, damit du sie anders stylen kannst */
$oddcomment = 'class="alt" ';
?>
<?php if ($comments) : ?>
<h3 id="comments"><?php comments_number('Kein Kommentar', 'Ein Kommentar', '% Kommentare' );?> zu “<?php the_title(); ?>”</h3>
<!-- der Kommentar beginnt -->
<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<cite><?php comment_author_link() ?></cite>
<!-- falls im Backend eingestellt wurde, dass Kommentare freigeschaltet werden müssen -->
<?php if ($comment->comment_approved == '0') : ?>
<br /><br /><strong>Achtung: Der Kommentar muß erst noch freigegeben werden.</strong>
<?php endif; ?>
<br />
<small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title="#comment-<?php comment_ID() ?>">
Am <?php comment_date('j. F Y') ?> um <?php comment_time('H:i') ?> Uhr</a> <?php edit_comment_link('Bearbeiten'); ?></small>
<?php comment_text() ?>
</li>
<?php
/* siehe oben, die Kommentare erhalten abwechslende Klassen */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
?>
<?php endforeach; ?>
</ol>
<?php else : // wenn es keine Kommentare gibt ?>
<?php if ('open' == $post->comment_status) : ?>
<!-- wenn Kommentare erlaubt, aber keine vorhanden sind -->
<?php else : // wenn Kommentare nicht erlaubt sind ?><p>Kommentarfunktion ist deaktiviert</p>
<?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
<!-- das Formular, um Kommentare zu hinterlassen -->
<h3 id="respond">Einen Kommentar schreiben</h3>
<!-- falls nur eingeloggte User kommentieren dürfen -->
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>du musst <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">angemeldet</a> sein, um kommentieren zu können.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p>Angemeldet als: <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>.
<a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="von diesem Account abmelden">Abmelden »</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><small>Name <?php if ($req) echo "(erforderlich)"; ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<label for="email"><small>eMail <?php if ($req) echo "(erforderlich)"; ?> (wird nicht veröffentlicht)</small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Webseite</small></label></p>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> diese Tags kannst du nutzen: <code><?php echo allowed_tags(); ?></code></small></p>-->
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="senden" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // wenn man eingeloggt sein muss und dies nicht ist ?>
<?php endif; ?>
search.php
Wenn nach etwas gesucht wurde, werden die Suchergebnisse mit Hilfe der search.php angezeigt. Falls nichts Passendes gefunden werden konnte, erscheint ein dementsprechender Hinweis samt einem Suchfeld, damit man nach etwas anderem suchen kann.
<?php get_header(); ?>
<?php if (have_posts()) : ?>
Suchergebnisse:
<?php next_posts_link('« Vorherige Einträge') ?>
<?php previous_posts_link('Nächste Einträge »') ?>
<!-- die Ergebnisse werden aufgelistet -->
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" id="post-<?php the_ID(); ?>" rel="bookmark" title=" <?php the_title(); ?>"><?php the_title(); ?></a>
<?php the_time('l, j. F Y') ?>
<?php the_excerpt() ?>
Kategorie <?php the_category(', ') ?> |
<?php comments_popup_link('0 Kommentare »', '1 Kommentar »', '% Kommentare »'); ?>
<?php edit_post_link('Bearbeiten'); ?>
<?php endwhile; ?>
<?php next_posts_link('« Vorherige Einträge') ?>
<?php previous_posts_link('Nächste Einträge »') ?>
<!-- falls nichts bei der Suche herausgekommen ist -->
<?php else : ?>
Sorry, ich habe nichts gefunden.
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
searchform.php
Wie das Suchfeld aussehen soll, das in der Sidebar sowie gegebenenfalls in der search.php und der archive.php angezeigt wird, das kannst du in der searchform.php festlegen.
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Suche" />
</form>
404.php
Falls einer deiner Besucher einen ungültigen Verweis aufruft, führt dies zum altbekannten Fehler 404, File not Found. Standardmäßig erscheint dann eine mehr oder minder hässliche, schwarz-weiße Seite im Browser – diese kannst du allerdings anpassen, indem du eine 404.php verwendest.
<?php get_header(); ?>
<p>Hups - diese Seite gibt es hier leider nicht!</p>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
functions.php
Als Letztes kommen wir nun zur functions.php. Diese ist notwendig, damit du in der Sidebar sowie im Footer Widgets einsetzen kannst. Widgets sind Funktionen wie etwa die Tag-Cloud oder eine Übersicht über die letzten Kommentare, die du im Backend sehr einfach per Drag & Drop in deine Sidebar oder den Footer ziehen kannst, um diese an deine Wünsche anzupassen.
<?php
// Widget Settings
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Left Navigation',
'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' => 'Right Sidebar',
'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' => 'Left Footer',
'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' => 'Middle Footer',
'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' => 'Right Footer',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
?>
style.css
So… last but not least: das Stylesheet.
Ohne das kommt kein Theme aus, auch nicht in WordPress.
Das Stylesheet eines WordPress-Themes funktioniert genau so wie jedes andere Stylesheet auch – da dir in der Konfiguration deines Themes keine Grenzen gesetzt sind und ich aus diesem Grund nur so wenig Spezifisches wie nötig in den obigen Beispielen untergebracht habe, verzichte ich an dieser Stelle auch darauf, eine *.css anzufügen.
Schau einfach, was in den obigen Dateien vorkommt, ergänze diese nach deinen Wünschen und lege dementsprechend das Stylesheet an.
Viel Spaß!
neontrauma, 23 Jahre alt, Studentin und freiberufliche Webdesignerin, liebt Coding & Fotografie und wohnt in Leverkusen. 
Das Tutorial ist wirklich schön und hilfreich, aber ich fürchte gerade die css ist das womit ich bisher immer Probleme hatte. =/
Naja, wenn du irgendwann noch Lust/Zeit hast, würde ich mich über einen 3. Teil freuen, aber wenn dies zu viel Aufwand ist, kann ich das natürlich auch verstehen…
Hej,
doch, ein Teil 3 ist mittlerweile auch in Arbeit und wird die Tage online kommen. :-)
Hui, das wär wirklich cool. :) Freu mich schon und bin mal gespannt, ob ich Volldepp das dann hinbekomm… ^^
du beschreibst hier alles super detailliert, reicht es nicht wenn ich nur über die adminoberfläche rtl.css und style.css bearbeite? was auch immer der unterschied zwischen den beiden ist o.O
Naja, ds kommt drauf an, wie sehr du in dein Layout eingreifen willst. Je nachdem benötigst du ja mehr oder weniger viele Divs, Listen, was auch immer. Und dafür sind dann Änderungen an den einzelnen PHP-Dateien nötig, über das Stylesheet hinaus.
Die rtl.css ist für Sprachen gedacht, bei denen man von rechts nach links liest. :)
und wo muss ich da meine Div’s einfügen. Ich muss ja irgendwo festlegen, wo mein Text, etc steht. Kommt das in die header.php?
Nein, die Divs mitsamt dem eigentlichen Inhalt kommen in die jeweiligen Unterseiten. Allgemein also in die index.php; wenn du willst, kannst du dann für die verschiedenen Arten von Seiten (einzelner Artikel, statische Seite etc.) noch spezielle Seiten anlegen, das wären dann die single.php oder page.php :)
[...] habe. Aber gerade eben hab ich eine super Anleitung für WordPress Layouts gefunden und zwar hier. Ich glaube, da werd ich mich nun mal dransetzen, hab heute eh nichts weiter zu tun… außer [...]