Das eigene WordPress-Theme erstellen – #10: Die Galerie-Sidebar mit Galerien aus derselben Kategorie

Veröffentlicht am

In dieser Serie geht es darum, ein WordPress-Theme zu erstellen – von Grund auf. Im zehnten Teil beschäftigen wir uns mit der Sidebar, die unter der Einzelansicht einer Galerie angezeigt werden soll.

Im letzten Teil der Reihe haben wir bereits die sidebar-gallery.php angelegt, die dann angezeigt wird, wenn wir uns auf der Einzelansicht einer Galerie befinden:

<?php if ( $format == 'gallery' ) {
    get_sidebar( 'gallery' );
}
Code-Sprache: HTML, XML (xml)
Die Links zu Galerien derselben Kategorie. (Screenshot: eigene WordPress-Installatio; Fotos: Dennis Brinkmann)
Die Links zu Galerien derselben Kategorie. (Screenshot: eigene WordPress-Installatio; Fotos: Dennis Brinkmann)

In dieser Sidebar, die unter den Galerie-Bildern angezeigt wird, möchten wir weitere Galerien aus der Kategorie anzeigen, aus der die aktuell angezeigte Galerie stammt. Darüber hinaus soll gegebenenfalls ein Link auf die Kategorie ausgegeben werden. Wie das aussehen soll, seht ihr in dem Screenshot oben. Zudem binden wir darunter noch eine richtige Sidebar ein, die der Nutzer ganz normal mit Widgets befüllen kann. Später möchten wir ermöglichen, dass der Nutzer im Customizer die Anzahl der Galerien aus derselben Kategorie einstellen und die Anzeige auch deaktivieren kann, indem er eine Null einträgt.

Diesen Teil klammern wir jetzt aber noch aus und die sidebar-gallery.php sieht nach Entfernung dieser Teile so aus:

<aside id="sidebar-gallery" role="sidebar" class="clearfix">
    <div id="sidebar-content">
        <?php $number_of_galleries = 3;
        $category_ids = bornholm_get_the_category_ids( $post->ID );
        $args         = array(
            'orderby' => 'name',
            'include' => $category_ids,
        );
        $categories   = get_categories( $args );
        $exclude_id   = $post->ID;
        foreach ( $categories as $cat ) {
            $title = sprintf( _x( 'More galleries from %1$s', '1 = name of category', 'bornholm' ), $cat->name );
            bornholm_get_galleries_from_category( $cat, $exclude_id, $number_of_galleries, 'h3', $title, false );
        }
        if ( is_active_sidebar( 'sidebar-gallery' ) ) { ?>
            <div class="widgets">
                <?php dynamic_sidebar( 'sidebar-gallery' ); ?>
            </div>
        <?php } ?>
    </div>
</aside>
Code-Sprache: HTML, XML (xml)

Zuerst legen wir die Zahl der Galerien, die später angepasst werden kann, auf drei fest. Im Anschluss benötigen wir die IDs von den Kategorien, die dem Beitrag zugewiesen wurden. Dafür nutzen wir die bornholm_get_the_category_ids()-Funktion und übergeben die ID des Beitrags. Diese Funktion kommt, wie ihr vermutlich bereits erwartet habt, in die functions.php, und sieht folgendermaßen aus:

/**
 * Returns a comma seperated string of category ids of the given post
 *
 * @param $post_id
 *
 * @return string
 */
function bornholm_get_the_category_ids ( $post_id ) {
    $category_ids = get_the_category( $post_id );
    $counter = 0;
    foreach ( $category_ids as $category_id ) {
        if ( $counter == 0 ) {
            $category_ids = $category_id->cat_ID;
        } else {
            $category_ids .= ", $category_id->cat_ID";
        }
        $counter++;
    }
    return $category_ids;
}
Code-Sprache: PHP (php)

Zuerst holen wir uns die Kategorien mit der get_the_category()-Funktion, die ein Array von Objekten zurückgibt – für jede Kategorie ein Objekt. Da wir aber für die weitere Verarbeitung eine kommaseparierte Liste der Kategorien brauchen, müssen wir uns die jetzt zusammenbauen. Dafür setzen wir einen Counter auf 0 und durchlaufen die Kategorie-Objekte in einer foreach-Schleife.

