#5 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo

WordPress Theme Tutorial
Teil 1 - Teil 2 - Teil 3 - Teil 4 - Teil 5

single.php - Die Beitragsansicht
Die Datei single.php ist fast identisch zur index.php. Es kommt nur ein kleiner, aber wichtiger Teil, hinzu: die Kommentare!
Diese bindet man am einfachsten wie folgt ein:
<?php if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) { ?><a href="<?php trackback_url(true); ?>" rel="trackback">Trackback</a><?php } ?> <a href="<?php the_permalink() ?>" rel="bookmark">Permanent Link</a>
<?php if(!('open' == $post-> comment_status) && ('open' == $post->ping_status)) { ?>
Zur Zeit kö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 } ?>
<?php comments_template(); ?>

Dieser Code kommt am besten nach der Beitragsausgabe und vor endwhile und else.

comments.php - Die Kommentare
Diese Datei gibt die Kommentare aus und erlaubt dem User einen neuen Kommentar zu schreiben.
Auf die Formatierung der Kommentare werde ich wohl später eingehen, da diese Datei relativ umständlich ist. Ich empfehle für den Anfang die comments.php aus dem Standard WordPress Theme, da sie dort bereits sehr gut formatiert ist. Den Feinschliff kann man mit CSS ja sowieso machen. Der Aufbau dürfte für den Anfang zu fast jedem Theme passen.

404.php - Auch ein Blog braucht eine Fehlerseite
Die Fehlerseite ist relativ einfach aufgebaut, sie besteht aus dem Layout der Seite (Header, Footer, Sidebar) und der Fehlermeldung.
<?php get_header(); ?>
<div class="post">
<h1>Fehler!</h1>
Die gewünschte Seite ist nicht verfügbar.<br />
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</div>
<div id="sitemap">
<?php get_sidebar(); ?></div>
<?php get_footer(); ?>

Der Aufbau mittels Header, Hooter und Sidebar dürfte aus den Dateien index.php und single.php bekannt sein.
Weiterhin befindet sich auf der Seite nur die Fehlermeldung. Hier ist sie genauso wie ein Post gestaltet (DIV post). Weiterhin wird das Suchfeld eingefügt, damit sich der Leser gleich auf die Suche begeben kann.

screenshot.png - Um das neue Theme besser darzustellen fehlt nur noch das Screenshot
Jetzt kommen wir schon zum letzten Teil dieses Tutorials. Nach dem das Theme nun fertig gestellt ist, sollten wir noch ein Screenshot erstellen. Es sollte eine Größe von 300×225px haben und als screenshot.png gespeichert werden. Es wird dann automatisch im Admin ‘Panel beim jeweiligen Theme angezeigt.

Fertig!
Fertig! Das erste WordPress Theme ist erstellt. :D
Ich würde mich über Kommentare zu diesem Tutorial freuen. Natürlich können auch Fragen zum Thema oder allgemeines Feedback abgegeben werden.
Wenn euch das Tutorial gefallen hat, würde ich mich über einen Backlink auf den webworkblog.net freuen.

WordPress Theme Tutorial
Teil 1 - Teil 2 - Teil 3 - Teil 4 - Teil 5

