0. Inhaltsverzeichnis

1. Einleitung
    1.1 Voraussetzung
2. Was ist Wordpress?
3. Theme
    3.1 Templates
    3.2 Fragmente auslagern
    3.3 Beispiele
4. Erstellung des Theme
5. PHP Code für Theme
    5.1 header.php
    5.2 footer.php
    5.3 index.php
    5.4 single.php
    5.5 style.css
6. Umsetzung
7. Code für Template
8. Schlusswort

 

1. Einleitung

In diesem Tutorial werden wir das Template, welches wir mit YAML erstellt haben, in das CMS Wordpress einbinden.

Das Ganze wird aber nur für eine einfache Seite reichen. Einen komplexen Aufbau ist für jede Webseite anderst und sollte individuell erstellt werden. Jedoch kannst du das erstellte Theme ausbauen und auf deine Bedürfnisse anpassen.

Wir werden jedoch folgende Punkte beachten und umsetzen.

  • Header und Footer bleiben auf jeder Seite gleich
  • Seiten werden in 2 Spalten aufgeteilt
  • Einzelne Artikel werden in einem 1-Spalten Layout dargestellt

Wenn du die genannten Kriterien noch nicht ganz verstehst ist dies kein Problem. Spätestens am Ende wirst du den Durchblick haben.

Das Tutorial ist kompatibel mit Wordpress 3.3. Solange keine Version 4.x vorhanden ist, wird dieses Tutorial abgesehen von kleinen Abweichungen kompatibel sein. Sehr wahrscheinlich wird dieses Tutorial aber auch ab der Version 4.x noch verwendet werden können.

 

1.1. Voraussetzungen

Es ist ein eigenes Template vorhanden. Da dieses Tutorial auf meinem Tutorial "Ein Template mit YAML erstellen" basiert, ist für Anfänger dieses zu empfehlen um den Schritten einfacher zu folgen.

Die Bedienung von Wordpress sollte verstanden werden. Falls dies noch nicht der Fall ist, sollte Wordpress mit einem vorhandenen Theme installiert werden und man sollte sich mal austoben und schauen was passiert wenn man wo klickt. Es ist nicht mein Ziel Wordpress zu erklären, sondern wie man einfach ein Theme erstellen kann.

Grundkentnisse in Englisch sowie PHP sind von Vorteil.

 

2. Was ist Wordpress

Wordpress ist ein Open Source CMS (Content Managment System) unter der GPL Lizenz. Wordpress wurde früher als Webblog CMS entwickelt und ist seit der Einführung von Seiten auch als allgemeines CMS einfach zu nutzen. Unter anderem dank den vielen Plugins wird Wordpress von immer mehr Usern genutzt um auch normale Webseiten zu erstellen.
Quelle: http://de.wikipedia.org/wiki/Wordpress

 

3. Theme

Das Theme(Design»Themes) besteht aus mehreren PHP-Dateien(Templates) sowie mind. einer CSS-Datei. Aus diesen Dateien wird automatisch das Grundgerüst der Webseite erstellt. Die Inhalte welche über das Backend in der Datenbank gespeichert wurden, können dann an der gewünschten/entsprechenden Stelle angezeigt werden.

Da Wordpress es ermöglicht mehrere Themes in einer Installation zu haben, ist es wichtig das korrekte ausgewählt zu haben.

 

3.1 Templates


Für Artikel, Seiten, Startseite, ... können einfach verschiedene Templates erstellt werden. Diese werden dann automatisch von Wordpress in den verschiedenen Fällen eingesetzt. Das Ganze ist abhängig von den Dateinamen. Für die Startseite wird z.B. die Datei front-page.php eingelesen wobei es für einen Post single.php ist. Um immer ein Template auszulesen gibt es eine Fallback-Datei (index.php). Diese wird verwendent, wenn kein passendes Template gefunden wird.

Achtung! Eigene Templates dürfen nicht einen "registrierten" Namen besitzen. Dies kann zu Fehlern führen.

Dank folgender Grafik ist es einfach den Templates den korrekten Namen zu geben.

Wordpress Template Hierarchie
Wordpress Template Hierarchie

 

Quelle: http://upload.wikimedia.org/wikipedia/commons/3/3d/Wordpress_Template_Hierarchy.png (Stand: 06.Juni 2012)

 

3.2 Fragmente auslagern

Meistens wird auf jeder Seite der gleiche Header (inkl. Navigation) sowie Footer verwendet. Um bei einer Änderung nicht jedes Template anpassen zu müssen, wird dieser Teil normalerweise in eine zusätzliche Datei geschrieben und dann bei den Templates integriert.

