Das eigene WordPress-Theme erstellen – #14: Einzelansicht einer Seite und das 404-Template

In dieser Artikelreihe geht es darum, ein WordPress-Theme zu erstellen – von Grund auf. Teil 14 beschäftigt sich mit der Einzelansicht einer Seite sowie dem Template, das bei einem 404-Fehler aufgerufen wird.

Von den Standard-Dateien fehlen in unserem Theme noch die page.php und 404.php. Erstere wird für die Anzeige einer Seite genutzt und sieht folgendermaßen aus.

<?php get_header(); ?>
    <main role="main">
        <?php
        while ( have_posts() ) {
            the_post(); ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <header class="entry-header">
                    <?php bornholm_the_post_header( 'h1', $post ) ?>
                </header>
                <div class="entry-content">
                    <?php the_content();
                    bornholm_paginated_posts_navigation(); ?>
                </div>
            </article>
        <?php } ?>
    </main>
<?php get_sidebar();
get_footer();
Code-Sprache: JavaScript (javascript)

Die Datei gleicht einer Mischung aus index.php und single.php. Der einzige Unterschied ist, dass wir keine Metadaten ausgeben, da bei einer Seite wie dem Impressum meist nicht relevant ist, welcher Nutzer sie wann erstellt hat.

Mit der 404.php-Datei kann ein Template festgelegt werden, das bei 404-Fehlern angezeigt wird – also dann, wenn eine Seite nicht gefunden werden konnte.

<?php get_header(); ?>
    <main role="main">
        <article id="post-0" class="post no-results not-found">
            <header class="entry-header">
                <h1 class="entry-title"><?php _e( 'Nothing Found', 'bornholm' ); ?></h1>
            </header>
            <div class="entry-content">
                <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'bornholm' ); ?></p>
                <?php get_search_form(); ?>
            </div>
        </article>
    </main>
<?php get_sidebar();
get_footer();
Code-Sprache: HTML, XML (xml)

In diesem Fall möchten wir einen kleinen Hinweis ausgeben um dem Nutzer mitzuteilen, was Sache ist. Darunter soll das Suchformular eingebunden werden, damit der Nutzer sein Glück erneut versuchen kann. Das lässt sich ganz einfach mit der get_search_form()-Funktion einbinden. Der Rest des Codes ist auch hier wieder bereits aus älteren Teilen der Serie bekannt.

Wenn ich den Überblick behalten habe, müssten nun alle wichtigen Dateien erstellt worden sein. Jetzt fehlen uns noch die alternative Startseite, die die ersten Galerien aus jeder Kategorie anzeigt sowie die Portfolio-Seite, die alle Arbeiten ausgibt. Darüber hinaus werden wir noch den Customizer benutzen, um ein paar kleine Einstellungen zu realisieren, mit denen der Nutzer das Theme anpassen kann.

Der Code

Wie immer findet ihr den Code zum Theme auf GitHub. Den aktuellen Stand nach Teil 14 gibt es beim Tag „v0.12“.

Die weiteren Teile meiner WordPress-Reihe:

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

Der Code

Schreibe einen Kommentar Antworten abbrechen