Entwicklung & Design

Das eigene WordPress-Theme erstellen – #9: Die Einzelansicht der Beiträge und Galerien in der single.php

Seite 2 / 2

Den Galerie-Header ausgeben

Nach dieser komplexeren Funktion müssen wir nun in die single.php zurück. Wir waren bei dieser Stelle im header-Element stehengeblieben:

if ( $format == 'gallery' ) {
    $images = bornholm_get_gallery_images( $post->ID );
    bornholm_gallery_header( 'h1', $images, 'bornholm_large_gallery_image_for_single_view', $post );

In der $images-Variable befinden sich jetzt die Post-Objekte der Galeriebilder. Um den Header der Galerie auszugeben, rufen wir die bornholm_gallery_header()-Funktion auf. Der erste Parameter ist die Ebene der Überschrift, der zweite die Variable mit den Post-Objekten der Bilder, der dritte die Größe des Bildes, das wir ausgeben möchten, und der vierte das Post-Objekt des Beitrags.

Da diese Bildergröße keiner Standardgröße wie etwa large entsprechen soll, müssen wir die erst in der functions.php anlegen, bevor wir uns der bornholm_gallery_header()-Funktion widmen:

add_image_size( 'bornholm_large_gallery_image_for_single_view', 1592, 9999, false );

Das wars schon. Wir übergeben als ersten Parameter an die add_image_size()-Funktion den eindeutigen Bezeichner, anschließend die maximale Breite und Höhe und zum Schluss, ob das Bild auf diese Werte zugeschnitten werden soll. Um diese Größe für bereits hochgeladene Bilder zu erzeugen, müssen die Thumbnails neu erzeugt werden, beispielsweise mit dem Regenerate-Thumbnails-Plugin.

Nun aber zu der Funktion für den Galerie-Header:

/**
 * Displays the header of a gallery.
 * If there are $images, the function displays the title with an image.
 * If not, only the title is displayed.
 *
 * @param $heading, $images, $size
 *
 * @return string Formatted output in HTML
 */
function bornholm_gallery_header( $heading, $images, $size, $post ) {
    if ( $images ) {
        bornholm_gallery_title( $heading, $images, $size, $post );
    } else {
        bornholm_post_title( $heading, $post );
    }
}

Hier müssen wir wieder testen, ob in der $images-Variable überhaupt Bilder enthalten sind oder nicht. Wenn wir Bilder haben, rufen wir die bornholm_gallery_title()-Funktion auf und geben die bekannten Parameter weiter. Gibt es keine Bilder, wird der Beitragstitel mit der bornholm_post_title()-Funktion ausgegeben, die wir im Teil mit der content.php besprochen haben.

Die bornholm_gallery_title()-Funktion sieht folgendermaßen aus:

/**
 * Displays the title of a gallery with an image.
 *
 * @param $heading, $images, $size
 *
 * @return string Formatted output in HTML
 */
function bornholm_gallery_title( $heading, $images, $size, $post ) {
    if ( $size != 'bornholm_large_gallery_image_for_single_view' ) { ?>
        <a href="<?php echo esc_url( get_permalink( $post->ID ) ); ?>">
    <?php }
    if ( ! $heading == '' ) {
        echo '<' . $heading . ' class="entry-title gallery-title">';
        echo esc_html( $post->post_title );
        echo '</' . $heading . '>';
    }
    bornholm_gallery_featured_image( $size, $images, $post );
    if ( $size != 'bornholm_large_gallery_image_for_single_view' ) { ?>
        </a>
    <?php }
}

Wir prüfen zuerst, ob die Größe des Bildes der entspricht, die für die Einzelansicht genutzt wird. Ist das nicht der Fall, geben wir einen Link zu dem Beitrag aus. Anschließend setzen wir das Überschriften-Element zusammen und geben darin den Titel des Beitrags aus. Um das Bild anzuzeigen, rufen wir die bornholm_gallery_featured_image()-Funktion auf, an die wir die Größe des Bildes, die Variable mit den Bildern und das Post-Objekt übergeben.

/**
 * Displays the featured image of a gallery
 *
 * @param $size, $images
 *
 * @return string Formatted output in HTML
 */
function bornholm_gallery_featured_image( $size, $images, $post ) {
    $image         = array_shift( $images );
    $image_img_tag = wp_get_attachment_image( $image->ID, $size ); ?>
    <figure class="gallery-thumb clearfix">
        <?php if ( has_post_thumbnail( $post->ID ) ) {
            echo get_the_post_thumbnail( $post->ID, $size );
        } else {
            echo $image_img_tag;
        } ?>
    </figure>
<?php
}

Da wir nur das erste Bild benötigen, speichern wir den ersten Eintrag des $images-Arrays in der $image-Varible. Im nächsten Schritt holen wir uns das img-Element dieses ersten Bildes durch den Aufruf der wp_get_attachment_image()-Funktion. Neben der ID des Bildes muss noch die Größe übergeben werden, in der das Bild ausgegeben werden soll.

Um dem Beitragsautoren die Möglichkeit zu geben, im Header ein anderes Bild als das erste Galerie-Bild anzuzeigen, prüfen wir innerhalb des figure-Elements zuerst, ob ein Beitragsbild gesetzt ist und geben es aus. Auch hier übergeben wir als zweiten Parameter an die get_the_post_thumbnail()-Funktion wieder unsere eigene Bildgröße. Wenn kein Beitragsbild festgelegt ist, geben wir das Ergebnis des wp_get_attachment_image()-Aufrufs aus.

Damit haben wir den Header in der single.php abgeschlossen und können uns dem nächsten Teil widmen:

    <div class="entry-content">
        <?php the_content();
        bornholm_paginated_posts_navigation(); ?>
    </div>
    <footer class="entry-meta">
        <?php bornholm_footer_meta(); ?>
    </footer>
</article><!-- #post-<?php the_ID(); ?> -->

Wir geben mit der the_content()-Funktion den Inhalt des Beitrags aus und rufen anschließend die Funktion auf, die die Pagination von Beiträgen mit dem <--nextpage-->-Kommentar ermöglicht. Diese Funktion kommt wieder in die functions.php und sieht so aus:

/**
 * Displays navigation for paginated posts
 *
 * @return string Formatted output in HTML.
 */
function bornholm_paginated_posts_navigation() {
    wp_link_pages( array(
        'before'           => '<ul class="page-link">',
        'after'            => '</ul>',
        'link_before'      => '<li>',
        'link_after'       => '</li>',
    ) );
}

Mit der wp_link_pages()-Funktion kann in WordPress eine Pagination ausgegeben werden. Als Parameter übergeben wir die Code-Schnipsel, die vor und hinter der Pagination auftauchen sowie die Teile, die jeden Link umschließen. Die bornholm_footer_meta()-Funktion haben wir bereits im fünften Teil der Reihe besprochen.

Im nächsten Code-Teil geben wir, falls es sich um eine Galerie handelt, eine Sidebar aus:

<?php if ( $format == 'gallery' ) {
    get_sidebar( 'gallery' );
}

Die entsprechende sidebar-gallery.php legen wir erst mal nur an – die werden wir in einem späteren Teil besprechen. Der letzte Teil der single.php sieht folgendermaßen aus:

            comments_template( '', true );
        } ?>
    </main>
<?php if ( $format == 'gallery' ) {
} else {
    get_sidebar();
}
get_footer();

Mit der comments_template()-Funktion lässt sich der Kommentarbereich einbinden. Mit dem ersten Parameter kann ein alternativer Pfad zu der Datei übergeben werden, die die Kommentare handhabt. Der zweite Parameter ermöglicht die Trennung der verschiedenen Kommentar-Typen. Die Standard-Datei für Kommentare in einem Theme ist die comments.php. Wenn nicht vorhanden, wird die von dem Standard-Theme geladen. Wir werden diese Datei erst mal nicht anlegen und uns darum ebenfalls in einem späteren Teil kümmern.

Wenn der Beitrag nicht vom Typ gallery ist, wird vor dem Footer noch die normale Sidebar eingebunden.

Der Theme-Code auf GitHub

Schon fast obligatorisch am Ende der Hinweis, dass ihr den Theme-Code auf GitHub finden könnt. Der Stand nach diesem Teil ist in Tag „v0.7“ festgehalten.

Die weiteren Teile unserer WordPress-Reihe:

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

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

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung