Eine neue Webseite entsteht (Teil 8): Der WordPress-Theme Header

Im heutigen Teil der Tutorial-Serie »Eine neue Webseite entsteht «geht es los mit der HTML und CSS Programmierung in WordPress. Dabei beginne ich mit der Umsetzung des Webseiten-Headers, und der Bearbeitung der header.php und der style.css Datei des Themes. Damit du den Beschreibungen im Tutorial besser folgen kannst, habe ich die jeweiligen Dateien zum Download für dich vorbereitet. Also los geht’s, machen wir uns an die WordPress-Theme Entwicklung :-)

1. Checkliste für die Programmierung

Um mit deiner Theme-Programmierung anfangen zu können, benötigst du alles, was wir in den letzten Teilen der Tutorial-Serie vorbereitet haben. Hier noch einmal eine kurze Übersicht:

1.1. WordPress lokal installieren

Am einfachsten ist die WordPress Theme-Programmierung, wenn du dir die aktuelle WordPress-Version auf einen lokalen Server installiert hast. Hier im Tutorial verwende ich die deutsche WordPress-Version 3.0.1.

1.2. Das Starkers-Theme als Vorlage

Außerdem verwende ich das Blank-Theme »Starkers«, dass auf dem aktuellen Standard-Themes twentyten aufgebaut ist, als Vorlage für mein eigenes Theme. Dieses habe ich ebenfalls bereits installiert und den Namen auf mein Theme (in der style.css Datei) angepasst.

1.3. Alle Bilder vorbereitet

Wie im Teil 5 des Tutorials bereits besprochen, habe ich bereits alle benötigten Bilder (z.B. für das Logo) für mein Theme, teils mit Hilfe von Sprite-Images im Theme-Ordner »images« angelegt.

1.4. @font-face Schriften

Falls du für dein Theme individuelle Schriftarten verwenden möchtest, ist es hilfreich diese auch schon vorbereitet zu haben. Dazu kannst du den @font-face Generator von Fontsquirrel nutzen. Die Schrift-Dateien speicherst du z.B. in einem Ordner mit dem Namen »fonts« in deinem Theme ab.

Auch den benötigten CSS-Code bereitest du am besten vorab in deiner style.css vor. Für mein CoffeeLove-Theme möchte ich beispielsweise die DroidSerif-Schrift verwenden. Also füge ich folgenden Code in die style.css Datei meines Themes ein.

@font-face {
 font-family: 'DroidSerifRegular';
 src: url('fonts/droidserif-regular-webfont.eot');
 src: local('fonts/?'), url('fonts/droidserif-regular-webfont.woff') format('woff'), url('fonts/droidserif-regular-webfont.ttf') format('truetype'), url('fonts/droidserif-regular-webfont.svg#webfont7PKX1YKh') format('svg');
 font-weight: normal;
 font-style: normal;
}
1.5. Seiten und Menüs in WordPress anlegen

Um gleich bei der Programmierung die richtigen Seitennamen und Menüs angezeigt zu bekommen, solltest du außerdem vorab deine Menüs in WordPress anlegen.

WordPress Theme Programmierung

Da ich eine statische Seite als Startseite verwenden möchte, und nicht den Blog wie standardmäßig in WordPress eingerichtet, definiere ich jetzt noch unter Einstellungen / Lesen in WordPress »Home« als meine Startseite und »Aktuelles« als meine Artikelseite.

Um die individuelle Menü-Funktion von WordPress 3.0 zu nutzen, lege ich für meine Hauptnavigation jetzt noch das Menü »Main Menu« an, und definiere das Menü als »Primary Navigation« meines Themes.

WordPress Theme Programmierung

2. Programmierung des WordPress-Theme Headers

Hast du all die oben genannten Punkte erledigt, kannst du im Texteditor deine Wahl (z.B. Adobe Dreamweaver, dem kostenlosen Programm Notepad+ oder Coda für Mac-User) die benötigten Dateien deines Themes in verschiedenen Tabs öffnen. Um den Theme-Hintergrund, und den Header für die CoffeeLove-Webseite zu programmieren, benötige ich z.B. die header.php und die footer.php Datei.

2.1. Die HTML-Struktur

Um zu bestimmen, Struktur welche Divs ich für mein Theme benötige, schaue ich mir noch einmal das Webdesign-Layout des Headers an.

WordPress Theme Programmierung
Mit einer kleinen Grafik kann ich mir schnell klar machen, welche HTML-Elemente ich benötige.

In die entsprechenden Theme-Dateien legst du jetzt also deine definierten HTML-Elemente an.

2.2. Die header.php Datei

WordPress Theme Programmierung
Hier kannst du dir die header.php Datei in einer größeren Ansicht anschauen.

Um dem Tutorial besser folgen zu können, kannst du dir die header.php Datei des CoffeeLove-Themes hier zur Ansicht herunterladen.

In der header.php Datei befindet sich der head-Tag meines Themes. Hier verändere ich vorerst noch nichts. Sehr hilfreich finde ich aber die ausführliche Dokumentation des Codes. So kannst du viel leichter einen Überblick über all die unterschiedlichen Elemente in den Dateien bekommen, falls dir diese nicht gleich etwas sagen.

Innerhalb des body-Tags fange ich also an, meine HTML-Elemente einzufügen. Für die CoffeeLove-Header benötige ich ein Div mit der ID »top-border« für die durchgehende hellblaue Borte ganz oben auf der Webseite.

Um das Layout auf 940 Pixel Breite (960 inklusive 20 Pixel margin rechts und links) mittig im Browser anzuzeigen, füge ich als nächstes einen Div mit der ID »wrap« ein. Diesen Wrap-Div möchte ich allerdings nicht bereits am Ende des Headers wieder schließen, sondern bis zum Beginn des durchlaufenden Footer-Hintergrunds nutzen. Also gehe ich in meine footer.php Datei und schließe den Div-tag hier wieder.

WordPress Theme Programmierung
Der Div-tag mit der ID »wrap«, der u.a. die Breite der Webseite bestimmt, wird erst in der footer.php Datei wieder geschlossen.

Die HTML-Elemente für das Logo, die Navigation und die Social-Media-Icons umschließe ich alle mit einem Div-Tag mit der ID »header«. Innerhalb des header-Divs füge ich jetzt noch einen Anchor-Tag mit der Klasse »logo« ein, um das Webseiten Logo-Image als Link dazustellen. Auf das Logo-Image verweise ich mit der WordPress-Funktion:

< ?php bloginfo( 'template_url' ); ?>

auf den Theme-Ordner. Im WordPress-Codex findest du jede Menge weitere nützliche Infos zu bloginfo.

Unter dem Logo folgt der Code für die Navigation. Dem Div habe ich die ID »nav-main« gegeben. Durch die Verwendung der individuellen Menü-Funktion (wp_nav_menu) wird der CSS-Code meiner Hauptnavigations-Punkte von WordPress automatisch generiert. Das Styling übernehme ich dann gleich im CSS-Stylesheet.

Als weiteres Element im Header habe ich noch die Social-Media Icons vorbereitet. Diese lege ich jetzt noch in einem unordered List-Element ul an. Ein leeres Div mit der Kasse clear füge ich ein, bevor ich den header-Tag schließe, um so das umfließen weiterer Elemente an dieser Stelle zu vermeiden. Danach schließe ich den header-Div und kommentiere alle Elemente zur besseren Übersicht, unterhalb des geschlossenen Divs.

2.3. Das CSS-Stylesheet

Nachdem du alle HTML-Elemente angelegt hast, sieht das Theme in der Browser-Ansicht leider immer noch nicht viel besser aus. Um das zu ändern, musst du deine Elemente jetzt noch mit CSS stylen. Dazu gehst du in die style.css Datei deines WordPress-Themes.

Um einen Überblick in deiner style.css Datei zu behalten, legst du dir am besten gleich zu Beginn eine Struktur an, nach der du deine Styles anordnest. Dazu gibt es verschiedene Vorgehensweisen, und jeder Programmierer hat auch seine eigenen Vorlieben. Damit sich auch andere später noch in deinem Stylesheet zurechtfinden (und natürlich auch du selbst), ist es sinnvoll eine gewisse Ordnung bei zuhalten.

Damit du meiner Beschreibung besser folgen kannst habe ich die derzeitige Version des CoffeeLove-Stylesheet entweder direkt im Browser ansehen, oder auf deinen Computer herunterladen.

