Colorscheme

Eigenes WordPress-Template

ACHTUNG: In diesem Tutorial wird sehr viel Code ausgegeben, dieser Code wird aber formatiert ausgegeben und darum kann es vorkommen das sich an manchen Stellen Leerzeichen einschmuggeln (oft im Start- und End-Tag von PHP => < ?php) dies hat damit zu tun, das dieser Code "entwertet" werden muss, sonst würde die Wordpress-Software dies als Code interpretieren und diesen ausführen. Wenn ihr also diesen Code nutzt, dann achtet darauf die Leerzeichen dort zu entfernen wo es Sinn macht, tut mir leid für diese Umstände, aber anders geht es leider nicht

Einige werden sich noch an das Wordpress-Template-Tutorial von Steffen Thalmann erinnern. Nach dieser Anleitung ist der Webdesignblog entstanden, doch leider gab es dieses irgendwann nicht mehr und ich habe mich selbst an einem (eher weniger gelungenen) Tutorial versucht.
Seit heute gibt es dieses Tutorial im Webdesignblog, Steffen Thalmann war so nett mir dieses zur Verfügung zu stellen. Wenn ihr weitere gute Artikel lesen wollt, könnt ihr ihn auf SteffenThalmann.de besuchen.

Dieses Tutorial soll eine Anleitung dazu sein, ein eigenes WordPress-Template nach semantischen Regeln von (x)HTML zu erstellen. Es wendet sich somit an all diejenigen, die nicht auf ein bestehendes Theme zurückgreifen möchte oder dieses nach belieben anzupassen.

Voraussetzung

Wordpress installation http://wordpress.org/docs/installation/5-minute/
(x)HTML, CSS & PHP Grundkenntnisse

Warum ein eigenes Template schreiben?

Gute Frage, gute Antwort: Du willst mehr! Du willst lernen! Du willst WordPress begreifen und damit mehr machen als andere! Du hast andere Anforderungen an einem Template - „you gotta make it yourself“. Wenn du darauf keine Lust hast, kopiere den “default”-Ordner, ändere einfach nur das Stylesheet und übersetze alle Begrifflichkeiten in deutsche.

Erste Schritte

Wähle im Hauptverzeichnis deiner Wordpressinstallation den Ordner wp-content/themes aus und erstelle einen neuen Ordner mit einen Namen deiner Wahl. In dem weiteren Verlauf dieses Tutorials verwende ich den Namen „ownTheme“ für diesen Ordner.

Lege in diesem Ordner nun die Dateien style.css, index.php, header.php, sidebar.php und footer.php. Wir benötigen nachher noch mehr Datei aber diese legen wir erst an wenn wir sie gebrauchen. Wenn du Bilder später (natürlich willst du das) verwenden willst, ist es ratsam einen Unterordner „images“ zu erstellen.

Starte deinen bevorzugten Text-Editor und öffne die soeben erstelle index.php Datei. Schreibe in die ersten Zeilen folgenden Code:

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

“get_irgendwas” sind unter Wordpress vordefinierte Template-Tags welche die Seite anweisen, bestimmte Template-Dateien (in diesem Fall header.php, sidebar.php und footer.php) in die Seite einzubinden.

In die style.css schreibst du zu Beginn folgendes

/*
Theme Name: My First Template
Theme URI: http://www.thally.de/
Description: A ourself written template based on a Tutorial by thally.
Version: 1.0
Author: Steffen Thalmann
Author URI: http://www.thally.de/
*/

Das sind übliche Theme-Informationen, die im Administrationsbereich (kurz: ACP; Admin Controll Panel) unter Themes angezeigt werden, um die Themes auch eindeutig von einander zu unterscheiden.

Nun müsstest du unter „Themes“ im ACP dein soeben erstelltes Template wieder finden. Mit einem Klick aus „auswählen“ aktivierst du dieses Theme für deinen Blog.

Wenn du nun deine Seite aufrufst, wirst du sehen dass unser Template noch nicht viel kann. Also müssen wir unserem Template noch einiges beibringen.

Von Kopf bis Fuss und dazwischen nichts.

Der „Header“ bekommt nun von uns alle notwendigen Inhalte mit. Darunter zählt: Einleitung des HTML-Grundgerüst, Titel, Meta-Angaben, logische Beziehungen sowie dateispezifische Style-Angaben (CSS). Natürlich dürfen hier auch nicht relevante Tags für unseren eigentlichen Header fehlen.

Beginnen wir jedoch mit dem Grundgerüst (das kommt in die header.php):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head profile="http://gmpg.org/xfn/11">
<title></title>
<meta http-equiv="Content-Type" content="" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-language" content="de" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="robots" content="index,follow" />
<meta name="description" content="" />
<link rel="stylesheet" href="" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="" />
<link rel="alternate" type="text/xml" title="RSS .92" href="" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="" />
<link rel="pingback" href="" />
<style type="text/css" media="screen">

