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

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

Inhalt:

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?

  • WP LogoWordPress, 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, nicht mehr online)
  • 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-ButtonFirefox 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

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.

nur der Sidebar floatet 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 und Content floatet links</ Sidebar Links: Sidebar und Content floatet links
Beide Container floaten links, ohne weitere Formatierung „klebt“ der content-Bereich immer am Sidebar.

Sidebar floatet rechts und Content floatet links 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 floatet rechts und Content floatet links 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 floatet rechts und Content floatet rechts 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 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

75 Kommentare

  1. 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. Oh je Frank, bis dahin wird wohl noch viel Schnee fallen 😉 . Ich weiss gar nicht, welcher Teufel mich geritten hat, diese Baustelle anzufangen...

  4. 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.

  5. 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!!

  6. 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.

  7. 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

  8. 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

  9. 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!!

  10. @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.

  11. 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

  12. 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

  13. 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.

  14. @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.

  15. 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...

  16. 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

  17. @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

  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. 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.

Kommentare sind geschlossen.