Wenn der Counter den Wert 0 hat, weisen wir der Variable $category_ids die ID des gerade behandelten Kategorie-Objekts zu. Danach erhöhen wir den Counter. Für die eventuellen nachfolgenden Durchläufe fügen wir der Variable mit der ersten ID die weiteren IDs hinzu und stellen der ID ein Komma vor. Wenn alle Kategorie-Objekte durchlaufen sind, geben wir die Liste zurück.

Als nächstes legen wir in der sidebar-gallery.php die Argumente fest, die wir an die get_categories()-Funktion übergeben möchten. Das Ergebnis soll nach dem Namen sortiert sein und nur die Kategorien enthalten, die wir gerade als Liste zusammengesetzt haben. Im Anschluss holen wir uns die Kategorie-Objekte mit get_categories() und legen die ID des aktuell angezeigten Galerie-Beitrags als ID fest, die bei der Anzeige ausgespart werden soll. Wir möchten ja nicht den Beitrag empfehlen, den sich der Besucher gerade ansieht:

$args         = array(
    'orderby' => 'name',
    'include' => $category_ids,
);
$categories   = get_categories( $args );
$exclude_id   = $post->ID;
Code-Sprache: PHP (php)

Ihr fragt euch jetzt vermutlich, warum wir uns zweimal die Kategorien holen – einmal mit get_the_category() und das andere Mal mit get_categories(). Theoretisch könnten wir auch mit dem Ergebnis-Array aus get_the_category() direkt arbeiten, ohne den „Umweg“ über get_categories(). Allerdings haben wir in der get_the_category()-Funktion keine Möglichkeit, das Ergebnis zu sortieren.

Der nächste Schritt ist, die erhaltenen Kategorien zu durchlaufen und jeweils die Galerien auszugeben. Dafür ist in der sidebar-gallery.php dieser Teil verantwortlich:

foreach ( $categories as $cat ) {
    $title = sprintf( _x( 'More galleries from %1$s', '1 = name of category', 'bornholm' ), $cat->name );
    bornholm_get_galleries_from_category( $cat, $exclude_id, $number_of_galleries, 'h3', $title, false );
}
Code-Sprache: PHP (php)

Zuerst legen wir in der foreach-Schleife einen übersetzbaren Titel fest, der über den Galerien einer Kategorie angezeigt werden soll. Danach rufen wir die bornholm_get_galleries_from_category()-Funktion auf und übergeben als Parameter das Kategorie-Objekt des aktuellen Durchlaufs, die ID des Beitrags, der ausgespart werden soll, die Nummer der anzuzeigenden Galerien, die Titel-Hierarchie, den Titel und als letztes einen booleschen Operator, der angibt, ob das Ergebnis hierarchisch angezeigt werden soll. Das benötigen wir später, wenn wir die Funktion für die alternative Startseite einsetzen und Unterkategorien direkt unter der Oberkategorie anzeigen wollen.

Diese Funktion kommt wieder in die functions.php und sieht wie folgt aus:

/**
 * Displays the galleries from one category
 *
 * @param $cat, $exclude_id ,$number_of_galleries, $heading, $title, $show_child_category_hierarchy
 *
 * @return string Formatted output in HTML
 */
function bornholm_get_galleries_from_category ( $cat, $exclude_id, $number_of_galleries, $heading, $title, $show_child_category_hierarchy ) {
    $galleries_args = bornholm_galleries_args( $cat, $exclude_id );
    $galleries      = get_posts( $galleries_args );
    if ( $galleries ) {
        $total_galleries = count( $galleries );
        $gallery_counter = 0; ?>
        <div class="gallery-category clearfix">
            <?php if ( $title != '' ) { ?>
                <<?php echo $heading; ?> class="category-title"><?php echo $title; ?></<?php echo $heading; ?>>
            <?php } ?>
            <?php bornholm_loop_galleries_from_category( $galleries, $total_galleries, $number_of_galleries, $gallery_counter, $cat );
            if ( $show_child_category_hierarchy ) {
                bornholm_get_child_category_galleries( $cat, $number_of_galleries, $exclude_id, $title, $heading );
            }?>
        </div>
    <?php }
}
Code-Sprache: JavaScript (javascript)

Zuerst speichern wir die Argumente, anhand derer wir anschließend die Beiträge abrufen, in der $galleries_args-Variable. Das ist die Funktion bornholm_galleries_args():

/**
 * Returns array with galleries (post format gallery) from given category
 *
 * @param $cat, $exclude_id
 *
 * @return array
 */