</style>
</head>
<body>

Beginnen wir nun einige „Lücken“ mit den vorhin erwähnten Template-Tags zu füllen:

<title><?php bloginfo('name'); ?><?php if ( is_single() ) { ?> &raquo; <?php } ?><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="description" content="<?php bloginfo('description'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

Wenn wir nun noch in unsere footer.php das HTML-Grundgerüst durch

</body>
</html>

abschließen, haben wir die Basis für unser weiteres „templating“ geschaffen und können uns nun dem eigentlichen zuwenden.

Was haben wir bisher getan?

  • „Leeres“ Theme mit Themeinformationen erstellt
  • Die Grundstruktur unseres Themes erstellt (Header, Footer)

Bevor wir jedoch beginnen unseren Inhalt und das Menü generieren, erstellen wir unsere Seitenstruktur und aus HTML- & Template-Tags unseren eigentlichen Header und Footer.
Wichtig bei diesem Schritt ist das wir uns über unsere Seitenstruktur im klarem sind. Ich persönlich handhabe es immer so dass ich für jeden Bereich einen eigenen Abschnitt definiere. Das hat den Vorteil, dass ich leicht und flexibel per CSS mein Layout ändern kann und meine Seite von einer guten Struktur und Logik geprägt ist. Desweiteren gebe ich den Divs direkt Id’s oder Klassen mit, damit ich später diese mit CSS direkt ansprechen und formatieren kann.

Für unsere Theme empfehle ich sich an folgende Struktur zu halten:

<div id="mainFrame">
<div id="header"></div>
<div id="menue"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

Diesen Codeblock zerlegen wir nun und verteilen einzelne Stücke auf unsere bisher erstellten Dateien.

header.php

<div id="mainFrame">
<div id="header"></div>

Natürlich nach unserem Body-Tag (<body>)

sidebar.php
<div id="menue"></div>

index.php

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

setzen wir
<div id="content"></div>

vor unserem Body-Endtag () setzen wir
<div id="footer"></div>
</div>

Wenn du jetzt noch mal deinen Blog aufrufst und die Seite immer noch leer ist, hast du alles richtig gemacht. Lediglich sollte der Title oben erscheinen.

Beginnen wir nun unseren Header und Footer mit Leben zu füllen. Ich halte den HTML-Code stark semantisch. Wegen der „usability“ und „accessibility“ und weil es sich einfach so gehört und HTML darauf ausgelegt ist. Außerdem ist es nicht schwer alles mit CSS entsprechend zu formatieren.

Fülle nun den div “header” in der header.php mit:

<h1>< a href="< ?php echo get_settings('home'); ? >" title="< ?php bloginfo('name'); ? >">< ?php bloginfo('name'); ? ></ a></h1>
<h2>< ?php bloginfo('description'); ? ></h2>

In der Überschrift 1. Ordnung haben wir somit nun den Namen unseren Blog packt und entsprechend verlinkt. Die Überschrift 2. Ordnung bekommt die Beschreibung unseren Blogs. Geil ne?

Unter dem div „header“ setze ich noch eine Trennlinie mit <hr /> - damit die Seitenstruktur ersichtlich ist, wenn CSS deaktivert sein sollte.

Wechsle zur footer.php und ergänze den div „footer“ mit folgendem:

<ul>
<li>< ?php bloginfo('name'); ? > is proudly powered by <a href="http://wordpress.org">WordPress</a></li>
<li><a href="feed:< ?php bloginfo('rss2_url'); ? >">Entries (RSS)</a> and <a href="feed:< ?php bloginfo('comments_rss2_url'); ? >">Comments (RSS)</a></li>
<li>< ?php echo $wpdb->num_queries; ? > queries. < ?php timer_stop(1); ? > seconds.</li>
</ul>

Setze hier vor dem Div „footer“ ebenfalls ein <hr />

Eben kurz noch Revue passieren lassen – Was haben wir nun getan:

Seitenstruktur erstellt
Header und Footer mit relevanten Template-Tags gefüttert

Seitenstruktur, Navigation oder wie auch immer

Wie bekommen wir nun den Inhalt und vor allem eine Seitennavigation in unserem Blog? WordPress macht es Template-Entwicklern hier sehr einfach mit den sog. Template-Tags. Einige haben wir ja schon kennengelernt und bei den nächsten Schritten werden wir weitere verwenden, damit unser Template auch alle nötigen Information und Inhalte anzeigt.

Beginnen wir mit unserer Seitennavigation. In den meisten Themes werden in der „Sidebar“

verfügbare Seiten
Autor(en)-Informationen
Archiv
Kategorien
Meta-Informationen
Suchformular
und ein Kalender

