WP – Tutorial, wir schreiben ein WordPress Theme – Teil 1

bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.

Comments

  
  1. Micha says:

    Sehr schöne Einführung, es macht Lust auf mehr.
    Eine Kleinigkeit hab ich gerade entdeckt. In der Druckvorschau sind noch die G....gle Anzeigen drin. Ich habe sie bei mir extra deswegen in ein Div gepackt, damit ich sie im print.css unterdrücken kann.

  2. Hy Micha, danke für die Blumen. Freue mich schon jetzt auf unseren gemeinsamen Karneval äh. Blogparade. Vielleicht hast du ja schonmal Lust ein Logo zu entwerfen. Das logo der damaligen Plugin-Parade war nicht übel. Vielleicht können wir den Autor auch gewinnen. Denke, dass viel zu viele gute Artikel im Netz im Laufe der zeit unter gehen. Immer wieder kommen die gleichen Fragen hier rein, ähnlich im WPD-Forum.
    Die Print habe ich eben angepasst. Ich habe schon eine eigene Klasse vergeben, leider hatte ich die ID für die floatende Adsense-Werbung vergessen. Danke für den Hinweis. Sollte nun also einen schönen Ausdruck ergeben.

  3. Micha says:

    Oh je Frank, bis dahin wird wohl noch viel Schnee fallen ;-) . Ich weiss gar nicht, welcher Teufel mich geritten hat, diese Baustelle anzufangen...

  4. Micha says:

    Hm.. so ein guter Artikel und ausser mir noch kein Kommentar. Die bauen wohl alle an Robert Basics Blog rum ;-)

  5. Das ist ganz normal. Auch beim Tutorial zum Schreiben eines Plugins gibt es im Verhältnis wenig Kommentare, schade eigentlich. Es steckt doch eine Menge Arbeit drin. Dagegen findet ein Beitrag zu einem Plugin, welches nicht immer mit einem Klick aktiviert ist Unmengen an Kommentaren. Die Leser sparen meist mit Lob und kommen mit vielen Fragen per Kommentar. Um so mehr freue ich mich immer, wenn mal ein Päckchen von Amazon einfliegt.

  6. fufanu says:

    Hallo Frank,

    ich bin ein absoluter Neuling auf dem WordPressgebiet. Naja, nicht ganz, da ich mit Aufmerksamkeit dein Buch gelesen und angewandt habe. Jetzt geht es darum, das gelernte umzusetzen. Ich möchte gerne mit Hilfe von WordPress eine kleine Website basteln mit unterschiedlichen Templates. Da kommt mir dieses Tutorial gerade recht. Ich freue mich auf mehr. VIELEN DANK!!

  7. Benjamin says:

    Ich habe noch nie ein Projekt realisiert, dass auf absolute Positionierung beruht. Das Floats anfällig wären kann man so auch nicht stehen lassen. Bei zu großen Bilder ragt das auch einfach über die Grenzen des Elterncontainer hinaus, denn dieser hat doch ne feste Breite zugewiesen bekommen und dann gilt der Ober sticht den Unter. Ich kann dass Argument also nicht so richtig nachvollziehen.

  8. Leo says:

    Hallo Frank!

    Gute Einführung! Bis jetzt gelingt es dir die Einfachheit und Tiefe gut kombinieren zu können. Ich bin auf weitere Tutorial-Artikel gespannt :-) Ich hätte ein paar Kleinigkeiten anzumerken:

    Viele Blogging-Tipps-Blogs u. ä. Webseiten empfehlen Beiträge zunächst in einem Office-Programm zu schreiben, um eine Rechtschreibprüdfung durchführen zu können und weil der Text just übersichtlicher ist. In deinem Beitrag fallen mir ein paar Schreibfehler auf. Schreibst du direkt in WordPress?

    Ich weiss nicht wie es dir erscheint, aber ich würde Ping-/Trackbacks und Kommentare trennen (so wie es z. B. Michael tut). Zusätzlich finde ich noch schöner, wenn Kommentare einklappbar wären (so wie es bei der Web Designer Wall realisert ist. Ich weiß, dass es zusätzlichen Markup/Javascript/Zeit/Aufwand kostet und ich selber das noch nicht in meinem Blog integriert habe - du bist aber ein Template-Entwickler, oder? Na ja, es sind just Anregungen und ich finde so was steigert Usability und Übersichtlichkeit. Übrigens Quicktags für Kommentare finde ich auch hilfreich und Vorschau auch und ... Na gut, es reicht fürs Erste ;-)

    Servus aus München

  9. Hallo Leo,
    danke für Lob und Hinweise.

    Zu den Kleinigkeiten: ich schreibe direkt online in WP, bin betriebsblind, und lese den Entwurf nach Schreiben, welches meist ohne Blick entsteht. Ich mache Fehler, ganz klar, versuche diese dann zu finden und zu beseitigen. Eine Rechtschreibkorrektur nutze ich nur in Form des Firefox-Add-on.

    Trennen von Ping-/Trackback und Kommentaren meide ich, habe es schon mehrfach in den Tutorials zum Trennen angerissen. Grund ist der Bezug von Kommentaren auf einen anderen Kommentar via laufender Nummer. Die Zeitachse wäre zerstört und nicht so einfach nachvollziehbar. Ebenso wären die anderen Artikel mit ihren Kommentaren, die bereits existieren, damit nicht mehr korrekt abgebildet. Aber ich stellen Ping-/Trackbacks kompakter dar, ohne Inhalt, um den Lesefluss der Kommentare zu behalten.

    Kommentare sind einklappbar, oder meinst du jeden einzelnen? Ebenso ist das Kommentarfeld, die Kommentarhilfe und der Sidebar zu reduzieren.

    Template-Entwickler: ich habe lediglich Spass an Web in allen seinen Formen. Ich erstelle vorrangig HTML und PHP, rein aus Spaß. WordPress gefällt mir und ist meist die Basis, weil es so flexibel und trotzdem durchschaubar und mächtig ist. Daher ist auch das Buch WordPress von mir entstanden. Ich will, mittlerweile, etwas von der Faszination Web und WordPress weiter geben und zurück geben.
    Quicktags und Vorschau sind in diesem Layout raus geflogen, weil der Mehrwert die Fehler und Ladezeit in den Scripten nicht aufwiegt.

    LG Frank

  10. Lutz says:

    Hallo Frank,

    auch ich bin ein absoluter Neuling auf dem WordPressgebiet. Habe bisher immer nur "konventionelle" Seiten gebaut oder mit Typo3 gearbeitet.Bin aber nach 3 Tagen Beschäftigung mit dem Thema sehr begeistert, vor allen Dingen die Flexibilität und Geschwindigkeit der Anpassungsmöglichkeiten gefallen mir sehr gut. Da kommt Dein Tutorial gerade im richtigen Moment. Ich freue mich auch auf mehr. VIELEN DANK FÜR DEINE TOLLE VORLEISTUNG!!

  11. @Leo: Kommentarvorschau ist nun drin, realisiert mit jQuery und damit keine zusätzlichen Ladezeiten und einige wenige Zeilen JS-Code, denn jQuery nutze ich ja bereits. Jetzt bin ich auch damit zufrieden. Vielleicht gefällt es dir jetzt besser.
    Ajax Kommentareintragung werde ich eventuell noch realisieren, wenn JS im Browser aktiv ist.

  12. Ingo says:

    Hallo, Frank !
    Vielen Dank auch von mir für deine Reihe, die ja schon den dritten Teil erreicht hat. Schön und gut verständlich geschrieben. Da macht das Lesen Spaß.
    Bin bei WP auch noch recht neu und bin gespannt, wie ich es umsetzten kann ;)
    Gruß, Ingo

  13. Jared says:

    Hallo Frank,
    auch von mir ein dickes Lob :)
    Bin grade dabei mir ein Theme zu erstellen und mir ist aufgefallen das Variante 1 (Sidebar Links: nur der Sidebar floatet) leider nicht im Downloadpaket enthalten ist... Wäre es bei der Variante nicht theoretisch möglich die Sidebar nach gutdünken aus und einzublenden? Also auf der index.php aus und in der page.php einblenden?! Korrigier mich bitte wenn ich daneben liege

  14. Die Datei ist drin, habe es eben nochmal geprüft: sb_float_left.html.
    Damit kann man bsp.weise den Sideabr ausblenden via JS, richtig, denn der Content passt sich an und ist nicht fixiert.

  15. Jared says:

    Entschuldige. Dann war ich wohl blind!!!
    Kann ich die Sidebar nicht auch theoretisch mit "is_page" und "is_home" steuern?

  16. @Jared: aber sicher, dazu stehen die Conditional Tags zur Verfügung. Ich dachte bei der Frage eher an Ausblenden via JS und dazu muss das CSS und Markup passen. Die Abrage mit is_... geht immer.

  17. Jared says:

    Ich muss dir nochmal ganz doll danken Frank!
    Habe in den letzten Tagen eine Vorlage und das Tutorial von dir genutzt und bin super zufrieden. ;-) Musste erstmal einiges über floaten lernen aber jetzt klappts.

    Damit das ganze jetzt auch ein WordPress Theme wird, setz ich mich an Teil 2 der Serie...

  18. Carsten says:

    Vielen Dank für die Mühe! Für alle, die zu faul zum lernen sind, ist das hier vielleicht was:
    http://www.internet-echo.de/webentwicklung/eigenes-wordpress-template-erstellen/
    Finde es richtig gut. Würde mich interessieren, was Ihr davon haltet?
    Gruß Carsten

  19. Hisky says:

    Guten Abend,

    habe ein Problem mit der Sidebar - wandert dank zu großer Bilder bei einem Kollegen (www.kitziblog.de) im IE nach unten.

    Container hat 800px, Content 600px und die Sidebar 180px. Float left und right sind hinterlegt.

    Woran kann es noch liegen!?

    Danke
    Heiko

  20. @Hisky: wandert dank zu großer Bilder
    Formatiere beispielsweise die Bilder per CSS auf die entsprechende Breite

    #content img {
    width: 640px;
    }
    
  21. @Carsten: Ist sicher eine viel geforderte Lösung, aber nicht wirklich eine Alternative. Webdesign ist, wie viele Formen des Design, Handarbeit. Ich persönliche liebe das Schreiben im Editor und die dabei entstehende Lösung. Solche Generatoren sind nicht wirklich eine Alternative, gleiches glaube ich für WYSIWYG-Editoren. Handarbeit ist Maßarbeit und man kann das Markup viel besser kontrollieren und optimieren.
    LG Frank

  22. Don Donato says:

    Hi Frank,

    hatte eigentlich vor, ein fertiges WP-Theme zu nehmen und dies zu modifizieren, anstatt eins selbst zu basteln.... Aber ich lass mir das wohl jetzt doch noch mal durch den Kopf gehen ;) Gute Arbeit!

    Gruß Donato

  23. BlogIna says:

    Trotzdem würde ich immernoch gewisse Teile eines bestehenden Themes nehmen, vor allem Teile die kaum noch verbesserungswürdig sind. Man muss ja schliesslich nicht versuchen das Rad neu zu erfinden.

  24. Daniel says:

    Genau das richtige um in den Ferien mal ein neues Design zu basteln. Vielen Dank für Deine Mühen. Ich finde eigene Themes immer besser als Vorlagen.

  25. Peter says:

    Wow, das nenne ich mal eine ausführliche Anleitung. Danke, hoffe ich finde mal die Zeit, das auch umzusetzen.

  26. lig tv says:

    thanks for article. it's very good

  27. Super Tutorial, Danke!!!
    aber eines verstehe ich nicht: Ich kann doch die zip-Datei nicht entpacken und in den theme-Ordner stellen. Das fehlen doch noch wesentliche Elemente eines Themes.

    OK, ich habs einfach getan und - wie vermutet - kann der Ordner nicht als Theme angezeigt werden.

    Was hab ich da falsch verstanden???

    Trotzdem: Danke für das Tutorial!!!!!

  28. @Raphael Bolius: Teil 1 ist kein Theme für WP, es wird erst eines.

  29. Hallo Frank, ja inzwischen hab ich das auch kapiert. ;-) Das ganze geht - wie immer, wenn man was Neues lernt - nur Schritt für Schritt mit vielen Umwegen. In Kürze wird mir das alles ganz simpel vorkommen und meine Fragen als eher peinlich. So wars bei Quark, bei Photoshop bei HTML und bei... Also warum soll es diesmal anders sein. ;-)
    Das Tutorial ist jedenfalls super!

  30. Moe says:

    Auf bueltge.de beschreibt Frank Bültge wie man sein eigenes WordPress Theme erstellt. Dabei knüpft er mit seinem Tutorial an den Inhalt seines Buchs "WordPress - Weblogs einrichten und administrieren" an und bietet darüber hinaus den direkten Dialog mit dem Autor.

  31. mcca says:

    Echt super gut...Super Tutorial *Daumen Hoch*

    gruß Mcca

  32. Arbeite nicht Stillen

    Wen oder was soll ich stillen? Oder ist eher gemeint "Arbeite nicht im Stillen"?

    Ansonsten: Ein schönes Tutorial (zumindest der erste Teil ;-) )

  33. Marc says:

    Super Tutorial, werde ich mir wohl diese Nach mal um die Ohren haun! :D

    Grüße

  34. Echt super Tutorial! Hat mir echt dabei geholfen meine erste Website mit WordPress umzusetzen. War ein hartes Stück Arbeit aber endlich bin ich fertig.

    Also danke nochmal.

    Grüße
    Lisa

  35. stickma says:

    Hiermit ist es mir wenigstens gelungen die Grundlagen gut zu verstehen und mein Template einigermaßen hinbekommen, auch wenn ich bei der Erstllung noch einige Probleme hatte, konnte mir das hier schon sehr helfen. Danke!

  36. Christoph says:

    Die Informationen sind sehr hilfreich. Ich hab auch versucht so ein Template zu erstellen, ich hatte jedoch Probleme damit. Aber mit diesem Beitrag verstehe ich die Grundlagen besser als vorher.

  37. Felix says:

    Vielen Dank, sehr gelungenes und leicht nachvollziehbares Tutorial. Ich versteht die Grundlagen jetzt besser als zuvor und ich denke jeder würde sich über weiteres Tut freuen.
    LG, Felix

  38. Tobias says:

    hey dass nenn ich mal ne coole sache..
    sehr gut erklärt und beschrieben danke..
    mfg tobias

  39. karl says:

    als wp-rookie ist dieses tutorial goldwert, so langsam fangen die groscherl an zu fallen!

    vielen Dank für die Mühe
    gruß karl

  40. Zoe says:

    Ich bin erst jetzt, nachdem ich bereits mein erstes eigenes WordPress Theme erstellt habe auf Deinen Artikel gestossen, fand aber noch interessante Infos drin. Danke!

  41. Chrizzo says:

    Vielen Dank für das absolut großartige Tutorial. Ich hab lange rumgedruckst, meine Webseite komplett auf WordPress umzustellen, weil mir davor grauste, ein eigenes Theme zu bauen. Es hat mir sehr geholfen, vielen Dank!

  42. Super Tutorial, werde ich mir wohl diese Nach mal um die Ohren haun! Das ist sehr informatif und komplett .

  43. Johannes says:

    Das ist ganz normal. Auch beim Tutorial zum Schreiben eines Plugins gibt es im Verhältnis wenig Kommentare, schade eigentlich. Es steckt doch eine Menge Arbeit drin. Dagegen findet ein Beitrag zu einem Plugin, welches nicht immer mit einem Klick aktiviert ist Unmengen an Kommentaren!!

  44. Matt says:

    Hallo. Nur schnellschnell! Habe erst den Anfang gelesen und finde deine Arbeit und Einstellung haben schonmal ein grosses BRAVO verdient!
    Danke & weiterhin viel Spass

  45. Julia says:

    Verständlich und schön geschriebenes Toturial
    Vielen Dank! lg Julia

  46. Bernd says:

    Mit Floats erstellte Layouts gehen schnell kaputt, ist ein Bild zu groß für einen Container oder nur 1px ist zu viel, dann ist das komplette Layout hin.

    Ich denke hier solltest du mal nachbessern, das favorisiert für den Laien zu unrecht die absolute Positionierung. Welchen Grund sollte er haben, ab hier noch weiterzulesen? Dabei muss sowas gar nicht passieren, wenn ich Bildern statt Pixelwerten Prozentangaben gebe...

  47. Tom says:

    A great introduction to WP. I have in the past used the following site to help with designing for WP: http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/

  48. Pierre says:

    Eine wunderbare Sache so ein eigenes Theme. Werde mal anfangen und mich da reinarbeiten. :D

    Danke dafür *thumbsup*

  49. Andi says:

    Sehr schöne Anleitung genau so etwas habe ich gerade gesucht.

  50. Kop says:

    Hey,
    gibt es das Tutorial auch als PDF?
    Gruß -
    Robert

  51. Oli says:

    @Kop , druck dir die Seite doch über einen PDF Druckertreiber, dann hast es als PDF Datei...

  52. Can says:

    Wollte mich nur mal bedanken, mit deiner Anleitung habe ich meine ersten Schritte hin und dann auch mit WordPress getan. Wunderbar, weiter so !

  53. Spanky says:

    Tolle Anleitung. Ich selbst bin auch ein großer Fan von WordPress. Ich hoffe das ganze wird so wie es ist immer weiter und weiter entwickelt, dann haben wir auch Spass damit und können schöne Seiten bauen ;o)

  54. xxx says:

    da schreibt man einen kommentar was man sich noch wünscht und zack ist es da. sehr schön beschrieben!

