WordPress Video-Tutorial Teil 4: Das Theme-Layout anlegen

von

Ellen Bauer

•

30. April 2011

Im 3. Teil des WordPress-Tutorials habe ich die Theme-Übersetzung mit Hilfe des Codestyling Localization Plugins vorbereitet. Inzwischen habe ich ein wenig am Theme weiter gearbeitet und möchte in diesem Tutorial-Teil zeigen, wie man die erste Grundstruktur des Layouts (Header, Content, Sidebar und Footer) im Theme aufbaut und mit welchen kleinen Tricks ich dabei immer arbeite. Viel Spaß beim Video-Tutorial :-)

Alle bisherigen Teile des WordPress Video-Tutorials, sowie weitere Screencasts findest du übrigens auch direkt auf unserer Vimeo-Seite.

Bisher bearbeitete Theme-Dateien

style.css
header.php
index.php
sidebar.php
footer.php

Die Theme-Dateien downloaden

Damit du dir noch einmal in Ruhe anschauen kannst, wie ich die Theme-Dateien des Toolbox-Blank Themes bisher bearbeitet habe, hier die die Theme-Dateien des 4. Tutorial-Teils zum downloaden:

Download
Theme-Dateien, WP-Tut Teil 4

Ich hoffe dir hilft auch dieses Tutorials bei der Entwicklung deiner eigenen WordPress-Themes weiter. Über dein Feedback und deine Fragen freue ich mich sehr!

Weitere Teile des WordPress Video-Tutorials

von

Ellen Bauer

Screencasts, Tutorials, WordPress

Kommentare

Patrick

•

30. April 2011

Antworten

Die Virendatenbank wurde aktualisiert ;)

Ich kann dir Microsoft Security Essentials empfehlen, wenn du ein zuverlässiges Anti-Viren-Program suchen solltest, das einen nicht mit solchen Meldungen bombardiert.

Ich werde mir die ganze Tutorial-Serie mal durchschauen, vor allem das Responsive Layout muss ich mir unbedingt mal aneignen.

Schönes Wochenende noch :)
1. Ellen
  
  •
  
  30. April 2011
  
  Antworten
  
  Hallo Patrick,
  
  hehe, danke für den Tipp, eigentlich mag ich es ja ganz gerne, wenn mein Laptop ab und zu mit mir spricht ;-)
  
  Im nächsten Teil des Tuts werde ich noch etwas genauer auf das Responsive Layout und die CSS3 Media Queries eingehen :-)
  
  Viele Grüße und dir auch ein schönes Wochenende,
  Ellen
Jonathan

•

30. April 2011

Antworten

Hi Ellen, für mein Geschmack hätte das Video etwas kürzer sein können; dann mit höherer Informationsdichte.

Lieben Gruß und schönes Wochenende :-)
Jonathan
1. Ellen
  
  •
  
  30. April 2011
  
  Antworten
  
  Hallo Jonathan,
  
  vielen Dank für dein Feedback, na ja, ich wollte nicht zu viel in diesen Tutorial-Teil rein packen, so dass auch für WP-Newbies Zeit bleibt sich die einzelnen Theme-Dateien erst einmal etwas anzuschauen und die Struktur der Theme-Dateien zu verstehen. Im nächsten Teil werde ich dann auf die CSS3 Media Queries eingehen und es auch versuchen, wieder etwas kürzer von der Minutenzeit hinzubekommen :-)
  
  Viele Grüße und dir auch ein schönes Wochenende,
  Ellen
Matthias

•

30. April 2011

Antworten

Eine wirklich tolle neue Tutorialreihe, die du da auf die Beine stellst. Vielen vielen Dank für die ganze Mühe!
Ulf

•

12. Mai 2011

Antworten

Auch hier noch mal: so ist die Tonqualität perfekt. Bitte so lassen :-D.

Da mich das ständige Gespringe zwischen Texteditor, WordPress-Back- und Frontend total nervös machen würde, habe ich mir ein nettes kleines Plugin installiert, das dem integrierten Editor von WordPress Syntax-Highlighting beibringt. So kann man auch auf einem Remote-Server ohne krüppelige FTP-Verbindung arbeiten und muss nur beim Erstellen neuer Dateien auf solche Methoden zurückgreifen. CodeStyling Localization heißt das gute Stück und funktioniert einwandfrei. Aber gut, bei deinem nervösen Computer scheint dich das nicht weiter zu stören :-D. Die ständig aufploppenden Systemmeldungen sind schon ein Spaß und erinnern mich wieder daran, wieso ich anno 2005 zum Mac gewechselt bin… ;-).