angezeigt. So wollen wir ebenfalls vorgehen. Bzw. wenn du keinen Kalender oder Autoren-Infos wünscht kann du diesen Part weglassen. Öffne nun deine sidebar.php und ergänze den Div „menue“ um folgenden Codeschnipsel:

<ul>

<li><h2>Kalender</h2>
<?php get_calendar(2); ?>
</li>


<li><h2>Autor</h2>
<p>Ich bin ein oberkrasskonkreter Templater-Verchecker.</p>
</li>


<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>


<li><h2>Archiv</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>


<li><h2>Kategorien</h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
</li>


<li><h2>Meta</h2>
<ul>
< ?php wp_register(); ? >
<li>< ?php wp_loginout(); ? ></li>
<li>< a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>< /a></li>
<li>< a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr>< /a></li>
<li>< a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress< /a></li>
<?php wp_meta(); ?>
</ul>
</li>


<li>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</li>
</ul>

Mit einigen wenigen HTML- und Template-Tags haben wir uns somit eine füllige Seitennavigation gebastelt. Wenn wir uns nun mal die Seite im Browser wieder betrachten, werden wir am unteren Ende der Navigation eine PHP-Fehlermeldung sehen. Das kommt daher, weil wir eine Date „searchform.php“ eingebettet haben. Wir errinnern uns jedoch nicht daran diese Datei angelegt zu haben oder? Also: schnell nachholgen mit folgendem Inhalt:

<div>
<form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Suche..." />
</form>
</div>

Setze hier hinter dem Div „menue“ ebenfalls ein

<hr />

“What have you done, dude?”

Eine “dicke” Sidebar mit den wesentlichen Elemente erstellt und uns dabei an Template-Tags bedient.
Eine weitere Datei „searchform.php“ erstellt und ein Suchformular eingefügt.

Give me Content, right Now!

Jo und damit fangen wir direkt an. Öffne die index.php. Hierfür verwenden wir „TheLoop“. Was genau das ist erfährst du hier: http://codex.wordpress.org/The_Loop
Da ich jetzt schon weiß bzw. eine Vorstellung davon habe, wie mein Theme nach geschriebenen CSS mal aussehen soll und sich gewisse Tags verhalten sollen, fange ich jetzt schon an bestimmte IDs oder Klassen in den Tags zu setzen.


<?php if (have_posts()) : ?>


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

<div id="post-<?php the_ID(); ?>">


<h2></h2>


<small>geschrieben am < ?php the_time('d.m.Y') ? > in <?php the_category(', ') ?> von &middot; < ?php edit_post_link('editieren',",'&middot;'); ? > < ?php comments_popup_link('0 Kommentare', '1 Kommentar', '% Kommentare'); ? ></small>


<?php the_content('Kompletten Artikel lesen'); ?>

</div>

<?php endwhile; ?>


<div class="nav">
<div class="aLeft">< ?php next_posts_link('&laquo; vorheriger Eintrag') ? ></div>
<div class="aRight">< ?php previous_posts_link('n&auml;chster Eintrag &raquo;') ? ></div>
</div>

<?php else : ?>


<h2 class="center">Nichts gefunden</h2>
<p class="center">Sorry, aber du suchst etwas was nicht da ist.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>

<?php endif; ?>

That’s it! Nun haben wir unseren Blogeinträgen eine Struktur gegeben, wie sie dargestellt werden sollen.

Wenn nun eine Kategorie, ein Archiv, eine einzelne Seite etc aufgerufen wird, holt sich WordPress immer die index.php für solche anfragen, da wir für Kategorien, etc. noch keine Templates erstellt haben. Dieses vorgehen von WordPress fällt unter dem Begriff „Template Hierarchy“. Näheres hierzu unter http://codex.wordpress.org/Template_Hierarchy

Problem: Wenn wir nun einen einzelnen Beitrag aufrufen, wird dieser Beitrag in der index.php aufgerufen und dort haben wir nichts eingebaut, damit auch Kommentare angezeigt bzw. geschrieben werden können. So gehen wir zum nächsten Kapitel

Einzelne Beiträge & Kommentare

Wir benötigen für diesen Schritt eine Datei namens single.php. Diese Datei erstellen wir nach dem selben Schema und Inhalt wie zu Beginn die index.php also:

<?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="content">

</div>
<?php get_footer(); ?>

Zwischen dem „Content“-Div sagen wir nun WordPress was zu tun ist, wenn ein einzelner Beitrag aufgerufen wird. Und das erledigt folgender Code:

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


<div class="nav">
<div class="aLeft">< ?php next_posts_link('&laquo; vorheriger Eintrag') ? ></div>
<div class="aRight">< ?php previous_posts_link('n&auml;chster Eintrag &raquo;') ? ></div>
</div>

<div class="post" id="post-< ?php the_ID(); ? >">


<h2></h2>

<div class="entrytext">

<?php the_content('Kompletten Artikel lesen'); ?>


<?php link_pages('<p>< strong>Seiten: ', '</p>', 'number'); ?>


<p><small>geschrieben am < ?php the_time('d.m.Y') ? > um < ?php the_time() ? > in < ?php the_category(', ') ? > von < a href="mailto:< ?php echo antispambot(get_the_author_email()); ? >">< ?php the_author() ? > &middot; < ?php comments_rss_link('RSS 2.0'); ? > feed.<br />

< ?php if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) { ? >
< a href="#respond">Schreibe ein Kommentar oder setze einen < a href="< ?php trackback_url(true); ? >" rel="trackback">Trackback auf deine Seite.

< ?php } elseif (!('open' == $post-> comment_status) && ('open' == $post->ping_status)) { ? >
Zur Zeit k&ouml;nnen keine Kommentare abgegeben werden. Setze doch einen < a href="< ?php trackback_url(true); ? > " rel="trackback">Trackback auf deine Seite.

< ?php } elseif (('open' == $post-> comment_status) && !('open' == $post->ping_status)) { ? >
Pings setzen ist zur Zeit nicht erlaubt.

< ?php } elseif (!('open' == $post-> comment_status) && !('open' == $post->ping_status)) { ? >
Weder Pings noch Kommentare sind erlaubt.

<?php } edit_post_link('Beitrag editieren.',","); ?>
</small></p>

