Das eigene WordPress-Theme erstellen – #19: Die Customizer-Einstellungen im Theme anwenden

In dieser Artikelreihe geht es darum, ein WordPress-Theme zu erstellen – von Grund auf. Der 19. Teil setzt die Auswirkungen der Customizer-Einstellungen im Theme um.

Im letzten Teil haben wir die Optionen in den Customizer eingefügt, allerdings passiert bei einer Veränderung der Werte nicht besonders viel. Darum müssen wir die Werte nun im Theme nutzen, um die Einstellungen auch sichtbar zu machen. Die Werte aus dem Customizer lassen sich mit der get_theme_mod()-Funktion ermitteln, der die ID von der Einstellung übergeben wird, deren Wert gesucht ist – optional als zweiter Parameter lässt sich ein Standard-Wert angeben. Die ID ist immer der erste Parameter, den wir im letzten Teil an die add_setting()-Methode übergeben haben.

Anzahl der Galerien aus derselben Kategorie in Galerie-Einzelansicht

Bisher legen wir in der sidebar-gallery.php die Anzahl der zu zeigenden Galerien mit der folgenden Zeile fest:

$number_of_galleries = 3;
Code-Sprache: PHP (php)

Diese Zeile wird ersetzt, damit in $number_of_galleries der korrekte Wert aus dem Customizer gespeichert wird:

$number_of_galleries = get_theme_mod( 'number_of_galleries_from_same_category_on_single_gallery_page', 3 );
Code-Sprache: PHP (php)

Als ersten Parameter übergeben wir an get_theme_mod() wie besprochen die ID der Einstellung und in diesem Fall als Standard-Wert 3. Um die weiteren Galerien nur anzuzeigen, wenn die Zahl größer als 0 ist, wird der weitere Code ein wenig angepasst:

if ( $number_of_galleries > 0 ) {
    $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 );
    }
}
Code-Sprache: PHP (php)

Mit Ausnahme der if-Bedingung ist der Code bereits aus Teil 10 bekannt. Damit wäre bereits die erste Anpassung vorgenommen und die erste Customizer-Einstellung funktionstüchtig gemacht.

Galerie-Titel auf alternativer Startseite, Portfolio-Seite und Einzelansicht verstecken

Der Nutzer hat durch Checkboxen die Möglichkeit, Titel von Galerie-Vorschauen auf der alternativen Startseite, der Portfolio-Seite und in der Einzelansicht einer Galerie zu verstecken. Diese drei Einstellungen werden in der Funktion bornholm_alternative_front_page_gallery_teaser() umgesetzt, die ebenfalls im 10. Teil besprochen wurde. Hier hätte übrigens im Nachhinein die Funktion besser allgemeiner benannt werden können.

Die Funktion muss für die Umsetzung ein bisschen erweitert werden, der aktualisierte Code innerhalb des article-Elements sieht so aus:

<?php $images_child = bornholm_get_gallery_images( $post->ID );
$hide_gallery_titles_on_alternative_front_page = get_theme_mod( 'hide_gallery_titles_on_alternative_front_page' );
$hide_gallery_titles_for_galleries_from_same_category = get_theme_mod( 'hide_gallery_titles_for_galleries_from_same_category' );
$hide_gallery_titles_on_portfolio_page = get_theme_mod( 'hide_gallery_titles_on_portfolio_page' );
$page_template = basename( get_page_template( $post->ID ) );
if ( ( $hide_gallery_titles_on_alternative_front_page == 1 && $page_template == 'alternative-front-page.php' ) ||
    ( $hide_gallery_titles_for_galleries_from_same_category == 1 && get_post_format() == 'gallery' && is_single() ) ||
    $hide_gallery_titles_on_portfolio_page == 1 && $page_template == 'portfolio-page.php' ) {
    bornholm_gallery_header( '', $images_child, 'thumbnail', $post );
} else {
    bornholm_gallery_header( 'h3', $images_child, 'thumbnail', $post );
} ?>
Code-Sprache: PHP (php)

Nachdem die Bilder ermittelt worden sind, wird für jede der drei Einstellungen der aktuelle Wert aus dem Customizer ermittelt – dafür kommt wieder get_theme_mod() zum Einsatz. Über die Nutzung von basename( get_page_template( $post->ID ) ) gelangen wir an den Dateinamen des gerade angezeigten Seiten-Templates.

Nun muss für alle drei Fälle geprüft werden, ob die Option im Customizer angehakt ist und das gerade angezeigte Seiten-Template dem entspricht, für das die Option gedacht ist. Bei der Option für die Einzelansicht der Galerien wird mit get_post_format() == 'gallery' geprüft, ob der Beitrag vom Typ gallery ist und mit is_single(), ob es sich um eine Einzelansicht handelt.

Wenn eine dieser Kombinationen wahr ist, wird der Header ohne Überschrift ausgegeben, indem für die Heading-Ebene ein leerer String übergeben wird. Wenn keine der Bedingungen wahr ist, wird der Galerie-Teaser mit Überschrift angezeigt.

Den Titel in den Galerie-Widgets verbergen

Zusätzlich zu den eben besprochenen Optionen kann der Nutzer auch für die zwei Widgets die Anzeige des Titels deaktivieren. Dafür müssen Änderungen in den beiden Widget-Dateien innerhalb des inc-Verzeichnisses vorgenommen werden – wir beginnen mit der class-featured-galleries.php, wobei folgender Teil angepasst werden muss:

<div>
    <?php bornholm_gallery_header( 'h4', $images, 'thumbnail', $post ); ?>
</div>
Code-Sprache: HTML, XML (xml)

Die angepasste Version sieht wie folgt aus:

$hide_gallery_titles_on_featured_galleries_widget = get_theme_mod( 'hide_gallery_titles_on_featured_galleries_widget' ); ?>
<div>
    <?php if ( $hide_gallery_titles_on_featured_galleries_widget == 1 ) {
        bornholm_gallery_header( '', $images, 'thumbnail', $post );
    } else {
        bornholm_gallery_header( 'h4', $images, 'thumbnail', $post );
    } ?>
</div>
Code-Sprache: PHP (php)

Zuerst wird erneut der entsprechende Customizer-Wert ermittelt. Innerhalb des divs wird dann geprüft, ob die Checkbox zum Verstecken der Titel angehakt ist, also den Wert 1 hat. In diesem Fall wird als Überschriftenebene wie aus dem vorangegangenen Fall bekannt ein leerer String übergeben, andernfalls h4, um den Titel anzuzeigen.

Die Anpassung in der class-recent-galleries.php läuft entsprechend ab – folgende Stelle muss verändert werden:

<div>
    <?php bornholm_gallery_header( 'h4', $images, 'thumbnail', $post ); ?>
</div>
Code-Sprache: PHP (php)

Und das ist die angepasste Version:

$hide_gallery_titles_on_recent_galleries_widget = get_theme_mod( 'hide_gallery_titles_on_recent_galleries_widget' ); ?>
<div>
    <?php if ( $hide_gallery_titles_on_recent_galleries_widget == 1 ) {
        bornholm_gallery_header( '', $images, 'thumbnail', $post );
    } else {
        bornholm_gallery_header( 'h4', $images, 'thumbnail', $post );
    } ?>
</div>
Code-Sprache: PHP (php)

Die Vorgehensweise ist identisch mit der eben erläuterten und unterscheidet sich lediglich in dem Variablennamen und der ID, die an get_theme_mod() übergeben wird.

Anzahl der kleinen Vorschaubilder in der Blog-Übersicht

In der Blog-Übersicht werden für jeden Beitrag mit dem Post-Format „Galerie“ unter einem großen Vorschaubild zwei kleine dargestellt. Diese Anzahl kann der Nutzer im Customizer anpassen und durch Eingabe von 0 die kleinen Bilder komplett entfernen. Damit die Änderung auch angezeigt wird, muss in der content-gallery.php folgende Zeile angepasst werden:

$number_of_small_images = 2;
Code-Sprache: PHP (php)

Wir ersetzen sie mit dem folgenden Code-Schnipsel:

$number_of_small_images = get_theme_mod( 'number_of_small_images_from_gallery_in_blog_view', 2 );
Code-Sprache: PHP (php)

Hier ist nichts Überraschendes zu sehen: Mit get_theme_mod() holen wir uns den Wert und geben als Standard 2 an. Der Rest der Datei kann unberührt bleiben.

Kategorie-Hierarchie auf der alternativen Startseite

Bisher werden die Beiträge auf der alternativen Startseite immer hierarchisch nach ihren Kategorien angezeigt. Um das mit der Option im Customizer zu verbinden, muss folgender Teil in der alternative-front-page.php angepasst werden:

$args = array(
    'orderby' => 'name',
    'parent'  => 0
);
$show_child_category_hierarchy = true;
Code-Sprache: PHP (php)

Um eine hierarchische Anzeige zu verhindern, wird weder der parent-Schlüssel in das Array eingefügt, das die Kategorien ermittelt, noch $show_child_category_hierarchy mit true gefüllt. Der angepasste Teil sieht wie folgt aus:

$galleries_on_alternative_front_page = get_theme_mod( 'hierarchy_of_gallery_on_alternative_front_page' );
if ( $galleries_on_alternative_front_page == 0 ) {
    $args = array(
        'orderby' => 'name',
    );
    $show_child_category_hierarchy = false;
} else {
    $args = array(
        'orderby' => 'name',
        'parent'  => 0
    );
    $show_child_category_hierarchy = true;
}
Code-Sprache: PHP (php)

Nachdem der Wert aus dem Customizer ausgelesen worden ist, wird überprüft, ob die Checkbox nicht angehakt ist. Ist das der Fall, wird dem Argument-Array nur der Schlüssel orderby übergeben und der Wert für $show_child_category_hierarchy auf false gesetzt. Ist die Checkbox angehakt, wird das bereits bekannte Array genutzt.

Anzahl der Galerien pro Kategorie auf der alternativen Startseite

