Ein eigenes WordPress Theme erstellen 4 – Das Theme Übersichtlich gestalten

Wie in dem ersten Artikel dieser Tutorial-Reihe schon erwähnt, könnten wir weiterhin nur mit einer Themedatei – index.php – unser WordPress Theme realisieren. Da wir doch noch einiges zu diesem Theme hinzufügen, empfiehlt es sich aber aufgrund der Übersichtlichkeit das Theme auf mehrere Dateien aufzuteilen.

WordPress stellt uns für diesen Zweck auch schon einige Tags zur Verfügung – get_header() - get_sidebar() - get_footer(). Beginnen wir also unsere index.php Datei zu splitten und legen dabei fürs erste folgende Dateien an. In diesem Zuge werden wir auch noch ID’s, Klassen und das ROLE-Attribute hinzufügen. Beim letzteren könnte man sich mittlerweile komplett austoben – http://www.w3.org/TR/wai-aria/roles.

  • header.php
  • sidebar.php
  • footer.php

Wir beginnen mit der header.php

In die header.php packen wir den Kopfteil der Webseite. In Bezug auf unsere bisher angelegte index.php wäre das der Bereich bis einschließlich </header>. Diesen Codeteil entfernen wir von der index.php und fügen ihn in unsere frisch angelegte header.php ein.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>" />
        <title><?php wp_title(); ?></title>
        <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

        <?php wp_head(); ?>

    </head>

    <body <?php body_class(); ?>>
        <header>
            <hgroup>
                <h1><a href="<?php bloginfo( 'url' ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
                <h2><?php bloginfo( 'description' ); ?></h2>
            </hgroup>
                <?php
                // Wenn ein Menü angelegt wurde soll es geladen werden
                if( has_nav_menu( 'main_menu' ) ) {
                ?>
                <nav>
                <?php
                    wp_nav_menu( array(
                        'theme_location' => 'main_menu', // legt fest welches Menü geladen wird
                        'container'      => '', // den div Kontainer entfernen
                    ) );
                ?>
                </nav>
                <?php
                }
                ?>
        </header>

Wir können diesen Bereich auch noch einmal zusätzlich splitten, indem wir uns zB noch eine weitere Datei anlegen – head.php. In die head.php können wir zB den Bereich bis einschließlich </head> einfügen. Es ergäbe sich dadurch folgende Änderung für unsere beiden Dateien head.php und header.php.

head.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>" />
        <title><?php wp_title(); ?></title>
        <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

        <?php wp_head(); ?>

    </head>

header.php

Damit die head.php aber auch mitgeladen wird, müssen wir zusätzlich die header.php um folgende Zeile am Beginn der Datei erweitern.

<?php get_template_part( 'head' ); ?>

Der gesamte Code für die header.php wäre nun folgender.

<?php get_template_part( 'head' ); ?>

<body <?php body_class(); ?>>
    <header id="mainheader" role="banner">
        <hgroup id="branding">
            <h1><a href="<?php bloginfo( 'url' ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
            <h2><?php bloginfo( 'description' ); ?></h2>
        </hgroup>
        <?php
        // Wenn ein Menü angelegt wurde soll es geladen werden
        if( has_nav_menu( 'main_menu' ) ) {
        ?>
        <nav id="prinav" role="navigation">
        <?php
            wp_nav_menu( array(
                'theme_location' => 'main_menu', // legt fest welches Menü geladen wird
                'container'      => '', // den div Kontainer entfernen
            ) );
        ?>
        </nav>
        <?php
        }
        ?>
    </header>

Der Widget-Bereich – sidebar.php

Für unseren Widget-Bereich ist die sidebar.php zuständig. Jedoch haben wir in unserer functions.php zwei Widget-Bereiche angelegt, einen als Seitenleiste und einen für den Fußbereich der Webseite, nämlich im footer. Dadurch das wir zwei unterschiedlichen Bereiche verwenden, benötigen wir auch zwei unterschiedliche Dateien. Wir könnten natürlich, wie im Beispiel von head.php auch, die Funktion get_template_part() nutzen. Wir lösen dies jedoch hier mit einer sidebar.php und einer sidebar-footer.php. Wir könnten den Code-Teil der sidebar-footer.php natürlich auch weiterhin im footer belassen, jedoch hier im Tutorial lösen wir das über diese Datei. Niemand muss ein Theme aufteilen – man kann. Zur Einbindung kommen wir später.

Folgende Code-Teile werden jetzt wieder von der index.php entfernt und in folgende Dateien hinzugefügt.

sidebar.php

<?php
// wenn Widgets zur Seitenleiste hinzugefügt wurden
if( is_active_sidebar( 'sidebar-1' ) ) { ?>
    <aside id="sidebar" role="complementary">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php } ?>

sidebar-footer.php

<?php if( is_active_sidebar( 'sidebar-2' ) ) { ?>
    <aside id="footerwidgets" role="complementary">
        <?php dynamic_sidebar( 'sidebar-2' ); ?>
    </aside>
<?php } ?>

Der Fußbereich der Webseite – footer.php

