Das eigene WordPress-Theme erstellen – #15: Die alternative Startseite

In dieser Artikelreihe geht es darum, ein WordPress-Theme zu erstellen – von Grund auf. Im 15. Teil geht es um das Seiten-Template für die alternative Startseite, die einen ersten Ausblick auf die Galerien der Website gibt.

Das Theme soll insgesamt zwei Seiten-Templates erhalten: Eins für die Übersicht über alle Galerien der Seite und eines, das die neuesten Galerien aus den jeweiligen Kategorien anzeigt. Dabei soll über den Customizer später gewählt werden können, ob die Kategorien nach ihren Ober-Unter-Beziehungen hierarchisch angezeigt werden sollen oder nicht. In diesem Teil werden wir uns um das Seiten-Template für die neuesten Galerien pro Kategorie kümmern, die Customizer-Einstellungen aber noch außen vor lassen.

So sieht die alternative Startseite am Ende aus. (Screenshot: Eigene Installation; Bilder: Dennis Brinkmann)

Dafür legen wir die Datei alternative-front-page.php an, die wir mit dem folgenden Inhalt füllen:

<?php
/**
 * Template Name: Alternative front page
 * Description: A Page Template for the alternative front page. It displays a brief overview of the portfolio.
 */
get_header(); ?>
    <main role="main">
        <?php
        $args = array(
            'orderby' => 'name',
            'parent'  => 0
        );
        $show_child_category_hierarchy = true;
        $categories          = get_categories( $args );
        $exclude_id          = "";
        $number_of_galleries = 3;
        foreach ( $categories as $cat ) {
            $title = $cat->name;
            bornholm_get_galleries_from_category( $cat, $exclude_id, $number_of_galleries, 'h2', $title, $show_child_category_hierarchy );
        } ?>
    </main>
<?php get_footer();
Code-Sprache: HTML, XML (xml)

Wichtig am Anfang der Datei ist der PHP-Kommentar mit der Angabe Template Name:. Dieser Name wird dem Nutzer im Backend angezeigt, wenn er für eine Seite ein Seiten-Template wählen will und daran erkennt WordPress, dass es sich bei der Datei um ein Seiten-Template handelt. Nach Einbindung des Headers wird innerhalb des main-Elemente dann ein Argument-Array für get_categories() erstellt. Mit orderby können wir angeben, wie das Ergebnis sortiert werden soll und mit dem Wert 0 für den parent-Schlüssel geben wir an, dass nur Kategorien oberster Ebene gesucht sind – keine Unterkategorien. Anschließend wird festgelegt, dass die Kategorien hierarchisch angezeigt werden sollen – dieser Wert wird später noch mit dem Customizer zu ändern sein.

Mit der get_categories()-Funktion holen wir uns alle Kategorien der obersten Ebene, sortiert nach Namen. Da wir gleich dieselbe Funktion nutzen wie zur Anzeige der weiteren Galerien aus derselben Kategorie auf einer Einzelansicht von Galerien, müssen wir als nächstes angeben, dass wir keine Galerie ausschließen wollen. Als Anzahl der Galerien, die angezeigt werden sollen, legen wir drei fest – auch dieser Wert ist später mit dem Customizer anpassbar. Jetzt durchlaufen wir eine Schleife für jede Kategorie, legen als Titel den Namen der Kategorie fest und rufen bornholm_get_galleries_from_category() auf. Als Parameter übergeben wir die Kategorie, die ID, die wir ausschließen wollen (nämlich keine), die Anzahl der Galerien, die angezeigt werden sollen, die Ebene der Überschrift, den Titel sowie den booleschen Wert, ob die Kategorien hierarchisch angezeigt werden sollen.

Diese Funktion haben wir schon im 10. Teil unserer Reihe besprochen. Neu ist aber, dass $show_child_category_hierarchy den Wert true hat und somit bornholm_get_child_category_galleries() aufgerufen wird. Der entsprechende Teil aus bornholm_get_galleries_from_category() sieht so aus:

if ( $show_child_category_hierarchy ) {
    bornholm_get_child_category_galleries( $cat, $number_of_galleries, $exclude_id, $title, $heading );
} ?>
Code-Sprache: PHP (php)

bornholm_get_child_category_galleries() kommt in die functions.php und ist im nächsten Code-Block abgebildet:

function bornholm_get_child_category_galleries( $cat, $number_of_galleries, $exclude_id, $title, $heading ) {
    $category_children = get_term_children( $cat->term_id, 'category' );
    if ( $category_children ) {
        foreach ( $category_children as $cat_child ) {
            $cat_child            = get_category( $cat_child );
            $child_galleries_args = bornholm_galleries_args( $cat_child, $exclude_id );
            $child_galleries      = get_posts( $child_galleries_args );
            if ( $child_galleries ) {
                $total_child_galleries = count( $child_galleries );
                $gallery_child_counter = 0; ?>
                <div class="gallery-category child">
                    <?php if ( $title != '' ) {
                        $title = $cat_child->name; ?>
                        <<?php echo $heading; ?>><?php echo $title; ?></<?php echo $heading; ?>>
                    <?php }
                    bornholm_loop_galleries_from_category( $child_galleries, $total_child_galleries, $number_of_galleries, $gallery_child_counter, $cat_child ); ?>
                </div>
            <?php }
        }
    }
}
Code-Sprache: JavaScript (javascript)

Zuerst holen wir uns mit der get_term_children()-Funktion die IDs zu den Unterkategorien der aktuellen Kategorie. Dafür übergeben wir die Kategorie-ID und den Typ der gesuchten Taxonomie. Wenn die aktuelle Kategorie untergeordnete Kategorien hat, das Ergebnis des Funktionsaufrufs also nicht leer ist, wird eine Schleife gestartet, in der jede Unterkategorie durchlaufen wird. Zuerst brauchen wir in der Schleife mehr Infos zu der Kategorie und holen uns mit get_category() das Kategorie-Objekt.

Um das Argument-Array zu erhalten, das uns ermöglicht, via get_posts() alle Galerie-Beiträge einer Kategorie auszulesen, wird die schon bekannte Funktion bornholm_galleries_args() aufgerufen. Dieses Array können wir anschließend an get_posts() übergeben, um alle Beiträge vom Typ „Galerie“ zu ermitteln. Wenn wir daraus Ergebnisse zurückbekommen, zählen wir die Galerien mit count() und setzen einen Counter auf 0. Anschließend öffnen wir ein div und geben darin den Titel der Unterkategorie aus. Jetzt müssen wir nur noch die Galerien ausgeben, wofür wir die schon erstellte und besprochene Funktion bornholm_loop_galleries_from_category() nutzen können.

Als Parameter übergeben wir das Array der Galerien, deren Anzahl, die Anzahl, die angezeigt werden soll, den Counter und die Unterkategorie, die gerade durchlaufen wird. Damit hätten wir schon das Seiten-Template fertig, das der Nutzer im Backend jetzt auswählen kann. Im nächsten Teil geht es um das Template für die Ansicht aller Galerien – und danach wird der Customizer thematisiert.

Code auf Github

Den Code des Themes findet ihr im entsprechenden GitHub-Repo. Den aktuellen Stand nach diesem Teil gibt es im Tag „v0.13“.

Die weiteren Teile meiner WordPress-Reihe:

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

Code auf Github

Schreibe einen Kommentar Antworten abbrechen