Eine neue Webseite entsteht (Teil 9): Eine individuelle Startseite in WordPress

Nachdem der Webseiten-Header fertig in WordPress programmiert ist (siehe Tutorial Teil 8), geht es auf der CoffeeLove-Startseite weiter mit einem individuellen Seiten-Template. Dabei zeige ich dir wie praktisch benutzerdefinierte Felder in WordPress sind, und wie du die neusten Blog-Artikel oder Twitter-Nachrichten auf deiner Startseite integrieren kannst.

Live-Demo des Themes

Inzwischen habe ich das CoffeeLove-Theme auf einer Test-Installation online gestellt. So kannst du dir das Ergebnis der Programmierung live anschauen.

Bisher bearbeitete Theme-Dateien:

• header.php
• template-home.php
• footer.php
• style.css

1. Die Startseite

Wie schon im Teil 8 des Tutorials beschrieben, habe ich die WordPress-Seite »Home« als Startseite unter Einstellungen / Lesen im WordPress-Admin von CoffeeLove angelegt. Den standardmäßig in WordPress angezeigten Blog möchte ich stattdessen auf der Seite »Aktuelles« anzeigen. Mit dieser Möglichkeit eine »statische« Seite als Startseite zu definieren, ist WordPress leicht in der Funktion eines CMS zu nutzen.

Für den Inhalt der Home-Seite habe ich bereits ein individuelles Seiten-Template in meinem WordPress-Themeordner angelegt. Diese Template-Datei heißt template-home.php. Ich benötige ein individuelles Template (Anleitung Tutorial-Serie Teil 7), da auf der CoffeeLove-Seite jede Seite ein eigenes Layout hat. Auf der Startseite möchte ich z.B. einen Introtext, ein JavaScript Foto-Slider, ein Feature der neusten 3 Artikel, einen Link zum aktuellen Menü des Cafés und einen Twitterstream integrieren.

WordPress Tutorial Teil 9
Die einzelnen Elemente der Startseite habe ich hier farbig unterteilt, und die CSS-Klassen der jeweiligen Divs dazu notiert.

Im Teil 4 des Tutorials kannst du dir auch noch einmal die Layout-Vorlage der CoffeeLove-Startseite in einer Gesamtansicht anschauen.

2. Die template-home.php Datei

WordPress Tutorial Teil 9
Klicke auf das Bild, um es in einer größeren Ansicht anzuzeigen.

Um dem Tutorial besser folgen zu können, kannst du dir auch die template-home.php und die style.css (im aktuellen Zustand) Datei downloaden.

Im Texteditor öffne ich nun die template-home.php Datei und die style.css Datei. Als erstes umschließe ich den gesamten Inhalt der template-home.php Datei (außer get_header und get_footer) mit einem Div mit der ID content. So kann ich u.a. mit CSS den Abstand oberhalb und unterhalb des Seiteninhalts bestimmen oder andere CSS-Eigenschaften einfügen.

3. Der WordPress Loop

Als nächstes will ich den Text anzeigen, den ich im WordPress-Adminbereich auf der Seite »Home« eingetragen habe. Bei der CoffeeLove-Seite ist dies der Introtext. Um den Inhalt einer Seite oder eines Artikels in einem Template aufzurufen, nutzt man den WordPress Loop. Im WordPress-Codex kannst du dich ausführlich über den Loop in WordPress informieren.

Der Loop zu startet an folgender Stelle in deiner php-Datei:

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

Der Loop endet bei:

< ?php endwhile; ?>

Dazwischen nutzt den den WordPress Template-Tag the_content, um den gesamten Inhalt der Seite anzuzeigen.

< ?php the_content(); ?>

Im WordPress-Codex findest du weitere Infos zum Template Tag »the_content«.

Den Featured-Slider mit Bilder-Impressionen des Cafés werde ich übrigens in einem späteren Teil des Tutorials mit Hilfe eines JavaScript-Plugins einfügen. Daher hier nur ein Platzhalter-Hintergrund.

4. Zusätzliche Inhalte integrieren

Besonders bei individuellen Seiten-Layouts, wie z.B. auf der CoffeeLove-Startseite kommt es häufig vor, dass du zusätzliche Infos auf der Seite anzeigen möchtest. Diese kannst du meist nicht alle innerhalb des Loops (also über den Seiteninhalt) einfügen.

4.1. Die neusten Artikel auf der Startseite

Um z.B. die neusten Artikel-Überschriften deines Blogs anzuzeigen, kannst du einen neuen Loop starten. Füge dazu folgenden Code ein.

