WordPress Template erstellen

Für die Erstellung eines WordPress-Templates braucht man nur zwei Dateien. Eine index.php und eine kommentierte style.css sind völlig ausreichend, sofern diese beide Dateien in einem gemeinsamen Unterordner von „wp-content/themes“ liegen.

WordPress stellt für die Gestaltung von Templates unzählige [post id=“369″]Variablen und Template Tags[/post] zur Verfügung. Es können auch noch weitaus mehr Dateien als die index.php und style.css verwendet werden. Wer sich dafür interessiert, der sollte sich unbedingt mal die WordPress Template Hierarchie anschauen.

Ein sehr gutes Beispiel ist das mit WordPress mitgelieferte Twenty Ten-Design, welches viele Template-Funktionalitäten benutzt. Für Einsteiger ist das Twenty Ten-Template jedoch etwas zu komplex, weshalb ich euch mal eine von mir erstellte Vorlage zeigen möchte.

Beispiel zum Erstellen eines WordPress Templates

Hinweis:
Das Template ist alles andere als schön und keineswegs perfekt. Es soll nur die absolute Basis eines WordPress-Templates darstellen und bei Betrachtung des Codes für mehr Verstandnis beim Anwender sorgen.

Template-Speicherort: wp-content/themes/simple_theme

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/*
Theme Name: Simple WordPress Template Skeleton
Theme URI: https://www.bennyn.de/
Description: Just a simple example for a WordPress theme.
Author: Benny Neugebauer
Version: 1.0
Tags: Simple, Theme, Template, WordPress
*/
 
*
{
	padding: 0;
	margin: 0;
	border: 0;
	font-family: Arial;
}
 
div#container
{
	background-color: yellow;
}

header.php

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
		<title><?php wp_title('-', 1, 'right'); ?> <?php bloginfo('name'); ?></title>
		<link rel="profile" href="http://gmpg.org/xfn/11" />
		<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
		<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
		<?php wp_head(); ?>
	</head>
	<body <?php body_class(); ?>>
		<div id="container">

index.php

1
2
3

<?php get_header(); ?>
<?php get_template_part( 'loop', 'index' ); ?>
<?php get_footer(); ?>

loop-index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		<h1>
			<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
		</h1>
			<?php the_content("<p>...weiterlesen</p>"); ?>
		<p>
			<?php echo "Kommentare: "; comments_number('0', '1', '%'); ?><br/>
			<?php echo "Datum: "; the_time(get_option('date_format')); ?><br/>
			<?php echo "Tags: "; the_category(', '); the_tags(', ', ', ', '<br />'); ?>
		</p>
	<?php endwhile; else: ?>
		<p>
			<?php _e('Sorry, no posts matched your criteria.'); ?>
		</p>
<?php endif; ?>

footer.php

1
2
3
4

		</div>
	<?php wp_footer(); ?>
	</body>
</html>

Ein Gedanke zu „WordPress Template erstellen“

  1. Selbst bei einem „einfachen“ Theme sollte etwas mehr Zeit in die HTML-Struktur investiert werden… Macht z.B. das „Styling“ mit CSS nachher um einiges leichter…

Schreibe einen Kommentar

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.