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



Feedback Formular