<div class="recent-posts">
	<h3><?php _e("Aktuelles", "twentyten"); ?></h3>
	<ul>
	<?php $my_query = new WP_Query('posts_per_page=4'); ?>
	<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
	<li><?php the_post_thumbnail(array( 50,50 ), array( 'class' => 'recent-posts-thumbs' )); ?>
	<a href="<?php the_permalink() ?>" rel="bookmark">
	<?php the_title(); ?></a></li>
	<?php endwhile; wp_reset_query(); ?>
	</ul>
</div>
<!--end recent Posts -->

Mit der WordPress-Funktion the_post_thumbnail (seit WordPress 2.9) kannst du dabei die Vorschaubilder der Artikel anzeigen. Hier findest du eine tolle Anleitung zur WordPress Thumbnail-Funktion.

4.2. Benutzerdefinierte Felder nutzen

Den Text für die aktuelle Menükarte und den Download-Button kannst du am besten über ein benutzerdefiniertes Feld einfügen. So kann später der Text und der Link leicht über den Admin-Bereich von WordPress aktualisiert werden. Normalerweise funktioniert die Ausgabe eines benutzerdefinierten Feldes nur innerhalb des Loops. Du gibst einfach den Namen (z.B. weeklymenu) und den Wert (Text mit Button-Link) auf der Home-Seite in ein neues benutzerdefiniertes Feld ein.

WordPress Tutorial Teil 9
Benutzerdefiniertes Feld (custom field) für das Menü-Feld auf der Startseite von CoffeeLove.

Innerhalb des Loops kannst du das benutzerdefinierte Feld jetzt einfach mit folgendem Code ausgeben.

<div class="recent-menu">
	<h3><?php _e("Unser Wochenmen&uuml;", "twentyten"); ?></h3>
	<p> <?php echo get_post_meta($post->ID, 'weeklymenu', true) ?> </p>
</div>
<!--end recent Menu -->

Da ich auf der CoffeeLove-Seite den Loop ja bereits geschlossen habe, kann ich den Wert des benutzerdefinierten Feldes mit Hilfe dieses Code-Schnipsels auch außerhalb des Loops ausgeben.

<div class="recent-menu">
	<h3><?php _e("Unser Wochenmen&uuml;", "twentyten"); ?></h3>
	<p> <?php global $wp_query; $postid = $wp_query->post->ID; echo get_post_meta($postid, 'weeklymenu', true); wp_reset_query(); ?> </p>
</div>
<!--end recent Menu -->

(Code-Quelle: WP Beginner)

4.3. Die neusten Tweets anzeigen

Für die Ansicht deiner neusten Twitter-Nachrichten kannst du z.B. das Twitter for WordPress-Plugin verwenden und per CSS an dein Layout anpassen. Oder du nutzt das von Twitter direkt zur Verfügung gestellte Twitter-Widget.

Ich habe das Twitter for WordPress-Plugin verwendet, und kann somit die neusten Tweets mit diesem Code-Schnipsel anzeigen (mehr Infos zum Plugin-Code findest du auf der Homepage des Plugins).

<div class="recent-twitter">
	<h3><?php _e("Zwitscher mit uns", "twentyten"); ?></h3>
	<?php twitter_messages('ellenbauer', 3, true, true, '>>', true, true, false); ?>
</div>
<!--end recent Tweets -->

Mit Hilfe des folgenden CSS-Stylings habe ich den Twitter-Stream an mein Layout angepasst.

ul.twitter {
	color:#6D4D35;
	text-shadow: 1px 1px 1px #FFFCFA;
}
li.twitter-item {
	padding:15px 0px 14px 0px;
	border-bottom:1px solid #BFAB91;
}
li.twitter-item a {
	color:#D35C59;
	text-decoration:none;
}
li.twitter-item a:hover {
	color:#D35C59;
	text-decoration: underline;
}

Wie man an diesen Beispielen sieht ist WordPress sehr vielseitig einsetzbar, und hast jede Menge Extras zu bieten. Besonders wenn du WordPress eher als CMS einsetzen möchtest, sind Funktionen wie eine individuelle Startseite oder benutzerdefinierte Felder sehr nützlich.

Im nächsten Teil der Tutorial-Serie geht es weiter mit der Footer der Webseite. Für die drei Bereiche des Footers werde ich die im Starkers Theme bereits vorbereiteten Footer-Widgets zum Einsatz bringen. So kann später der Text des Footers praktisch über den Widget-Adminbereich geändert werden.

