WordPress Theme Tutorial

Seite drucken Seite drucken

0) Einleitung
Jeder der schon im Design-> Themes Menu rumgeklickt hat, wird schon unzählige teils wunderschöne und angenehm funktionale Themes entdeckt und vielleicht auch schon ein paar installiert haben…
aber…
man merkt schnell, dass es am Design immer an irgendwelchen Ecken nicht ganz den Vorstellungen entspricht.

Die Lösung ist ein eigenes Theme für WordPress zu erstellen.
Ich möchte euch meine Lösung grundlegend Vorstellen, damit Ihr einen praktischen Ansatz seht, den Ihr für Eure Seite nutzen könnt.

1) Mein Wunsch
Das wichtigste Anliegen ist es für mich, eine möglichst hohe Flexibilität des Designs zu erhalten. Jede Seite/ Artikel soll mit einem ganz individuellen Design ausgestattet werden können.

2) Die Umsetzung

2.0) Den Grundaufbau verstehen (Artikel bzw. Seitenstruktur)
Das zusammenpacken, deines individuellen Theme ist nun gar nicht so das Problem. Das können wir mit wenigen Handgriffen erledigen. Jede Stelle auf deinem Worpress Theme individuell anzufassen ist hier die viel interessanter bzw. wichtigere Aufgabe und das Hauptanliegen in diesem Tutorial!
Vom Grundstruktur der Seitennamen setzte ich auf das Theme twentyten auf, dass schon bei der Erstinstallation mitgeliefert wird. Das heißt dann im einzelnen:
index.php -> definiert die Startseite, wenn als Startseite eine Statische Seite gewählt ist, wird die Seite page.php aufgerufen
page.php -> definiert die “Seiten” in WordPress
single.php -> definiert die “Artikel” bzw. “Beiträge” in WordPress
header.php -> definiert den Standardkopfbereich
footer.php -> …Standardfußbereich
loop-page.php -> definiert Conten/ Ausgabe den Inhalte der Seiten
loop-single.php -> definiert Conten/ Ausgabe den Inhalte der Artikel/ Beiträge
sidebar.php -> ein Worpress Block mit weiteren Funktionen der i.d.R. rechts neben dem Inhalt deines Blogs erscheint (kann aber natürlich individuell auch ausgeblendet oder an anderer Stellen eingeblendet werden…)
comments.php -> definiert die Kommentaransicht
styles.css -> Stylesheets der Seite
functions.php -> Erweiterete Funktionen werden hier ausgelagert

2.1) individuelles Seitendesign mit Templates
Erstellt Euch eine neue PHP-Datei (z.B. mein-supertemplate.php) und ladet diese in Euer aktuelles Theme-Verzeichnis:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php /* Template Name: Tutorial Template Worpress
*/ ?>

<!-- Inhalt des Tutorial Template Worpress -->
<!-- individueller  Bereich nur f&uuml;r Tutorial Worpress Template -->
was auch immer hier individuell sein soll
<!-- ENDE individueller  Bereich nur f&uuml;r Tutorial Worpress Template
der Rest hier ist wie auf der Normalen page.php -->

<?php
get_header();
?>

        <div id="container">
            <div id="content" role="main">

            <?php
            /* loop um Seite anzuzeigen...
             * Zeigt den Inhalt
             */
            get_template_part( 'loop', 'page' );
            ?>

            </div><!-- #content -->
        </div><!-- #container -->

<?php
get_sidebar();
get_footer();
?>

Ich denke mit den Kommentaren wird recht schnell klar wie diese Seite funktioniert. Das Entscheidene sind die ersten beiden Zeilen. Nachdem Ihr diese Datei in Euer Theme Verzeichnis geladen habb, könnt Ihr nun dieses Template als Basis für Euer Grunddesign der aktuell angelegten Seite festlegen.

get_header(); includiert die header.php Datei und get_template_part( ‘loop’, ‘page’ ) fügt die loop-page.php ein die ja für die Ausgabe der (Seiten-) Inhalte zuständig ist.
Somit könnt Ihr jeder Seite ein ganz individuelles Layout mit beliebigem statischen und dynamischen Inhalten zuweisen…

2.2) individuelles Artikeldesign mit Templates und Abfragen
Etwas anspruchsvoller wird es schon bei einem individuellen Artikeldesign. Leider steht in Worpress standardmäßig keine Artikel-Templateengine zu Verfügung.
Meine Idee ist in der Seite single.php abzufragen, ob ein bestimmtes Design/ Inhalte ausgegeben werden soll.
Stellen wir uns als praktisches Anwendungsbeispiel einmal folgendes vor. Alle meine WordPress Templates besitzen die Oberkategorie Tutorials und eine Unterkategorie WordPress Tutorials.

Eine Abfrage des Namen der 2. Kategorie können wir nun so durchführen:

1
2
3
$kat = get_the_category();
$kati=$kat[1]->cat_name;
//$kat[0] => wäre die erste Kategorie

Mit diesem Wissen können wir nun vor der eigentlichen Ausgabe in der single.php überprüfen, ob (z.B.) eine bestimmte Kategorie gewählt ist und dann, dass Artikeldesign & die Inhalte so definieren wie wir es brauchen.
Schaut Euch in diesem Zusammenhang noch diesen Quelltext an und Ihr solltet wissen was ich meine:

1
2
3
4
5
6
7
8
$kat = get_the_category();
$kati=$kat[1]->cat_name;

if ($kati=='Wordpress Tutorials')
{
echo "Ausgabe wenn Worpress Tutorial Kategorie";
}
else {  echo "Ausgabe wenn kein Worpress Tutorials Kategorie"; }

Noch individueller geht das ganze dann noch mit der Artikelid/-name. Hiermit kann ich für jeden Artikel ein individuelles Design und individuelle Inhalte definieren…

2.3) Pack&Go
Um ein selbst erstelltes Theme zusammenzufassen legt euch einen Ordner (z.B. /meinsupertemplate) an und packt nach und nach Eure angepassten Dateien von oben in diesen Ordner.
(bzw. passt die Dateinamenstruktur auf Eure Bedürfnisse an)
Vollständigkeitshalber könnt Ihr noch ein Screenshot (Druck-Taste bzw. Screenshottool) des angepassten Themes in Aktion als screenshot.png mit in diesen Ordner speichern.
Dieser wird dann beim installieren und im wp-admin Bereich angezeigt.

!Das Herzstück für Design und auch der Grundinformationen des Themes findet Ihr in der styles.css.!

1
2
3
4
5
6
7
8
9
10
11
12
13
/*
Theme Name: cmsdesigner bzw. Euer Themename
Theme URI: http://cmsdesigner.de bzw. Eure Domain
Description: cmsdesigner Template ...bzw
Author: Ingo Schmidt...bzw. LOGISCHERWEISE Euer Name!!!
Author URI: http://cmsdesigner.de...
*/
 /* Meine Superstyles... */

body {
    background: #000000; // schwarzer Hintergrund, jaja die Welt ist sooo böse:-)
}
...

Den Basisaufbau der einzelnen Dateien könnt Ihr viel ausführlicher auch wunderbar in den Links unten einsehen.
Dieser Ordner wird dann gezipt und Ihr könnte das Theme dann unter Design /Theme/Theme installieren/Hochladen installieren:

Viel Spaß beim individualisiern:-)

x1) Links zum Thema:
|* Pernu Thmedesign Teil1
|* WordPress Theme Entwicklung
|* WordPress Design & Layout
|* Lernhoch WordPress Handbuch

Dieser Beitrag wurde unter Tutorials, Wordpress Tutorials abgelegt und mit , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">