Schon mal eine andere Plattform ausprobiert? Auch Linux, vor allem Ubuntu, ist ziemlich cool und bringt quasi von Haus aus jede Menge nützliche Werkzeuge für den Webdesigner und -entwickler mit. Versuch macht kluch und man lernt nie aus. Außerdem, gerade für Webentwickler praktisch, integrieren sich Dienste wie Apache, MySQL, etc., was ja für WordPress unabdingbar ist, viel besser ins System. Die Dinger wirken unter Windows immer wie Fremdkörper, finde ich.
1. Ellen
  
  •
  
  13. Mai 2011
  
  Antworten
  
  Hallo Ulf,
  
  ja, ich hatte anfangs etwas Probleme mit dem Mikro, inzwischen habe ich mir aber ein Aufnahme-USB Mikro besorgt :-)
  
  Vielen Dank für deinen Tipp zum Plugin, ich selbst habe Syntax Highlighting bisher nur zur Darstellung im Frontend des Themes genutzt. Den Texteditor im WordPres-Admin nutze ich eigentlich kaum, da ich eigentlich immer mehrere Theme-Dateien parallel geöffnet habe. Das Wechseln zwischen Texteditor, Browser und WP-Adminbereich stört mich persönlich eigentlich nicht wirklich beim arbeiten, ist aber sicher auch Gewohnheitssache :-)
  
  Ja, ich nutze Windows, Ubuntu würde ich eigentlich gerne einmal ausprobieren, leider hat mir bisher wohl einfach die Zeit für die Umstellung bzw. Einarbeitung gefehlt…na ja, kann ja noch werden ;-)
  
  Viele Grüße,
  Ellen
  1. Ulf
    
    •
    
    13. Mai 2011
    
    Antworten
    
    Ubuntu macht wirklich Spaß und du wirst überrascht sein, wie schnell dein Computer plötzlich wieder ist ;-). Um schon mal in die Welt reinzuschnuppern, solltest du bei omgubuntu.co.uk reinschauen und den Feed abonnieren. Es ist echt toll, was die Community so baut. Und bei ubuntuusers.de findet man auch eine sehr aktive Community, die hilfsbereit und meist auch sehr freundlich ist. Hätte ich keinen Mac, wäre Ubuntu das System meiner Wahl. Ich verwende es auf nahezu allen Servern, die ich administriere und fiebere jeder neuen Version entgegen. Die Community hat für die Desktoptauglichkeit von Linux wirklich eine Menge getan.
magdalena

•

3. Juni 2011

Antworten

love it :)
Martin

•

5. Oktober 2011

Antworten

Hi Leute,

ich habe das Tutorial bis hierhin nachgebaut, und jetzt die fertigen Datein von hier genommen, (also nur die von DIESEM Tutorial Teil) und Sie hochgeladen. Innerhalb der Dateien habe ich „yoko“ mit meinem themename ausgewechselt. Aber die Darstellung sieht total anders aus :(

Die 2. Sidebar klebt am rechten Birlschirmrand und scheint mir auch außerhalb des Page Tags zu sein?

Gibts da ne Abhilfe? Kam das schon öfter vor? Wie sieht es bei diesem Theme eigentlich mit Browserkompatibilität aus?
mario

•

7. November 2011

Antworten

hi ellen,

sehr schönes und detailiertes tutorial. super für wordpress einsteiger. ich war so konzentriert, dass ich mich total erschreckt habe, als der virenscanner losging :D
aber wirklich tolle tutorials mit einer angenehmen Stimme ;) freue mich auf die nächsten teile
gruß
mario
Bettina Petri

•

4. Juli 2012

Antworten

Hallo Ellen,

bin gerade beim 4. Teil deines Tutorials angelangt. Bin echt total begeistert, ist echt super und total verständlich. Leider schaut das Layout bei mir nicht so aus, wie bei dir. Die blaue teritary box zeigt es einfach nicht an bei mir. Und auf der Home Seite ist kein Beitrag, sprich keine grüne Contentbox zu sehen, hab aber die Dateien genau so wie du sie hast. Kannst du mir weiterhelfen? wäre echt nett…
Danke.
Schöne Grüße Bettina
Bettina Petri

•

4. Juli 2012

Antworten

Hallo Ellen,

sorry dass ich jetzt nochmal schreibe, mein Problem hat sich gerade gelöst. Denn wenn ich nichts in der 2. Sidebar drin hab, kann ich sie auch nicht sehen. Blöder Fehler aber auch.

Trotzdem Danke.

Schöne Grüße Bettina
Dani

•

25. Dezember 2012

Antworten

Hi Ellen
Toll deine Serie. Bin beim 4. Teil deines Tutorials angelangt. Bin total begeistert, ist super und verständlich. Nur schaut das Layout bei mir nicht so aus, wie bei dir :( . Die blaue teritary box zeigt es einfach nicht an. Habe das Tut… schon mehrmals angesehen. Wäre nett wenn Du mir helfen könntest :).
Grüsse Dani
Matthias

•

29. März 2013

Antworten

Hallo Ellen,

Es sieht schon alles genauso wie bei dir aus, aber die Sidebar 2 und der Footer springen aus der Page wenn ich auf beispielsweise einen Link klicke oder ähnliches. Nämlich Footer nach links unten in die Ecke und Sidebar 2 nach rechts unten in die Ecke. Finde aber grad nicht heraus woran das liegen könnte. Kannste mir da helfen? Ansonsten ist alles super schön erklärt.

Grüße Matthias
thomas

•

28. Dezember 2013

Antworten

vielen dank für den tollen einstieg! leider finde ich nur die content.php im donwload-ordner nicht.