Eine neue Webseite entsteht (Teil 12): Der WordPress-Blog

Natürlich braucht das CoffeeLove-Theme auch noch eine Blog-Funktion. So können die Webseiten-Besucher unter dem Navigations-Punkt »Aktuelles« alle Neuigkeiten des Cafés erfahren. Für die Theme-Anpassungen des im Tutorial-Teil 5 vorbereiteten Blog-Designs, müssen der WordPress-Loop, sowie die index.php, single.php und sidebar.php Datei bearbeitet werden. Außerdem kommen auch noch jede Menge CSS-Styles für das Stylesheet des CoffeeLove-Themes dazu. Also los geht’s, machen wir uns an die Arbeit :-)

1. Zur Übersicht

Die aktuelle Version des CoffeeLove-Themes habe ich wieder auf dem Elmastudio-Testblog online gestellt. So kannst du dir die im Tutorial besprochenen Funktionen live anschauen. Wenn du direkt in den WordPress-Dateien mitarbeiten möchtest, kannst du dir hier außerdem die derzeitige Theme-Version downloaden.

Folgende Theme-Dateien werden bearbeitet

• style.css
• index.php
• loop.php
• single.php
• sidebar.php

2. Das Blog-Layout erklärt

Das Layout der CoffeeLove Blog-Seite habe ich im Design etwas anders aufgeteilt, als das Design der Startseite, da ich im Blog eine Sidebar mit den neusten Flickr-Fotos, Blog-Beiträgen und Kommentaren verwenden möchte.

Webseiten Tutorial CoffeeLove Teil12

Da der Blog-Inhalt auf der Webseite des Cafés eher aus kurzen Nachrichten, wie Veranstaltungshinweisen, Menü-Specials etc. bestehen soll, verziehte ich in diesem Fall auf die „Weiterlesen“-Funktion (more-tag) und zeige den gesamten Inhalt der Artikel bereits auf der Startseite des Blogs an. Über den üblichen Link in der Artikel-Überschrift gelangt man dann auf die Einzelansicht eines Artikels. Hier wird später auch noch die Kommentar-Funktion aktiviert.

Webseiten Tutorial CoffeeLove Teil12
Link der Überschrift auf die Einzelansicht eines Artikels.

3. Die benötigten PHP-Dateien bearbeiten

Sobald du dir dein Blog-Layout noch einmal genau angeschaut hast, kannst du mit der Layout-Umsetzung in deinem WordPress-Theme loslegen. Am besten du startest mit dem Anlegen des Grund-Layouts. Für das CoffeeLove-Theme habe ich hierfür die Div-Container #blog-content das Listen-Element ul.sidebar angelegt (siehe farbig markierte Bereiche im ersten Bild).

3.1. Die index.php Datei

In der Index.php Datei des Themes wird immer der Blog-Loop aufgerufen, mit Hilfe dessen man die Reihenfolge der Artikel untereinander erreicht. Der Loop hat in der Starkers 3.0 Version eine eigene PHP-Datei, loop.php.

Der Loop wird in der index.php mit folgendem Code-Schnipsel aufgerufen:

< ?php get_template_part( 'loop', 'index' ); ?>

Um diesen Codeschnipsel habe ich also den Div-Container mit der ID #blog-content erstellt.

Webseiten Tutorial CoffeeLove Teil12
Der Code für index.php mit dem Blog-Content Div und dem Aufruf des Loops.

3.2. Die sidebar.php Datei

In der sidebar.php Datei benötige ich im CoffeeLove-Theme lediglich einen Sidebar Widget Container innerhalb des Listenelements ul.sidebar. In diesen ersten Container (primary-widget-area) lege ich dann im Adminbereich von WordPress die 3 Widgets für Flickr-Fotos, aktuelle Beiträge und Kommentare an.

Webseiten Tutorial CoffeeLove Teil12
Da das CoffeeLove-Theme nur eine Widget-Area nutzt, reicht es nur diese innerhalb der ul sidebar-Liste aufzurufen.