Glücklicherweise ist auch dies sehr einfach zu realisieren. Für die Kopfzeile muss eine header.php Datei vorhanden sein, für die Fusszeile eine footer.php. Mit folgenden PHP-Zeilen in den einzelnen Templates werden die entsprechenden Dateien ausgelesen.

/* Mit dieser Zeile wird die header.php Datei eingebunden */
<?php get_header(); ?>
 
 
/* Mit dieser Zeile wird die footer.php Datei eingebunden */
<?php get_footer(); ?>

 

3.3 Beispiele

Öffnet man nun die URL www.meineseite.ch und gelangt auf die erste Seite(Front Page) macht Wordpress folgendes.

  • Ist eine front-pape.php Datei vorhanden?
    • Ja: Eine komplette Seite wird aus allen Dateien wie header.php, footer.php, ... und der front-page.php erstellt. Danach wird die Seite mit den entsprechenden Inhalte aus der Datenbank geladen
    • Nein: Anstelle der front-page.php Datei wird die index.php Datei verwendet.


Man klickt bei einem Post auf "weiterlesen..."

  • Ist eine single.php Datei vorhanden?
    • Ja: Die Seite wird aus den Dateien header.php, footer.php, ... und single.php erstellt.
    • Nein: Die Fallback Datei index.php wird verwendet um das Template zu erstellen. Auch hier werden die Dateien header.php sowie footer.php eingebunden.


Ich hoffe mit den kurzen Beispielen ist das Prinzip von Wordpress klar und verstanden. Falls nicht gehe diese Seite nochmals durch. Es ist wichtig das Prinzip zu verstehen um später selbst eine Seite zu erstellen und diese allenfalls zu erweitern.

4. Erstellung des Theme

Bevor man anfängt die Templates für das Theme zu erstellen, ist es sinnvoll sich zu überlegen, welche Dateien benötigt werden. Dabei beziehen wir uns am Anfang auf die Möglichkeit welche uns Wordpress automatisch liefert und warten mit eigenen Benennungen.

In unserem Beispiel werden folgende Dateien benötigt:

  • index.php (Fallback Seite)
  • single.php (Einzelne Artikel)
  • header.php (Auslagerung des Header-Bereichs)
  • footer.php (Auslagerung des Footer-Bereichs)
  • style.css

Daraus folgt diese Baumstruktur:

  • root/wp-content/themes/ProjectName
    • /yaml (Ordner)
      • jegliche Daten von YAML
    • footer.php (Datei)
    • header.php (Datei)
    • index.php (Datei)
    • single.php (Datei)
    • style.css (Datei)

Den Ordner ProjectName musst du noch nach deinem Wunsch umbenennen. Verwende eine eindeutige klare Bezeichnung. Dies soll als Beispiel dienen um zu erkenne welche Dateien und Ordner relevant sind, bzw. wie sie zu verwenden sind. Wenn du dieses Tutorial gleich selbst ausprobierst, erstelle nun die angegebene Baumstruktur.

Den HTML- sowie CSS-Code verwenden wir vom Tutorial "Ein Template mit YAML erstellen". Der Code findet man unter Punkt 7.

Welche Bereiche sollen nun ausgelagert werden? Um diese Frage zu beantworten überlegt man sich, bis wo bleibt der Code auf jeder Seite gleich (von oben gelesen). Nun hat man schon den Code für die header.php Datei. Nun das Ganze noch von unten und man hat die Zeilen für die footer.php Datei.

In unserem Beispiel würde das folgende Zeilen betreffen:
(Für meine Seite bleibt der <header> und die <nav> auf jeder Seite gleich, falls dies nicht der Fall wäre, dürften diese nicht in die header.php Datei integriert werden)

 

header.php

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Simple Template</title>
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link href="css/yaml/core/base.min.css " rel="stylesheet" type="text/css"/>
        <link href="css/my_style.css " rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <header>
            <div class="ym-wrapper">I am a header</div>
        </header>
        <nav>
            <div class="ym-wrapper">
                <ul id="navigation">
                    <li>menu 1</li>
                    <li>menu 2</li>
                    <li>menu 3</li>
                </ul>
            </div>
        </nav>

footer.php

<footer>
            <div class="ym-wrapper">I am a footer</div>
        </footer>
    </body>
</html>

 

Denk daran das an diesen Code-Snippets noch Anpassungen durchgeführt werden müssen. Den Wordpress weiss z.B. nicht wo es die Navigation laden/anzeigen soll. Wie dies funktioniert wird in kürze gezeigt.

Da in dem vorhandenen Code schon ein 2-Spalten Layout erstellt wurde, werden wir den Rest des Codes einfach in die index.php Datei schreiben. Für die single.php Datei wird der gleiche Code verwendet, jedoch muss dieser noch in ein 1-Spalten Layout umgeschrieben werden. Dies sollte aber kein Problem mehr sein ;-)