</div>
</div>

<?php comments_template(); ?>

<?php endwhile; else: ?>


<h2 class="center">Nichts gefunden</h2>
<p class="center">Sorry, aber du suchst etwas was nicht da ist.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>

<?php endif; ?>

Zu einem Beitrag gehören wiederum auch Kommentare – welche wir jedoch noch gar nicht behandelt haben. Lediglich haben wir einen Befehlt gesetzt der eine Template holt. Wie kann das sein? Wir haben doch bisher keinen Template für Kommentare erstellt? WordPress sucht sich die comments.php aus der Core-Referenz „default“. Deswegen sollte beim erstellen eines eigenen Templates, dieser Ordner niemals gelöscht werden.

Für die Kommentare können wir uns aus dem „default“-Ordner bedienen und in unseren „Theme“-Ordner kopieren. Wir sollten jedoch eine Blick in die Datei werfen und ggf. das englische durch deutsch ersetzen.

Weiteres Vorgehen

WordPress benötigt für volle Funktionalität folgende Dateien:

style.css *
comments.php *
comments-popup.php *
header.php *
footer.php *
sidebar.php *
home.php
single.php *
index.php * is used if the query template is not present.
page.php
category.php
author.php
date.php
archive.php
search.php
searchform.php
404.php

* haben wir bereits erstellt.

Was tun wir als nächstes? Ich erstmal nichts mehr. Ich denke der Grundsatz von „eigenen Template“ sollte klar geworden sein. Deine Aufgabe nun ist es für alle weiteren Dateien Templates für dein Theme zu erstellen und das Stylesheet zu füllen. Hierzu gibt es dann demnächst auch noch ein kleines Tutorial…

http://codex.wordpress.org/Templates#Working_With_Templates

Hinweise

Hier wurde auch nur mit Wasser gekocht und somit können Fehler und Unstimmigkeiten halt auftreten. Das ist keine Absicht sondern einfach Menschlich. Ich bin dankbar für jede Kritik oder Hinweis, sofern das in einem konstruktiven und respektvollen Rahmen abläuft.

Dieses Tutorial wurde von Steffen Thalmann erstellt und dem Webdesignblog zur Verfügung gestellt. Vielen dank!

Verwandte Artikel
  1. Eigenes Wordpress Template in wenigen Schritten - Schritt 3
  2. Eigenes Wordpress Template in wenigen Schritten - Schritt 4
  3. Eigenes Wordpress Template erstellen
  4. Eigenes Wordpress Template in wenigen Schritten - Schritt 1
  5. Eigenes Wordpress Template in wenigen Schritten - Schritt 6

am Februar 7, 2006 um 19:52 Uhr | in Allgemein, Webdesign | 71 Kommentare