3.3. Die loop.php Datei

In der Loop.php Datei befindet sich schließlich noch der Code, mit Hilfe dessen man die Anzeige der Blog-Elemente bestimmen kann. Auf den ersten Blick wirkt die loop.php Datei sehr kompliziert. Für die Anzeige der Blog-Übersicht benötigst du aber erst einmal nur einen kleinen Teil des Codes, nämlich den Bereich ab der Beschriftung im Starkers-Theme »How to display all other posts« (ca. Zeile 65).

Die Anzeige der einzelnen Artikel in der Blog-Übersicht habe ich noch einmal mit dem Div mit der Klasse .blog-post umschlossen. Auf diese Weise kann ich die Artikelansicht besser mit Hilfe von CSS gestalten.

<div class="blog-post">
	<p class="meta"><?php the_time('d. F Y') ?> // <?php if ( count( get_the_category() ) ) : ?> <?php printf( __( '%2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ' | ' ) ); ?> <?php endif; ?></p>
				
			<h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

	<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
			<?php the_excerpt(); ?>
	<?php else : ?>
	
			<?php the_content( __( 'Artikel weiterlesen &rarr;', 'twentyten' ) ); ?>

<?php endif; ?>
</div>
<!--end Blog Post-->

Als erstes Element kommt dann die Anzeige des Datums. Ich nutze dafür die WordPress-Funktion the_time. Die Anzeige der Zeit kannst du über PHP-Funktionen (hier: d. F Y) bestimmen. Eine Übersicht möglicher Datumsformate findest du auch im WordPress-Codex.

Um die Kategorien anzuzeigen, nutze ich die WordPress-Funktion get_the_category.

Um das Datum und die Kategorien mit CSS zu stylen, umschließe ich beide mit einem p-tag der Klasse .meta.

Weiter geht es im Loop mit der Anzeige der Überschrift (h2) als Link. Überschriften werden in WordPress mit der Funktion the_title aufgerufen.

Der nächste Absatz im Loop beschreibt, dass nicht der vollständige Artikel-Text, sondern lediglich eine Text-Vorschau (Excerpt) angezeigt werden soll, wenn es sich um eine Abfrage des Blog-Archivs oder der Suchergebnisse handeln sollte.

<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>

Falls dies nicht der Fall ist soll der Inhalt (content) angezeigt werden.

<?php the_content( __( 'Artikel weiterlesen &rarr;', 'twentyten' ) ); ?>

Möchtest du in der Blog-Übersicht nur eine bestimmte Vorschau deines Textes zeigen, kannst du beim Schreiben deines Artikels den more-tag an die gewünschte Text-Stelle setzen. Den Text deines Weiterlesen-Links kannst du dann innerhalb der Klammer von the_content bestimmen.

Mit dem Code endif und endwhile beendest du deinen Loop. Darunter kannst du noch den Code für eine Seiten-Navigation einfügen, mit den Funktionen next_posts_link und previous_posts_link kannst du so auf ältere bzw. neue Artikel weiter linken. Alternativ kannst du hierfür aber auch das beliebte Seiten-Navigations Plugin »WP PageNavi« nutzen.

Eine genaue Beschreibung des WordPress-Loops findest du auch im Artikel »WordPress-Tipps: Der Loop im Twenty Ten-Theme erklärt«.

4. Widgets für die Blog-Sidebar nutzen

Um die Flickr-Fotos als Sidebar-Widgets anzuzeigen, habe ich das WordPress-Plugin »Flickr Fotos« installiert. Die Anzeige der Bilder kannst du mit Hilfe des Plugins bequem in den Widget-Einstellungen bestimmen.

Webseiten Tutorial CoffeeLove Teil12
Deine Flickr User-ID kannst du über die Webseite idgettr.com herausfinden.

Für die Anzeige der Aktuellen Beiträge und der neusten Kommentare habe ich einfache Standard-Widgets verwendet.

Webseiten Tutorial CoffeeLove Teil12
Alle drei verwendeten Widgets sind in der Primary Widget Area abgelegt.

5. Ein Artikel in der Einzelansicht

Für die Anzeige der Artikel in der Einzelansicht wiederholst du lediglich die bereits verwendeten Code-Elemente in der single.php Datei deines Themes. Wenn du möchtest kannst du lediglich den Anchor-tag in der Überschrift entfernen, so dass die Überschrift nicht mehr anzuklicken ist. Außerdem gibt es mit der WordPress-Funktion get_the_author_meta noch die Möglichkeit, eine keine Autoreninfo anzuzeigen. Dazu musst du die Beschreibung in deinem Benutzer-Profil im WordPress-Admin ausfüllen.

Der Code für die Anzeige des Autorenfelds ist dann:

<?php if ( get_the_author_meta( 'description' ) ) : // If a user has filled out their description, show a bio on their entries  ?>
	<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentyten_author_bio_avatar_size', 60 ) ); ?>
	<h2><?php printf( esc_attr__( 'About %s', 'twentyten' ), get_the_author() ); ?></h2>
	<?php the_author_meta( 'description' ); ?>
	<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">
<?php printf( __( 'View all posts by %s &rarr;', 'twentyten' ), get_the_author() ); ?>
</a>

In der single.php Datei rufst du außerdem die Kommentare zu deinem Artikel auf. Der Code-Schnipsel hierfür lautet:

<?php comments_template( '', true ); ?>

Das Styling der Kommentare werde ich in einem extra Tutorial-Teil von CoffeeLove besprechen, da hier ebenfalls wieder jede Menge Einstellungen nötig sind.

6. Fazit

Natürlich gibt es noch jede Menge Möglichkeiten in WordPress und mit Hilfe von Plugins deinen Blog und die Artikel-Einzelseite zu gestalten und zu erweitern. Vielleicht findest du hierfür ja auf unserem Blog bereits weitere Inspirationen und Plugin-Tipps. Schaue dich doch einfach einmal in der Blog-Kategorie zum Thema WordPress um.

Ich hoffe dir hat auch dieser Teil der Tutorial-Serie Spaß gemacht, und die Tipps helfen dir bei der Arbeit in deinem eigenen WordPress-Theme weiter. Über dein Feedback, Fragen und Tipps zur Optimierung des Tutorials freue ich mich sehr!

Weitere Teile der Tutorial-Serie

