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">© <?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.
- content-none.php
- content.php
- footer.php
- functions.php
- header.php
- head.php
- index.php
- sidebar-footer.php
- sidebar.php
- 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.