Im ersten Teil der Tutorial-Reihe habe ich bereits erwähnt, dass die Dateien index.php und style.css die wichtigsten Dateien des Themes von WordPress sind. Ohne diesen beiden Dateien geht überhaupt nichts. Und darum sehen wir uns auch diese beiden Dateien als erstes an.
Die Datei style.css
Um zu bewirken, dass WordPress das erstellte Theme überhaupt als solches erkennt, wird zwingend die Datei style.css benötigt. Diese Datei muss ausserdem auch noch einige Informationen enthalten. Unter https://codex.wordpress.org/File_Header#Theme_File_Header_Example finden wir ein Beispiel wie diese Informationen auszusehen haben. Anhand dieses Beispiels legen wir uns mal diese Datei an.
/*
Theme Name: Zoechbauer Basis Theme
Theme URI: https://zoechbauer.name
Author: Zöchbauer Manfred
Author URI: http://zoechbauer.name
Description: Das Zoechbauer Basis Theme des Tutorials.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: zoechbauer, basis, theme, tutorial
Text Domain: zoechbauer
*/
/*
Ab hier kann mit dem Styling begonnen werden
*/
body {
background-color: e6e6e6;
}Der Großteil hier ist eigentlich selbsterklärend. Wir vergeben einen Namen für das Theme mit den Angaben über den Ersteller, eine Beschreibung, Versionsnummer, Angaben zur Lizenz, Stichworte bzw. Schlagworte und eine Text Domain, welche für eine eventuelle spätere Übersetzung des Themes in mehrere Sprachen nützlich ist. Das war’s auch schon mal für den Anfang.
Die Datei index.php
Ein HTML-Grundgerüst mit einem Text ala ‚Hallo Welt‘ kennt so gut wie jeder – sicher schon tausendmal gesehen. Zum leichteren Verständnis präsentiere ich jetzt trotzdem wieder so ein Grundgerüst mit einem Artikel und einer Sidebar auf Basis von HTML5.
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="utf-8" />
<title>Zoechbauer Theme Tutorial</title>
<link rel="stylesheet" type="text/css" media="all" href="https://zoechbauer.name/style.css" />
</head>
<body>
<header>
<hgroup>
<h1><a href="https://zoechbauer.name">Zöchbauer</a></h1>
<h2>Der Webseiten Slogan</h2>
</hgroup>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/seite-1">Seite 1</a></li>
<li><a href="/seite-2">Seite 2</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Die Artikelüberschrift</h1>
<p>Der Artikelinhalt</p>
</article>
</main>
<aside>
<h3>Seitenleiste</h3>
<li>Liste 1</li>
<li>Liste 1</li>
<li>Liste 1</li>
<li>Liste 1</li>
</aside>
<footer>
<p>© 2015 | <a href="https://zoechbauer.name">Zöchbauer Manfred</a></p>
</footer>
</body>
</html>Im <head> Bereich, also den nicht-sichtbaren Bereich haben wir hier zB den Titel der Webseite, welcher bei manchen Browsern ganz oben angezeigt wird, eingefügt ebenso die style.css für das spätere Styling der Webseite. Im <body> binden wir die Elemente für die den sichtbaren Bereich der Webseite ein.
Jetzt müssen wir noch die verschiedenen WordPress-Tags einbinden. Allerdings haben wir solange wir nur die beiden Dateien index.php und style.css verwenden folgende Einschränkungen:
- keine dynamische Sidebar also keinen Widget-Bereich
- keine WordPress-Navigation
Diese und auch weitere Funktionen müssen in der WordPress-Template-Datei functions.php erst festgelegt werden, aber dazu später. Jetzt mal ans Werk.
Trotz fehlender functions.php finden wir schon einiges, was wir bei diesem ganz einfachem Template von WordPress verwalten lassen können. Sprache, Charset, Titel, Webseitendomain, Webseitenslogan, Artikeltitel und den Artikelinhalt.
<!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>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/seite-1">Seite 1</a></li>
<li><a href="/seite-2">Seite 2</a></li>
</ul>
</nav>
</header>
<main>
<?php // Loop
if ( have_posts() ) { // Beiträge vorhanden
while ( have_posts() ) {
the_post(); ?>
<article>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<?php the_content(); ?>
</article>
<?php
}
comments_template();
} // Beiträge vorhanden - Ende
else { // Wenn keine Beiträge vorhanden
?>
<article>
<p>Es konnte leider nichts passendes gefunden werden.</p>
</article>
<?php
} // Wenn keine Beiträge vorhanden - Ende
?>
</main>
<aside>
<h3>Seitenleiste</h3>
<li>Liste 1</li>
<li>Liste 1</li>
<li>Liste 1</li>
<li>Liste 1</li>
</aside>
<footer>
<p>© <?php echo date( 'Y' ); ?> | <a href="https://zoechbauer.name">Zöchbauer Manfred</a></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Da hat sich doch schon einiges getan, vor allem im Loop. Wenn ein Beitrag oder eine Seite vorhanden ist, wird dieser angezeigt. Den Beitragstitel habe ich hier in einem Link verpackt um von der Hauptseite den Beitrag inklusive Kommentarfunktion aufzurufen. Sollte eine Seite aufgerufen werden, die nicht vorhanden ist, lassen wir mitteilen, dass leider nichts passendes gefunden wurde.
Ausserdem wurde im <head> die WordPress Funktion wp_head() und unterhalb von <footer> noch wp_footer() hinzugefügt.
Wozu benötigen wir wp_head() und wp_footer()?
Ohne diesen beiden Funktionen wäre es WordPress nicht möglich ergänzende Styles und Scripte zu laden. Auch von vielen Plugins werden diese Funktionen benötigt.
Der Rest von dem was hinzugefügt wurde müsste sich von selbst erkären.
Wenn wir nun die index.php und style.css in einem Ordner abgespeichert haben können wir diesen bereits in das WordPress Themeverzeichnis hochladen und das Theme anschließend aktivieren. Ohne Styling sieht es zwar nicht schick aus, aber es funktioniert. Was uns aber leider auf jeden Fall noch fehlt ist die Menüfunktion und auch die dynamische Seitenleiste – das Styling mal ausgenommen. Hierfür benötigen wir die functions.php welche wir im nächsten Teil des Tutorials erstellen.
Bitte beachten Sie, dass dieser Beitrag bereits vor über einem Jahr geschrieben wurde und unter umständen nicht mehr aktuell ist.