von Claudia Klinger, 24. Mai 2008, 11:32
Blogdesign: Ein eigenes WordPress-Theme erstellen
10 Quellen des Wissens, besichtigt und kommentiert – aktualisiert im September 2010
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
BlogPimp 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 :-)
***
Willst Du neue Artikel mitbekommen? Dann abonniere den Newsfeed.
Am 25. Mai 2008 um 23:16 Uhr
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.
Am 10. Juni 2008 um 09:08 Uhr
[...] Passagen deutlich hervorheben und durch ein paar Unterüberschriften ergänzen. Danke nochmals Claudia für das freundliche und vor allem konstruktive Feedback [...]
Am 12. Juni 2008 um 09:15 Uhr
[...] 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 [...]
Am 8. September 2008 um 11:25 Uhr
[...] 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, [...]
Am 17. September 2008 um 16:07 Uhr
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.
Am 21. Dezember 2008 um 22:21 Uhr
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
Am 3. Januar 2009 um 17:45 Uhr
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!
Am 11. Januar 2009 um 00:01 Uhr
[...] 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. [...]
Am 5. Februar 2009 um 00:43 Uhr
Gute Übersicht!
Am 7. Februar 2009 um 21:16 Uhr
Klasse Beitrag mit super Links. Die meisten kannte ich bisher nicht. Macht das Individualisieren einfacher!
Am 8. Juni 2009 um 19:11 Uhr
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.
Am 3. Juli 2009 um 19:32 Uhr
[...] man richtig GUTE Blogpostings schreibt… Der Schocker Blogger » Reichtum & Geld verdienen Blogdesign: Ein eigenes WordPress-Theme erstellen Eigenes WordPress-Template Webdesignblog Der Schocker [...]
Am 14. Januar 2010 um 09:24 Uhr
vielen dank für die Infos..!!!!!
Am 19. Januar 2010 um 18:09 Uhr
Ja die infos kommen auf jeden fall gut an..
und sind sehr informationsreich..
gut erklärt..
thx Jones
Am 2. Mai 2010 um 19:34 Uhr
Mit den Theme Editoren/Generatoren kann ich zwar eher wenig anfangen, die Tutorials hingegen liefern doch echt gute Tipps – danke dafür!
Am 20. Juni 2010 um 22:18 Uhr
[...] http://www.webwriting-magazin.de/blogdesign-ein-eigenes-wordpress-theme-erstellen/ [...]
Am 21. Juni 2010 um 11:10 Uhr
Ich danke für die nützliche Information!
Am 30. August 2010 um 23:22 Uhr
Danke für die Infos !
Super Beitrag
Am 7. Oktober 2010 um 17:50 Uhr
Super Tipps, habe bis jetzt ein wenig mit Artister immer rumgespielt.
Am 24. Oktober 2010 um 11:06 Uhr
Super Zusammenstellung, danke!
Am 25. Dezember 2010 um 23:09 Uhr
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.
Am 27. Februar 2011 um 17:42 Uhr
Klasse Artikel und tolle Zusammenstellung.
Danke Gruß Miki
Am 6. März 2011 um 08:37 Uhr
Ein echt starker Artikel der wirklich eine gute Orientierung bietet. Jetzt brauch ich nur noch die Kreativität und die Muse :-)
Am 21. April 2011 um 21:13 Uhr
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 ;)
Am 10. Mai 2011 um 11:43 Uhr
[...] 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 [...]
Am 27. Juni 2011 um 08:29 Uhr
[...] 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 [...]
Am 26. Juli 2011 um 14:05 Uhr
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.