Das was große Onlinemagazine wie Spiegel Online, Focus und Co. machen, das kann auch jeder WordPress-Nutzer für sich umsetzen: Themenseiten! (Ein Beispiel dafür: Die iPhone-Themenseite von Spiegel Online)
Was Themenseiten genau sind, wann sie Sinn machen und wie (einfach!) sie sich mit WordPress umsetzen lassen, dass will ich in diesem Artikel einmal erklären.
Was sind Themenseiten?
Themenseiten wird wohl jeder von euch kennen: Verschiedene Beiträge werden in einer Übersichtsseite noch einmal zusammengefasst und mit weiteren Informationen (Wikipedia-Verweise, Karten, Galerien oder Forenverweisen) aufgewertet. Manchesmal erscheint die optische Anpassung wie eine eigene Microsite, der mit der allgemeinen Seite nur noch der Header gemein ist.
Inhalte dieses Artikels
Wann machen Themenseiten Sinn?
Themenseiten machen immer dann Sinn, wenn es zu einem Thema besonders viele Artikel gibt und das Thema geeignet ist zu einem Besuchermagneten zu werden. Um die Verweildauer der Besucher zu erhöhen und dieses spezielle Themengebiet noch einmal inhaltlich und optisch nue zu präsentieren, können Themenseiten erstellt werden.
Themenseiten mit WordPress umsetzen
Jetzt aber die spannende Frage: Kann man so etwas auch mit WordPress umsetzen? Ja, man kann. Und zwar ziemlich einfach. Alles was man dafür benötigt: Etwas Kreativität, das passende Thema und das richtige Wissen. Schon lassen sich auf Grundlage der in WordPress bereits integrierten Kategorie- und Tag-Funktionalitäten Themenseiten umsetzen.
Template-Hierarchie in WordPress
Grundlage der Umsetzung ist dabei das Wissen um die Template-Hierarchie in WordPress (Bild). Die wollen wir uns in einem ersten Schritt einmal näher anschauen.
Wer an seinem Theme weiter nichts tut, bei dem wird für Archive, Tag-Übersichtsseiten und Kategorien als optische Grundlage immer dasarchive.php-Template verwendet. WordPress bietet aber weitergehende Möglichkeiten: Wer Tagseiten, Archive und Kategorien optisch von einander trennen will, der kann zudem die Templates tag.php und category.php verwenden. Und noch ein Schritt mehr ist möglich: Durch Einbeziehen fixer IDs (jeder Post, jede Kategorie und jeder Tag hat eine solche, unveränderliche ID) in die Template-Benennung, kann für jede Kategorie und jeden Tag ein eigenes Template erstellt werden.
Der grundsätzliche Aufbau sieht dabei so aus:
- Kategorie:
archive.php→category.php→category-ID.php - Tag:
archive.php→tag.php→tag-ID.php
Diese Eigenschaft wollen wir uns nun zu Nutzen machen, denn – noch einmal – wir wollen ja für jeden (wichtigen) Tag und jede Kategorie eine ganz eigene optische und inhaltliche Darstellung. Ich zeige das jetzt im folgenden einmal für die iPhone-Themenseite (basierend auf Tags) meiner SEO-Spielwiese artikelwissen.info.
Erste Überlegung: Welche Informationen
Scribble: Themenseite
Nach dem Wissen um die grundsätzliche Hierarchie der Templates in WordPress muss die nächste Überlegung sein, welche Zusatzinformationen wir auf der Themenseite geben wollen. In meinem Beispiel war klar, was ich will:
- großes Headerbild zur optischen Auflockerung
- Alle Artikel zum Thema (=Tag)
- eigene/neue Sidebar mit
- Verweis zum Wikipedia-Artikel
- (eigene) Fotogalerie(n) zum Thema
- spezielle Anzeige
- Verweis auf andere, relevante Inhalte
Hat man diese Informationen zusammen, kann es nicht schaden, ein Freihand-Scribble (ganz einfach, nur zur Orientierung) zu erstellen.
Grundlage: Vorhandene Templates
Mit dieser Grobzeichnung geht es dann ans Eingemachte. Alles neu zu schreiben wäre etwas widersinnig, denn das Grundgerüst der späteren Themenseite besteht ja schon mit den bereits vorhandenen Theme-Templates. Wer etwa eine Themenseiten auf Grundlage einer Kategorie erstellen möchte, der kann sich (falls vorhanden) an der category.php orientieren. Ggf. ist im Theme sogar schon eine tag.php vorhanden, die dann für Themenseiten auf Grundlage der Tags verwendet werden kann. In jedem Theme dürfte aber wenigstens eine archive.php vorhanden sein, die dann eben angepasst werden muss.
In meinem speziellen Fall/Beispiel werden die Tags – ich will ja Themenseiten auf Grundlage eines Tags erstellen – über die archive.php erzeugt, ein eigenes Template ist noch nicht vorhanden. Mit diesem Template muss ich jetzt arbeiten.
<?php get_header(); ?>
<div class="block_4">
<div id="primary" class="block_4 alpha omega" role="main">
<?php ds_breadcrumb(); ?>
<h1 class="entry-title">
<?php if (is_day()) : ?>
Alle Artikel vom <?php the_time(); ?>
<?php elseif (is_month()) : ?>
Archiv <?php the_time('F Y'); ?>
<?php elseif (is_year()) : ?>
Archiv <?php the_time('Y'); ?>
<?php elseif (is_tag()) : ?>
Alle Artikel mit dem Tag «<?php single_tag_title(); ?>»
<?php elseif (is_author()) : ?>
Alle Artikel des Autoren <?php echo $curauth->display_name; ?>
<?php else : ?>
Blog-Archiv
<?php endif; ?>
</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="archive-entry clearfix">
<article <?php post_class(); ?>>
<div class="entry-thumbnail"><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('archiv'); ?></a></div>
<div class="entry-header">
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="Link zu <?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="entry-meta"><?php the_author(); ?> - <?php the_time('d.m.Y');?></div>
</div>
<div class="entry-summary">
<p><?php echo substr(get_the_excerpt(), 0, 190); if(strlen(get_the_excerpt()) > 190) : ?>...<?php endif; ?></p>
<a class="button small white" href="<?php the_permalink(); ?>" title="Link zu <?php the_title(); ?>" rel="bookmark">Weiterlesen</a>
</div><!-- .entry-summary -->
</article>
</div>
<?php endwhile; ?>
<?php else : // if have no entry. ?>
<?php include(TEMPLATEPATH . '/includes/no-result.php'); ?>
<?php endif; wp_reset_query();?>
<?php mt_pagenavi(); ?>
</div>
</div>
<div class="block_9">
<?php get_sidebar('common'); ?>
</div>
<?php get_footer(); ?>
Altes/Unbenötigtes löschen
Was zunächst auffällt: In diesem Template sind viele Zeilen Code dabei, die ich im weiteren nicht mehr benötige. Um eine Übersicht über das Grundgerüst des Templates zu erhalten, lösche ich diese zunächst einmal. Dinge, die ich später noch benötige, bleiben – wenn sie auch vielleicht an anderer Stelle benötigt werden – erst einmal vorhanden.
<?php get_header(); ?>
<div class="block_4">
<div id="primary" class="block_4 alpha omega" role="main">
<?php ds_breadcrumb(); ?>
<h1 class="entry-title">späterer Titlel</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="archive-entry clearfix">
<article <?php post_class(); ?>>
<div class="entry-thumbnail"><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('archiv'); ?></a></div>
<div class="entry-header">
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="Link zu <?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="entry-meta"><?php the_author(); ?> - <?php the_time('d.m.Y');?></div>
</div>
<div class="entry-summary">
<p><?php echo substr(get_the_excerpt(), 0, 190); if(strlen(get_the_excerpt()) > 190) : ?>...<?php endif; ?></p>
<a class="button small white" href="<?php the_permalink(); ?>" title="Link zu <?php the_title(); ?>" rel="bookmark">Weiterlesen</a>
</div><!-- .entry-summary -->
</article>
</div>
<?php endwhile; ?>
<?php else : // if have no entry. ?>
<?php include(TEMPLATEPATH . '/includes/no-result.php'); ?>
<?php endif; wp_reset_query();?>
<?php mt_pagenavi(); ?>
</div>
</div>
<div class="block_9">
<?php get_sidebar('common'); ?>
</div>
<?php get_footer(); ?>
Neuer Header
Für meine Themenseite wünsche ich mir zur optischen Auflockerung zudem noch ein Headerbild, das die gesamte Seitenbreite in Anspruch nimmt. Solche (lizenzfreien) Bilder kann man übrigens gut auf Photodune “kaufen”. Das Bild hat in der benötigten Größe (920px Breite) nun gerade einmal 2,- Dollar gekostet.
Zudem soll als Layer über dem Bild noch die neue Überschrift und der Beschreibungstext liegen. Das wird nun eingebaut.
<?php get_header(); ?>
<div class="block_1">
<div id="beschreibung">
<div class="betext">
<img src="<?php bloginfo('template_url'); ?>/images/iphone.jpg" />
<h1 class="entry-title-beschreibung"><span><?php single_tag_title(); ?></span></h1>
<div class="beschreibung-text"><span><?php echo tag_description(); ?></span></div>
</div></div>
</div>
<div class="clear"></div>
<div class="block_4">
<div id="primary" class="block_4 alpha omega" role="main">
<?php ds_breadcrumb(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="archive-entry clearfix">
<article <?php post_class(); ?>>
<div class="entry-thumbnail"><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('archiv'); ?></a></div>
<div class="entry-header">
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="Link zu <?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="entry-meta"><?php the_author(); ?> - <?php the_time('d.m.Y');?></div>
</div>
<div class="entry-summary">
<p><?php echo substr(get_the_excerpt(), 0, 190); if(strlen(get_the_excerpt()) > 190) : ?>...<?php endif; ?></p>
<a class="button small white" href="<?php the_permalink(); ?>" title="Link zu <?php the_title(); ?>" rel="bookmark">Weiterlesen</a>
</div><!-- .entry-summary -->
</article>
</div>
<?php endwhile; ?>
<?php else : // if have no entry. ?>
<?php include(TEMPLATEPATH . '/includes/no-result.php'); ?>
<?php endif; wp_reset_query();?>
<?php mt_pagenavi(); ?>
</div>
</div>
<div class="block_9">
<?php get_sidebar('common'); ?>
</div>
<?php get_footer(); ?>
In diesem Stadium habe ich jetzt bereits auch die Tag-Überschrift (single_tag_title()) und die Tag-Beschreibung (tag_description()) mit eingebaut. Diese zwei Angaben könnt ihr relativ fix im WordPress-Backend bearbeiten (URL): /wp-admin/edit-tags.php?taxonomy=post_tag
Neue Sidebar
Was nun aber sofort auffällt: Derzeit wird immer noch die “alte” Sidebar verwendet, also die Sidebar, die bei allen anderen Seiten zum Einsatz kommt. Für meine Themenseite wollte ich aber eine ganz spezielle Sidebar. Mein Theme macht es mir an dieser Stelle einfach, weil es bereits die Unterschützung für verschiedene Sidebars mitbringt. Statt un im Quelltext rumzubasteln, kann ich einfach eine neue Sidebar registrieren, die dann über Widgets Backend gesteuert werden kann.
Hierfür muss ich nur ein neues Sidebar-Template anlegen, dass ich jetzt einmal sidebar-iphone.php nenne
<?php get_header(); ?>
<div class="block_1">
<div id="beschreibung">
<div class="betext">
<img src="<?php bloginfo('template_url'); ?>/images/iphone.jpg" />
<h1 class="entry-title-beschreibung"><span><?php single_tag_title(); ?></span></h1>
<div class="beschreibung-text"><span><?php echo tag_description(); ?></span></div>
</div></div>
</div>
<div class="clear"></div>
<div class="block_4">
<div id="primary" class="block_4 alpha omega" role="main">
<?php ds_breadcrumb(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="archive-entry clearfix">
<article <?php post_class(); ?>>
<div class="entry-thumbnail"><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('archiv'); ?></a></div>
<div class="entry-header">
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="Link zu <?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="entry-meta"><?php the_author(); ?> - <?php the_time('d.m.Y');?></div>
</div>
<div class="entry-summary">
<p><?php echo substr(get_the_excerpt(), 0, 190); if(strlen(get_the_excerpt()) > 190) : ?>...<?php endif; ?></p>
<a class="button small white" href="<?php the_permalink(); ?>" title="Link zu <?php the_title(); ?>" rel="bookmark">Weiterlesen</a>
</div><!-- .entry-summary -->
</article>
</div>
<?php endwhile; ?>
<?php else : // if have no entry. ?>
<?php include(TEMPLATEPATH . '/includes/no-result.php'); ?>
<?php endif; wp_reset_query();?>
<?php mt_pagenavi(); ?>
</div>
</div>
<div class="block_9">
<?php get_sidebar('iphone'); ?>
</div>
<?php get_footer(); ?>
Diese Sidebar muss ich dann – basierend auf dem bereits vorhandenen Template – allerdings noch erstellen und kann da dann definieren, welche Sidebar tatsächlich verwendet wird:
<div id="secondary" class="block_9 alpha omega" role="complementary">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('iphone') ) : ?><?php endif; ?>
<div class="widget clearfix">
<div class="block_12 alpha omega left">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('narrow-sidebar-left-iphone') ) : ?><?php endif; ?>
</div>
<div class="block_12 alpha omega right">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('narrow-sidebar-right-iphone') ) : ?><?php endif; ?>
</div>
</div>
</div>
Damit das aber auch klappt, muss ich diese neuen Sidebars noch in den Themefunktionen (functions.php) registrieren:
// iPhone-Sidebar register_sidebar( array( 'name' => __( 'iPhone'), 'id' => 'iphone', 'description' => __( 'Sidebar fuer iPhone-Themenseite'), 'before_widget' => '<aside id="%1$s" class="block_9 alpha omega widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title"><span>', 'after_title' => '</span></h3>', )); // Zwei schmale iPhone-Sidebars register_sidebar( array( 'name' => __( 'Schmale iPhone-Sidebar links'), 'id' => 'narrow-sidebar-left-iphone', 'description' => __( 'The left narrow sidebar', 'maggie'), 'before_widget' => '<aside id="%1$s" class="block_12 alpha omega widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title"><span>', 'after_title' => '</span></h3>', )); register_sidebar( array( 'name' => __( 'Schmale iPhone-Sidebar rechts'), 'id' => 'narrow-sidebar-right-iphone', 'description' => __( 'The left narrow sidebar', 'maggie'), 'before_widget' => '<aside id="%1$s" class="block_12 alpha omega widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title"><span>', 'after_title' => '</span></h3>', ));
Erst danach werden im Adminsitrationsbereich die neuen Sidebars der Themenseite angezeigt und können dann mit Widgets gefüllt werden.
Widgets
Die restlichen spezifischen Änderungen dürften für euch eher unspannend sein, müssen sie doch auf mich zugeschnitten sein. Grundsätzlich gilt aber, dass ihr jeweils eigene Widgets anlegen könnt oder aber mit dem text-Widgets einfach weiteren Code in eurer Sidebar unterbringt. Die Anwendungsmöglichkeiten sind hierbei unbegrenzt.
Das Ergebnis
Nach etwa 2 Stunden intensiver Programmier- und Kopier-Arbeit kann ich jetzt das folgende Ergebnis präsentieren:
Das Ergebnis: Vorher-Nachher-Vergleich
Das sieht zwar etwas anders aus als mein ursprüngliches Scribble, hat mit der “alten” Archiv-Ansicht aber auch nicht mehr allzuviel zutun und kommt optisch deutlich verändert daher.
Fazit
Grundsätzlich gilt: Mit WordPress kann man eigentlich alles umsetzen, was man möchte. Auch solche speziellen Themenseiten sind damit möglich und können nach Herzenslust gestaltet werden. Wichtig ist immer nur die Idee, umsetzen kann man das mit etwas Wissen dann relativ fix!
Unterstützung?
Ihr wisst nicht, wie’s geht? Kein Problem: Schreibt einfach eure Fragen in den Kommentare. Ich will die dann so schnell wie möglich beantworten. Bitte habt aber Verständnis, dass ich euch auf diesem Wege nicht eure eigenen Themenseiten gestalten kann. 😉 Bei derartigen Wünschen schreibt mir doch am besten eine Mail!
Ein Kommentar zu "Themenseiten erstellen"
Ich wüsste gerne wie ich das für kategorien genau umsetze…
ich möchte themenseiten für spiele umsetzen. Nur weiss ich dort noch nicht so genau was ich umsetzen muss. Ich benutze das Theme Colormag von ThemeGrill.