Ähnliche Beiträge
- WordPress Custom Post Types als CSS-Klasse im Frontend nutzen
- Einfaches Autoresize für die WordPress Hintergrundbild-Funktion
- Ein Gästebuch im WordPress TwentyTen Theme
- WordPress Login-Seite anpassen #3
- WordPress Child-Themes verstehen
- WordPress und jQuery - einige Tipps
Journal
- Daten aus WordPress an JavaScript übergeben #2
- Projekt Five Speed
- WordPress Nutzer Daten in Übersichten der Artikel und Usern verwenden
- Minimum WordPress als Framework
- Back of a Webpage: bueltge.de
Projekte
- Beautiful Web Type Combinations
- Experimente
- Generator für hCard/vCard
- HTML Lorem impsum DE
- Image2base64 Generator
- md5/.htpasswd Generator
- Mehrsprachigkeit mit WordPress
- WordPress Entwicklung
- WordPress im Unternehmen
- WP Basis Theme
- WP Engineer
- WP Plugin Sicherheit
Nutze die Feeds
Abonniere die neusten Artikel via RSS-Feed oder Atom und verfolge die Kommentare ebenso via RSS-Feed oder Atom-Feed
Themen
Sidebar
ein-/ausblenden
WP - Tutorial, wir schreiben ein WordPress Theme - Teil 1
Anzeige
Inhalt:
- Teil 1 - Wir legen los,
Voraussetzungen,
Grundlagen, Layout - Teil 2 - Das statische
Design wird
WordPress-fähig - Teil 3 - Noch mehr Daten
aus dem Backend - Teil 4 - Der Loop
- . . .
Das Schreiben eines eigenen Themes, womit das komplette Layout einer WordPress-Applikation gemeint ist, ist das Ziel einer ganzen Reihe von WordPress-Nutzern.
Mit meinem Buch „WordPress - Weblogs einrichten und administrieren“ habe ich einen kleinen Einblick in das Erstellen in ein eigenes Theme gegeben. Immer wieder gibt es Fragen und die Tiefe des Kapitels wird kritisiert. Leider war es im Umfang des Buches nicht möglich tiefer und detaillierter auf den Entstehungsprozess eines eigenen Themes einzugehen. Außerdem kann ich in diesem Blog schreiben wie mir der Schnabel gewachsen ist und die Strings gehen mir damit leichter von der Hand.
In diesem Zusammenhang wird in den naher Zukunft hier ein komplettes Tutorial entstehen, insofern ich durch halte. Im Vorfeld habe ich schon in einem Beitrag angefragt, welches Layout bevorzugt für den Entstehungsprozess gewünscht ist. Schaut man sich die Kommentare an, dann ist schnell erkennbar, dass die Anforderungen sehr unterschiedlich sind und die Grundlagen für das Erstellen eines eigenen Themes sehr verschieden verteilt sind. Oft werden Begriffe im Umfeld von WordPress und Webdesign durcheinander geworfen und erschweren so das Verständnis.
Aus diesem Grund möchte ich im ersten Abschnitt auf Grundlagen und Vereinbarungen eingehen. Ebenso stelle ich Layouts vor, mit denen dann im Anschluss in den folgenden Teilen gearbeitet wird.
Ich wünsche Euch und mir viel Spaß mein Erstellen und Lernen. Die Artikel entstehen parallel zur Arbeit an verschiedenen Projekten, werden nur in der Freizeit oder in Wachphasen erstellt. Ich bitte also um Geduld und Einfühlungsvermögen. Ebenso bitte ich darum, dass Fehler und Verbesserungen in den Kommentaren oder Mail an mich bekannt gegeben werden. Ich erhebe nicht den Anspruch auf fehlerfreie Arbeit und freue mich über positive Kommentare, genauso wie über konstruktive Kritik.
Wenn wir eines durchs Internet lernen können, ist es Folgendes: Alle profitieren davon, wenn die wesentlichen Ressourcen frei verfügbar bleiben und kostenlos zugänglich sind.
Dann können alle etwas für sie Passendes darauf aufbauen.Lawrance Lessig
Was brauchen wir?
WordPress, eine laufende Installation sollte stehen. Dabei empfehle ich eine lokale Installation mit XAMPP. Diese Installation sollte jeder Teilnehmer im Vorfeld anfertigen. Die Installation und Einrichtung von WordPress ist ausführlich im Buch beschrieben. Alternativ gibt es eine sehr gute Anleitung auf blogshop.de- Editor, einen Editor mit PHP-, HTML- und CSS-Unterstützung ist bei der Arbeit sehr hilfreich. Ich für meinen Teil bevorzuge UltraEdit. Eine sehr gute freie Alternative stellt Notepad++ dar.
- XHTML Cheat Sheet, Quickreferenz (XHTML als PDF)
- CSS Cheat Sheet, Quickreferenz; Einige Möglichkeiten habe ich im Artikel „CSS Referenzen“ vorgestellt. Für das schnelle Nachschlagen und eine Übersicht neben der Tastatur empfehle ich noch immer die Referenzen vom Verbad Druck & Medien NRW (CSS als PDF)
- WordPress Codex, auch dazu gibt es Referenzen. Die Website des codex sollte aber immer zur Hand liegen um nähere Details zu den einzelnen Template- und Conditional-Tags nachzulesen. In diesem Zusammenhang empfehle ich das Firefox Add-on WordPress Helper, mit dem schnell auf den nötigen Seiten ist.
Firefox und einige Addons, ohne diesen Browser geht nix. Ich werde das Theme mit Hilfe dieses Browsers entwickeln. Dies liegt zum einen daran, dass er den Standard hervorragend unterstützt und dass es einige hervorragende Add-ons gibt, die die Entwicklung sehr erleichtern bzw. angenehmer machen. Dabei möchte ich auf das Buch verweisen, in dem es eine Auflistung meiner Empfehlung gibt. Wer dieses Buch nicht besitzt hat keinen Nachteil, der alle Add-ons werden auf dem entsprechenden Artikel im Blog zum Buch genannt.
Grundlagen - Themes und Templates
Immer wieder werden diese beiden Begriffe verschieden verwendet. Dies führt zu Missverständnissen und schafft eine schlechte Basis zum Arbeiten mit WordPress. Deshalb kurz und knapp - was ist ein Theme und was ist ein Template?
Template
Ein Template stellt die kleinste Einheit eines Theme dar. Es ist eine PHP-Datei, die sich innerhalb des Themes befindet. Eine ganze Reihe von Vereinbarungen sorgt dafür, dass WordPress einige Templates (z.B. single.php, index.php, 404.php) im Standard erkennt.
Weitere Templates können trotzdem vereinbart und im Backend von WordPress genutzt werden. Dazu später im Verlaufe des Tutorials mehr.
Theme
Das Theme ist eine Sammlung von Dateien - vorrangig PHP und CSS-Dateien, die die Darstellung des Weblog beeinflussen. Ein Theme ist das „Kleid“ deines WordPress und der Zusammenspiel der Dateien in einem Theme sorgt für die Darstellung. Dabei muss nicht jedes Theme die gleiche Anzahl und Namen von Dateien im Theme-Ordner enthalten! Ein WordPress-Theme besteht aus mindestens zwei Dateien, dem Stylesheet (style.css) und einer PHP-Datei (index.php). Im weiteren können Themes Grafiken, JavaScript-, Flash-Dateien und eine Reihe von zusätzlichen Dateien enthalten.
Dabei sollte man bei der Entwicklung eines Themes daran denken, dass möglichst nur das Stylesheet, die CSS-Datei(en), Einfluss auf das Aussehen des Blog haben.
Das Layout
Der eine oder andere möchte WordPress nicht nur als Weblog-Software einsetzen. Unter den Einsatzmöglichkeiten von WordPress kommt immer wieder die Anforderung WP als CMS, welches nicht ungewöhnlich und selten ist. Schon eine ganze Reihe von Webseiten basieren auf WordPress. Aber darum soll es nicht gehen.
ich stelle im folgenden Abschnitt einige Möglichkeiten für Layouts dar, wobei ich kurz und knapp auf das jeweilige Layout eingehe. Damit soll es in den nächsten Teilen dieses Tutorials weiter gehen. Sucht euch also bitte ein Layout oder erstellt ein eigenes mit statischem Webdesign. Dabei solltet ihr darauf achten, dass die gleichen Namenskonventionen nutzt. Ansonsten könnte das Nachvollziehen von Schritten und Code erschwert werden. Im weiteren möchte ich darauf hinweisen, dass ich ein Vertreter von möglichst schmalen Markup bin. Es sollte also möglichst keine DIV-Suppe entstehen.
Bevor wir aber in die Layouts einsteigen und ich die Grundlagen zum Verwenden näher erläutere, möchte ich noch einige Punkte von Andy Clarke zitieren und mit meinem Verständnis von Webdesign ergänzen. Dieses sollen nochmal den Prozess unterstreichen und meine Standpunkte darlegen.
- Nicht alle Browser sehen das gleiche Design! Ich gehe davon aus, dass das Design auf allen Browsern angesehen werden kann aber nicht gleich aussieht. Im besonderen Fall spreche ich da vom IE, den ich zwar prüfe und eventuell auch ein wenig anpasse, aber nur so, dass IE-Leser den Inhalt angenehm lesen können.
- Vermeide Hacks und Filter. Diese Aussage steht im Zusammenhang mit dem ersten Punkt und ich unterstütze sie weitgehend und spare so viele Zeichen Code.
- CSS-Selektoren stehen zur Verwendung bereit. Es gibt eine große Anzahl von Selektoren, darum nutzt sie und unterstützt die Möglichkeiten.
- Die Website sollte auch ohne aktives JavaScript leserlich und zugänglich sein.
- Nutze semantische Namenskonventionen und Mikroformate. Noch sind die Möglichkeiten dieser Techniken nicht weit verbreitet, aber es wird, do glaube ich fest, eine Zeit kommen, in der Mikroformate und einheitliche Namenskonventionen eine Rolle spielen und dem Leser der Website mehr Möglichkeiten zum Steuern der Site in die Hand gegeben werden. Bleibe als zukunftsträchtig im Design und Markup.
- Arbeite nicht im Stillen - gebe Ideen und Lösungen weiter. Nur so können sie genutzt, verbessert und korrigiert werden.
- Validiere xHTML und CSS! Dazu stehen eine ganze Reihe guter Validatoren bereit. Am einfachsten ist sicher die Verwendung mit Hilfe des Firefox-Add-on WebDeveloper.
- Achte und implementiere Barrierefreiheit.
Die folgenden Layouts lassen sich im Anschluss als Paket downloaden. Das Paket lokal entpacken und den kompletten Ordne in das Theme-Verzeichnis eurer WordPress-Installation kopieren /wp-content/themes/. In diesem Ordner liegen dann eine Reihe von HTML-Dateien. Schaut euch die verschiedenen Layouts im Browser und Code an. Entscheidet euch für eine Lösung, mit der ihr dann weiterhin arbeiten könnt.
Es werden immer folgende Namenskonventionen im Layout verwendet. Ich habe versucht, sparsam im Markup und CSS zu sein und hoffe, dass so das Verständnis für den Code und die Realisierung einfacher ist. Im Laufe des Tutorials wird der Code umfassender. Da jeder bei der Entwicklung eine andere Herangehensweise hat, besteht so die Möglichkeit, dass jeder Teilnehmer seine Ideen im Anschluss an das Tutorial umsetzen kann.
- ID container für eine Container, der alle Bereiche umschließt
- ID header für den Kopfbereich - Begriff: Header
- ID sidebar für den linken/ rechten Bereich neben dem Hauptinhalt - Begriff: Sidebar
- ID content für Hauptbereich, hier stehen die Artikel und Seiten
- ID footer für den Fußbereich unter dem Hauptinhalt und Sidebar - Begriff: Footer
Im weiteren Teil dieses Tutorials werden wir dann aus der statischen HTML-Datei ein WordPress-Theme erstellen, Schritt für Schritt. Ich werde versuchen, dass die einzelnen Abschnitte nicht zu lang sind und mit einem sichtbaren Ergebnis enden.
Absolute Positionierung
Ursprünglich waren Floats nicht für Seitenlayouts gedacht. Nicht immer ist die Wahl eines Float-Design die beste Wahl, den sie sind empfindlich. 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. Deshalb ist hier ein Beispiel für absolute Positionierung.
Gerade im Umfeld eines CMS, bei der nicht die Entwickler des Design die Inhalte erstellen, ist so ein Layout oft hilfreicher. Das zu große Bild ragt dann eventuell aus dem Container raus, aber das eigentliche Design steht weiterhin. Absolute Positionierung ist robust und sollte in keinem Fall im Repertoire des Webdesigners fehlen oder vergessen werden.
Der wohl größte und auffälligste Nachteil, einen Container unterhalb des jeweilig längsten Container zu platzieren. Dazu kann man beispielsweise mit JavaScript eingreifen oder es muss absolut positionieren.
Floatende Positionierung
Die folgenden Beispiele basieren alle auf dem Floating-Prinzip. Es werden verschiedene Möglichkeiten gezeigt. Jede Möglichkeit hat andere Vor- und Nachteile. In diesem Zusammenhang gibt es eine Reihe guter Websiten im Netz und The StyleWorks soll stellvertretend genannt sein. Auf diesen Seiten kann man sich näher mit den Hintergründen auseinander setzen und für eine Lösung entscheiden.
Grundlegend sind alle Layouts ähnlich aufgebaut. Es gibt einen Sidebar, einen Content-Bereich und einen Footer. Der Footer soll jeweils unter der längsten Spalte sein. Das Floating der beiden Bereiche wird jeweils unterschiedlich realisiert, während das HTML-Markup immer gleich ist. Somit besteht einfach und unkompliziert die Möglichkeit das Design zu ändern.
Die Layouts kann man betrachten, in dem man auf das jeweilige Bild klickt.
Sidebar Links: nur der Sidebar floatet
Nur der Sidebar-Container floatet links. Der content-Bereich wird mit Hilfe des margin-Abstandes an die richtige Position gebracht.
Sidebar Links: Sidebar und Content floatet links
Beide Container floaten links, ohne weitere Formatierung „klebt“ der content-Bereich immer am Sidebar.
Sidebar Links: Sidebar floatet links und Content floatet rechts
Genau das Gegenteil zum übergeordneten Beispiel. Damit besteht immer eine Lücke zwischen Sidebar und Content. Die Ausrichtung des Sidebar und des Content sind mit dieser Lösung immer am äußeren Container ausgerichtet. Damit ist es einfach, dass die beiden Bereiche immer gleich breit mit dem Header und Footer sind.
Sidebar Rechts: Sidebar floatet rechts und Content floatet links
Für alle, die das klassische Blogdesign mögen - der Sidebar befindet sich im rechten Bereich. Damit ist der Content-Bereich links und floatet auch links.
Auch mit diesem Beispiel sind die beiden Container abhängig von äußeren Container und können recht einfach am Header und Footer ausgerichtet werden.
Sidebar Rechts: Sidebar floatet rechts und Content floatet rechts
Beide Container floaten rechts. Damit gibt es wieder keine Lücke ohne Formatierung zwischen Sidebar und Content.
Download:
Ist die Arbeit nicht 1 Euro wert?
Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.
Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.
Download als php-Datei: wp_tutorial_teil1.zip - 8 kByte
Fazit und Ausblick
Damit wären wir am Ende des ersten Abschnittes. ich wünsche und hoffe, dass ihr euch mit den Beispielen vertraut machen könnt und die Idee, das Markup und das CSS dahinter verstehen könnt. Ich wünsche viel Spaß beim lernen und erstellen des eigenen Themes.
Schauen wir wie es weiter geht: im folgenden Teil 2 werden wir aus dem gewählten statischen Design ein einfaches Template machen, so dass es WordPress damit etwas anfangen kann und die Daten aus der Datenbank schon zum Teil geladen werden.
Im dritten Teil werden wir dann wohl die einzelnen Dateien zerlegen und zu den klassischen Templates kommen. Dabei werden wir eine Reihe von Konventionen kennen lernen und verstehen.
Soweit zum Ausblick
Das Weblog wird angetrieben von
11. September 2007 um 14:32
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.
11. September 2007 um 14:55
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.
11. September 2007 um 20:42
Oh je Frank, bis dahin wird wohl noch viel Schnee fallen
. Ich weiss gar nicht, welcher Teufel mich geritten hat, diese Baustelle anzufangen...
11. September 2007 um 22:27
Hm.. so ein guter Artikel und ausser mir noch kein Kommentar. Die bauen wohl alle an Robert Basics Blog rum
12. September 2007 um 06:55
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.
18. September 2007 um 12:33
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!!
18. September 2007 um 16:47
30. September 2007 um 21:33
30. September 2007 um 21:53
2. Oktober 2007 um 11:36
5. Oktober 2007 um 09:27
9. Oktober 2007 um 22:41
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.
10. Oktober 2007 um 16:05
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
11. Oktober 2007 um 11:26
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
15. Oktober 2007 um 11:37
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!!
18. Oktober 2007 um 07:43
@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.
25. Oktober 2007 um 22:52
5. November 2007 um 10:47
21. November 2007 um 13:21
25. November 2007 um 12:49
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
28. November 2007 um 08:37
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
28. November 2007 um 09:19
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.
28. November 2007 um 09:29
Entschuldige. Dann war ich wohl blind!!!
Kann ich die Sidebar nicht auch theoretisch mit "is_page" und "is_home" steuern?
28. November 2007 um 12:47
@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.
2. Dezember 2007 um 16:39
Ich muss dir nochmal ganz doll danken Frank!
Musste erstmal einiges über floaten lernen aber jetzt klappts.
Habe in den letzten Tagen eine Vorlage und das Tutorial von dir genutzt und bin super zufrieden.
Damit das ganze jetzt auch ein WordPress Theme wird, setz ich mich an Teil 2 der Serie...
14. Dezember 2007 um 18:13
27. Dezember 2007 um 10:01
29. Dezember 2007 um 18:35
1. Januar 2008 um 01:39
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
2. Januar 2008 um 00:11
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
7. Januar 2008 um 08:46
@Hisky:
Formatiere beispielsweise die Bilder per CSS auf die entsprechende Breite
#content img { width: 640px; }7. Januar 2008 um 08:50
@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
28. März 2008 um 10:41
28. März 2008 um 16:14
31. März 2008 um 07:06
2. April 2008 um 10:18
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
19. April 2008 um 23:30
27. April 2008 um 16:57
5. Mai 2008 um 12:04
13. Mai 2008 um 09:12
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.
29. Juni 2008 um 13:27
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.
16. Juli 2008 um 11:45
12. August 2008 um 08:48
Wow, das nenne ich mal eine ausführliche Anleitung. Danke, hoffe ich finde mal die Zeit, das auch umzusetzen.
24. August 2008 um 15:16
thanks for article. it's very good
25. August 2008 um 20:04
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!!!!!
26. August 2008 um 10:35
@Raphael Bolius: Teil 1 ist kein Theme für WP, es wird erst eines.
26. August 2008 um 11:09
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!
1. Oktober 2008 um 00:20
2. November 2008 um 15:32
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.
10. Januar 2009 um 23:02
26. Februar 2009 um 14:48
Echt super gut...Super Tutorial *Daumen Hoch*
gruß Mcca
7. April 2009 um 17:38
Wen oder was soll ich stillen? Oder ist eher gemeint "Arbeite nicht im Stillen"?
Ansonsten: Ein schönes Tutorial (zumindest der erste Teil
)
24. Juli 2009 um 23:27
Super Tutorial, werde ich mir wohl diese Nach mal um die Ohren haun!
Grüße
5. September 2009 um 12:28
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
15. September 2009 um 11:07
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!
13. Oktober 2009 um 18:53
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.
25. November 2009 um 14:35
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
7. Januar 2010 um 18:45
hey dass nenn ich mal ne coole sache..
sehr gut erklärt und beschrieben danke..
mfg tobias
14. Januar 2010 um 16:42
als wp-rookie ist dieses tutorial goldwert, so langsam fangen die groscherl an zu fallen!
vielen Dank für die Mühe
gruß karl
22. Januar 2010 um 10:56
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!
19. April 2010 um 16:52
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!
14. Mai 2010 um 13:07
Super Tutorial, werde ich mir wohl diese Nach mal um die Ohren haun! Das ist sehr informatif und komplett .
29. November 2010 um 23:01
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!!
2. Dezember 2010 um 14:49
Hallo. Nur schnellschnell! Habe erst den Anfang gelesen und finde deine Arbeit und Einstellung haben schonmal ein grosses BRAVO verdient!
Danke & weiterhin viel Spass
14. Dezember 2010 um 09:51
Verständlich und schön geschriebenes Toturial
Vielen Dank! lg Julia
14. Februar 2011 um 10:33
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...
14. Februar 2011 um 17:10
@Bernd: auch dies ist kein Allheilmittel, wenn nicht das ganze Layout flexibel aufgebaut ist - aber diese Diskussion führen genügend andere.
15. Februar 2011 um 16:27
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/30. März 2011 um 18:47
Eine wunderbare Sache so ein eigenes Theme. Werde mal anfangen und mich da reinarbeiten.
Danke dafür *thumbsup*
11. April 2011 um 09:41
Sehr schöne Anleitung genau so etwas habe ich gerade gesucht.
25. April 2011 um 20:01
Hey,
gibt es das Tutorial auch als PDF?
Gruß -
Robert
27. September 2011 um 08:59
@Kop , druck dir die Seite doch über einen PDF Druckertreiber, dann hast es als PDF Datei...
13. November 2011 um 15:02
Wollte mich nur mal bedanken, mit deiner Anleitung habe ich meine ersten Schritte hin und dann auch mit WordPress getan. Wunderbar, weiter so !
25. November 2011 um 20:44
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)
8. Dezember 2011 um 14:24
da schreibt man einen kommentar was man sich noch wünscht und zack ist es da. sehr schön beschrieben!