info@experte.de

WordPress - So erstellen Sie Ihr eigenes WordPress Theme

Daniela Berg 14. Feb. 2019

Wem die kostenlosen Vorlagen nicht zusagen, kann auch ein eigenes WordPress Theme erstellen. Dies bietet Ihnen die Möglichkeit, eine einzigartige Webseite mit einem stark individualisierten Look zu erstellen, mit welcher Sie sich und Ihr Business identifizieren können. Erfahrenen Programmierern eröffnet dieses Vorgehen ungeahnte Möglichkeiten. Gleichzeitig bleibt Ihnen die Qual der Wahl erspart, sich zwischen den Hunderten von vorhandenen Vorlagen zu entscheiden. Wie also gehen Sie vor?

Das sollten Sie zu Anfang wissen

Um ein eigenes Theme zu erstellen, müssen Sie Wordpress.org installiert haben und sich mit der Applikation gut auskennen. Zwingend notwendig sind außerdem Kenntnisse in HTML, PHP und CSS.

HTML = „Hypertext Markup Language“ ist die Standard-Programmiersprache für Webseiten-Inhalte. HTML dient zur Strukturierung von Texten mit Überschriften und Textkörpern, Hyperlinks, Bildern, Listen und anderen Inhalten.

PHP = weit verbreitete Skriptsprache für Webserver. PHP dient zur Erstellung von Webseiten und Online-Anwendungen.

CSS = „Cascading Style Sheets“ ist die Standard-Stylesheet-Sprache für die optische Darstellung von Webseiten. CSS ist für das Visuelle verantwortlich und arbeitet daher ergänzend zu HTML.

Die HTML-Vorlage für Ihr WordPress Theme erstellen

Grafische Vorlage und Template-Ordner

In der Regel starten Sie mit einer Idee, die dann in eine konkretere Skizze und später in eine Vorlage umgewandelt wird. Hierzu bedürfen Sie eventuell der Hilfe von Grafik- und Webdesignern, die basierend auf Ihren Wünschen ein passendes Layout erstellen.
Erstellen Sie nun im Wordpress Template-Ordner /wp-content/themes/ einen eigenen Ordner, in dem Sie alle nachfolgend angefertigten Dateien abspeichern.

Grundgerüst in HTML

Mithilfe des Grundgerüsts definieren Sie die Basis Ihres Templates und geben die Hauptstruktur vor, aufgeteilt in Header / Navigationsbereich, Content-Bereich, Footer, Sidebar und so weiter.

Hierzu erstellen Sie im Texteditor ein Dokument mit dem Namen index.html und legen es in Ihrem WordPress-Ordner ab. Später erweitern Sie das Dokument, indem Sie z.B. Überschriften, Listen, Texte und Links einfügen – alles natürlich mit den entsprechenden HTML-Tags. Im Browser können Sie dann bereits eine simple, gegliederte Webseite ohne grafische Elemente sehen.

CSS-Stylesheet

Nun geht es darum, den visuellen Part der Vorlage zu gestalten. Erstellen Sie hierzu die Datei style.css. Innerhalb des Stylesheets definieren Sie für jeden einzelnen Bereich Ihres Grundgerüsts die optischen Details wie etwa die Hintergrundfarbe, das Hintergrundbild, die Schriftfarbe, die Schriftgröße und die Schriftart.

Die einzelnen Template-Dateien erstellen

Nun geht es darum, auf Basis der HTML-Vorlage ein funktionstüchtiges WordPress Theme zu erstellen. Zusätzlich zu den index.html- und style.css-Dateien, die sich bereits in Ihrem Ordner befinden, werden Sie nun einzelne Template-Dateien anlegen, die unterschiedliche Funktionen erfüllen.

Index.php-Datei

Diese Datei ist dringend notwendig. Zusammen mit style.css ist die index.php-Datei die funktionale Basis für Ihr eigenes WordPress Theme. Sie kommt immer dann zum Einsatz, wenn die anderen (optionalen) Templates fehlen.

Optionale Dateien

Wer die unterschiedlichen Bereiche seiner Webseite individuell ausgestalten möchte, sollte jeweils spezifische Templates anlegen und diese mit Informationen und Befehlen füllen. Typisch für ein WordPress Theme sind unter anderem folgende Dateien:

page.php: definiert, wie die Seiten auf Ihrer Webseite aussehen.
single.php: wird genutzt, um die Anzeige von einzelnen Beiträgen zu steuern.
image.php: steuert die Anzeige der einzelnen Bilder in der Wordpress Galerie-Ansicht.
search.php: hierdurch wird ein internes Suchformular eingebaut.
archive.php: ist für die Ausgabe des Archivs zuständig.
sidebar.php: lagert die Seitenleiste der Webseite aus.
header.php: lagert den Kopfbereich der Webseite aus.
footer.php: lagert den Fußbereich der Webseite aus.
comments.php: ist für den Kommentar-Bereich zuständig.
functions.php: steuert die Widgets.
screenshot.png: dient als eine Art Vorschau des Themes.