Bisher werden pro Kategorie drei Galerien angezeigt, bevor der Link auf die Kategorie-Übersicht ausgegeben wird. Zuständig dafür ist diese Zeile aus der alternative-front-page.php:

$number_of_galleries = 3;
Code-Sprache: PHP (php)

Diese Zeile ersetzen wir mit der folgenden, um die Einstellung aus dem Customizer zu verwenden:

$number_of_galleries = get_theme_mod( 'number_of_galleries_on_alternative_front_page', 3 );
Code-Sprache: PHP (php)

Darstellung der Galerien auf der Portfolio-Seite

Für die Portfolio-Seite kann der Nutzer neben der ungruppierten Anzeige wählen, ob die Galerien nach Kategorien oder nach Kategorien inklusive ihrer Hierarchie gruppiert sind. Es kommt also lediglich der Teil dazu, der das Ergebnis der Anpassung in der alternative-front-page.php war. Der zu verändernde Teil aus der portfolio-page.php ist folgender:

$args = array(
    'posts_per_page' => '-1',
    'tax_query'      => array(
        array(
            'taxonomy' => 'post_format',
            'field'    => 'slug',
            'terms'    => 'post-format-gallery'
        )
    )
);
Code-Sprache: PHP (php)

Wie der Teil nach der Anpassung aussieht, ist im nächsten Code-Block zu sehen:

$galleries_on_portfolio_page = get_theme_mod( 'galleries_on_portfolio_page' );
if ( $galleries_on_portfolio_page == 'portfolio_page_grouped_by_categories' || $galleries_on_portfolio_page == 'portfolio_page_grouped_by_categories_with_hierarchy' ) {
    if ( $galleries_on_portfolio_page == 'portfolio_page_grouped_by_categories' ) {
        $args = array(
            'orderby' => 'name',
        );
        $show_child_category_hierarchy = false;
    } else {
        $args = array(
            'orderby' => 'name',
            'parent'  => 0
        );
        $show_child_category_hierarchy = true;
    }
    $categories          = get_categories( $args );
    $exclude_id          = "";
    $number_of_galleries = "";
    foreach ( $categories as $cat ) {
        $title = $cat->name;
        bornholm_get_galleries_from_category( $cat, $exclude_id, $number_of_galleries, 'h2', $title, $show_child_category_hierarchy );
    }
} else {
    $args = array(
        'posts_per_page' => '-1',
        'tax_query'      => array(
        array(
            'taxonomy' => 'post_format',
            'field'    => 'slug',
            'terms'    => 'post-format-gallery'
        )
    )
);
Code-Sprache: PHP (php)

Das sieht auf den ersten Blick viel aus, ist aber bereits alles bekannt. Nachdem der Wert des Radio-Buttons aus dem Customizer geholt wurde, wird geprüft, ob die Galerien gruppiert oder gruppiert und hierarchisch angezeigt werden sollen. Ist das der Fall, wird dieselbe Fallunterscheidung für das Argument-Array vorgenommen, wie im Code-Beispiel aus der alternative-front-page.php. Auch die Vorbereitung der Ausgabe entspricht dem bereits behandelten Code dieser Datei, nur dass als Anzahl ein leerer String angegeben wird, damit unendlich viele pro Kategorie ausgegeben werden können.

Sollen die Galerien nicht gruppiert angezeigt werden, wird einfach der Code ausgeführt, der vorher auch schon Teil der Datei war.

Textfarbe des Headers

Eine Standard-Option im Customizer ist die Anpassung der Header-Farbe. Die muss jedes Theme selbst umsetzen, da sich das HTML-Markup, das durch CSS angesprochen werden muss, immer unterscheidet. Dafür muss folgende Funktion in die customizer.php eingefügt werden:

function bornholm_customize_css() {
    if ( get_theme_mod( 'header_textcolor' ) ) { ?>
        <style type="text/css">
            .site-title a {
                color: <?php echo '#' . get_theme_mod('header_textcolor'); ?>;
            }
        </style>
    <?php }
}
add_action( 'wp_head', 'bornholm_customize_css' );
Code-Sprache: PHP (php)

Zuerst wird geprüft, ob für die Header-Textfarbe ein Wert eingesetzt wurde. Ist das der Fall, wird ein style-Element geöffnet und darin für den Selektor .site-title a mit get_theme_mod('header_textcolor') der richtige color-Wert eingesetzt. Die Funktion wird an den wp_head-Hook angehängt, worduch das style-Element im Header ausgegeben wird.

Damit wären wir mit diesem Teil auch schon durch. Viel fehlt jetzt nicht mehr, der nächste Teil wird sich voraussichtlich mit Diversem beschäftigen, beispielsweise mit dem Laden der Übersetzung und der Aktualisierung einiger Bildgrößen. Ob das dann bereits der letzte Teil sein wird, weiß ich aber noch nicht 🙂

Den Code auf GitHub

Und zum Schluss der Hinweis, dass es den Code zur Theme-Reihe immer aktuell im GitHub-Repo gibt. Den Stand des Themes nach diesem Teil gibt es bei Tag „v0.17“.
Die weiteren Teile meiner WordPress-Reihe:

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