Beim CoffeeLove-Theme habe ich die im Starker-Theme vorbereitete reset.css Datei in meine style.css Datei eingefügt. Da mein Stylesheet nicht zu umfangreich werden wird, finde ich dies in diesem Fall übersichtlicher. Auch die Styles für Typografie werde ich direkt in der style.css integrieren, somit habe ich die im Starker-Theme vorbereiteten weiteren Style-Sheets im Ordner »css« und die entsprechenden @-Verweise in meinem Fall gelöscht. Hast du ein umfangreiches Stylesheet macht es aber durchaus Sinn, für gewisse Elemente ein Extra-Stylesheet zu nutzen.

Des weiteren habe ich ein paar von WordPress generierte Styles für die Bild-Beschriftungen (wp-caption) eingefügt. Mit den Klassen alignright und alignleft kann ich Elemente (z.B. Images) nach rechts oder links floaten lassen.

Darunter folgen allemeine Styles, die Styles für alle typografischen Elemente, Überschriften und Links des Themes. Darunter habe ich die Styles für den Header, die Navigation, alle Seiteninhalte und den Footer angelegt. Individuelle Styles einzelner Seiten werden dann darunter folgen. Wie gesagt kannst du dir deine Struktur natürlich selbst zusammenstellen. Ein toller Tipp ist dabei auch, sich zur Übung die CSS-Stylesheets erfahrender Programmierer anzuschauen. Diese kannst du meist über den Code im Browser anklicken.

3. Theme im Browser testen

Wenn alle CSS-Styles angelegt sind, nimmt das Theme endlich ein wenig Gestalt an. Hier ein Screenshot meiner bisherigen Programmierung auf meinem lokalen Server.

WordPress Theme Programmierung
Ich habe hier auch schon den Introtext und den Slider-Hintergrund programmiert, dieser folgt aber dann im nächsten Teil der Tutorial-Serie. (zur größeren Ansicht)

Im nächsten Schritt geht es dann weiter mit dem Anlegen und Styling der Startseite und des Footers. Auch der JavaScript-Slider muss noch auf der Homeseite des CoffeeLove-Themes integriert werden.

Ich hoffe dir gefällt auch dieser Teil des Tutorials und du kannst die Infos zur WordPress-Theme Programmierung für deine eigene Arbeit gebrauchen. Über deine Fragen, Anregungen oder Verbesserungsvorschläge für meine kleine Tutorial-Serie freue ich mich sehr!

Weitere Teile der Tutorial-Serie