Die style.css Datei wird mit dem CSS-Code gefüllt.

 

5. PHP-Code für Theme

Das wichtigste ist natürlich noch die benötigten PHP-Snippets an den richtigen Stellen zu ergänzen. Den ohne diese würde das Ganze nicht funktionieren.

Um die header.php und footer.php Dateien zu integrieren nutzen wir wie schon erwähnt diese Funktionen:

Für eine genauere Erklärung (momentan nicht notwendig) klick auf die Funktionen. Dies wird auch bei den folgenden Funktionen möglich sein. Die index.php und single.php Dateien sollten nach der Ergänzung dann wie folgt aussehen:

<?php get_header(); ?>
 
// Hier steht der entsprechende Code der jeweiligen Datei
 
<?php get_footer(); ?>

 

5.1 header.php

Wir werden uns nun die relevanten Funktionen anschauen welche wir für unsere Seite benötigen. Es werden nicht alle Optionen angeschaut sondern nur diese, welche relevant sind um die Seite soweit zu erstellen damit sie die Grundfunktionen ausführen kann. Natürlich kannst du selbst noch weitere Optionen ergänzen. Denk daran das die jeweiligen Funktionen in PHP geschrieben sind und darum zwischen <?php und ?> stehen müssen.

wp_title()
Mit dieser Funktion wird der Titel ausgelesen.

bloginfo()
Verschiedene Parameter geben Infos über den Blog / die Seite. Für uns sind jedoch nur folgende relevant:

  • stylesheet_url
  • template_url

Da der Name style.css von Wordpress vorhanden ist, ist es möglich mit dem Parameter "stylesheet_url" den Pfad für die CSS Datei automatisch korrekt zu generieren. Beachte dabei jedoch das die CSS Datei am gleichen Ort liegt wie die Template Dateien und nicht in einem Unterverzeichnis!

Bei unserem Beispiel arbeiten wir mit YAML. Dies erfordert das wir die benötigte CSS Datei ebenfalls laden. Weil wir diese aber in einem Unterverzeichnis haben benutzen wir den Parameter "template_url" und ergänzen dann den Rest des Pfades. In unserem Fall würde dies so aussehen:

<link href="<?php bloginfo('template_url'); ?>/yaml/core/base.min.css" rel="stylesheet" type="text/css" />

 

wp_list_pages()
Mit Hilfe dieser Funktion erstellen wir die Navigation. Mit verschiedenen Parametern kann diese nach den eigenen Wünschen angepasst werden. Für uns relevant ist sicherlich die Sortierung. Dafür wird folgendes in die Klammern geschrieben: 'sort_column=menu_order'

Leider werden die Seiten nun noch als Unterpunkte von 'Seite' gesehen. Darum erweitern wir mit &title_li=0. Zusammengefasst sollte dies dann so aussehen 'sort_column=menu_order&title_li=0'

wp_head()
Wird von Plugins genutzt um z.B. styles, scripts, ... einzubinden. Muss direkt vor dem </head> Tag ergänzt werden.

 

5.2 footer.php

Für die footer.php Datei benötigen wir nur einen Befehl. Dieser ist jedoch sehr wichtig, da viele Plugins damit z.B. Javascript einbinden. Dafür einfach wp_footer() direkt vor dem </body> Tag hinzufügen.

 

5.3 index.php

Mit einer einfachen Schlaufe werden jegliche Einträge ausgelesen. Wir erweitern das Ganze noch mit einer if-Abfrage um den Benutzer darauf hinzuweisen falls er auf einer Seite ist welche es nicht gibt. Folgender schlichter Code reicht uns dafür schon aus:

<?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            echo '<h2>';
            the_title();
            echo '</h2>';
            the_content();
        endwhile;
    else :
        echo '<h2>Nichts gefunden</h2><br />';
        echo '<p>Sorry, aber du suchst gerade nach etwas, was hier nicht ist.</p>';
    endif;
?>

 

have_posts()
Überprüft ob ein Eintrag unter der jeweiligen Seite vorhanden ist. Gibt entweder TRUE oder FALSE zurück.

the_post()
Das Verständnis dieser Funktion überschreitet den Inhalt dieses Tutorials. Kann bei Interesse jedoch selbst nachgelesen werden.

the_content()
Zeigt den Inhalt des entsprechenden Posts/der Seite an. Bei langen Posts wird auf der Home-Seite oft ein "mehr..."  gewünscht. Um dies Umzusetzen muss im Post jedoch ein "Weiterlesen...-Link" hinzugefügt werden. Benutzt man nun the_content('mehr...') wird dies wie gewünscht auf der Seite umgesetzt.