function bornholm_galleries_args( $cat, $exclude_id ){
    $args = array(
        'category__in' => $cat->cat_ID,
        'exclude'       => "$exclude_id", // for the sidebar on a single gallery
        'tax_query'    => array(
            'relation' => 'AND',
            array(
                'taxonomy' => 'category',
                'field'    => 'slug',
                'terms'    => $cat->slug
            ),
            array(
                'taxonomy' => 'post_format',
                'field'    => 'slug',
                'terms'    => 'post-format-gallery'
            )
        )
    );
    return $args;
}
Code-Sprache: PHP (php)

Wir möchten nur Beiträge, die der Kategorie zugewiesen sind, die wir mit $cat übergeben haben. Zudem soll der Beitrag, der gerade angezeigt wird, ausgeschlossen werden. Dafür übergeben wir dessen ID an den exclude-Schlüssel. Nun wird es interessant: Wir möchten Beiträge, die zugleich der Kategorie angehören, die wir gerade behandeln und die vom Post-Format „Galerie“ sind. Dafür nutzen wir den tax_query-Schlüssel und verbinden die beiden Bedingungen mit dem logischen AND-Operator. Wir prüfen in beiden Fällen das Feld slug, das im Fall der Kategorie-Prüfung mit dem Slug der aktuellen Kategorie und beim Post-Format mit post-format-gallery übereinstimmen muss.

Zurück in der bornholm_get_galleries_from_category()-Funktion übergeben wir diese Parameter an get_posts(). Wenn wir hier ein Ergebnis erhalten, es also weitere Galerien in dieser Kategorie gibt, dann möchten wir sie ausgeben.

if ( $galleries ) {
    $total_galleries = count( $galleries );
    $gallery_counter = 0; ?>
    <div class="gallery-category clearfix">
        <?php if ( $title != '' ) { ?>
            <<?php echo $heading; ?> class="category-title"><?php echo $title; ?></<?php echo $heading; ?>>
        <?php } ?>
        <?php bornholm_loop_galleries_from_category( $galleries, $total_galleries, $number_of_galleries, $gallery_counter, $cat );
        if ( $show_child_category_hierarchy ) {
            bornholm_get_child_category_galleries( $cat, $number_of_galleries, $exclude_id, $title, $heading );
        }?>
    </div>
<?php }
Code-Sprache: JavaScript (javascript)

Zuerst zählen wir die gefundenen Galerien und setzen einen Counter auf 0 – wir möchten ja nur eine bestimmte Anzahl Galerien ausgeben. Im nächsten Schritt geben wir den Titel aus, falls er festgelegt wurde. Danach rufen wir die bornholm_loop_galleries_from_category()-Funktion auf und übergeben die Galerien, die Anzahl derselben, die Anzahl, die ausgegeben werden soll, den Galerie-Counter und das Kategorie-Objekt. Da wir an dieser Stelle keine hierarchische Darstellung möchten und beim aktuellen Stand des Themes diese Bedingung nie wahr sein wird, lassen wir die bornholm_get_child_category_galleries() in diesem Teil komplett außen vor.

Die bornholm_loop_galleries_from_category()-Funktion kommt gewohnheitsgemäß ebenfalls in die functions.php und sieht folgendermaßen aus:

/**
 * Loops through the galleries of the given category and calls the functions for displaying the teaser
 * of the galleries and the “Display all” link
 *
 * @param $galleries, $total_galleries, $number_of_galleries, $gallery_counter, $cat
 *
 * @return string Formatted output in HTML
 */
function bornholm_loop_galleries_from_category( $galleries, $total_galleries, $number_of_galleries, $gallery_counter, $cat ) {
    foreach ( $galleries as $post ) {
        if ( $number_of_galleries > 0 ) {
            if ( $total_galleries > $number_of_galleries ) {
                $gallery_counter ++;
                if ( $gallery_counter > $number_of_galleries ) {
                    bornholm_alternative_front_page_more_link( $cat );
                    break;
                }
            }
        }
        bornholm_alternative_front_page_gallery_teaser( $post );
    }
}
Code-Sprache: PHP (php)

