header.php – den Kopfteil auslagern

Unsere erste spezialisierte Template-Datei nennt sich header.php
Unsere Header.php beinhaltet unter anderem den kompletten HTML-Head-Teil unseres Templates. Da sich dieser Bereich auf allen Seiten, Beiträgen, Kategorien, Archiven, etc. nicht ändert, ist er perfekt dafür geeignet, in einer extra Datei ausgelagert zu werden.

head auslagern und einbinden

Als erstes erstellen wir in unserem Template-Ordner die Datei „header.php“. Danach öffnen wir unsere „index.php“ und schneiden den markierten Teil aus, und kopieren ihn in die header.php:

index.php

<!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">
	
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

	<title><?php wp_title(' - ', true, 'right'); ?> <?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(); ?>
	
</head>
<body>

<div id="wrapper">
	
	<div id="header"></div><!-- header -->
	
	<div id="main">
		
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
			<div class="entry">
				<?php the_content(); ?>
			</div>
		<?php endwhile; endif; ?>
		
	</div><!-- main -->
	
	<div id="sidebar"></div><!-- sidebar -->	
	
	<div id="footer"></div><!-- footer -->
	
</div><!-- wrapper -->
	
</body>
</html>

header.php

<!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">
	
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

	<title><?php wp_title(' - ', true, 'right'); ?> <?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(); ?>
	
</head>
<body>

<div id="wrapper">
	
	<div id="header"></div><!-- header -->

Jetzt haben wir zwar den head-Bereich komplett ausgelagert, aber davon weiß unsere index.php noch nichts. Um unserem Template das zu sagen, brauchen wir folgenden Befehl:

<?php get_header(); ?>

get_header()“ ist eine WordPress-Funktion, die im Template-Ordner nach der Datei header.php sucht und wenn sie sie findet, an der Stelle einbindet, an der der „get_header“-Befehl steht. Unsere index.php sollte nach der Änderung folgendermaßen aussehen:

<?php get_header(); ?>

	<div id="main">
		
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
			<div class="entry">
				<?php the_content(); ?>
			</div>
		<?php endwhile; endif; ?>
		
	</div><!-- main -->
	
	<div id="sidebar"></div><!-- sidebar -->	
	
	<div id="footer"></div><!-- footer -->
	
</div><!-- wrapper -->
	
</body>
</html>

Wenn du jetzt dein Template testest, sollte sich eigentlich nichts geändert haben. Von aussen ist es gleich, doch unter der Haube haben wir einen wichtigen Schritt zu einem tollen Template gemacht. Funktionalität auszulagern, ist ein essentieller Bestandteil von WordPress-Templates. Nicht nur, dass das Template übersichtlicher wird (wenn ein Problem im head-Bereich ist, findet man die Datei ganz schnell), wir können damit auch die Ansicht der unterschiedlichen Bereiche (Beiträge, Seiten, Kategorien, etc.) spezialisieren.

Wie du vielleicht schon richtig erahnt hast, gibt es neben der Funktion „get_header()“ noch weitere, mit denen man andere Template-Dateien einbinden kann. Darauf gehe ich in den folgenden Kapiteln ein.

hier geht's weiter...



Kommentare


Hallo. Toller Beitrag. Heisst das, dass man damit den Header in allen Seiten anzeigen kann. Ich meine, bei vielen Templates erscheint der Header nur auf der Startseite, wobei ich aber moechte das der Header sich durch die ganze Website/den Blog zieht. Wie mach ich das? Danke


Ja so ist es, einfach das, was im Kopfteil auf allen Seiten angezeigt werden soll, in den header packen und den header in den template dateien einbinden (index.php, single.php, page.php, etc).


Hallo Chris.

Erstmal, Danke für dieses Tutorial. Ich habe eine Frage zum Header.

Ich möchte oben rechts in kleiner Schriftform den Seitentitel bwz. das Logo und darunter ein 800 x 300 Pixel großes Bild (zentriert). Und wie füge ich ein (Haupt)Menü ein ?

Weiß jemand Rat ? Besten Dank schonmal …


Hallo Martin,
den ersten Punkt den du ansprichst musst du mittels CSS lösen. Zwar wirst du wohl die header.php modifizieren müssen, aber das Problem hat nicht direkt etwas mit WordPress zu tun.

Ein (Haupt)Menü fügst du über die Datei sidebar.php ein. Möchtest du allerdings ein horizontales Hauptmenü, mit wenig Auswahlmöglichkeiten (wie z.b. auf lernenhoch2.de) dann kannst du das einfach "hardcoded" in die header.php einfügen (mittels HTML und CSS).


Vielen Dank! Ich erarbeite mir gerade mein Seepferdchen in Sachen WP. Das hat mir sehr geholfen!
Allerdigns verzweifele ich noch an einem Problem:

“get_header()” ist ja die eine Sache, aber wenn ich ein eigenes Template einbinden möchte, rät mir Tante Google zu
<?php include (TEMPLATEPATH . "/datei.php"); ?> bzw
<?php get_template_part('datei'); ?>

Komischerweise lässt haben Änderungen an der index.php (so wie bei Joomla) keine Wirkung… Läuft da nicht alles zusammen? Würde mich jemand erleuchten?

Besten Dank

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