Ein eigenes WordPress Theme erstellen 5 – Dem Inhalt zusätzliche Informationen hinzufügen

Im Teil 4 dieser Tutorial-Reihe haben wir viele Teile von der index.php ausgegliedert, so auch den Inhalt. Unsere content.php des WordPress Themes beschränkt sich momentan noch auf den Titel und den Inhalt. In diesem Artikel werden wir jedoch noch einige weitere Informationen hinzufügen.

Was wäre zusätzlich noch nützlich, wünschenswert oder praktisch?

Bei den meisten Blogger-Themen werden zB die Kategorie, die Schlagworte, der Author und das Erstellungsdatum des Beitrages angezeigt. Auch Beitragsbilder und Feed-Links würden derzeit in diesem Theme noch viele vermissen. Bevor wir uns hier jedoch um die content.php kümmern, öffnen wir zuerst unsere functions.php und erweitern diese.

Um im Theme Beitragsbilder verwenden zu können verwenden wir add_theme_support( 'post-thumbnails' ), für die Unterstützung der verschiedenen Post-Formate add_theme_support( 'post-formats', array( 'aside', 'audio' ..... ) ) und für die Feed-Links add_theme_support( 'automatic-feed-links' ). Das Ganze wird nun noch in eine Funktion gepackt und in der functions.php hinzugefügt. Der komplette Code hierzu wäre.

