öffentlich
Redaktion Druckversion

Eigenes WordPress-Theme erstellen

4.82143
(28)
Beitrag bewerten
Kommentar schreiben
Stand: 16. Juni 2014

Das Wordpress-Theme erweitern

Der einzelne Beitrag (single.php)

Tipp:

Bevor es weiter geht, würde ich Ihnen empfehlen, noch ein paar weitere Blog-Beiträge zu erstellen und diese fleißig in die verschiedenen Kategorien einzusortieren und mit Tags zu versehen – damit wir "Material" zum formen haben.

Des Weiteren wäre es evtl. empfehlenswert, dass Sie den bestehenden Themes-Ordner kopieren und an der Kopie weiter arbeiten. So können Sie die Veränderungen besser nachvollziehen. Um im Backend die beiden Kopien besser auseinander zu halten, sollten Sie in der CSS-Datei einfach den Namen des Themes leicht ändern.

Wie Sie bereits im letzten Kursteil gelernt haben, gibt es in einem WordPress-Theme Template-Dateien, die es geben muss (z. B. index.php) und Dateien, die es geben kann, wie z. B. die single.php. Diese Datei ist zuständig, wenn ein einzelner Blog-Artikel angezeigt werden soll. Wenn wir uns einen einzelnen Beitrag der Kurs-Themes anschauen:

Bild vergrößernAbbildung 1: Links die Übersicht und rechts der einzelne Beitrag

dann werden Sie feststellen, dass es im Bereich des Blog-Artikels eigentlich keinen Unterschied zu der Auflistung der Blog-Beiträge auf der Hauptseite gibt, weil WordPress – wenn die single.php nicht vorhanden ist – auf die index.php zugreift.

In diesem Abschnitt werden wir in der Einzelansicht am Ende des Beitrages einige zusätzliche Informationen einbinden und somit das Theme aufwerten. Öffnen Sie die index.php in Ihrem Editor und speichern Sie die Datei als single.php ab. Die Änderungen gegenüber der index.php habe ich hervorgehoben:

<?php get_header(); ?><div id="inhalt"><?php if (have_posts()) : while (have_posts()) : the_post(); ?><h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Der Verweis (Permalink) zu: <?php the_title(); ?>"><?php the_title(); ?></a></h2><div class="beitrags-info">Von <?php the_author() ?> am <?php the_time('d. F Y'); ?> um <?php the_time('H:i'); ?> <?php edit_post_link(); ?></div><div class="der-beitrag"><?php the_content(); ?></div> <!-- Ende des jeweiligen Beitrags --><div class="beitrags-info2"><dl><dt>Kategorien:</dt><dd><?php the_category(', ') ?>&nbsp;</dd><dt>Tags:</dt><dd><?php the_tags('', ', ', ''); ?>&nbsp;</dd><dt>Kommentare:</dt><dd><?php comments_rss_link('Kommentare verfolgen'); ?> oder ein <a href="#comments" rel="nofollow">Kommentar abgeben</a></dd></dl></div><!-- Ende .beitrags-info2 --><p class="center"><?php previous_post_link('%link','«« Zum vorherigen Beitrag'); ?>&nbsp;&mdash;&nbsp;<?php next_post_link('%link','Zum nächsten Beitrag »»'); ?></p><?php comments_template(); /* Der Kommentarbereich */ ?><?php endwhile; else: ?>
<p>Tut mir leid, es wurde kein passender Beitrag gefunden.</p>
<?php endif; ?>

</div><!-- /#inhalt -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Da der Code der index.php bereits bekannt ist, werde ich mich bei der Erklärung lediglich auf die Neuerungen in der single.php konzentrieren. Dort, wo vorher der Code stand, welcher die Anzahl der abgegebenen Kommentare zeigte:

<div class="feedback">
 <?php comments_popup_link('Kommentare (0)', 'Kommentare (1)', 'Kommentare (%)'); ?>
</div>

stehen jetzt zusätzliche Artikelinformationen:

              <div class="beitrags-info2"> <dl> <dt>Kategorien:</dt> <dd>
              <?php the_category(', '); ?>
              </dd> <dt>Tags:</dt> <dd>
              <?php the_tags(''); ?>
              </dd> <dt>Kommentare:</dt> <dd><?php comments_rss_link('Kommentare verfolgen'); ?> oder einen <a href="#comments" rel="nofollow">Kommentar abgeben</a></dd> </dl></div><!-- Ende .beitrags-info2 -->
            

Für die Ausgabe der Beitragsinformationen habe ich mich für eine Definitionsliste (dl) entschieden, weil sie meiner Meinung nach semantisch hier gut passt. Eine Definitionsliste ist für viele Einsatzzwecke gedacht: für ein Glossar, um eine Diskussion abzubilden etc.