In dieser Übersicht zur Wordpress Template-Hierarchie können Sie sehen, welche Templates aufeinander aufbauen und wie sich die einzelnen Templates zueinander verhalten.

So würde beispielsweise ein einfaches index.php-Template aussehen:

So wiederum würde die ausgelagerte footer.php-Datei aussehen, auf welche am Ende von index.php Bezug genommen wird:

Jedes dieser Templates enthält zusätzliche Informationen zu Aussehen und Funktionsweise entsprechender Webseitenbereiche, sofern sich diese vom Haupttemplate unterscheiden sollen. All dies bestimmen Sie mit spezifischen Codes. Sie müssen natürlich nicht alle der vorgeschlagenen Template-Dateien erstellen und können auch jederzeit weitere hinzufügen. Wollen Sie beispielsweise nur auf einer bestimmten Seite Kommentare zulassen, müssen Sie zusätzlich zu page.php eine Datei namens page-comments.php erstellen, die sich bezüglich der Kommentar-Funktion von der Standard-Datei unterscheidet. Ähnlich verhält es sich, wenn Sie auf einer speziellen Seite die Sidebar ausblenden möchten: Dann öffnen Sie die Datei page.php, ändern die entsprechenden Befehle und speichern das Template unter einem neuen Namen ab.

The Loop

Der Loop wird gerne als das Herzstück einer Wordpress Template-Datei umschrieben, denn er ermöglicht es, dass die Beiträge einer Webseite überhaupt erst ausgegeben werden. Deshalb muss der Loop in jedes Template eingebunden werden, das für die Ausgabe von Inhalten (index.php, page.php, single.php…) verantwortlich ist. Mit dem Loop können Sie beispielsweie bestimmen, wie viele Beitragsvorschauen auf einer Seite angezeigt werden, wie lange der Vorschautext ist und ob unterhalb eines einzelnen Beitrags auf verwandte Beiträge verwiesen wird. Im untenstehenden Beispiel sehen Sie einen Loop, der in die page.php-Datei eingefügt wurde.

Der Standard-Code sieht folgendermaßen aus:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php the_date('','<h2>','</h2>'); ?>

<div class="post" id="post-<?php the_ID(); ?>"> 
<h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3> 
<div class="meta"><?php _e("Filed under:"); ?> <?php the_category(',') ?> &#8212; <?php the_author() ?> 
@ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?></div> 

<div class="storycontent"> 
<?php the_content(__('(more...)')); ?> 
</div>

<div class="feedback">
<?php wp_link_pages(); ?>
<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?> 
</div>

</div>

<?php comments_template(); // Get wp-comments.php template ?>

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

Weitere Bestandteile von Template-Dateien

Eine Template-Datei kann weiterhin folgende Elemente besitzen:

Template Tags
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
Diese Code-Fragmente funktionieren wie Befehle, wobei es Hunderte von gültigen Tags gibt. Diese können Sie hier einsehen. Mithilfe von Template Tags können Sie bspw. einen Link zum nächsten Blogbeitrag setzen oder einen Login-Button darstellen. In obigem Beispiel würden Informationen zum Blog (der Name) sowie der Name der Seite dargestellt.
Include Tags
<?php get_header(); ?>
Diese Tags verweisen an einer ganz bestimmten Stelle auf ausgelagerte Dateien. In diesem Beispiel würde der Header eingebunden.
Conditional Tags
<?php if ( is_home()) { ?>
<h2>Willkommen auf meiner Seite</h2>
<?php } ?>
Die Befehle dieser Code-Fragmente werden nur dann ausgeführt, wenn eine besondere Bedingung erfüllt ist. Hiermit können Sie z.B. festlegen, dass Informationen nur auf bestimmten Seiten angezeigt werden. In obigem Beispiel würde die Überschrift „Willkommen auf meiner Seite“ einzig und allein auf der Startseite (home) angezeigt.

Das eigene WordPress Theme hochladen

Ihr eigenes Theme können Sie als ZIP-Datei innerhalb von WordPress.org hochladen. Wenn Sie Ihr Theme einem breiten Publikum zugänglich machen wollen, können Sie dieses zur Überprüfung an WordPress.org senden. In diesem Fall muss Ihr Theme folgende Dateien zwingend aufweisen:

style.css
index.php
comments.php
screenshot.png

Sofern die index.php-Datei nicht die komplette Funktionalität Ihres Themes abdeckt und Sie weitere Templates erstellt haben, müssen Sie natürlich auch diese mit einreichen.

Autor: Daniela Berg