function zoechbauer_theme_features()  {
    // Beitragsbilder hinzufügen
    add_theme_support( 'post-thumbnails' );

    // Standard Beitragsbilder-Größe - Optional
    set_post_thumbnail_size( 600, 200, true );

    // Die verfügbaren Post-Formate hinzufügen
    add_theme_support( 'post-formats', array( 'aside', 'audio', 'chat', 'gallery', 'image', 'link', 'quote', 'status', 'video' ) );

    // Feed Links hinzufügen
    add_theme_support( 'automatic-feed-links' );

    // Den TITLE-Tag automatisch von WordPress hinzufügen lassen - ab WP 4.1
    add_theme_support( 'title-tag' );

    // HTML5 Unterstützung hinzufügen
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

    // Textdomain für Übersetzungen hinzufügen
    load_theme_textdomain( 'zoechbauer', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'zoechbauer_theme_features' );

Dem findigen Leser wird jetzt nicht entgangen sein, dass ich hier auch noch die HTML5 Unterstützung für die Gallery, Kommentare, Suche und den Titel-Tag hinzugefügt habe. Für den Titel-Tag müssen wir aber noch zusätzlich in unserer head.php die Zeile <title><?php wp_title(); ?></title> löschen, da dieser jetzt direkt von WordPress verwaltet wird. Ansonsten können wir uns jetzt direkt unserer content.php widmen.

Beitragsbild

Das alleinige Bereitstellen der Funktion in unserer functions.php reicht dafür, dass wir im Beitrag das Beitragsbild festlegen können, jedoch wird es noch nicht angezeigt. Hierzu müssen wir uns in der content.php der Funktion the_post_thumbnail() bedienen. Sofern wir keine zusätzlichen Angaben bezüglich des Beitragsbildes machen, wird unsere in der functions.php festgelegt Bildgröße verwendet – 600×200 Pixel in diesem Beispiel.

Allerdings müssen wir uns in Bezug auf Bilder in WordPress immer der Tatsache bewust sein, dass diverse Änderungen von Bildgrößen nur für nachträglich hinzugefügte Bilder automatisch zur Verfügung stehen. Wenn wir aber schon eine fertige Webseite haben, und daher nachträglich zB wegen eines anderen Themes so manche Bildgrößen ändern, so müssen diese neu umgerechnet werden. Eine meiner Meinung nach sehr gute Lösung ist für diesen Fall das Plugin Force Regenerate Thumbnails.

Erstellungsdatum, Author, Kategorien, Schlagworte

Mit sehr einfachen Tags können wir das Beitragserstellungsdatum, die Kategorien und Schlagworte zum Inhalt hinzufügen. Für das Erstellungsdatum verwenden wir hier the_time(), für den Author the_author_posts_link(), Kategorien lassen wir über the_category() anzeigen und für die Schlagworte verwenden wir the_tags().

Jetzt müssen wir noch die entsprechenden Tags an den richtigen Stellen in der content.php einbinden. Zusätzlich strukturieren wir noch den ganzen Artikelinhalt. Der Inhalt der Datei content.php könnte jetzt zB so aussehen.

content.php

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> role="article">

    <header class="post-header">

    <?php // Wenn ein Beitragsbild vorhanden ist, dann soll es mit folgendem Code geladen werden
    if ( has_post_thumbnail() ) { ?>
        <figure class="post-thumbnail">
            <?php // In der Beitrags- und Seitenansicht nicht klickbar ansonsten schon
            if ( is_singular() ) {
                the_post_thumbnail();
            } else { ?>
            <a href="<?php the_permalink() ?>" rel="bookmark" title="Link zu <?php the_title_attribute(); ?>">
                <?php // Das Beitragsbild
                the_post_thumbnail(); ?>
            </a>
            <?php } ?>
        </figure>
    <?php } // Beitragsbild Ende ?>

        <span class="posted-on">
            <?php // Veröffentlichungsdatum und Beitragsersteller/Author ?>
            Veröffentlicht am <time><?php the_time( 'j. F Y' ); ?></time> von <?php the_author_posts_link(); ?> <?php
            // Anzahl der Kommentare anzeigen
                comments_popup_link(
                    __( 'Keine Kommentare', 'zoechbauer' ),
                    __( '1 Kommentar', 'zoechbauer' ),
                    __( '% Kommentare', 'zoechbauer' ),
                    'comments-link',
                    __( 'Kommentare deaktiviert', 'zoechbauer' )
                );
            ?>
        </span>

    <?php // Überschrift/Titel nicht klickbar in der Beitrags- und Seitenansicht ansonsten schon
    if ( is_singular() ) { ?>
        <h1 class="post-title"><?php the_title(); ?></h1>
    <?php } else { ?>
        <h1 class="post-title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="Link zu <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
    <?php } ?>

    </header>

    <section class="post-content">
        <?php
        // Bei Suche und Archivseiten die Kurzfassung des Inhaltes anzeigen
        if ( is_search() || is_archive() ) {
            the_excerpt();
        } else {
        // Den Inhalt mit dem Weiterlesen-Link anzeigen - In der Einzelansicht den vollen Inhalt
            the_content( __( '<span class="post-more">Weiterlesen</span>', 'zoechbauer' ) );
        }
        // Bei Aufteilung auf mehrere Seiten die Navigation hinzufügen - Nur wenn <!--nextpage --> eingesetzt wurde
        if ( is_singular() ) {
            wp_link_pages( array(
                'before'    => '<p class="page-links">' . __( 'Seite:', 'zoechbauer' ),
                'after'    => '</p>'
            ) );
        }
        ?>
    </section>

    <?php // Wenn: Kategorie oder Schlagworte vorhanden oder Benutzer eingeloggt
    if ( get_the_category() || get_the_tags() || is_user_logged_in() ) { ?>
    <footer class="post-footer">
        <?php // Wenn Kategorie vorhanden
        if ( get_the_category() ) { ?>
        <p class="post-meta"><?php echo __( 'Kategorie:', 'zoechbauer' ); ?> <?php the_category( ', ' ); ?></p>
        <?php } ?>
        <?php // Wenn Schlagworte vorhanden
        if ( get_the_tags() ) { ?>
        <p class="post-meta"><?php echo __( 'Schlagworte:', 'zoechbauer' ); ?> <?php the_tags( '', ', ' ); ?></p>
        <?php } ?>
        <?php // Bearbeiten Link bei eingeloggtem Benutzer
        edit_post_link( __( 'Bearbeiten', 'zoechbauer' ), '<p class="post-meta">', '</p>' ); ?>
    </footer>
    <?php } ?>

</article>

Das ist meiner Meinung schon ein sehr guter Grundstock für den Inhalt. Diverse Anordnungen von Kategorie, Schlagworte, Beitragsbild usw. kann man natürlich ganz individuell an den eigenen Geschmack anpassen oder auch weglassen.

Zusätzlich habe ich hier das Beitragsbild und den Beitragstitel in der ’nicht Einzelansicht‘ noch mit dem Link zum Beitrag versehen. Bei der Suche und den Archivseiten würde hier nur die Kurzform des Inhaltes angezeigt werden, bei der Einzelansicht natürlich der komplette Inhalt und bei allen anderen Seiten wie zB der Hauptseite mit den letzten Beiträgen würde hier die gekürzte Inhaltsversion mit dem ‚Weiterlesen‘-Link angezeigt.

Auch besteht ja in WordPress die Möglichkeit, einen langen Artikel oder eine Seite auf mehrere Unterseiten aufzuteilen – mit <!--nextpage-->. Damit diese Unterseiten auch direkt ausgewählt werden können, wird der Tag wp_link_pages() benötigt.

Auch für die Möglichkeit, das Theme später in andere oder zusätzliche Sprachen zu übersetzen wurde gesorgt. In der functions.php am Anfang des Artikels haben wir ja load_theme_textdomain() hinzugefügt und in diesem Beispiel mit zoechbauer festgelegt. Von daher steht auch einer Übersetzung des Themes nichts mehr im Weg. Übersetzt werden dabei zB:

  • __( 'Kategorie:', 'zoechbauer' )
  • __( 'ZU_ÜBERSETZENDER_TEXT', 'TEXTDOMAIN' )

Alles in allem denke ich, dass dieses Beispiel ein guter Grundstein für noch folgende Ergänzungen sein wird.




Bitte beachten Sie, dass dieser Beitrag bereits vor über einem Jahr geschrieben wurde und unter umständen nicht mehr aktuell ist.