27 Trackbacks/Pingbacks
  1. Pingback: Eigenes Wordpress Template erstellen » Webdesignblog on Februar 7, 2006
  2. Pingback: Eigenes Wordpress Template erstellen » Webdesignblog on Februar 7, 2006
  3. Pingback: justadrink » Blog Archiv » Eigens Template (Aufbau) für Wordpress on Juli 28, 2006
  4. Pingback: Ein eigenes Wordpress-Template erstellen » die Netzspielwiese on Dezember 31, 2006
  5. Pingback: mein Notizblog » Erstellen eines WordPress-Templates on Januar 1, 2007
  6. Trackback: BRIGADOON.........2007 on Januar 30, 2007
  7. Pingback: Let’s talk about… deeed! » Blog Archive » Umzug. on Mai 6, 2007
  8. Pingback:   kostenlose Wordpress-Themes by netz-blogger.de on Mai 7, 2007
  9. Pingback: kostenlose Wordpress-Themes : netz-blogger.de on Mai 11, 2007
  10. Pingback: YSNB - YetSomeNewBookmarks Di., 05.06.07 | rundgemacht.de on Juni 6, 2007
  11. Pingback: kostenlose Wordpress-Themes on Juli 2, 2007
  12. Pingback: Top-Weblog24 » Eigenes WordPress-Template / Theme erstellen on Juli 24, 2007
  13. Pingback: monschun.com » Blog Archive » Wordpress Theme erstellen on August 6, 2007
  14. Pingback: marktpraxis_blog » Blog Archiv » Wordpress Themes verstehen und anpassen on August 12, 2007
  15. Pingback: Lil’ Lee HomeZone » WordPress - Theme Development on August 26, 2007
  16. Pingback: muvik » Blog Archiv » Wordpress-Themes einfach erklärt on Oktober 24, 2007
  17. Pingback: Mein erstes eigenes Theme on Januar 19, 2008
  18. Pingback: netztreiben.de» News Wordpress » kostenlose Wordpress-Themes on Februar 27, 2008
  19. Pingback: templatr - Wordpress Templates selbst gestalten | Web 2.0 Blog - Online Marketing on April 29, 2008
  20. Pingback: Blogdesign: Ein eigenes Wordpress-Theme erstellen on Mai 24, 2008
  21. Pingback: Themewechsel on Juni 18, 2008
  22. Pingback: … und was machst du so? auf Wer ist eigentlich Paul? on Juli 8, 2008
  23. Trackback: Find engine batteries in North Dakota on Juli 15, 2008
  24. Pingback: zahlenzerkleinerer » Blog Archive » Wordpress Theme im Eigenbau on September 8, 2008
  25. Pingback: So schreibt man ein eigenes Wordpress-Template/Wordpress-Theme « Mywebz.de on Januar 10, 2009
  26. Pingback: wordpress-template erstellen « riesenagentur.de on Januar 31, 2009
  27. Pingback: Scorpion-Networks Blog » » Wordpress Templates on März 21, 2009

44 Kommentare
  1. Basti, Februar 25, 2006:

    Also sirgendwas stimmt da nicht:

    [Mit einigen wenigen HTML- und Template-Tags haben wir uns somit eine füllige Seitennavigation gebastelt. Wenn wir uns nun mal die Seite im Browser wieder betrachten, werden wir am unteren Ende der Navigation eine PHP-Fehlermeldung sehen. Das kommt daher, weil wir eine Date „searchform.php“ eingebettet haben. Wir errinnern uns jedoch nicht daran diese Datei angelegt zu haben oder? Also: schnell nachholgen mit folgendem Inhalt:

    Setze hier hinter dem Div „menue“ ebenfalls ein
    ]
    Nach “Inhalt” fehlt was und nach “ebenfalls ein” fehlt was…

  2. Christian Strang, Februar 25, 2006:

    Ja, vielen dank, waren noch ein paar Codeauszeichnnungen falsch, sollte nun einigermaßen passen.

  3. Bernhard Wanger, März 18, 2006:

    Hallo
    Vielen Dank für dein Tutorial, es hat mir eine übersichtliche Einführung in die Erstellung von Templates für Wordpress gegeben.
    Allerdings habe ich noch zwei Fehler gefunden:
    - In deinem Code steht öfters < code> anstellen von <code> (also ohne Leerzeichen).
    - Deine Links im Abschnitt “Zeige Metainformationen” werden nicht geschlossen.

    Freundliche Grüsse

  4. Christian Strang, März 18, 2006:

    Hallo Bernhard, vielen dank für deine Hinweise. Ich verwende in Wordpress eine “Code”-Funktion, leider funktioniert sie nicht perfekt daher muss ich manche PHP, als auch HTML-Befehle entwerten, indem ich sie zum Beispiel so schreibe: &lt ?php>

    Ausserdem möchte ich noch darauf hinweisen, das dieses umfangreiche Tutorial seiner Zeit von Stefan Thalmann geschrieben wurde und dann, freundlicherweise, dem Webdesignblog zur Verfügung gestellt wurde.

  5. Delphin308, Juni 8, 2006:

    Hi, bin zwar nicht blond, aber nicht so erfahren :-( (leider), gibts denn nirgends eine komplette Anleitungs wie ich ein Template selber bauen kann? Klar gibts genug Freebies, aber ich bin noch nicht auf das gestossen, was mir wirklich zusagt bzw. eins das muss dann wieder kaufen ,und nur kann ich mit dem Anbieter keinen Kontakt aufnehmen weil den deine Kontaktformular nciht aufrufbar ist.
    Kann mir denn keiner helfen?
    LG von Delphin308

  6. Christian Strang, Juni 8, 2006:

    ?? ich dachte dies wäre ein komplettes Tutorial zum erstellen eines Templates?

  7. Delphin308, Juni 8, 2006:

    lach, ups - dachte nur weil da steht:”
    Was tun wir als nächstes? Ich erstmal nichts mehr. Ich denke der Grundsatz von „eigenen Template“ sollte klar geworden sein. Deine Aufgabe nun ist es für alle weiteren Dateien Templates für dein Theme zu erstellen und das Stylesheet zu füllen. Hierzu gibt es dann demnächst auch noch ein kleines Tutorial…”

    LG von Delphin308

    PS: Könnte ich Sie auch privat anschreiben, damit ihr nicht soviel von meiner “Dämlichkeit” erscheint *g

  8. Christian Strang, Juni 8, 2006:

    Hi nochmal,
    war auch ein Missverständnis meinerseits:

    Das Tutorial oben ist von Steffen Thalmann erstellt und dem Webdesignblog freundlicherweise zu Verfügung gestellt worden, ich wollte den Text in seinem original belassen und deshalb steht der Satz noch mit drin. Dennoch handelt es sich hierbei um ein vollwertiges Tutorial zur Erstellung eines Wordpress Templates, Steffen geht darum auch nicht auf die Erstellung eines Stylesheets im allgemeinen ein, da dies der Bereich von CSS ist und dieses Thema ein ganzes Buch füllen würde.

    Natürlich kannst du mich privat anschreiben, aber bitte nur wenn du mich nicht sie’zt ;)
    Meine Emailadresse lautet: christianstrang@web.de allerdings kann ich dir keine Fragen in Bezug auf “Wie erstellt man ein Stylesheet” und dergleichen geben, dafür gibt es sehr gute Artikel im Internet.

    P.S. Ich finde nicht das du dich dämlich angestellt hast, wenn ich mich zurückerinnere hab ich schlimmeres von mir gegeben ;)

  9. Immobilien, Juni 28, 2006:

    Hi Christian, danke für diesen Tutorial :) wenn man das als Grungerüst für Themes nimmt, und daraus z.B. paar rohe 2 oder 3 Columns Themes baut, muss man später nur CSS anpassen, um dem Blog neues Aussehen zu verpassen ;)

  10. Birgit, Juli 19, 2006:

    Habe gerade nach diesem Tutorial gearbeitet und erst mal Danke an Autor und Hoster. Ein paar Anmerkungen:

    Ich bin zwar fit in HTML und CSS, PHP ist mir aber ein böhmisches Dorf und Wordpress habe ich gestern erstmals installiert.

    Ein wenig verloren war ich am Anfang, da war zum Teil nicht ganz klar in welche Datei welcher Code soll. Abhilfe brachte ein Blick in den default-Ordner.

    Wegen der Code-Umsetzung haben sich auch einige Code-Fehler eingeschlichen (oder war’s ein Test, der den Lernenden gleich das Debugging mit beibringen sollte?): Wenn man den Code kopiert, sind oft vor und hinter dem ? im PHP-Tag Leerzeichen, die da nicht hingehören. Manchmal auch in HTML-Tags. Im PHP Code fehlt oft das abschließende Semikolon am Ende.

    Das lässt sich selbst bis auf die Datei single.php auch ganz gut korrigieren. In dieser Datei jedoch wird’s mächtig unübersichtlich und - nach meinem laienhaften PHP-Verständnis - auch fehlerhaft. Eine Korrektur wäre fantastisch!

    Sonnige Grüße

    Birgit

  11. Christian Strang, Juli 19, 2006:

    Hi Birgit,
    die Fehler im Code sind keine Absicht, ich habe die Erklärung dafür nun an den Anfang dieses Artikels geschrieben und hoffe das euch dieser Artikel dennoch einen Nutzen bringt. Viel Erfolg und vorallem Spass bei der weiteren Template-Entwicklung!

  12. Stefan, Juli 25, 2006:

    Fehlt im h1 Tag nicht noch (hoffe das funktioniert jetzt)
    /”>

  13. Crap Talker, Oktober 13, 2006:

    Hallo Christian,
    ich habe mich mal dran gesetzt, ist aber schon ziemlich aufwendig. Aber das Tutorial ist sehr hilfreich, danke für denTipp.

  14. Webmaster, Oktober 16, 2006:

    Super Tutorial. Hat mir sehr weitergeholfen. Weiter So.

  15. nicolas, November 2, 2006:

    So ein Tutorial habe ich schon lange gesucht, werde mir wohl endlich mein eigenes Wordpress Template umsetzten können.

  16. r0man.de, November 27, 2006:

    Dann kann ich ja in die Wordpresswelt einsteigen, danke ;)

  17. Kai, November 28, 2006:

    Ich habe eine Frage:
    In der index.php ist das Tag leer! Eigentlich sollte doch dort der Name des Blog Eintrages stehen!
    Was für ein Eischub gibt es dafür?

  18. Lisa, März 5, 2007:

    Sehr schönes Tutorial. Ich bin alles Schritt für Schritt durchgegangen und werden demnächst das neue Template aktivieren. Danke schonmal! Gruß

  19. //Link17, März 23, 2007:

    sehr gutes tutorial, hat mir alles nahe gebracht, was ich brauchte ^^

    Danke

  20. Ludwig, Mai 21, 2007:

    Ich betreibe inzwischen zwei Blogs und vier CMS auf Wordpress Basis.
    Wie man sieht, ist mit Wordpress vieles möglich. Die Bedienung ist auch für den Kunden in vielen Fällen viel simpler als mit einigen anderen vollwertigen CMS Systemen.
    Mit HTML Kenntnisse und etwas PHP lässt sich vieles auf die eigene Bedürfnisse anpassen …

  21. Nemox, Mai 22, 2007:

    Also irgendwie gibts nen Hammer Fehler. und deswegen steig ich grad gar nicht durch.
    Bei:

    Von Kopf bis Fuss und dazwischen nichts.
    Da wird zuerst der Header.php erwähnt. Also die aufmachen und alles reinschreiben. Aber weiter unten soll ich dann die Footer.php mit beenden? muss ich des verstehen?

  22. Christian Strang, Mai 22, 2007:

    Ich habs nun nochmal hervorgehoben und hoffe das es nun verständlich ist, was in welche Datei kommt. In der footer.php stehen wirklich nur die schliessenden HTML-Tags.

  23. Nils, Mai 30, 2007:

    Hey, danke für die Anleitung.Hat mir sehr geholfen.

    Gruß

  24. phil, Juni 9, 2007:

    vielen Dank für das Tutorial. Sind zwar noch einige Fehler drinne und iss manchmal bischen komisch erklärt aber im großen und Ganzen sehr gut.

  25. Harzteufel, August 1, 2007:

    hallo, ich erhalte folgende fehlermeldung:

    Parse error: syntax error, unexpected T_ELSE in /mnt/web6/31/43/5438443/htdocs/harz/wp-content/themes/test/index.php on line 14

    die index.php beinhaltet folgenden code:

    “>

    geschrieben am in von ·

    Nichts gefunden
    Sorry, aber du suchst etwas was nicht da ist.

    kann mir jemand weiterhelfen??? :-S danke!

  26. Harzteufel, August 1, 2007:

    ach, verdammt.. der eingefügte code wird sicherlich irgendwie interpretiert, ne?

    also, in meiner index.php steht in zeile 14 folgendes:

    achtung! ich habe vor das 1. fragezeichen und hinter das 2. fragezeichen ein leerzeichen eingefügt. nun sollte es sichtbar sein!

  27. Felix Haller, August 4, 2007:

    Sehr schönes Tutorial hat mir sehr weitergeholfen

    Sehr Stark

  28. WYK, August 14, 2007:

    Oh, wie schön. Hier habe ich eine gute Hilfe, wie ich eine alte Seite, bei der ich mich schon mit Websitebaker versuche, auf WP umzustellen.
    Danke!

  29. Patric, August 17, 2007:

    ich habe inzwischen schon mehrere templates für wordpress erstellt.
    allerdings nur kompatibel mit bzw. für firefox.
    sicherlich geht es dabei um css und hat hier eigentlich nichts zu suchen, aber gibt es im zusammenhang mit wordpress nicht einen möglichkeit eine größere menge an browsern mit einzubinden.
    ein template oder layout mit div, css blablabla an firefox anzupassen ist relative einfach.
    beim IE allerding habe ich immer so meine probleme, unter anderem auch da meine css kenntnisse noch nicht so gut sind.

    hoffe es gibt hier ein paar leute die mir ein paar gute tipps geben können oder so freundlich sind und mir ein oder zwei links geben.

  30. Christian, August 17, 2007:

    Wie du schon richtig gesagt hast, das Layout und seine Darstellung hat in dem Sinne nichts mit der Template-Engine von Wordpress zu tun. Um Seiten kompatibler zu machen empfehle ich dir einfach das Layout für den Firefox zu entwerfen und danach die Mängel im IE zu beheben. Auch wenn ich kein Freund des IE bin, soviele Unterschiede gibts da nun auch nicht ;)

  31. FallenLoki, September 27, 2007:

    “Hier wurde auch nur mit Wasser gekocht und somit können Fehler und Unstimmigkeiten halt auftreten.”

    … dieser Ausspruch trifft es doch sehr genau und es muss ganz schön wenig Wasser gewesen sein. Gerade wenn man bedenkt, dass auf ein bereits vorhandenes Tutorial aufgebaut wurde.

    Als Note würde ich eine 4- anpeilen.

    MfG FallenLoki

  32. Michael van Engelshoven, Oktober 1, 2007:

    Hi!
    Ich kann Fallen Loki mal überhaupt nicht zustimmen! Wenn man von HTML, CSS und PHP keine Ahnung hat, sollte man die Finger von WP-Templates lassen.
    Ich habe mit diesem Tutorial den Grundstein für meinen Blog gelegt. Es sind meine ersten schritte in Wordpress und ich komme sehr gut zurecht. Anhand dieser Infos und der offiziellen Templatetag-Doku von Wordpress kommt man ganz nach vorne! Super!

    Vielen Dank!

  33. Christian Strang, Oktober 1, 2007:

    Besten Dank Michael, das Tutorial ist nicht von mir, aber der Autor hatte ihn mir netterweise zur Verfügung gestellt und ich glaube dieses Tutorial (auch wenn mein Wordpress manche Formatierungen zerstört hat) hat schon vielen geholfen ein eigenes Wordpress-Template zu machen!

  34. arama motoru optimizasyonu, Februar 15, 2008:

    danke für diese anleitung, habe mir ein design als grafik erstellt, leider ist es mir nicht möglich daraus ein wp themes zu machen, kann da mir jemand helfen

  35. Daniel, Februar 19, 2008:

    Super Tutorial, danke für die Mühe. Hat mir sehr geholfen das Templatesystem von WP zu verstehen, danke!

  36. eddy, Mai 2, 2008:

    Vielen Dank für das Tutorial..trotz Kritik und kleiner Fehler hat es mir sehr geholfen das Prinzip von Wordpress zu verstehen.

  37. Peter, Juli 6, 2008:

    Hi,

    ich finde es zwar toll, dass Du Dir diese Arbeit gemacht hast.

    Aber: ich sehe der Beitrag ist schon einige Tage älter. Warum also hast du es nicht geschafft die Fehler mal zu entfernen? Somit ist es für Newbies wirklich keine Hilfe. Ausserdem ist in deinem Beitrag irgendwo ab der 2. Hälfte ein Fehler. Es erscheint alles nur noch als ein einziger großer Link.

    Wenn Du das noch in den Griff bekommen würdest, TOP!

    Gruß und danke
    Peter

  38. Marlene, Juli 11, 2008:

    Hallo,
    Wenn ich deinen Beitrag durchlese geht ab ca der Hälfte ein link bis kurz vor ende!
    ich hoffe du verstehst was ich meine!

  39. HoLzHaUs, Juli 21, 2008:

    Hallo,

    habe mir ebenfalls überlegt ein wp template selber zu erstellen, aber wie ich sehe ich das dann doch nicht so einfach!

    Würde mir gerne ein Template erstellen mit 3 oder 4 Spalten…
    Hat von Euch jemand einen Tipp? wo ich kleine aber saubere Vorlagen finden kann? Danke!

  40. Christoph Tornau, August 15, 2008:

    Vielen Dank für das Tutorial. Gibt es irgendwo den Sourcecode, welcher hier besprochen wird, zum Download. Das ganze Template nochmals in einem ZIP-Archiv zu haben, fände ich sehr gut. Leider habe ich nichts dergleichen gefunden.

  41. Olli, Dezember 9, 2008:

    Tausend Dank! Super Einstieg in WP. Habe nie die Geduld gehabt, mich mit dem WP-Source auseinanderzusetzen. Diese kleine Einführung hier zeigt, wie einfach das ganze eigentlich ist. Von jetzt an ist die Templateerstellung kein Problem mehr.

  42. Maik, Dezember 12, 2008:

    Danke für das Tutorial, aber ACHTUNG!

    Wenn man als action-Attribut des Suchformulars echo $_SERVER['PHP_SELF']; angibt, entsteht eine Cross-Site Scripting Sicherheitslücke. Man sollte hier bestimmte Zeichen kodieren.

    Lösung:

    echo htmlspecialchars($_SERVER['PHP_SELF'], ENT_QUOTES);

  43. Webdesign Edenkoben, Dezember 25, 2008:

    Danke, ist zwar schon ein paar Tage alt der Artikel aber er hat mir einen lehrreichen Nachmittag verschafft. Das Ergebnis ist irgendwie immer noch nicht “vollständig” aber trotzdem ist das ein gelungener Einstieg in die Materie. Schreib doch mehr davon :)

  44. Basti, März 9, 2009:

    Vielen Dank für das super Tutorial, werde mich am Wochenende mal mehr damit beschäftigen und mal sehen,vielleicht hab auch ich dann bald mein eigenes Template :-)!

Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.