WordPress Codeansicht: Individuelle Startseite
WordPress

Unter WordPress eine individuelle Startseite erstellen (Teil 2: Codebeispiele)

Nachdem ich im ersten Teil die Vorarbeiten für eine individuelle Startseite vorstellte, geht es im zweiten Teil nun um konkrete Code-Beispiele. Wie man nur zwei statt den üblichen 10 Beiträgen einbindet, Monatsarchive, ein angepasstes Suchformular, Archive, eine Tagcloud, zuletzt kommentierte Artikel etc.

Alle Codebeispiele sind von mir unter WordPress 2.7.x und 2.8 getestet und funktionieren bei mir problemlos.


Alle Code-Schnipsel werden in dem zuvor erstellten Seitentemplate (siehe Teil 1) eingebunden.

Einen Begrüßungstext einbinden

Ein kleiner Begrüßungstext informiert Besucher über die zu erwartenden Inhalte. Auch wenn gerade bei Blogs (schließlich das Haupteinsatzgebiet von WordPress) oftmals einzelne Artikel die Einstiegspunkte sein werden, sollte eine Startseite zum weiteren Verfolgen der Seite auffordern. Und das mache ich persönlich nur, wenn ich weiß, was mich wohl erwarten wird.

Das Einbinden eines gewöhnlichen Textes kann mit simplen HTML realisiert werden. Hier wird ebenso ein Bild eingebunden, um der Startseite auch “ein Gesicht zu verleihen”. Das Bild ist links ausgerichtet und hat einen Abstand zum umgebenden Text, der das Bild rechts umfließt.

<p><img src="#" width="100" height="100" alt="Kurzbeschreibung" style="float:left; margin-right: 5px; margin-bottom: 5px;" />
Hier kann nun der Text für die Startseite eingefügt werden. Einige <a href="#">Links</a> 
können den Text sicherlich hilfreich erweitern.
</p>

Die Suchfunktion einfach einbinden

Hat man die WordPress-eigene Suchfunktion erstmal funktionstüchtig gemacht, kann sie auch auf der Startseite anbieten. Da man alle Inhalte wahrscheinlich nicht auf der Startseite präsentieren kann, gibt man seinen Besuchern so die einfache Möglichkeit, nach ihren eigenen Interessen die Seite zu erkunden.
Wobei viele Besucher wohl immer noch die altbewährten, blau unterstrichenen Links bevorzugen.

Dieser Code bindet das Suchfeld ein. Der Text im Suchfeld verschwindet per JavaScript, wenn man in das Feld hinein klickt.

<form id="searchform" method="get" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
<div>
<input class="searchfield"  type="text" value="Suchbegriff eingeben" name="s" id="s" onblur="if(this.value=='')this.value='Suchbegriff eingeben';" onfocus="if(this.value=='Suchbegriff eingeben')this.value='';" />
<input class="submit" type="submit" value="www.webanhalter.de durchsuchen" title="Suchen" />
</div>
</form>

Nur die beiden letzten Artikel ausgeben

Die aktuellen Artikel sollen selbstverständlich präsentiert werden. Sie vollständig zu zeigen, macht die Seite wieder zu einer “gewöhnlichen” Blog-Startseite. Daher werden sie auf www.webanhalter.de nur mit einem Auszug angezeigt. Und es werden so auch nur die beiden aktuellsten Artikel angezeigt.
Der besseren Übersicht halber werden sie mittels CSS-Anweisungen auch nebeneinander positioniert.

<?php $top_query = new WP_Query("showposts=2"); ?>
<?php while($top_query->have_posts()) : $top_query->the_post();
$do_not_duplicate = $post->ID; ?>

Obiger Query fragt die zwei aktuellsten Artikel ab. Die Benennung top_query ist wichtig, da im weiteren Verlauf nochmals die letzten Artikel, allerdings ohne den Textauszug (excerpt), abgefragt werden.

<div style="width:47%; float:left; margin-right:2%;">
<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<div class="main group">
	<?php the_excerpt(); ?>
</div>
</div>
<?php endwhile; ?>

Letzte Artikel ausgeben ohne die schon präsentierten

Sollen nun die weiteren aktuellen Beiträge ausgegeben werden, könnte man eigentlich obigen Code verwenden und nur den Parameter ändern. Nämlich den Parameter showposts=2 um die gewünschte Anzahl an Beiträgen erhöhen. Und den Query umbenennen in bspw. second_query.

Durch den weiteren Parameter offset=2 werden nun die aktuellsten Beiträge ausgegeben, wobei die zwei aktuellsten Beiträge übersprungen wurden. Damit gibt es keine Dopplung zu den oben ausgegebenen Posts.

<?php $second_query = new WP_Query("showposts=10&offset=2"); ?>
<?php while($second_query->have_posts()) : $second_query->the_post();
$do_not_duplicate = $post->ID; ?>
<ul>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
Startseite: Letzte Beiträge & letzte Kommentare

Startseite: Letzte Beiträge & letzte Kommentare

Die letzten Kommentare ausgeben

Für die Anzeige der letzten Kommentare ist hier das WordPress Plugin Get Recent Comments zuständig.
Das wird über die WordPress-Einstellungen konfiguriert und einfach über diesen Code eingebunden:

<?php if (function_exists('get_recent_comments')) { ?>
   <ul><?php get_recent_comments(); ?></ul>
<?php } ?>

Meist kommentierte Beiträge ausgeben

Es ist auch relativ einfach möglich, die meist kommentierten Beiträge auszugeben. Dazu einfach dieser guten, englischen Anleitung folgen: Create Your Own Popular Posts Page
Die Ausgabe der zuletzt kommentierten Beiträge finde ich oftmals sinnvoller, denn gerade findet ja die Diskussion statt. Und an der soll sich ein neuer Leser vielleicht eher beteiligen als an möglicherweise alten Artikeln.

Eine Tagcloud ausgeben auf der Startseite

Eine flashbasierte Tagcloud findet sich momentan auf meiner Startseite. Es ist eine kleine Spielerei, die mit dem Plugin WP Cumulus realisiert wird.
Eingebunden wird sie über ganz einfach, während die Konfiguration leicht verständlich über das WordPress Einstellungsmenü gemacht wird.

<?php wp_cumulus_insert(); ?>

Wer sich nicht extra ein Plugin installieren möchte, kann ab WordPress 2.7 mit Bordmitteln, nämlich mithilfe von wp_tag_cloud, eine Tagcloud ausgeben.

<?php wp_tag_cloud(); ?>

Zeitarchive auflisten

In meiner Seitenleiste werden die Monatsarchive ausgegeben. Sicherlich auch auf vielen Startseiten findet man diesen zeitlichen Überblick. Ich persönlich nutze solche Archive nur, um den Anfang und die Kontinuität eines Blogs zu erhalten.

<?php wp_get_archives('monthly','',''); ?>

Ausführliche Erläuterungen im WP Codex zu wp_get_archives.

Eine andere Sidebar benutzen

Auf der Startseite verwende ich eine andere Sidebar. Sie soll möglichst “leicht” wirken, damit die Konzentration auf den Inhalten im Hauptbereich bleibt. Zusätzliche Informationen zur Seite, wie bspw. bei den Artikeln, muss sie hier nicht bieten.
Wie im ersten Teil beschrieben, erstellt man dazu eine PHP-Datei, benennt sie als sidebar2.php und lädt sie in den Ordner des Themes seiner WordPress-Installation.

Dann kann man diese zweite Sidebar mit Inhalt füllen:

<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

<a href="http://www.webanhalter.de/feed" rel="nofollow" title="RSS-Feed abonnieren"><img src="http://www.webanhalter.de/wp-content/uploads/blue.png" width="180" height="180" alt="RSS abonnieren" style="border:none !important; margin-left:-10px !important;" /></a>
<a href="http://twitter.com/webanhalter" title="twitter: @webanhalter"><img src="http://www.webanhalter.de/wp-content/uploads/twittericon-150-90.png" width="150" height="90" alt="twitter" style="border:none !important; margin-top:10px !important; margin-bottom:25px;" /></a>

<h3>Monatsarchive</h3>
<ul>
<?php wp_get_archives('monthly','',''); ?>
</ul>
<?php endif; ?>
</div>

Bindet man die gewohnte Sidebar in sein neues Startseiten-Template ein, reicht dieser Code:

<?php get_sidebar(); ?>

Soll aber die neu erstellte sidebar2.php eingebunden werden, muss dieser PHP-Code benutzt werden:

<?php include(TEMPLATEPATH . '/sidebar2.php'); ?>

Fast fertig mit der neuen Startseite …

Individuelle Startseite (Ausschnitt)

Individuelle Startseite (Ausschnitt)

Im bald folgenden dritten und letzten Teil dieser kleinen Serie erkläre ich noch kurz wie man die nun erstellte Startseite aktiviert. Und gebe noch ein paar kleine CSS-Tipps zur Positionierung der Elemente auf der Startseite.

Schlussendlich bleibt aber die Frage:

Fehlt etwas auf dieser Startseite?
Oder ist vielleicht sogar etwas überflüssig?

6 Kommentare

  1. Sebastian

    Mit Opera 10beta sind die Suchbox und die Bookmarkbuttons verschoben und nicht nebeneinander gestellt.Woran liegts?

  2. Danke für den Hinweis. Der Text neben dem Bild war einfach zu kurz, sodass der “float” nicht mehr richtig funktionierte.

  3. Sollten nicht aber die meistkommentierten Blogposts auf der Startseite ausgegeben werden, damit die beliebtesten Blogposts finden kann??

  4. Arne

    Aber was interessieren Posts von 2006? Das braucht nicht auf die Startseite…

  5. Satellite

    Hi! Danke für diesen Post. Ich tue mich aktuell schwer mein eigenes Design auf die Beine zu stellen. Und werde noch weiter probieren. Einiges hat bei mir nicht mehr funktioniert, wie z.B. wp_cumulus_insert(); . Wird dies nicht mehr unterstützt?

    VG

  6. WP Cumulus wurde bislang nicht für WordPress >3 weiterentwickelt. Da solltest du dich auf die Suche nach Alternativen machen.