Ich hoffe dir gefällt auch dieser Teil der Tutorial-Reihe. Über deine Fragen, sowie Änderungs- / Verbesserungsvorschläge zu den besprochenen Funktionen in WordPress freue ich mich sehr!

Weitere Teile der Tutorial-Serie

17 Kommentare zu “Eine neue Webseite entsteht (Teil 9): Eine individuelle Startseite in WordPress

  1. Wow, Dank Deiner Hilfe bekomm ich noch eine geniale WP Seite hin, vielen lieben Dank für diese Arbeit und deine Zeit die da investiert wurde. Respekt!

    • @Gugel500: Vielen Dank für dein tolles Feedback. Es freut mich sehr, dass du die WP-Tipps gleich für deine eigene Seite nutzen kannst :-)

      Viele Grüße,
      Ellen

  2. wenn ich das hier so sehe, ihr macht alle echt immer wunderbar seiten, da kommt man mit seinem Halbwissen gar nicht so weit oder ist ewig damit beschäftigt nur etwas kleines zu basteln, irgendwie komisch =(

    • Hallo Timo,

      vielen Dank für dein Feedback zur Tutorial-Serie. Ich hoffe dir und auch anderen Lesern helfen meine Tipps und meine beschriebene Vorgehensweise einfach ein wenig bei der eigenen Arbeit weiter. Vielleicht sind es ja auch nur kleine Tipps oder Arbeitsweisen, die dir für deine eigene Arbeit eine neue Idee bringt.

      Ich finde deinen Blog übrigens sehr schön, da hast du doch schon echt tolle Sachen umgesetzt :-)

      Ich hoffe du hast weiter jede Menge Spaß mit Webdesign und WordPress, auch wenn das Umsetzen einer neuen Funktion natürlich immer ein wenig länger dauert und man etwas rumbasteln muss, geht mir genauso ;-)

      Viele Grüße,
      Ellen

  3. Liebe Ellen,

    dieser Teil hat es wirklich wieder in sich. Ganz toll, dass Du so viele Zusatzfunktionen in Dein Beispiel-Theme mit eingebaut hast. Da kann ich wirklich eine Menge lernen. Ich fiebere auch dieses Mal wieder der Fortsetzung entgegen :-)

    Vor allem auf Deine konkrete Umsetzung des Sliders bin ich gespannt, weil ich so etwas auch auf der Startseite meines Textblogs integriert habe. Du hattest zu diesem Thema ja schon einiges geschrieben und auch ein Theme vorgestellt, bei dem ich mich „bedient“ habe (SimpleFolio). Doch die Funktion selbst einzubauen wäre mir natürlich lieber, damit ich weiß, wie mein Theme funktioniert und keinen Code mit herumtrage, den ich eigentlich nicht benötige.

    Anfangs war ich etwas irritiert, dass Du hier in die template-home.php extra einen Loop eingebaut hast. Deinen kurzen Introtext hättest Du schließlich auch direkt eingeben können. Doch ich vermute, dass die Bearbeitung im Editor der Seite einfach komfortabler ist und der Text außerdem (vom Kunden) leicht verändert werden kann, wenn das Template für ein anderes Projekt Verwendung findet.

    Ich schätze, dass es bei der Theme-Entwicklung generell besser ist, so wenig fixen Text wie möglich in die php-Dateien zu schreiben, um das Ganze flexibel zu halten. Liege ich da richtig?

    Ein Punkt ist mir noch etwas unklar:

    Dass Du die h3-Überschriften der zusätzlichen Inhalte mithilfe einer PHP-Anweisung so gestaltest, dass sie durch verschiedene Sprachdateien übersetzt werden können, das verstehe ich – habe aber noch zwei Fragen dazu:

    1) Spielt es keine Rolle, in welcher Sprache der Text eingegeben wird? Oder sollte das in Englisch sein, falls man das Theme wirklich für eine Lokalisierung vorbereiten möchte?

    2) Wozu ist der Parameter ‚twentyten“ gut? Er bezieht sich doch genaugenommen auf das neue Standardtheme, mit dem Deine Neukreation kaum noch Ähnlichkeit hat.

    Liebe Grüße,
    Jürgen

    • Hallo Jürgen,

      vielen Dank für dein tolles Feedback und die hilfreichen Fragen zum Tutorial :-)

      Ja, ich bin auch der Meinung, dass es besonders wichtig ist, ein Theme möglichst flexibel und praktisch für den Nutzer programmiert sein sollte. Daher habe ich den Introtext so integriert, dass er im WordPress Adminbereich angepasst bzw. ausgetauscht werden kann. Besonders bei Kundenprojekten ist die Eigenschaft natürlich auch sehr gefragt :-)

      Natürlich ist es ein großer Unterschied, ob man ein Theme für sich selbst baut, oder für andere. Doch aus eigener Erfahrung ist es meist auch beim eigenen Theme praktischer, alle Inhalte direkt im Backend anpassen zu können und nicht in die Template-Dateien rein zu müssen :-)

      Zu deiner Frage bzgl. der Text-Lokalisierung: Ja, ich habe im meinem Beispiel die vom Starkers-Theme bereitgestellte twentyten-Textdomain vorerst beibehalten. Im eigenen Theme kann man diesen Namen natürlich auch gleich in den eigenen Domainnamen ändern. Ich habe vor diese Arbeit erst ganz zum Schluss vorzunehmen (mit Find und Replace im Texteditor), um so das Tutorial etwas übersichtlicher zu gestalten :-)

      Die Sprache kannst du dann selbst bestimmen, es sollte aber auf alle Fälle einheitlich sein. Wenn man ein allgemeines Theme (z.B. ein Free-Theme) erstellt, ist es aber sinnvoll Englisch als Standard-Sprache zu verwenden und dann eine deutsche Übersetzung des Themes beizufügen. Einen tollen Artikel zum Thema „Theme Lokalisierung“ findest du z.B. auf dem Webdemar-Blog.

      Viele Grüße,
      Ellen

  4. Wirklich ein sehr schöner Beitrag! Besonders der Teil mit den Recent Posts hat mir gerade unglaublich weitergeholfen. Vielen Dank dafür!

    • Hallo Kathleen,

      vielen Dank für dein tolles Feedback, es freut mich sehr, dass dir das Tutorial so gut weiterhelfen konnte :-)

      Viele Grüße und viel Spaß mit WordPress,
      Ellen

  5. Hallo Ellen,

    verfolge momentan deine Tutorials und versuche mich in WordPress einzuarbeiten.

    Sitze mittlerweile schon drei Tage an meinem ersten Theme.
    Ohne CMS Anbindung wäre die Seite nach 2 Tagen komplett gecodet gewesen – Meine Frage, wie lang benötigst du für ein Theme? Lohnt es sich vom Zeitaufwand überhaupt?

    Vielen Dank
    Niko

  6. Hallo Ellen,

    dieser Teil hat mir sehr geholfen. Ich versuche mich gerade mit dem Abschnitt der letzten Posts auf der Startseite.

    Auf wieviele Posts ist das beschränkt? Bzw. wie beschränke ich es auf auf maximal 5 Posts?

    Lg,
    Nicki

    Danke!

  7. hallo liebe ellen, ich bin zur zeit dabei meine eigene kleine hompage zu basteln, danke dass du dir so viel mühe mit deinem tutorial gemacht hast. ich hab so viel gelernt und will mich jetzt nochmal ganz herzlich bei dir für deine arbeit bedanken. es war sogar für mich als programmier-leihe alles sehr verständlich und ich konnte mich ohne große probleme durchkämpfen!

  8. Hallo Ellen,

    erst einmal großes Lob, der Artikel über die Erstellung eines Themes finde ich sehr gelungen, auch wenn ich einige Sachen nicht so ganz klar finde, z.B. wofür man noch die loop.php benötigt, wenn man bereits eine loop-index.php hat. Außerdem habe ich einen kleinen Verbesserungsvorschlag:

    Ich habe auf der Homepage ebenfalls drei nebeneinander liegende Widget-Bereiche eingefügt, ähnlich wie Du es im Footer machst, anstatt der hier erwähnten im template-home direkt eingefügten Divs. Vorteil dabei ist, man benötigt für die Anzeige der letzten X-Beiträge keine Extra-Query wie oben (4.1) von Dir beschrieben, sondern kann das fertige Widget von WordPress benutzen. Generell kann ich nun bequem über den Admin-Bereich die drei Spalten auf der Homepage anpassen und den Content pflegen. :-)

    Liebe Grüße!

  9. Is this information available in English?

  10. Opps I found Google translate. Thanks!

  11. Hallo Ellen,
    wie alle Teile der Reihe ein tolles Tutorial, Hut ab!

    Ich versuche anhand dieser Reihe zurzeit mein eigenes Theme zu entwerfen.
    Nun frage ich mich zurzeit, wo denn der Unterschied ist, zwischen der Recent-Post-Funktion und der Blog-Funktion.

    Gruß, Finn

  12. Danke für die schöne Anleitung. Der Link auf das Live-Demo funktioniert übrigens nicht. Ich bekomme einen 404-Fehler.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *