Claudia Klinger am 24. Mai 2008 —

Blogdesign: Ein eigenes WordPress-Theme erstellen

Da ich immer schon meine Webseiten selber baute und es gewohnt bin, über jeden Pixel selbst zu herrschen, hatte ich Blogs lange ignoriert: Himmel, diese Standardoptik! Auch die vielen Themes zum Download machten das aus meiner Sicht nicht besser: ich will ALLES selbst gestalten und nirgendwo soll ein Duplikat zu finden sein.

Also machte ich mir dann die zunächst recht mühsame Arbeit, mein eigenes Design (z.B. vom Digital Diary, das vom Üblichen etwas abweicht) durch Veränderung der Standardtemplates hinzubekommen. Das funktionierte ganz gut, doch schleppe ich damit jede Menge unnötigen und verwirrenden Ballast in der CSS-Datei mit, durch den ich dann kaum noch selber durchblicke. So richtig kreativ werden (wie ich’s im MoMag versuchte) fällt auf diese Art auch schwer.

Mittlerweile fange ich also anders an, erschaffe zuerst ein fehlerfreies CSS-Layout und sehe DANN erst zu, wie ich das in ein („leeres“) WordPress-Theme einstricke. Im Rahmen dieses Lernprozesses fielen einige nützliche Links an, die ich hier mal weiter gebe (und auch gelegentlich aktualisiere):

Themes zur Inspiration:

Best of Weblog-Design: 30 individuell gestaltete Blogs, gesammelt vom Photoshop-Weblog. Leider sind es „nur“ internationale Blogs, diese zu präsentieren erschien dem Macher Dirk Metzmacher „neutraler“. In den Kommentaren wird übrigens zu Recht kritisiert, das die Designs oft mehr was fürs Auge bieten als für die Ergonomie bei der Nutzung. Aber das ist ja immer so: das Spektakuläre findet man erstmal toll, hundertmal drauf gucken und graue Schrift auf schwarzem Grund lesen, ist dann weniger schön – aber wer macht das schon?

Theme-Generator & Theme-Editor

  • Der WordPress-Theme-Generator: netter Versuch, dem User ohne CSS/XHTML/PHP-Kenntnisse eine Möglichkeit zu geben, sich ein eigenes Theme „zusammen zu klicken“. Leider geht das nur in sehr engen Grenzen. Ich hab‘ mal versucht, das Modersohn-Magazin damit „nachzubauen“, doch auch wenn ich auf die Grenzen-sprengenden Außenmotive verzichte, komme ich der intendierten Optik nicht annähernd nahe. Ein solches Blog ist nicht wirklich „individuell“, kann es auch gar nicht sein, solange die Auswahl möglicher Menüs, Platzierungen und Proportionen so begrenzt ist. Update: Mittlerweile wurde der Theme-Generator mehrfach aktualisiert und erweitert. Die damit erstellten Themes sind auch WP 3.0-kompatibel.
  • Artisteers Webdesign Revolution ist ein in ständiger Weiterentwicklung befindlicher WYSIWYG-Editor mit dem Anspruch, die Blog-Entwicklung auf das Niveau von Dreamweaver & Co. zu bringen. Ganz spannend, doch war die (ältere) Version, die ich getestet habe, doch sehr auf die Erschaffung „typischer Blogs“ ausgerichtet: immer wieder diese A4-Papier-Optik (mal mit runden Ecken, mal ohne) – schon meine jetzigen Kunden brauchen es auch mal anders. Auch erzeugt so ein Editor-Code zwangsläufig immer mal eine gewisse Menge überflüssigen Code – nichts für die, die gerne wissen, was unter der Haube los ist! Update: Mittlerweile ist das (kostenpflichtige) Programm auch WP3-kompatibel und exportiert auch Themes für Drupal, Joomla und andere CMS-Systeme.

CSS-Entwicklung

GrideasyBlogPimp GridEasy von Lothar „BlogPimp“ Baier: ein CSS-Framework nicht nur fürs Blogdesign, das jede Menge wieder kehrende Arbeit abnimmt und die Entwicklung einer „Full CSS-Website“ deutlich vereinfacht. Um es für’s Blogdesign zu nutzen, muss man allerdings die im Blogscript möglichen Strukturen im Kopf haben.

Tutorials zur Entwicklung von WordPress-Templates

  • CODEX auf WordPress.org – die (englischssprachige) Mutter aller Wissensquellen in Sachen Theme-Erstellung mit vielen Artikeln zu allem, was dazu gehört;
  • Steffen-Tahlmann hat sein Tutorial „Eigenes WordPress-Theme erstellen“ mittlerweile zu einem richtigen „Handbuch“ mit vielen Kapiteln ausgebaut- klasse! Man lernt dabei die Struktur und das Funktionieren des WordPress-Codes kennen. Schritt für Schritt werden alle WordPress-typischen „Schnipsel-Dateien“ erläutert, bis ein schlichtes Basis-Theme steht, mit dem man gut weiter arbeiten kann. Um den Rest (Design, CSS, Grafik) musste man sich in der vorigen Fassung selber kümmern, in der aktuellen Version lernt man, das CSS Framework „Bluprint“ einzubinden und zu nutzen.
  • WordPress-Themes Step by Step – ebenfalls ein sehr gutes Tutorial zur Erstellung eines zweispaltigen Themes unter Verwendung des YAML-Frameworks für die CSS-Styles. Autor ist Micha von DynamicInternet.
  • SEO-Template für WordPress von STEREOPHONE zeigt, wie man ein Theme baut, das WordPress als CMS nutzt, also OHNE den ganzen Blog-Schnickschnack! Auch ohne Plugins und ohne händisch im Code rumschreiben zu müssen. Für optisch „ganz normale Webseiten“, die aber selber pflegbar sind, wie viele Kunden es ja heute wünschen.
  • Auch Peruns ausführlicher Artikel WordPress als klassisches CMS – ein Beispiel zeigt, wie man WP als CMS für „normal aussehende“ Webseiten nutzen kann. Allerdings erläutert er das entlang am Code einer eigenen Seite – man muss also schon recht gute Kenntnisse rund um WP-Themes haben, um hier mitzukommen.

Mehr Nützliches für’s eigene WordPress-Theme

Und hier noch ein paar Fundsachen, die nicht fehlen dürfen:

  • Für Theme-Entwickler: Mein nacktes, blankes WordPress-Theme (SHIFT Website Development Weblog) – Wenn man schon recht gut weiß, was man machen will, ist so etwas ein Segen! Zudem basiert dieses „nackte“ Theme auf dem neuen WordPress 3.x Standardtheme “2010″ – man läuft also nicht Gefahr, veraltete und mittlerweile „missbilligte“ Bestandteile zu nutzen.
  • Wie man mittels Photoshop ein Blog-Layout erstellt, zeigt Schritt für Schritt das Tutorial „Create a modern Blog Layout“ auf psdvibe.com. Es geht allein um die Optik, wie man daraus dann ein Theme bastelt, wird NICHT vermittelt. Den gesamten Prozess zeigt das Tutorial „How To Create WordPress Themes From Scratch“ in einer dreiteiligen Serie – ebenfalls beginnend mit dem Photoshop-Layout. (leider alles auf schwarzem Background, für mich nicht grade Augen-schonend…)

…und eine Warnung

Vorsicht vor freien WordPress-Templates: Robert Basic zeigt mit seiner Warnung, warum der Wunsch nach Individualität nicht der einzige Grund ist, sich selber mit der Theme-Erstellung zu befassen.

Ich freue mich über weitere nützliche Quellen in den Kommentaren :-)

Diskussion