Den Bereich der index.php ab <footer> bis zum Dateiende entfernen wir von der index.php und fügen ihn in die footer.php Datei ein. Da wir im footer jedoch noch unseren Widgetbereich anzeigen lassen wollen, erweitern wir nun diesen Bereich noch mit get_sidebar( 'footer' ). Hätten wir unsere Datei sidebar-xy.php genannt, müssten wir diese mit get_sidebar( 'xy' ) einbinden. Die footer.php enthält nun folgendes.

footer.php

        <footer id="mainfooter" role="contentinfo">

        <?php // Die Einbindung von sidebar-footer.php
            get_sidebar( 'footer' ); ?>

        <?php if( has_nav_menu( 'footer_menu' ) ) { ?>
            <nav id="secnav" role="navigation">
            <?php
                wp_nav_menu( array(
                    'theme_location' => 'footer_menu',
                    'container'      => '',
                ) );
            ?>
            </nav>
        <?php } ?>

            <p class="credits">&copy; <?php echo date( 'Y' ); ?> | <a href="https://zoechbauer.name">Zöchbauer Manfred</a></p>
        </footer>      

        <?php wp_footer(); ?>

    </body>
</html>

Die Hauptdatei – index.php

WordPress ruft natürlich nicht eine header.php oder footer.php direkt auf. Dazu sind immer noch die Haupttemplate-Dateien wie index.php, single.php etc. zuständig. Wir haben jetzt aber einige Bereiche von der Haupttemplate-Datei index.php entfernt und müssen diese natürlich wieder integrieren um eine funktionierendes Theme zu erhalten. Den header, in welchen wir schon die head.php eingebunden haben, integrieren wir mit get_header(). Auch hier wäre es uns natürlich möglich, je nach belieben, unterschiedliche header einzubinden zB header.php nur für die Hauptseite und header-standard.php für alle anderen Seiten. Machen wir in diesem Tutorial jetzt nicht, aber die Möglichkeit besteht. Der Fantasie sind hierbei keine Grenzen gesetzt.

Unseren Standard-Widget-Bereich haben wir in der sidebar.php ausgeliedert und integrieren ihn mit get_sidebar(). Natürlich darf auch unser Fußbereich – footer – nicht fehlen. Diesen binden wir mit get_footer() ein.

Ausgliedern des Inhaltes im Loop

Auch dem eigentlichen Inhalt der Webseite, nämlich unseren Seiten und Beiträgen widmen wir hier in diesem Tutorial eigene Dateien. Hierzu legen wir nocheinmal zwei Dateien an – content.php und content-none.php. Auch hier entfernen wir wieder die dementsprechenden Bereiche aus der index.php und fügen sie in den Dateien ein. Für unser Theme hier bedeutet das folgendes.

content.php

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> role="article">
    <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
    <?php the_content(); ?>
</article>

content-none.php

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> role="article">
    <p>Es konnte leider nichts passendes gefunden werden.</p>
</article>

index.php

Von der index.php Datei ist mittlerweile aufgrund der Aufteilung nicht mehr viel übrig. Jetzt müssen wir nur noch wieder die Funktion des Themes gewährleisten. Wir müssen natürlich auch jetzt den eigentlichen Inhalt, die content.php und content-none.php, ebenfalls noch integrieren. Das werden wir jetzt wieder, wie bei der head.php, mit der Funktion get_template_part() lösen.

Für die content.php verwenden wir aber nicht, wie es jetzt wahrscheinlich erwartet würde get_template_part( 'content' ), sondern erweitern diesen eintrag noch um get_post_format(). Im weiteren Verlauf dieses Tutorials werden wir auch Post-Formate anlegen, welche dann direkt mit get_post_format() angesprochen werden können. Aber jetzt einmal zu dem Inhalt der index.php.

<?php
// Theme: Zoechbauer Basis Theme

// header.php
get_header();

echo '<main id="content" role="main">';

// WordPress Loop
if ( have_posts() ) { // Beiträge vorhanden
    while ( have_posts() ) {
        the_post();
        // content.php - bei Post-Formaten auch content-image.php, content-aside.php ...
        get_template_part( 'content', get_post_format() );
    }
    comments_template(); // Kommentare
} // Beiträge vorhanden - Ende

else { // Wenn keine Beiträge vorhanden
    // content-none.php
    get_template_part( 'content', 'none' );
} // Wenn keine Beiträge vorhanden - Ende

echo '</main>';

// sidebar.php
get_sidebar();

// footer.php
get_footer();
?>

Unser Theme ist jetzt sinnvoll in mehrere Bereiche aufgeteilt und macht es uns einfacher einzelne Teile des Themes zu bearbeiten. Gerade deswegen, da dieses Tutorial noch nicht zu Ende ist und noch einiges an Code zu den Dateien hinzukommt. Bisher wurden folgende Dateien angelegt und mit Inhalt befüllt.

  1. content-none.php
  2. content.php
  3. footer.php
  4. functions.php
  5. header.php
  6. head.php
  7. index.php
  8. sidebar-footer.php
  9. sidebar.php
  10. style.css

Im nächsten Teil dieser Tutorial-Reihe werden wir uns noch eingehender mit dem Inhalt selbst beschäftigen – content.php.




Bitte beachten Sie, dass dieser Beitrag bereits vor über einem Jahr geschrieben wurde und unter umständen nicht mehr aktuell ist.