Zunächst starten wir eine foreach-Schleife und durchlaufen damit die Galerien. Im Anschluss prüfen wir, ob überhaupt Galerien ausgegeben werden sollen. Wenn das der Fall ist, prüfen wir, ob die Anzahl der vorhandenen Galerien größer ist als die, die angezeigt werden sollen und erhöhen in dem Fall den Galerie-Counter. Wenn dieser Counter größer ist als die Anzahl der Galerien, die angezeigt werden sollen, geben wir mit der Funktion bornholm_alternative_front_page_more_link() einen Link zu der Kategorie aus und brechen die foreach-Schleife ab. Solange das nicht passiert, geben wir bei jedem Durchlauf mit der bornholm_alternative_front_page_gallery_teaser()-Funktion das Bild und den Titel der Galerie aus.

Die Funktion für den Weiterlesen-Link sieht so aus und wird, wie der Name verrät, auch für die alternative Startseite gebraucht:

/**
 * Displays the “Display all” link, if there are too many galleries in one category
 *
 * @param $cat
 *
 * @return string Formatted output in HTML
 */
function bornholm_alternative_front_page_more_link( $cat ) {
    $text = _x( 'Display all galleries from “%s”', 's = category title', 'bornholm' );
    $more = sprintf( $text, esc_html( $cat->name ) ); ?>
    <article class="read-more">
        <a href="<?php echo esc_url( get_category_link( $cat->cat_ID ) ) ?>"><?php echo $more ?></a>
    </article>
<?php }
Code-Sprache: JavaScript (javascript)

Die ersten zwei Zeilen erinnern an die Funktion für den normalen Weiterlesen-Link: Wir erstellen einen übersetzbaren String, der im Englischen beispielsweise so aussieht: Display all galleries from “Sports”. Danach geben wir diesen als Link innerhalb eines article-Elements aus.

Die Funktion zur Anzeige der Galerien sieht folgendermaßen aus. Wie die gallery-sidebar.php ist auch diese Funktion noch nicht im Endzustand, da wir dem Nutzer ermöglichen möchten, den Titel der Galerie zu verstecken:

/**
 * Displays a thumbnail from a gallery
 *
 * @param $post
 */
function bornholm_alternative_front_page_gallery_teaser ( $post ) { ?>
    <article>
        <?php $images_child = bornholm_get_gallery_images( $post->ID );
            bornholm_gallery_header( 'h3', $images_child, 'thumbnail', $post );
        } ?>
    </article>
<?php }
Code-Sprache: PHP (php)

Innerhalb des article-Elements holen wir uns auf altbekannte Weise die Bilder des aktuellen Beitrags aus der foreach-Schleife. Auch die Ausgabe des Galerie-Headers durch die bornholm_gallery_header()-Funktion war Teil des letzten Artikels – der Unterschied ist hier lediglich die andere Überschriften-Ebene und die Bildgröße thumbnail.

Nach diesem längeren Ausflug in die functions.php können wir nun zurück in die sidebar-gallery.php. Nach der Kategorie-Schleife kommt noch dieser Teil, der gegebenenfalls die Sidebar aus dem Backend ausgibt:

        if ( is_active_sidebar( 'sidebar-gallery' ) ) { ?>
            <div class="widgets">
                <?php dynamic_sidebar( 'sidebar-gallery' ); ?>
            </div>
        <?php } ?>
    </div>
</aside>
Code-Sprache: HTML, XML (xml)

Diese Sidebar haben wir im achten Teil noch nicht registriert – das holen wir jetzt noch schnell nach. In die bornholm_sidebars()-Funktion aus der functions.php fügen wir folgenden Teil ein:

register_sidebar( array(
    'name'          => __( 'Gallery Sidebar', 'bornholm' ),
    'id'            => 'sidebar-gallery',
    'description'   => __( 'This sidebar is shown on single gallery pages', 'bornholm' ),
    'before_widget' => '<div class="widget clearfix %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>'
) );
Code-Sprache: PHP (php)

Damit hätten wir diesen Part geschafft. Unter Galerie-Beiträgen sollten jetzt die weiteren Galerien aus der Kategorie angezeigt werden – gegebenenfalls mit einem Link auf die Kategorie-Übersicht.

Der Code auf GitHub

Wie immer findet ihr den Code des Themes auf GitHub. Der Stand nach diesem Teil ist festgehalten in dem Tag „v0.8“.

Die weiteren Teile meiner WordPress-Reihe:

Dieser Beitrag ist eine Übernahme meines Beitrags für t3n.de.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert