Eigenes WordPress Theme mit YAML erstellen – Teil 6

In unserem heutigen Teil des Tutorials beschäftigen wir uns mit der Artikelseite. Also der Seite, die einen einzelnen Artikel komplett anzeigt. Wer es schon einmal ausprobiert hat, wird feststellen, dass man sich schon einen einzelnen Artikel ansehen kann. Die Anzeige erfolgt dann aber genauso, wie auf der Startseite.

WordPress Template Hierarchie

Das bringt uns nochmal zur Struktur der WordPress Templates. Ruft man nämlich die Seite eines einzelnen Artikels auf, dann sucht WordPress zunächst nach der Datei „single.php“. Ist diese Datei nicht vorhanden, so wird wieder die Datei „index.php“ geladen.

WordPress bietet für verschiedene Darstellungen einer Seite unterschiedliche Templates an. Für die Startseite kann man die Datei „home.php“ verwenden, eine Darstellung einer Suche kann im Template „search.php“ definiert werden. Weitere Templates, die in einer definierten Hierarchie angeordnet sind, sind z.B. „archiv.php“, „404.php“, „page.php“, „category.php“ usw.

Eine sehr schöne Übersicht der Template Hierarchie findet man auf den Seiten von WordPress.

Die Artikelseite

Für die Darstellung eines Artikels müssen wir nun also die Datei single.php erstellen. Dies gelingt sehr einfach, in dem wir die Datei „index.php“ kopieren und umbenennen.

Auf der Startseite haben wir bisher mittels der Funktion „wp_excerpt“ nur einen kurzen Auszug des Textes angezeigt. Zusätzlich hatten wir einen eigenen „weiter lesen“ Link eingebaut. Der Aufruf „wp_excerpt“ kann nun in der Datei „single.php“ gegen die Funktion „the_content“ ausgetauscht werden.

Bei der Ausgabe des Titels können wir auf die Angabe des Links verzichten. Es muss also nur der eigentliche Titel mittels „the_title()“ ausgegeben werden.

Nun rufen wir noch das Tag „comments_template()“ auf. Damit wird das Template für die Anzeige der Kommentare geladen. Da in unserem Verzeichnis noch keine Datei „comments.php“ existiert, wird die Datei aus dem „default-Template“ geladen.

Der Code sieht nun folgendermaßen aus und sollte bereits auch ein erstes Ergebnis liefern. Beim Aufruf von „post_class“ haben wir übrigens diesmal die Klasse „artikelseite“ mit gegeben. So können wir bei Bedarf spezielle Formatierungen für diese Seite vornehmen.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class('artikelseite'); ?> id="post-<?php the_ID(); ?>">
<div class="comments_count center">
<big><?php comments_popup_link('0', '1', '%', '', __('Comments Closed', 'tutorial'));
printf('</big><br/> <span class="highlight">');
_e('Kommentare', 'tutorial');?></span>
</div>
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_content(); ?>
</div>
</div>
<hr/>
<?php comments_template(); ?>
<?php endwhile; ?>
<?php else : ?>
<h2><?php _e('Nichts gefunden', 'tutorial'); ?></h2>
<p><?php _e('Schade, leider gibt es hier keinen Artikel', 'tutorial'); ?></p>
<?php endif; ?>

Die Metadaten des Artikels

Wer gut aufgepasst hat, wird gemerkt haben, dass wir links neben dem Titel noch die Anzahl Kommentare stehen haben. Den Code aus der ursprünglichen „index.php“ hatten wir hier noch nicht angepasst. Also tauschen wir diesen Code gegen die Ausgabe des Datums aus.

Das Datum wird mit der Funktion „the_time()“ ausgegeben. Mit der Parameterübergabe steuert man, wie das Datum formatiert wird. Wir bauen also die Funktion an die Stelle ein, wo bisher die Kommentarzahl ausgegeben wird. Weiterhin ändern wird noch die Klasse „comments_count“ in „artikeldatum“. Mit dieser Klasse werden wir demnächst das Datum noch ein wenig schöner formatieren.

Nun wollen wir noch die Kategorien, die dem Artikel zugeordnet sind und die Tags ausgeben. Das machen wir direkt nach der Ausgabe des Titels.

Die Kategorien werden mit der Funktion „get_the_category_list“ und die Tags mit der Funktion „get_the_tag_list“ ermittelt.

Der Code zur Ausgabe des Artikels und der Metainformationen sieht nun wie folgt aus:

<div <?php post_class('artikelseite'); ?> id="post-<?php the_ID(); ?>">
<div class="artikeldatum center">
<?php the_time("d.m"); ?></br>
<?php the_time("Y"); ?>
</div>
<h2><?php the_title(); ?></h2>
<div class="postmeta">
<?php echo "Kategorie: ".get_the_category_list(', '); ?>
<br/><?php echo get_the_tag_list('Tags: ', ', '); ?>
</div>
<div class="entry">
<?php the_content(); ?>
</div>
</div>

So, für heute war es das erst mal. Im nächsten Tutorial kümmern wir uns ein wenig um die weitere Gestaltung, sowie ein eigenes Design für die Kommentare und bauen noch die zusätzlichen Bereiche für die „Empfehlungs-Button“ ein.

Die Dateien aus dem Verzeichnis „css“ habe ich euch wieder als zip-Datei zusammen gestellt.

[ad] [serialposts]

5 comments

  1. ich werde dieses Tutorial mal versuchen.
    Die Ergebnisse sind auf meiner Seite zu finden 🙂

  2. Gedanken Blogger

    Dann hoffe ich mal, dass ich endlich dazu komme die nächsten Teile zu veröffentlichen 😉

  3. Ich werde es jetzt auch mal versuchen. Ein eigenes Theme hat schon was. Durch dieses Tutorial blickt man ja auch mal durch die Struktur eines WordPress Themes. Ich habe jahrelang mit Website Baker gearbeitet. Dann kam es zum Umstieg zu WP.
    Da war das Problem die Daten von Website Baker in die WordPress Seite zu bringen.
    Mit der Import /Export Funktion war das nicht ohne weiteres möglich. Ich habe aber eine Lösung gefunden.
    Diese Lösung Habe ich auf der Seite http:// wbtowp.thorsten-lemke.de kurz erklärt.
    Die Lösung fand ich über Google.

  4. Ich habe mir die ganze Artikelserie durchgelesen, um heraus zu finden, was YAML genau ist. Aber so richtig kapiert habe ich das immer noch nicht. Was ist der Unterschied dazu, wenn ich normales CSS schreibe. Wird im Hintergrund automatisch die Kompatibilität zu anderen Browsern hingebogen, oder muss ich die immer noch selber schreiben?

  5. YAML ist ein Framework, welches einem ein Grundgerüst für flexible und responsive Webseiten liefert. Das könnte man natürlich auch selbst mit CSS versuchen. Im Framework sind dann auch einige Features eingebaut, die das Verhalten unterschiedlicher Browser berücksichtigen. Ich habe es aber schon ewig nicht mehr genutzt und kann nichts zum aktuellen Stand des Frameworks sagen.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

x

Check Also

Eigenes WordPress Theme mit YAML erstellen – Teil 3

Im dritten Teil meines Tutorials möchte ich euch nun zeigen, wie man die erstellte Designskizze ...