Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Das eigene WordPress-Theme erstellen – #5: Die content.php

In dieser Serie geht es darum, ein WordPress-Theme zu erstellen – von Grund auf. Im fünften Teil beschäftigen wir uns mit der Ausgabe der Inhalte von Standard-Beiträgen in der Blogübersicht.

Wie im letzten Teil der Reihe besprochen, nutzen wir die content.php, um das Markup von Beiträgen auf der Blog-Übersicht auszugeben. Wenn keine andere content--Datei wie die content-gallery.php angelegt sind, wird für jedes Post-Format diese Datei gewählt. Für unser Theme sieht die Datei so aus:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
        <?php bornholm_the_post_header( 'h1', $post ); ?>
    </header>
    <div class="entry-content">
        <?php bornholm_the_content(); ?>
    </div>
    <footer class="entry-meta">
        <?php bornholm_footer_meta() ?>
    </footer>
</article>

Wir umschließen einen Beitrag mit einem article-Element und weisen diesem eine ID zu. Die besteht immer aus dem Präfix post-, gefolgt von der ID des Beitrags, die wir mittels der the_ID()-Funktion ausgeben. WordPress stellt noch nützliche Klassen zur Verfügung, die mit post_class() ausgegeben werden. Beispielsweise gibt WordPress das Post-Format des Artikels aus, etwa in Form der format-gallery-Klasse. Nähere Informationen zu dieser Funktionn findet ihr auf developer.wordpress.org.

Der Header eines normalen Beitrags

Der Header eines normalen Beitrags soll die verlinkte Überschrift enthalten sowie gegebenenfalls das Featured Image. Da wir diese Funktionalität häufiger brauchen, ist sie in die Funktion bornholm_the_post_header() ausgelagert. Als Parameter muss die Hierarchie der Überschrift und das $post-Objekt übergeben werden. Diese Funktion schreiben wir in die functions.php, die ebenfalls in die oberste Ebene des Theme-Ordners gehört:

<?php
/**
 * Displays the header for normal posts
 *
 * @param $heading
 *
 * @return string Formatted output in HTML
 */
function bornholm_the_post_header( $heading, $post ) {
    if ( has_post_thumbnail() ) {
        if ( ! is_single() ) { ?>
            <a href="<?php esc_url( the_permalink() ); ?>">
        <?php } ?>
        echo '<' . $heading . ' class="entry-title">';
        the_title();
        echo '</' . $heading . '>'; ?>
        <figure class="featured-image">
            <?php the_post_thumbnail(); ?>
        </figure>
        <?php if ( ! is_single() ) { ?>
            </a>
        <?php }
    } else {
        bornholm_post_title( $heading, $post );
    }
}

Zuerst wird mit der has_post_thumbnail()-Funktion geprüft, ob der Beitrag ein Featured Image hat. Da wir den Link auf die Detailseite nur setzen wollen, wenn wir uns nicht auf derselben befinden, und diese Funktion auch für die Einzelansicht benutzt wird, prüfen wir mit ! is_single(), ob die angezeigte Seite keine Einzelseite ist. Befinden wir uns nicht auf einer Einzelseite, geben wir mit Hilfe der the_permalink()-Funktion einen Link auf die Einzelseite des Beitrags aus.

Anschließend möchten wir den Titel des Beitrags anzeigen. Wir setzen uns also das Überschriften-Element mit der übergebenen Hierarchie zusammen und geben darin den Titel mit der the_title()-Funktion aus. Für die Ausgabe des Featured Image in dem figure-Element nutzen wir die Funktion the_post_thumbnail(). Falls es sich nicht um eine Einzelansicht handelt, schließen wir das Link-Element wieder. Hat der Beitrag kein Featured Image, so rufen wir die bornholm_post_title()-Funktion auf und übergeben die zwei bereits bekannten Parameter. Auch diese Funktion kommt in die functions.php:

/**
 * Displays the post title
 *
 * @param $heading
 *
 * @return string Formatted output in HTML
 */
function bornholm_post_title( $heading, $post ) {
    echo '<' . $heading . ' class="entry-title">';
    if ( ! is_single() ) { ?>
        <a href="<?php esc_url( the_permalink() ); ?>">
    <?php }
    the_title();
    if ( ! is_single() ) { ?>
        </a>
    <?php }
    echo '</' . $heading . '>';
}

Das sollte durch die Besprechung der vorherigen Funktion eigentlich selbsterklärend sein. Wir geben wieder das Überschriften-Element aus sowie gegebenenfalls den Link zu der Einzelseite. Darin kommt mit the_title() die Überschrift des Beitrags.

Der Inhalt des Beitrags mit angepasstem Weiterlesen-Link

Kommen wir zurück zur content.php. Um den Inhalt des Beitrags auf der Blog-Übersicht kümmert sich dieser Abschnitt:

<div class="entry-content">
    <?php bornholm_the_content(); ?>
</div>

Und die bornholm_the_content()-Funktion – wieder anzusiedeln in der functions.php – sieht so aus:

/**
 * Displays the content with customized more link
 *
 * @return string Formatted output in HTML
 */
function bornholm_the_content() {
    $text = _x( 'Continue reading “%s”', 's = post title', 'bornholm' );
    $more = sprintf( $text, esc_html( get_the_title() ) );
    the_content( $more );
}

In WordPress kann ja bekanntlich ein Weiterlesen-Tag eingefügt werden. Der Standardtext, der dafür ausgegeben wird, ist „Read more…“ oder in der deutschen Übersetzung „Weiterlesen …“. Wir möchten aber gerne den Titel des Beitrags mit in diesen Weiterlesen-Link integrieren. Im Englischen soll das dann, wenn der Beitrag beispielsweise „WordPress-News“ heißt, so aussehen: Continue reading “WordPress-News”. Natürlich übersetzbar. Die Übersetzbarkeit ermöglicht die die erste Zeile der Funktion. Um den Artikel hier nicht zu lang werden zu lassen, wird sich der nächste Beitrag damit beschäftigen, wie ein WordPress-Theme für die Übersetzung vorbereitet werden kann.

Mit der sprintf()-Funktion wird in der nächsten Zeile in den Weiterlesen-Text der Titel eingefügt, der von der get_the_title()-Funktion bereitgestellt wird. Zuletzt übergeben wir den modifizierten Text an die WordPress-eigene the_content()-Funktion, die den Inhalt des Beitrags ausgibt.

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.