Trackbacks

  1. [...] lang ersehnte WordPress-Tutorial startet bei [...]

  2. [...] Teil 1 - Wir legen los, Voraussetzungen, Grundlagen, Layout [...]

  3. [...] Bueltge hat eine sehr lesenswerte Beitragsreihe zum Thema “Wir schreiben ein WordPress-Theme” [...]

  4. [...] Teil 1 - Wir legen los,Voraussetzungen,Grundlagen, Layout [...]

  5. [...] Teil 1 - Wir legen los, Voraussetzungen, Grundlagen, Layout [...]

  6. [...] anders!“ habe ich einige kleine Veränderungen vorgenommen. Unter anderem wollte Leo einige kleine Vorzüge [...]

  7. [...] Bueltge.de: “WP - Tutorial, wir schreiben ein WordPress Theme - Teil 1″hat ein Opera-Probelm, sehr textlastig, hält sich viel mit allgemeinen Designfragen auf  [...]

  8. [...] Tutorial-Wunsch: WordPress WP - Tutorial, wir schreiben ein WordPress Theme - Teil 1 | bueltge.de [by:ltge.de] Texto.de Dazu muss ich sagen. ICh habe mein WordPress ohne ein Tutorial gemacht. Dazu sind aber [...]

  9. [...] als Lesestoff hierzu sei folgendes empfohlen: WordPress-Themes verstehen 1 von Vladimir Simovic und WP - Tutorial, wir schreiben ein WordPress Theme - Teil 1 von Frank Bueltge. Dieser Beitrag wurde am 28 März 2008 um 16:14 geschrieben und unter [...]

  10. [...] wir schreiben ein WordPress Theme - Teil 3WP - Tutorial, wir schreiben ein WordPress Theme - Teil 2WP - Tutorial, wir schreiben ein WordPress Theme - Teil 1WordPress 2.5 und ein userabhängiges AdmindesignAbfrage einer Script-Version in [...]

  11. [...] Templates eingesetzt oder ein eigenes WP-Theme erstellt, wie unter der Anleitung von Frank sehr gut beschrieben. Und WordPress bringt selbst schon eine Menge sogenannter Template Tags mit, [...]

  12. [...] WP - Tutorial, wir schreiben ein WordPress Theme - Teil 1 - bueltge.de [by:ltge.de] [...]

  13. [...] damit auch etwas dargestellt wird, gibt es hier das sicher schon bekannte Tutorial auf Bueltge.de. Ist zwar noch nicht ganz fertig, wird aber hoffentlich [...]

  14. [...] public links >> schreiben WP - Tutorial, wir schreiben ein WordPress Theme - Teil 1 -... First saved by ewherrmann | 2 days ago Rezensionen schreiben und gratis Vorab-Exemplar [...]

  15. [...] Teil 1 - Wir legen los, Voraussetzungen, Grundlagen, Layout [...]

© 2014, since 2005 bueltge.de [by:ltge.de] · Theme is built by ThemeShift