Ähnliche Beiträe

  • #1 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo
  • #4 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo
  • #3 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo
  • 26 Responses to “#5 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo”


    1. 1 Max

      Nettes Tutorial und gut beschrieben. Wäre ganz gut, wenn man das vielleicht noch ein wenig mehr beschreiben könnte hinsichtlich der Sidebar und einer groben CSS-Ausrichtung bzgl. der Navigation oder so.

      Habe noch eine kurze Frage:
      Fehlt bei “single.php - Die Beitragsansicht” nicht “get header” und “get footer”?

    2. 2 Mark

      Doch doch. Du nimmst die index.php und fügst zusätzlich noch das was oben steht ein. beides zusammen ist dann die single.php
      Man möchte ja sehen was man kommentiert ;)

    3. 3 webmeister

      Hallo

      zum Thema Fehlerseite in Blogs haben wir eine Blog Parade gestartet. Unter dem Motto “Zeig mir deine Fehlerseite” kann jeder Teilnehmer seine Fehlerseite präsentieren.

      http://www.webmeister.ch/blog/2007/07/27/zeig-mir-deine-404-error-seite/

      Unter allen Teilnehmern wird ein Buch verlost.

      Originelle Fehlermeldungen sind willkommen.

      Webmeister

    4. 4 fettverbrennung.org

      Hallo, mich würde interessieren ob das mit der neuen Wordpress Version immernoch so einfach geht.

    5. 5 Wolfgang Keim

      Super danke!!! Kurz und knackig…

    6. 6 Anna

      Wie installiere ich denn dann mein fertiges Wordpress-Theme?

    7. 7 Suzu

      also bisher finde ich das tutorial super! endlich erklärt mal einer im verständlichen deutsch, was es mit den jeweiligen Sachen auf sich hat. bisher hab ichs zwar noch nicht getestet, aber es klingt schon mal nicht schlecht. wer weiß, vielleicht blick ichs ja endlich und kann dann ein paar templates erstellen XD Danke!!!

    8. 8 till

      nicht gerade ausführlich erklärt, kann ich nicht gebrauchen.

    9. 9 Nordsee-Nachrichten

      Vielen Dank für das Tutorial! Ohne dieses wäre vermutlich mein erstes Theme nicht möglich gewesen. Schafft leider nicht jeder die Vielfalt von Wordpress auf ein Minum zu begrenzen.

    10. 10 Jannek

      Habe mir hier auch ein paar gute Tipps geholt!
      Danke dafür!

    11. 11 FuNKeR

      Hi,

      sehr schönes Tutorial. Deckt das gröbste ab. Solltest du das noch einmal erweitern, wäre es z.B. gut, die Widget-Funktionalität ebenfalls einzubauen. Das hab ich mir über Automattic geholt und funktioniert wunderbar.

      Ganz ohne Wissen bin ich da nicht rangegangen, braucht jedoch für ein komplett neues Theme die Basis. Und die hab ich hier gefunden. Danke!

    12. 12 anne von kann

      Hallo,
      gut wäre, wenn die Code-Sachen besser lesbar wären und nicht hintereinander weg… also schön übersichtlich untereinander.

      Ansonsten schön.

      PS: Aber eine Frage… Ich möchte gern bei “Seite erstellen” eine Seite anlegen, die hat halt standardmäßig das Template, mit rechts diesen Blog-Elementen (Standarttemplate, Links, Archive)…aber ich möchte ein anderes Template, das eher eine leere Seite ohne diese Blog-Elemente sondern nur mit von mir eingegebenen Texten und Bilder zeigt.
      Ich würde nämlich eine komplette Seite machen, da gibts z.B. “Über mich, Blog, Galerie” und im Prinzip soll halt nur “Blog” den Blogcharakter haben und bei den anderen Kategorien möchte ich nur Text-&Bilder posten ohne das da irgendjemand nochwas zu bloggen könnte.

      Wie bekommt man ein eigenes Template denn letztlich in die “Template-Auswahl” bei “Seite bearbeiten > Attribute > Template”
      Hoffe auf Hilfe, weil das jetzt in dem Tutorial nicht drinstand

    13. 13 Affirming Denial

      Vielen Dank für dieses Tutorial!
      Es liefert eine sehr gute Basis um einmal in den Aufbau der WP-Templates hinein zu kommen.

    14. 14 Martin S.

      Hi!

      Super dein Beitrag! Genau so eine Stück für Stück-Anleitung habe ich gesucht. Da selber auf Anhieb durchzusteigen ist schon recht schwierig.

      Danke!

      Gruß Martin

    15. 15 tos

      super tutorial, kurz und knapp

    16. 16 Billigflüge

      wie mache ich es denn, wenn ich zB die Homepage anders aufteilen will, dann muss ich doch irgendwo eine weiche einbauen …
      Homepage -> nimm das Template
      anderer Seite -> nimm dieses Template

      ansonsten ein übersichtliches tolles Tutorial

    17. 17 Gerrit

      Super Tutorial. Genau das habe ich gesucht. Super erklaert und sehr verstaendlich.
      Beste Gruesse aus den USA. Gerrit

    18. 18 Kristall

      Hey, super Tutorial. Endlich mal ein kurzes, verständliches und vor allem vollständiges, genau nach sowas habe ich die ganze Zeit über gesucht. Das einzige, was ich zu bemängeln habe, ist der Abschnitt zur style.css, da könnte man noch ein wenig näher auf die benötigten Angaben eingehen. Aber gut, dann suche ich mir das, was ich benötige, halt aus einer CSS-Befehlsliste raus, ist ja auch nicht tragisch ;)
      Liebe Grüße

    19. 19 Can

      @kristall

      am einfachsten ist wenn du dir den webdeveloper &oder firebug für firefox holst damit kannst du während du dein theme anguckst (also ist aktiviert und du befindest dich in deinem blog) per mauszeig alle klassen id´s etc anzeigen lassen

      gruß can

    20. 20 Disan

      Danke Kurz und gut!

    21. 21 Thomas

      Gut beschrieben!
      Danke sehr!

    22. 22 blogs

      verständlich erklärt…
      die codes hätten etwas übersichtlich eingepflegt werden können:)
      gibt es demnächst auch ein tuto für functions.php im wp?

    1. 1 Party | Schnack's Blog
    2. 2 So schreibt man ein eigenes Wordpress-Template/Wordpress-Theme « Mywebz.de
    3. 3 querverweis // Ein eigenes Wordpress Theme
    4. 4 Kostenlose Themes zu Tausenden - Starterpack für jeden Blogger | The @lpha and the omega

    Leave a Reply