Loading...
Voraussetzungen für das Erstellen eines eigenen WordPress Themes
Dafür sind einige Bedingungen nötig: Grundkenntnisse in der Auszeichnungssprache HTML/XHTML, in der Scriptsprache PHP und in der Stylesheetsprache CSS. Außerdem sollten Sie WordPress entweder auf einem Server oder auf einer lokalen Laufzeitumgebung mit Xampp installieren.
Benötigte Hilfsmittel
Für eine erste Visualisierung Ihrer Ideen ist ein Bildbearbeitungs- oder Zeichenprogramm nützlich. Damit stellen Sie die Elemente für Ihr Theme zusammen. In der Regel reicht dafür bereits ein einfaches Programm, wie das bereits auf vielen Windows-Rechnern vorinstallierte Paint. Große Vorteile bringt Ihnen die Arbeit mit Adobe Photoshop CC. Das Programm kann die einzelnen Elemente Ihres Layouts als CSS kopieren. Diese Gestaltungsvorlagen brauchen Sie nur noch in Ihr Stylesheet einfügen.
Zum Schreiben des Themes benötigen Sie im Grunde einen einfachen Texteditor. Besser arbeiten Sie jedoch mit einem Programm, das HTML, PHP und CSS unterstützt ‑ wie die kostenlosen Texteditoren Notepad++ oder Aptana Studio. In Notepad++ beispielsweise werden die Syntax und die Struktur der unterschiedlichen Programmiersprachen durch verschiedene Textstile hervorgehoben. Außerdem können Sie damit mehrere Dokumente gleichzeitig bearbeiten und Quellcodes automatisch vervollständigen.Darüber hinaus verfügt die Anwendung über eine ausführliche Suchen- und Ersetzen-Funktion.
Nicht zuletzt raten wir Ihnen, verschiedene Browser zur Betrachtung Ihres Themes zu installieren, da jeder Browser Webseiten anders darstellt.
1. Entwerfen Sie Ihr Layout
Entwurf eines Layouts mit den wichtigsten Elementen
Machen Sie sich Gedanken darüber, wie Ihr späteres Layout aussehen soll. In der Regel bestehen Themes aus einem Kopfbereich (Header), der Hauptnavigationsleiste (Navi) einem Inhaltsbereich (Content), ein oder mehreren Seitenleisten (Sidebars) und einem Fußbereich (Footer).
Damit sich Ihre Webseitenbesucher später gut zurechtfinden, empfehlen wir die Beibehaltung dieser Einteilung. In einem Zeichenprogramm können Sie die Elemente beispielsweise mit dem Rechteck-Werkzeug einfügen.
Da die Website später auf Monitoren in verschiedenen Auflösungen betrachtet wird, ist es ideal, Ihr Layout-Dokument bereits in der gewünschten Größe Ihres Themes im Querformat anzulegen. Etabliert haben sich Breiten zwischen 960 und 1100 Pixeln. Die Höhe der Seite kann variieren. Positionieren Sie deshalb die wichtigsten Layout-Elemente so, dass Sie ohne Scrollen lesbar sind.
2. Erstellen Sie ein HTML-Template
Das HTML-Template stellt das Grundgerüst Ihres Themes dar. Die Datei speichern Sie als index.html ab. Bei der Eingabe Ihrer Website-Adresse im Browser wird diese Index-Datei zuerst geöffnet.
<!DOCTYPE html>
<html>
<head>
<!– CHARSET VORANSETZEN,DAMIT SONDERZEICHEN KORREKT DARGESTELLT WERDEN –>
<meta charset =“utf-8″ />
<title> Grundgeruest einer HTML-Seite </title>
</head>
<body>
</body>
</html>
Nach der Fertigstellung des Grundgerüstet, fügen Sie innerhalb der <body>-Tags alle Bereiche hinzu, die Sie im Grobentwurf Ihres Layouts bereits festgelegt haben. Kennzeichnen Sie diese anschließend mit „class“ (Klassenname), um ihnen später in der CSS-Datei eindeutige Stile zuzuweisen. Nur die Bereiche innerhalb der <body>-Tags sehen Sie später im Web. Alle Bestandteile Ihres Themes legen Sie in sogenannten div-Containern ab – wie ein Boxsystem miteinander verschachtelbar.
<!DOCTYPE html>
<html>
<head>
<meta charset =“utf-8″ />
<title> Grundgeruest einer HTML-Seite </title>
</head>
<body>
<div class=“header“>
</div>
<div class=“Navi“>
</div>
<div class=“sidebar“>
</div>
<div class=“content“>
</div>
<div class=“footer“>
</div>
</body>
</html>
3. Erstellen Sie die CSS-Datei für das Design
In der CSS legen Sie die notwendigen Designregeln für das Layout fest: zum Beispiel Breite, Höhe, Position und Farbe der einzelnen Bereiche sowie die Schriftattribute von Überschriften und Absätzen. Wenn Sie diese mit Adobe Photoshop erstellt haben, erhalten Sie jene Angaben über den Menüpunkt „Ebene“ und CSS kopieren“. Sie brauchen dann die Angaben nur unter dem passenden class-Namen in Ihre CSS-Datei einfügen. Hier ein Beispiel inklusive der entsprechenden Syntax:
.header {
background-color: rgb( 245, 220, 192 );
position: absolute;
left: -7px;
top: 0px;
width: 1031px;
height: 131px;
z-index: 11;
}
Speichern Sie die Datei als style.css. Am besten legen Sie die index.html und die style.css in einem gemeinsamen Ordner ab. Die für den Browser relevante Datei index.html ergänzen Sie nun – innerhalb der beiden <head>-Tags ‑ mit folgendem Eintrag:
<link rel=“stylesheet“ href=“style.css“ type=“text/css“ media=“screen“ />
Die Verlinkung funktioniert nur, wenn beide Dateien in einem Ordner liegen. Andernfalls müssen Sie den Wert hinter „href=“ anpassen, beispielsweise „ORDNER/style.css“. Aus dieser so erstellten HTML-Vorlage generieren Sie anschließend ein einsatzbereites Theme.
4. Legen Sie die Templates für das Basis-Theme an
Ein WordPress-Theme besteht aus einer Reihe von Templates mit unterschiedlichen Funktionen ‑ in der Scriptsprache PHP. Die Dateien index.php und style.css bilden die Basis. Daneben existieren noch eine Reihe weiterer Dateien, die für die umfangreichen Funktionen notwendig sind. Schauen Sie sich am besten einmal die bereits vorhandenen Themes Ihrer WordPress-Installation an. Sie finden sie im Ordner „wp-content“. Darin sehen Sie deren Aufbaustruktur.
Aus den einzelnen Bereichen der bereits vorhandenen HTML-Datei erstellen Sie nun eine index.php, eine header.php, eine sidebar.php und eine footer.php. Jede PHP-Datei bauen Sie auf der Basis des HTML-Grundgerüstes auf, jedoch mit .php-Dateiende. Damit Ihre Website beim Aufruf alle Elemente anzeigt, binden Sie diese durch Template Tags in die index.php ein. Das sieht beispielsweise so aus:
<?php get_header(); ?>
<div class=“content“>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Um später einzelne Artikel eines Blogs anzuzeigen, empfehlen wir den Einbau eines Loops. Für die Ausgaben der WordPress-Seiten oder einzelner Blog-Artikel legen Sie eine page.php und eine single.php an.
Der WordPress-Loop am Beispiel des Themes TwentyTwelve
Die index.php können Sie später als Vorlage für viele andere Dateien benutzen. Danach kommen die header.php, die sidebar.php und die footer.php. In die header.php schreiben Sie innerhalb der <head>-Tags wichtige Metadaten sowie die Verknüpfung zu Ihrer style.css. Außerdem enthält sie in der Regel die Hauptnavigation, ein Headerbild und/oder eine Überschrift. Die footer.php kann beispielsweise eine Subnavigation, Links zu anderen Websites, dem Impressum oder einem Kontaktformular enthalten. Die sidebar.php bietet Platz für weitere Navigationselemente und Widgets.
Schreiben Sie einen Kommentar
4 Gedanken zu „So erstellen Sie in 4 Schritten Ihr WordPress Theme“
Eine gute Anleitung!
Danke für den Artikel!
Ich erstelle meine WordPress-Theme mit Theme-Generator „TemplateToaster“
Ich konnte nicht viel damit anfangen.
„Aus den einzelnen Bereichen der bereits vorhandenen HTML-Datei erstellen Sie nun eine index.php, eine header.php, eine sidebar.php und eine footer.php. “
Welche „einzelnen Bereiche“ der HTML-Datei sind gemein? Und wie sollen die index.php usw. genau aussehen?
Es wird viel zu viel vorausgesetzt und viel zu wenig erklärt.