Kommentare abonnieren (RSS)
35 Kommentare zu „Blogdesign: Ein eigenes WordPress-Theme erstellen“.

  1. Vielen Dank für den Artikel. Ein paar der Links kannte ich schon, andere noch nicht, ich werde mich nun mal überall schlau lesen :) Ich beschreite gerade einen ähnlichen Lern- und Leidensweg: zwei Themes habe ich auf Grundlage eines Default-Themes entwickelt, frage mich aber immer noch so manches Mal, was um Himmels willen die eine oder andere Code-Zeile soll, ob sie gebraucht wird oder nicht.

    Nun habe ich die Blanko-Vorlage von texto.de entdeckt, die meinem Verständnis (ich verstehe PHP nur rudimentär) enorm voran geholfen hat.

    CSS pflegeleicht, übersichtlich und ohne Browserkompatibilitätsproblemen gibts mit dem YAML-Framework (www.yaml.de), das ich höchst empfehlenswert finde, aber ein wenig Einarbeitungszeit erfordert. Dafür kann man es dann aber auch für alle Projekte einsetzen.

  2. […] Passagen deutlich hervorheben und durch ein paar Unterüberschriften ergänzen. Danke nochmals Claudia für das freundliche und vor allem konstruktive Feedback […]

  3. […] es auch fast immer dazu, das jeweilige Webdesign in ein Blogskript einzupfriemeln (”Theme erstellen“), ohne das kaum mehr eine “ordentliche Website” auskommt – auch wenn sie gar […]

  4. […] sein. Nur wie beginnt man mit so einer großen Aufgabe, die suche bei Google liefert Blogeinträge die sich die selbe Frage stellen. Dann Findet man auch einen Theme Generator für WordPress, […]

  5. Bin in allen Punkten mit dir einer Meinung… zum Ausprobieren sind freie Templates ja okay, aber wer längerfristig bloggen will, sollte auch optisch für „Uniqueness“ sorgen. Sehr gute Erfahrung bei der Entwicklung eigener Templates habe ich übrigens mit „YAML“ (yet another multicolumn layout) gemacht.

  6. Hallo!

    Vielen Dank für die vielen Links und
    die sehr nützlichen Erklärungen, demnächst
    möchte ich mich mit WordPress beschäftigen
    hatte bisher noch keine Zeit dafür.

    gr Robby

  7. Das schön am layouten eines WordPress Templates ist, dass man nicht lange grübbeln muss was alles reinmuss, wie das wireframe auszusehen hat, etc. denn die hauptblöcke „Content, Sidebar, Logo“ sind ja eigentlich immer recht gleich, denn das wichtigste an einem Blog ist eben der Content und der nimmt einen Großteil an Platz ein (sollte es zumindest).

    Habe deinen Artikel gerade mal gebookmarked, werde sicherlich in nächster Zeit selbst wieder ein Template basteln und dafür ist diese Linksammlung wirklich sehr schön!

  8. […] Blogdesign: Ein eigenes WordPress-Theme erstellen Auf Templatr findet sich eine Art “Web 2.0 Theme-Generator”. Die Funktionen sind natürlich etwas eingeschränkt, jedoch ist dies für den Anfang sicher nicht schlecht. Auf dieser Seite finden sich noch einige Zusatz-Informationen soweit ich weiss. […]

  9. Gute Übersicht!

  10. Klasse Beitrag mit super Links. Die meisten kannte ich bisher nicht. Macht das Individualisieren einfacher!

  11. Super Links, ich habe jedoch wenn ich mir ein eigenes Template gebaut habe immer ein schlichtes oder fast leeres Template genommen und das dann erweitert bzw. nach meinen Wünschen umgebaut. Ist zwar dann nichts komplett eigenes aber mir hatte das bisher immer gereicht.

  12. […] man richtig GUTE Blogpostings schreibt… Der Schocker Blogger » Reichtum & Geld verdienen Blogdesign: Ein eigenes WordPress-Theme erstellen Eigenes WordPress-Template Webdesignblog Der Schocker […]

  13. vielen dank für die Infos..!!!!!

  14. Ja die infos kommen auf jeden fall gut an..
    und sind sehr informationsreich..
    gut erklärt..
    thx Jones

  15. Mit den Theme Editoren/Generatoren kann ich zwar eher wenig anfangen, die Tutorials hingegen liefern doch echt gute Tipps – danke dafür!

  16. Ich danke für die nützliche Information!

  17. Danke für die Infos !
    Super Beitrag

  18. Super Tipps, habe bis jetzt ein wenig mit Artister immer rumgespielt.

  19. Super Zusammenstellung, danke!

  20. Danke für die gute Zusammenfassung. Das Blankolayout war sehr hilfreich, aber auch die restlichen Tipps. Mag die Designs von der Stange nicht. Nur Designer können ja nicht alle WordPressdesgins erstellen, da ist es praktisch wenn das selber hinbauen kann.

    Alles eine fröhliche Weihnachten.

  21. Klasse Artikel und tolle Zusammenstellung.

    Danke Gruß Miki

  22. Ein echt starker Artikel der wirklich eine gute Orientierung bietet. Jetzt brauch ich nur noch die Kreativität und die Muse :-)

  23. Danke für die Linksammlung. Für jemanden wie mich, der mal auf die schnelle einen WordPress-Blog gestartet hat und das Standardtheme nun doch satt ist, genau richtig ;)

  24. […] ist die enorm hohe Auswahl an Word Press Templates im Web. Mit nur ein paar Klicks kann der Word Press User seinem Blog zu einem komplett neuen Erscheinungsbild verhelfen und mit frischen Farben den Blog […]

  25. […] ein Link: http://www.webwriting-magazin.de/blogdesign-ein-eigenes-wordpress-theme-erstellen/ This entry was posted in WP related. Bookmark the permalink. ← Ich will den neuen […]

  26. Sehr gute Linksammlung. Für diejenigen, die Templates im WordPress bearbeiten ist FV Code Highlighter Plugin empfehlenswert. Sehr erwähnenswert finde ich auch den WordPress Titan Editor: http://www.wpexplorer.com/titan-editor-shortcodes-plugin.html Damit kann man eigene Templates mit einem WYSIWYG Editor zusammenbauen. Leider ist dieses Plugin mit 25$ nicht umsonst.

  27. Klasse Artikel und super Zusammenstellung.

    Viele Grüße

  28. Naja, letztenendes geht es wohl darum den Nerv des Lesers zu treffen… hierfür muss jeder sein eigenes Erfolgsrezept finden.

  29. […] WordPress Template erstellen – WordPress Blogdesign: Ein eigenes WordPress-Theme erstellen Da ich immer schon meine Webseiten selber baute und es gewohnt bin, über jeden Pixel selbst zu […]

  30. hallo, habe mir mal auf Grunde des Beitrages hier Artisteer4 gekauft und Themes für WordPress erstellt.
    wenn man die dann noch ein bisschen mit einen herkömmlichen editor wie notpadd ++ aufpeppt dann kann man ganz tolle tehmes für wordpress erstellen.
    Aber nur Artisteer finde ich ist noch nicht das Maß aller Dinge.
    Eins muss man allerdings sagen. Wer noch nicht viel mit CSS3 zu tun hatte kann sich mit Artisteer 4 die ferrtigen Codes ausgeben lassen und sie so in eigene Projekte einbinden :)

  31. Ich habe mir Artisteer gekauft, um endlich einen eigenen Style im Blog zu bekommen. Leider fällt mir da auf, dass auf anderen Computern und anderen Einstellungen die Größe sich ständig verändert. Ich bin leider nicht so gut im Umsetzen solcher Sachen, aber wenn jemand genau weiß, wie man das einstellen kann, dass es auf Tablets (iPad) und PC’s die gleiche Größe hat, wäre ich sehr dankbar über eine kleine Nachricht. :)

    Lily

  32. Mir ist das alles zu kompliziert, bin nicht so ein Techi :D Ich nutze immer https://www.magglance.com/zeitschrift/zeitschrift-erstellen

  33. Liebe Leute, dieser Artikel ist von 2008!

    Klar, dass der nicht mehr aktuell ist…