35 Kommentare zu “Eine neue Webseite entsteht (Teil 12): Der WordPress-Blog

  1. Der Aufbau des Themes gefällt mir sehr gut, allerdings find ich den Hintergrund nicht so schön. Fände es besser wenn „Coffe Love“ nur ein Text wäre (Gute Schriftart). Und das Menü ein wenig größer.

    Gruß
    Vincent

    • Hallo Vincent,

      vielen Dank für deinen Kommentar und dein Feedback zum Tutorial :-)

      Es freut mich, dass dir das Theme gefällt. Den Hintergrund etc. kann man auf jeden Fall auch ändern und ein eigenes Logo einsetzen. Na ja, und natürlich kann man die Tutorial-Tipps auch für sein eigenes Design anwenden :-)

      Viele Grüße,
      Ellen

  2. Wie immer sehr informativ :) Weisst Du, was ich total toll fände (und mir zu Weihnachten wünschen würde*g*): wenn ihr von dieser Serie eine Zusammenfassung machen würdet. Also nicht im Sinne von kurz fassen sondern einfach alle Teile zusammen in ein Dokument (PDF?), so dass man es prima ausdrucken kann. Man hätte dann immer alles zusammen und kann mal schnell nachschlagen, wenn man was sucht :) Ich find die Serienteile nämlich total klasse und gut zu verstehen.

    • Hallo Seelendieb,

      vielen Dank für dein Feedback zum Tutorial. Es freut mich, dass dir die Serie gefällt :-) Deine Idee, eine Zusammenfassung als PDF zur Verfügung zu stellen, finde ich übrigens klasse. Ich werde mal schauen, dass ich das in Angriff nehme :-)

      Vielen Dank für diesen Vorschlag und viele Grüße,
      Ellen

      • Hallo Ellen,

        bist du denn mittlerweile dazu gekommen, das Tutorial als PDF zur Verfügung zu stellen?
        Habe schon geschaut, aber nichts gefunden.
        Wäre in jedem Fall prima und sicherlich auch für andere User sehr hilfreich.

        Lieben Gruß
        Kurt

    • Hallo Ellen,
      ich habe mir grade die Artickel als PDF exportiert.
      Dafür benutze ich in Firefox die Erweiterung „Print pages to PDF“.
      Wenn du die installiert hast, musst du nur mit rechts auf die Seite klicken, die du als PDF-Dokument haben willst und unter „Print pages to PDF“ die Option „Aktiven Tab drucken“ anklicken. Fertig.

  3. Großes Lob für diese Lernreihe! Wird es noch eine Folge geben, wo erklärt wird, wie man den fertigen Blog am geschicktesten von der lokalen Festplatte zu einem Webhoster bekommt?

    • Hallo Tilman,

      vielen Dank für deinen Kommentar. Es freut mich, dass dir die Webseiten-Serie gefällt :-)

      Gerne kann ich auch einmal einen Artikel machen, wie man eine WordPress-Installation auf einen Online-Server „umzieht“. Vielen Dank für diesen Tipp :-) Eine sehr gute Beschreibung (allerdings auf Englisch) kannst du bis dahin auch im Artikel „Exporting and Importing WordPress“ bei Webdesigner Wall finden.

      Viele Grüße,
      Ellen

  4. Hallo Ellen,

    ich freue mich über den neuen Teil des Tutorials. Die Serie ist wirklich super und ich finde es sehr lobenswert wie anschaulich das Ganze vermittelt wird.

    Hab mich gleich daran gemacht Teil 12 umzusetzen. Leider fließt bei mit der Blog und die Sidebar über den Footer hinweg. Ich kann den Fehler nicht entdecken. Der Blog-Content ist ordnungsgemäß geschlossen, bevor ich den Footer aufrufe.

    Vielleicht hat jemand einen Tipp für mich ?

    • Hallo Nicole,

      super, es freut mich, dass du den neuen Teil gleich umsetzen konntest :-)

      Zu deinem Problem: Ich glaube, wenn du noch einen zusätzlichen Div mit der Klasse “clear” in der footer.php ganz oben (also über dem end-wrap div) kannst du das derzeitige Floating vermeiden, und dein Blog sollte korrekt angezeigt werden.

      Falls das nicht hilft, sag einfach noch einmal bescheid :-)

      Viele Grüße,
      Ellen

  5. Hi Ellen,
    Besser kann man ein Tutorial für die WP-Templateerstellung wohl kaum machen. Sehr gut und einfach erklärt. Mir gefallen auch die vielen kleinen Details im CSS. Da werde ich (@font-face und text-shadow) abkupfern ;-) Vielen Dank!

    • Hallo Lemi,

      vielen herzlichen Dank für dein tolles Feedback zur Tutorial-Reihe. Es freut mich, dass du die Tipps hilfreich findest, und gleich für deine eigene Gestaltung nutzen kannst :-)

      Viele Grüße,
      Ellen

  6. Welcher Gedanke mir zu der Reihe noch gekommen ist, jetzt so im Nachhinein. Ihr habt soviele Quellen und Ideen, mich würde es mal interessieren ob ihr einige Quellen an der Hand habt, wo man freie Vektorgrafiken finden kann?

    Ich such immer wieder welche für Websiten und ich auch auch welche, wenn ich wieder Plakate für Veranstaltungen erstellen will. Nur mit meinen 2 Websiten wo ich welche finden könnte, bin ich ziemlich aufgeschmissen habt ihr da ein paar mehr an der Hand? Wichtig wäre halt, dass es Vektorgrafiken sind, weil mit anderen kann ich für meine Plakate nichts anfangen.

    LG
    Timo

  7. Sehr schönes Template…

    Müsste meine Farbwolke auch mal Redesignen… Mhmmm…

  8. Eine tolle Tutorial Serie, welche mir echt geholfen hat die Entwicklung von WordPress Themes zu verstehen.
    Ich besuche diese Seite mittlerweile fast täglich und ich bin schon allein von der Anzahl der Besucher beeindruckt, die die Postings hier kommentieren.
    Ich hoffe, dass ich das mit meinem Blog auch mal erreiche.

  9. Einfach nur klasse. Genau so eine Anleitung habe ich gesucht.
    Ich hab zwar schon lange einen Blog, aber war zu faul tief drin zu basteln. Die angst war zu groß, das etwas schief geht.
    Vielen Dank für die detailierte Beschreibung der einzelnen Punkte.

  10. Hallo !

    Sehr schönes Tutorial. Darf man das Theme eigentlich nutzen ?

    LG

  11. Hallo Ellen!

    Ein sehr gutes Tutorial! Ich habe am Wochenende mein erstes Theme gestaltet und kam mit den sehr anschaulichen Erklärungen super gut zurecht.

    Vielen Dank!!!!!

    Grüße vom Max

  12. Hallo Ellen,

    wollte mich nur bei dir bedanken, echt ein geniales Tutorial.
    Hatte im vorfeld nur html und css kenntnisse, jedoch null ahnung von wordpress & php. Doch dank deines Tutorials hat das alles recht super und schnell geklappt. Super verständlich und umzusetzen! TOP!

    Eine Frage hätte ich aber noch. Unzwar nutze ich überwiegend Firefox. In diesem sieht meine Seite auch „super“ aus, bzw. so wie so soll, im Internet Explorer ist die Seite aber komplett zerschossen. Hast du ne Ahnung woran das liegen kann?

    Vielen Dank!

  13. Hallo!

    vielleicht eine doofe Frage, aber vielleicht kann mir ja jemand helfen. Wie bekomme ich es hin, dass wenn ich meine Domain aufrufe, sich nicht die index.php öffnet sondern eine andere als Template angelegte Seite? Ich habe bspw. ein template-home angelegt und einer Seite mit dem Name Home zugeordnet. Diese Seite soll natürlich angezeigt werden, wenn die Domain aufgerufen wird und nicht der Blog (index.php).

    Ich habe schon probiert, das Template einfach als index.php zu speichern, aber dann funktioniert der loop nicht mehr.

    Ich hoffe es ist irgendwie rübergekommen was ich meine.

    Danke und viele Grüße,
    Axel

  14. Hallo Axel!

    Du kannst unter Einstellungen –> Lesen einstellen, welche Seite die Startseite ist und welche die Blogseite (Artikelseite).

    Grüße vom Max

  15. Hallo Max,

    das war ja wirklich simpel…und ich suche mir da ’nen Wolf.

    Besten Dank und viele Grüße,
    Axel

  16. Hi,

    danke für das Tutorial! Eine Frage darf man das Template frei benutzen?
    Würde dsa Design gerne so übernehmen natürlich alles andere Grafiken usw. Ist dies gestatet?

  17. Hallo!

    tolles Theme – gibt es das auch als kompletten Download?

    Wäre super!

    Oliver

  18. Hallo,

    erst mal muss ich sagen dass das wirklich ein super Tutorial ist! V.a. gibts Du echt tolle Tipps und Links…

    Ich habe eine Seite anhand des Tutorials gebaut und habe ein paar Probleme die mir ein Rätsel sind, vielleicht kannst Du mir ein Tipp geben:
    – Wenn ich in einer Seite/Page im html Code eine Tabelle mit 1 Zeile anlege und auf eine Seite ein Bild und die andere einen Text einfüge, dann springt der Text so weit nach unten, dass er unterhalb des Bildes erst anfängt. Die Tabelle ist breit genug und wird neben einander dargestellt, nur der Text ist ganz weit unten… Gibt es in html vielleicht auch so ein clear oder so für Bilder?… Wenn rechts und links Text ist, dann funktioniert es ganz normal…

    – Du hattest bei Dir im Tutorial die Schriftgröße nur 1oder 2 mal für den Text im css definiert, bei mir ist die Schriftgröße überall anders, im Text anders als in einer Tabelle/bei Aufzählungen… Wenn ich im css für die Tabellen eine Größe definiere, dann funktioniert es, aber sobald ich eine Tabelle in einer Tabelle anlege schon wieder nicht mehr… Wenn ich die Schrift mit Px definiere dann kann ich die Schriftgröße der Widgets nicht anpassen, wenn ich der Schrift 100% gebe dann schon?!?…

    Vielen Dank für die Hilfe…
    Viele Grüße
    Julia

  19. Nach diesem Tutorial fühle ich mich fit und frisch, das alles selbst auszuprobieren und mein eigenes theme zu implementieren!

    Danke!

  20. Hallo Ellen:

    ein wirklich gelungenes Tutorial. Herzlichen Dank dafür.
    Das hätte ich mal vor einigen Wochen wissen müssen, dann hätte ich jetzt nicht soviele Nebenlerneffekte :)

    Welchen Editor verwendest Du?
    Die Windowsbordmittel sind leider nur bedingt hilfreich, da sie keine Zeilen anzeigen.

    Beste Grüße
    Uschi

  21. @Uschi: Ich kann Dir den Sublime Text 2 – Editor empfehlen, in meinen Augen einer der besten Editoren überhaupt.

    @Ellen: Was ist denn eigentlich mit den anderen Dateien, wie z.b. loop-category.php? Kommt dazu auch noch irgendwann was? In Teil 7 wurden so viele Dateien erwähnt, aber nur ein Bruchteil davon erklärt.

  22. Hallo Ellen,
    erst mal ein ganz fettes Dankeschön für deine Tutorials und Videos. Für ein Greenhorn, wie ich es bin, sind die mehr als hilfreich. Jedenfalls habe ich damit meine kleine Homepage aufgebaut.
    So das war das Lob und jetzt meine Frage:
    erst mal es funktioniert eigentlich alles, so wie ich haben es will. Wenn ich jedoch in den Kategorien eine Autoren anklicke (im Moment bin das nur ich selbst), erscheint logischer weise das Autorenarchiv, jedoch sind die Schriftgrößen deutlich kleiner, wodurch sich in der Auflistung alles verschiebt.
    Was habe ich falsch gemacht? Wo ist der Schalter, den ich nicht gefunden habe?
    Für ein freundlich, herzhaftes runter schubsen von der Leitung, jetzt schon mal – Danke!

  23. Vielen Dank, dass du dir soviel Mühe gemacht hast, den Aufbau eines Templates für WordPress -„from scratch“ sozusagen- zu beschreiben. Gefällt mir echt gut. Keep it up!!!

  24. Wow, eines der besten Tutorials das ich bisher zum Thema „Webseite erstellen“ gelesen habe. Dieses Tutorial kann man auch auf Grund der sehr gut recherchierten Hintergrundinformationen und Tool-Links jederzeit als Referenz angeben. Danke für die Mühe und weiter so !

  25. Hi Ellen,

    vielen Dank für das hilfreiche Tutorial!

    Leider weiß ich noch nicht, wie ich alles wieder von der lokalen Installation auf den „echten“ Server bekomme.
    Hast Du dazu noch ein paar Tipps?

    Danke Dir!

  26. Hallo Ellen,
    ich habe euch zwar erst ein paar Jahre nach deiner Artikelserie entdeckt, und habe auch noch nicht alles gelesen ;) aber ich muss sagen dies ist das erste mal das ich das Gefühl habe überhaupt mal einen Anfang zu bekommen. Toll, super strukturiert und verständlich erklärt. Vielen Dank dafür!

Hinterlasse eine Antwort

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