Button "Weiterlesen...-Link"
Button "Weiterlesen...-Link"

 

Es gibt noch eine weitere Möglichkeit, welche man unter diesem Link findet. Dazu verwendet man statt the_content() die Funktion the_excerpt().

 

5.4 single.php

Gleich aufgebaut wie die index.php Datei. Jedoch wird bei der Funktion the_content() die Ergänzung 'mehr...' nicht benutzt.

 

5.5 style.css

Das Stylesheet enthält Informationen zum Theme. Diese müssen am Anfang stehen und müssen eindeutig sein. Sie dürfen nicht von einem vorhanden kopiert werden, weil dies zu Problemen führt. Am besten schaust du dir unter diesem Link ein Beispiel an. Je mehr Angaben gemacht werden desto besser. Um das Tutorial in Grenzen zu halten verwenden wir für unser Beispiel jedoch nur folgende:

/*
Theme Name: Dom's Tutorial
Author: Dominic Straub
Description: Dies ist mein erstes eigenes Wordpress Theme.
*/

 

6. Umsetzung

Alle für uns relevanten Dateien, um ein einfaches Theme zu erstellen, wurden angeschaut. Erstelle nun ein paar Seiten und Artikel um zu sehen wie diese dargestellt werden und dein Theme aussieht.

 

7. Code für Template

Hier ist der komplette Code, welchen wir erarbeitet haben, ersichtlich. Wie du aber sicherlich bemerkt hast, habe ich nicht alles ersetzt. Der Header, Footer sowie die zweite Spalte sind immer noch mit einem Platzhalter gefüllt. Dem Header kannst du z.B. ein Bild hinzufügen und dem Footer ein Copyright. Beim 2 Spalten-Layout wären Zufallsbilder, News, ... eine Option.

Auch das CSS muss noch angepasst und erweitert werden da wir hier nur ein Grundgerüst erstellt haben.

 

footer.php

<footer>
        <div class="ym-wrapper">I am a footer</div>
    </footer>
    <?php wp_footer(); ?>
    </body>
</html>

header.php

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title><?php wp_title(); ?></title>
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link href="<?php bloginfo('template_url'); ?>/yaml/core/base.min.css" rel="stylesheet" type="text/css"/>
        <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css"/>
        <?php wp_head(); ?>
    </head>
    <body>
        <header>
            <div class="ym-wrapper">I am a header</div>
        </header>
        <nav>
            <div class="ym-wrapper">
                <ul id="navigation">
                    <?php wp_list_pages('sort_column=menu_order&title_li=0'); ?>
                </ul>
            </div>
        </nav>

index.php

<?php get_header(); ?>
<div id="content" class="ym-grid">
    <div class="ym-wrapper">
        <div class="ym-grid ym-equalize">
            <div class="ym-g75 ym-gl">
 
<?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            echo '<h2>';
            the_title();
            echo '</h2>';
            the_content('mehr...');
        endwhile;
    else :
        echo '<h2>Nichts gefunden</h2><br />';
        echo '<p>Sorry, aber du suchst gerade nach etwas, was hier nicht ist.</p>';
    endif;
?>
 
            </div>
            <div class="ym-g25 ym-gr">I am 25% width and have the same height</div>
        </div>
    </div>
</div>
<?php get_footer(); ?>

single.php

<?php get_header(); ?>
<div id="content" class="ym-grid">
    <div class="ym-wrapper">
         
<?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            echo '<h2>';
            the_title();
            echo '</h2>';
            the_content();
        endwhile;
    else :
        echo '<h2>Nichts gefunden</h2><br />';
        echo '<p>Sorry, aber du suchst gerade nach etwas, was hier nicht ist.</p>';
    endif;
?>
         
    </div>
</div>
<?php get_footer(); ?>

style.css

/*
Theme Name: Dom's Tutorial
Author: Dominic Straub
Description: Dies ist mein erstes eigenes Wordpress Theme.
*/
 
.ym-wrapper {
    width: 960px;
    margin:0 auto;
}
div, header, nav, footer{
    -webkit-box-sizing: border-box;   /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;   /* Firefox, other Gecko */
    box-sizing: border-box;   /* Opera/IE 8+ */
}
  
#navigation li{
    float:left;
    margin-right:20px;
}
  
header, nav, footer{
    height:50px;
}
  
#content{
    height:100px;
}

 

8. Schlusswort

Glückwunsch! Du bist am Ende des Tutorials und somit in der Lage ein einfaches Theme für Wordpress zu erstellen.

Versuche dein Template mit weiteren Funktionen zu ergänzen und deine Seite so anzupassen wie du sie am Schluss brauchst.