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.