25 Kommentare zu “Eine neue Webseite entsteht (Teil 8): Der WordPress-Theme Header

  1. Hey, Danke für die tolle Beschreibung…bin gerade erst eingestiegen und starte nun mal bei Teil 1.
    Freue mich schon auf die Fortsetzung
    Gruß

    • Hallo Carsten,

      vielen Dank für deinen Feedback. Es freut mich, dass du bei der Tutorial-Serie mitmachen willst :-)

      Viel Spaß bei den einzelnen Teilen, und wenn eine Frage auftaucht, schreib mir einfach einen Kommentar :-)

      Viele Grüße,
      Ellen

  2. Sehr schön :)
    Dieses Blank-Theme muss ich mir mal anguggen, weil derzeit basiert ja mein Theme sozusagen auf den TwentyTen, aber da ist mir zu viel Code gewurschtelt drin, aber meine eigenen Suche nach einen Blank-Theme mit den WP 3.0 Funktionen war bisher nix :)

    • Hallo Chrissy,

      vielen Dank für deinen Kommentar :-) Ja, das Starkers basiert auch auf dem twentyten, ist aber quasi „leergeräumt“ :-)

      Ich musste mich auch erst in das neue 3.0 Theme einarbeiten, aber inzwischen komme ich ganz gut zurecht und es gefällt mir auch sehr gut. Es gibt sogar eine HTML5-Variante des Starkers.

      Viele Grüße,
      Ellen

  3. Das sieht nach viel Aufwand aus… Klasse gemacht und eine gute Anleitung für Neulinge.

    PS: Schöner Blog

    • Hallo Viktor,

      vielen Dank für dein tolles Feedback :-) Ja, ich habe das Theme-Design am Wochenende ein wenig vorbereitet, damit ich das Tutorial heute weitermachen kann :-)

      Es freut mich sehr, dass dir der Artikel und der Blog gefällt :-)

      Viele Grüße,
      Ellen

  4. Hallo Ellen,

    durch Twitter bin ich auf Deine Seite gestoßen ;)
    Schicke Site mit viel Liebe zum Detail…
    Klasse!
    Mach(t) weiter so ….

    Werde mir bei nächster Gelegenheit die bereits entstandenen Teile Deiner „Serie“ ansehen und nachvollziehen.
    Als kleiner Hobby-Bastler freue ich mich schon darauf und bin dankbar, das es Menschen wie Dich gibt, die Ihr Wissen gerne und mit anderen teilen… DANKE :)

    Feedback folgt natürlich ;)

    • Hallo Marcus,

      vielen Dank für deinen Kommentar. Es freut mich, dass du hier auf dem Blog vorbeischaust und natürlich auch, dass du dich für die Tutorial-Serie interessierst :-)

      Ich hoffe dir helfen die Tipps und Tricks zur Entwicklung einer WordPress-Webseite für deine eigene Arbeit weiter :-)

      Viel Spaß und viele Grüße,
      Ellen

  5. Hallo Ellen,
    das ist ja wirklich großartig was du hier ablieferst. Ich lese euer Blog seit ein paar Monaten regelmäßig und bin sehr angetan von eurer Arbeit. Nun ist es aber höchste Zeit mich bei dir (euch) zu bedanken. Dankeschön für so viel Mühe und macht bitte genau so weiter.

    • Hallo Stefan,

      vielen herzlichen Dank für deinen Kommentar und das tolle Feedback. Das freut uns riesig, dass dir die Blog-Beiträge so gut gefallen und du schon so lange auf Elmastudio liest :-)

      Viele Grüße,
      Ellen

  6. Eine sehr gute Anleitung hier zu finden. Für mich als Anfängerin genau richtg. Vielen Dank!

    • Hallo Inga,

      vielen Dank für dein tolles Feedback. Es freut mich sehr, dass dir das Tutorial so gut gefällt :-) Ich hoffe, die Serie kann dich bei deiner eigenen Arbeit mit WordPress unterstützen, wenn du Fragen hast, sag einfach bescheid, ja :-)

      Viele Grüße,
      Ellen

  7. Hallo Ellen,
    ich bin total begeistert von Deinem WordPress Tutorial. Verständlich und strukturiert aufgebaut, umfassender Inhalt, tolle Anregungen und ansprechend gestaltet.

    Vielen Dank!!

    Eva

  8. Hallo Ellen,

    zunächstmal ein großes Kompliment: Selten habe ich ein so gutes, strukturiertes und einfach zu verfolgendes (deutsches) WP-Tutorial gelesen, das auch noch so übersichtlich gestaltet ist! Vielen Dank dafür!!! Außerhalb des WP-Codex eine fantastische Ressource!!

    Eine Frage habe ich: Du verwendest ja hier das „Starkers“-Theme des geschätzen Mr. Stocks. Hast Du dabei die functions.php von den „TwentyTen“-Header-Images-Funktionen befreien können? Und wenn ja – wie? Ich suche schon wie verrückt nach einer „sauberen“ Lösung und würde mich riesig über einen Expertinnen-Rat freuen!
    Obwohl ich kein WP-Anfänger bin hänge ich hier doch mit meinen PHP-Kenntnissen ein wenig fest.

    Bitte mach(t) weiter so!

  9. Hallo Ellen,

    ich greife in der Regel nicht sofort zur Feder. Das was Du hier
    bietest ist ein echtes Lob wert. Da spürt man sowohl das
    Fachwissen wie die Liebe zum Detail. So kann nur jemand handeln in dem ein inneres Feuer für die Sache brennt !!

    Das ist eine grosse Hilfe für viele, die sich mit WordPress weiterentwickeln möchten.

    Ich bin als relativer Anfänger von den vielen Codierungen zunächst einmal „erschlagen“ worden, hoffe aber dennoch, dass mir das eine oder andere Licht im Laufe der Zeit aufgehen wird.
    Mir geht es im Augenblick um das Einbinden einer individuellen
    Header-Grafik, was jedoch nach viel Arbeit und fachlichem Know-how aussieht, das man da erst aufbauen muss. – oder ?

    Nochmals vielen Dank und weiter so…….

    Guenter

  10. Günter Schmitt

    Hallo Ellen,

    bin eher zufällig auf Euer neues Yoko-Theme gestossen, das mir sehr gut
    gefällt und mit dem ich mir eine Menge Arbeit sparen kann und zumindest schneller zum Ziel komme. Trotzdem ist es sehr informativ was Du bietest, Da kann man eine Menge lernen, obgleich man auch merkt dass das kein Spaziergang ist.

    Nun zum Problem:

    Ich habe mir das neue Yoko-Theme installiert bin dabei aber auf folgendes Problem gestossen. Wenn ich die Seite aufrufe kommt folgender Fehlerhinweis:

    Fatal error: Call to undefined function get_post_format() in C:\xampplite\htdocs\wordpress\wp-content\themes\yoko\index.php on line 16

    Die besagte Zeile 16 sieht dann wie folgt aus

    http://screencast.com/t/bsviZgQmHauj
    Für den Fall dass dieser Link nicht funktioniert kopiere ich Zeile 16 hier hinein:

    Was muss ich ändern, damit es funktioniert ?

    PS: wo kann ich die deutsche Sprachdatei finden und wo findet man ggf. Erklärungen zu individuellen Einstellungen wie Header-Bild, Hintergrund, Linkfarbe und wie man das macht .

    Danke für Ihre Unterstützung.

    Viele Grüße
    Guenter

  11. Hallo Ellen,
    ich bin total begeis­tert von Deinem WordPress Tutorial.
    Verständlich und struk­tu­riert auf­ge­baut, umfas­sender Inhalt, tolle Anregungen und anspre­chend gestaltet.

    Vielen Dank!!

    Aydin

  12. bin absoluter Neuling und finde das Tutorial klasse, habe aber folgendes Problem:
    Ich kann kein Menü anlegen: „Das verwendete Theme unterstützt keine Menüs oder Widgets.“ Was tun???

  13. Hallo zusammen,
    ich bin komplett neu in dem Ganzen und hab wahrscheinlich recht dämliche Fragen :) Nicht böse sein,ich tu mein Bestes :)

    Ich frage mich,wie ich mein Layout auf die Seite bzw in die Installation bringe?
    Ich habe die Seiten mit Illustrator erstellt und als .ait abgespeichert (Vielleicht schon falsch?)
    Jetzt weiß ich nicht wie und wo ich die reinladen muss,um mit der Programmierung darauf zu zugreifen? Meine Seite ist weiß wie eine Wand. Ich hab schon etwas gegooglet und weiß aber nicht recht nach was ich am besten suche…

    Und ich kenn es ja auch der Programmierung so, das du mit den Befhelen oder so auf die „Bilddatein“ zugreifst.

    Ich hoffe ihr könnt mir meine Denkblockade verzeihen und mir einen Tipp geben.

    lg
    Lydia

  14. Hi Ellen,

    eine großartige Tutorial-Serie!
    Ich habe bisher nur Erfahrungen in TYPO und wollte auf WordPress umsteigen da es ein schlankes System mit vielen tollen Funktionen ist. Dein Tutorial ist 1A gerade für die Anfänger.

    Ich bin gerade bei dem Teil 8 und hätte da eine Frage.
    Im Backend habe ich nicht die Möglichkeit Menus zu definieren wie es auf deinen Screenshots zu sehen ist. Habe schon rausgefunden, dass man dies in der function.php registrieren müsste. Bin mir noch nicht sicher wie das geht. Werde wahrscheinlich von einem anderen Theme was Passendes in der function.php raussuchen und in meine reinkopieren.

    Meine Frage wäre, planst du vielleicht ein Tutorial, wie man am besten und ohne Overhead eine saubere function.php erstellen sollte? Oder vielleicht hast du schon eins geschrieben, und ich finde es bloß nicht ;-)
    Das wäre super!

    LG,
    Alice

  15. Ich komme mit einer Fehlermeldung nicht weiter, da auch meine Google-Suche bisher nicht die Lösung brachte.
    Ich arbeite mit Dreamweaver CS5.
    Wenn ich in meiner index-php den get_header()-Befehl eingebe (bei mir in Zeile 2), dann erfolgt bei Klick „Vorschau/Debug in Browser“ => ausgesuchter Browser immer folgende Meldung im sich neu öffnenden Browerfenster:
    Fatal error: Call to undefined function get_header() …. und dann kommt der Pfad und die Zeile.
    Was muss ich einstellen, damit DW CS5 das richtig ausspuckt:

    Die Pfade im Site-Menü stimmen und unter Site > Site-spezifische Code-Hinweise… ist WordPress eingestellt.

    Was fehlt noch?
    Danke für eine Antwort – von wem auch immer.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *