Erstellen eines WordPress Themes (Teil 3)

gepostet am 15.05.2013 um 00:05 Uhr

Willkommen zu Teil 3 des Tutorials “Erstellen eines Worpress Themes”! Als Zusammenfassung hier noch ein Mal was wir in Teil 1 und Teil 2 gelernt haben:

Wir haben gesehen wo unsere Themes liegen. Außerdem wissen wir nun, dass ein Theme aus mindestens zwei Dateien bestehen muss, der index.php und der style.css. Wir haben die ersten WordPress Funktionen und eines der wichtigsten Konstrukte von WordPress kennengelernt: The Loop.

Außerdem haben wir gesehen dass man den Inhalt der index.php aufteilt auf 4 Dateien. Die index.php, header.php, footer.php und sidebar.php und dass wir von jeder dieser Datei mehrere Versionen erstellen und einbinden können. Wir haben auch gesehen wie man diese Dateien einbindet.

Jetzt möchte ich unser Theme mal komplett zum laufen bringen.

Das Theme ist “fertig”:

Dass unser Theme noch nicht fertig ist, ist glaube ich jedem klar. Aber wir haben schon Mal einen kleinen Blog geschaffen. Ich möchte hier das Ganze mal auf einen Stand bringen, an dem wir weiterarbeiten können. Da dies kein Tutorial für CSS oder HTML ist, nehme ich die Fertigstellung damit wir weiter machen können mal vorweg. Das hier sind die fertigen einfachen Dateien die unser Theme im Moment ausmachen:

Index.php:

<?php get_header(); ?>
<div class="left">
	<?php // Überprüft ob Posts vorhanden sind, wenn ja, wird The Loop ausgeführt.
	if (have_posts()) : while (have_posts()) : the_post(); ?>

		<h3><?php // gibt den Title des aktuellen Posts aus:
		the_title(); ?></h3>

		<div>

			<?php // Gibt den Inhalt des aktuellen Posts aus:
			the_content(); ?>

		</div>

	<?php endwhile; endif; ?>
</div>
<?php get_sidebar(); ?>

<?php get_footer(); ?>

<?php get_header(); ?>

<?php // Überprüft ob Posts vorhanden sind, wenn ja, wird The Loop ausgeführt.

if (have_posts()) : while (have_posts()) : the_post(); ?>

<h3><?php // gibt den Title des aktuellen Posts aus:

the_title(); ?></h3>

<div>

<?php // Gibt den Inhalt des aktuellen Posts aus:

the_content(); ?>

</div>

<?php endwhile; endif; ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Header.php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

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

</head>
<body>
	<div class="header">
		<h1><?php echo get_bloginfo(); ?></h1>
	</div>
	<div class="content">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

</head>

<body>

</div>

Footer.php:

	</div>
	<div class="footer">
		<h2>Ich bin der Footer!</h2>
	</div>
</body>
</html>

</div>

<h2>Ich bin der Footer!</h2>

</div>

</body>

</html>

Sidebar.php:

<div class="right">
	<h2>Ich bin die Sidebar!</h2>
</div>

<h2>Ich bin die Sidebar!</h2>

</div>

Style.css:

/*
Theme Name: Uebung
Theme URI: http://www.it-hellmann.de
Author: Artur Hellmann
Author URI: http://www.it-hellmann.de
Description: Theme für Artur Hellmann. Frei verfügbar.
*/

.content{
	width: 1000px;
}
.left{
	width: 700px;
	float: left;
}
.right{
	float: right;
}
.footer{
	clear: both;
}

Theme Name: Uebung

Theme URI: http://www.it-hellmann.de

Author: Artur Hellmann

Author URI: http://www.it-hellmann.de

Description: Theme für Artur Hellmann. Frei verfügbar.

.content{

width: 1000px;

}

.left{

width: 700px;

float: left;

}

.right{

float: right;

}

.footer{

clear: both;

}

Wie ihr seht, hab ich die style.css ein wenig aufgebaut, um den nebeneinanderliegenden Look von Inhalt und Sidebar hinzubekommen.

Und so schauts im Moment aus:

« zu Teil 2 | zu Teil 4 »