Den Head-Bereich füllen

Im letzten Teil hast du deine erste Ausgabe mit WordPress gemacht, doch leider war das Layout nicht vorhanden, weil wir die style.css noch nicht verlinkt hatten. Darum geht es nun in diesem Teil, den Head-Bereich unseres Layouts zu füllen.

Im Head-Bereich zeigt WordPress z.b. den Artikeltitel an, bindet Stylesheets und Javascripts ein und fügt automatisch weitere nützliche Meta-Angaben ein, wenn wir WordPress darum bitten (was wir definitiv machen werden, da es uns Arbeit erspart). Bislang haben wir folgendes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head profile="http://gmpg.org/xfn/11">

	<!-- wird noch ausgefüllt --> 

</head>
...

Den HTML-Kommentar „wird noch ausgefüllt„, ersetzen wir jetzt durch folgende Angaben:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php wp_title(); ?> - <?php bloginfo('name'); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?>

Erklärung:

  • Zeile 1: das Meta Tag füllen wir mit dem Charset, welches für den Blog festgelegt ist. In der Regel dürfte das UTF-8 sein und damit liegt man meistens richtig
  • Zeile 3: das Title-Tag füllen wir mit dem Namen des Artikels (auf der Einzelansicht) + den Namen des Blogs. An dieser Stelle kann man recht kreativ mit den WordPress Template Tags rumspielen, diese Struktur ist aber für die meisten Blogs gut und ausreichend.
  • Zeile 5: jetzt verlinken wir endlich auf unsere style.css. Dazu nutzen wir das mächtige WordPress Template Tag „bloginfo()“ mit dem Parameter „stylesheet_url“ um die Link zur style.css zu erhalten
  • Zeile 6: damit Blogs, die in ihrem Artikel auf einen von deinen Artikeln gelinkt haben, deinen Blog darüber informieren können (Pingback), nutzen wir den Pingback-Link und nutzen wieder „bloginfo()“ um uns den Link erzeugen zu lassen
  • Zeile 8: dies ist eine sehr wichtige Funktion, denn viele Plugins funktionieren nur dann korrekt, wenn die Funktion im head-Bereich platziert wurde. Manche Plugins platzieren ihre eigenen Stylesheets oder Javascripts im Head-Bereich und das funktioniert nur, wenn dieser „Hook“ gesetzt wurde.

Wenn wir uns jetzt unser Layout anschauen, ist es zwar immernoch schlicht, aber wenigstens so wie wir es geplant hatten. In den weißen Bereich oben platzieren wir später unser Logo und den Spruch unseres Blogs, sieh dir dazu nochmal das Wireframe des WordPress Theme „Tutorial“ an.

Ich habe das Tutorial Template mal testweise im Lernen² Blog verwendet und folgendes Ergebnis bekommen:

Bei dir sollte es ähnlich aussehen (natürlich mit anderen Titeln und Artikeln).

hier geht's weiter...



Kommentare


Kleine Kritik:

"Im letzten Teil hast du deine erste Ausgabe mit WordPress gemacht, doch leider war das Layout nicht vorhanden, weil wir die style.css noch nicht verlinkt hatten. Darum geht es nun in diesem Teil, den Head-Bereich unseres Layouts zu füllen."

Das solltest Du vielleicht noch einmal im Abschnitt "Template Stylesheet" erwähnen sollen, musste sehr lange suchen, warum er das Stylesheet nicht findet.

Trotz dessen natürlich ein super Tutorial,

habe wirklich viel gelernt von Dir – Danke !

Gruß aus Kölle


@Daniel: Danke für die Kritik, werde einen Hinweis im Abschnitt "Template Stylesheet" setzen!

Ebenfalls Gruß aus Köln :)


Hallo!

Ich habe das immer wieder und immer wieder haarklein wiederholt und trotzdem sagt er mir im Backend bei der Theme-Auswahl, dass die Style.css nicht vorhanden ist.

Wieso????

Danke und Grüße vom Max

Hi – ich nochmal!

Habs raus. Ich hatte Styles.css anstatt style.css geschrieben. Jetzt geht es. Yipieeeeeeeeeeehhhhh! Freue mich.

Grüße und Danke vom max


hej chris.

vielen dank erstmal für dieses sehr ausführliche template.
bis hierhin hab ich alles genau so gemacht wie beschrieben. (copy-paste)

im backend wird das css angezeigt. aber es wird nicht auf die blogeinträge "übertragen". also keine formatierung meiner einträge.

hast du eine idee?

dank schon einmal


Hallo Marc,
– hast du das Template aktiviert?
– ist die Datei "style.css" kleingeschrieben?
– im Zweifelsfalle nochmal alle Dateien löschen und nochmal alles mit Copy & paste eintragen (auf die Beschreibungen und Dateinamen achten


Hej Chris.

aktiviert | style.css klein …
ich hab noch einmal hin und her kopiert… und siehe da, es ging. ;)

super tutorial! danke nochmal – auch für die schnelle antwort.


Meine Seite sieht mit deiner CSS anders aus, kann es sein, dass das Tutorial nicht mehr aktuell ist? Das einige Befehle in der Version 3.2.1 anders gewurden sind?


Ich habe meine WordPress Version aktualisiert und das Template sieht eigentlich korrekt aus. Was genau wird denn bei dir nicht oder falsch angezeigt?


Hallo zusammen,

versuche auch gerade mit Hilfe des Tutorials ein eigenes Template zu erstellen. Leider wird meine CSS Formatierung nicht geladen. Die Posts werden alle korrekt angezeigt,nur formatiert ist nichts.
Habe testweise den kompletten Quelltext von dieser Website Kopiert und in mein Tutorial eingefügt.
Hilft auch nicht.
Kann es sein, dass sich mit der aktuellsten Version von WordPress einige Änderungen eingeschlichen haben?

LG Daniel


Am besten einfach folgenden Snippet benutzen:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" type="text/css" media="screen" />

Der Befehl zeigt WordPress den eindeutigen Pfad zum Theme und ruft die style.css so direkt auf :-) Funktioniert mit der neuesten WordPress Version

Kommentar schreiben

Kommentar

Hilfe:

<strong>fettgedruckt</strong> => fettgedruckt

<em>kursiv</em> => kursiv

<a href="http://wordpress.lernenhoch2.de">Link</a> => Link

[code]<?php echo 'hello world'; ?>[/code]

*

Feedback Formular