Als erstes wird Ihnen der Template-Tag the_category(', '); auffallen. Mit diesem Tag geben Sie die Kategorien aus, in die der jeweilige Beitrag einsortiert wurde. Das Komma und das Leerzeichen innerhalb des Tags dienen als Parameter und beziehen sich darauf, was als Trennzeichen bei der Aufzählung einzelner Kategorien dienen soll. So könnte das Ergebnis dann ausschauen:

Beispiel:

Beispiel:

Kategorien: Kategorie1, Kategorie2, Kategorie3

Wird hier kein Parameter angegeben, werden die einzelnen Kategorien als eine horizontale Aufzählung ausgegeben.

Die Ausgabe der Tags

Mit dem Template-Tag the_tags(); werden die Tags (deutsch: Schlagwörter) ausgegeben, welche man dem jeweiligen Beitrag zugewiesen hat. Dieser Template-Tag verfügt über drei mögliche Parameter: was steht vor den Tags, was dient als Trennzeichen und was kommt nach der Aufzählung der Tags? Wenn man keine Parameter angibt, wird standardmäßig "Tags: " vor der Tag-Aufzählung eingebunden ", " (Komma + Leerzeichen) dient als Trennung zwischen den einzelnen Tags und am Ende wird nichts hinzugefügt.

Ich habe allerdings folgenden Code eingefügt: the_tags(''); . Sie sehen keinen Wert, sondern nur die zwei umschließenden Hochkommata ( '' ). Das signalisiert WordPress, dass dieser, in unserem Fall der erste, Parameter leer bleiben soll – das "Tags: " wird damit entfernt. Das ist notwendig, weil ich "Tags:" innerhalb von <dt></dt> haben möchte.

Die anderen beiden Parameter für das Trennzeichen und die Nachfolge möchte ich nicht abweichend vom Standard haben und daher ist es nicht notwendig, diese explizit anzugeben. So gesehen ist the_tags(''); die Kurzform von the_tags('', ', ', ''); . WordPress erkennt also, dass sich der eine leere Wert auf den ersten Parameter bezieht.

Zwischen den Beiträgen blättern

WordPress beherrscht mehrere Weiterblättern-Funktionen. Das Weiterblättern zwischen der Auflistung von Beiträgen haben Sie bereits in der index.php kennen gelernt. Hier der Code bzw. die Template-Tags um in der Einzelansicht zwischen den einzelnen Beiträgen zu blättern:

<p class="center"><?php previous_post_link(); ?> – <?php next_post_link(); ?></p>

Die beiden Template-Tags previous_post_link(); und next_post_link(); sind zuständig für die Ausgabe der benachbarten Beiträge und das schaut folgendermaßen aus:

« Testbeitrag – Testbeitrag Nr. 3 »

"Benachbart" bezieht sich in diesem Zusammenhang auf die chronologische Reihenfolge: die Beiträge, die vor bzw. nach diesem Beitrag publiziert wurden.

Bei der Benutzung dieser beiden Template-Tags ohne Angabe von Parametern, wird ein Link zum benachbarten Beitrag erstellt und der Linktext besteht aus der Überschrift bzw. dem Titel des Artikels. Zusätzlich dazu bekommen die beiden Linktexte « bzw. » zugewiesen.

Da wir uns in der single.php und somit in der Einzelansicht befinden, habe ich die beiden Template-Tags für das Weiterblättern auf den Übersichtsseiten, entfernt:

<p><?php posts_nav_link(' – ', '« Zurückblättern', 'Weiterblättern »'); ?></p>

Die Änderungen in der CSS-Datei

Da wir das Theme um zwei Klassen und ein neues Element erweitert haben, ist es auch notwendig, die CSS-Datei zu erweitern:

body {…}
/* Allgemeingültige Angaben */
dt {
 font-weight: bold;
}
dd {
 margin: 1px 0 .5em 0;
}
.center {
 text-align: center;
}
…
/* Der Inhaltsbereich */
…
#inhalt .beitrags-info2 {
 background: #fff; margin: 25px 0; border: 1px solid #bbc0a2;
}
#inhalt .beitrags-info2 dl {
 margin: 1px; padding: 12px; background: #dcdecf;
}
#inhalt .beitrags-info2 dl a {
 border-bottom: 1px solid #bbc0a2
}
#inhalt .beitrags-info2 dl dt {
 float: left;
 width: 88px; margin: 0;
 font-weight: normal; clear: left;
}
#inhalt .beitrags-info2 dl dd {
 margin: 0 0 2px 92px;
}

An den CSS-Regeln ist erkennbar, dass ich durch den linken Float bei dem Definitons-Ausdruck ( <dt> ) erreiche, dass sich der Ausdruck und die dazugehörige Definition ( <dd> ) horizontal anordnen. So schaut das Ergebnis aus:

Bild vergrößernAbbildung 2: Die neue Einzelansicht

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen

Downloads zu diesem Beitrag

Newsletter abonnieren