Nachdem ich euch im ersten Teil meiner Artikelserie zum Erstellen eines WordPress Themes gezeigt habe, welche Template-Dateien WordPress kennt, geht es im 2.Teil des Tutorials darum diese mit Inhalt zu füllen. Bislang wurden nur in der style.css einige allgemeine Informationen zum neuen Theme angegeben. Nun geht es darum die ersten PHP-Dateien anzulegen. Hier beginnt man üblich mit der index.php.
Im ersten Teil hatte ich bereits geschrieben, dass WordPress die index.php immer dann nimmt, wenn z.B. keine archive.php oder single.php existiert. Dann werden die Funktionen der index.php genutzt. Bei der Gestaltung der index.php solltest du dir Mühe geben. Diese kann als Vorlage dann auch für viele andere Template-Dateien genutzt werden.
Inhalt des Tutorials:
- Teil 1: WordPress-Template Dateien und Theme-Einstellungen
- Teil 2: Sidebar, Header, Footer und Index.php
- Teil 3: WordPress-Loop und Blätterfunktion
- Teil 4: Seiten, Artikel und Kommentarbereich
1. Grundgerüst der index.php
Jede HTML-/PHP-Seite hat ein Grundgerüst. Dieses sieht so aus:
[codesyntax lang=“php“]
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“ „http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>
….
</head>
<body>
….
</body>
</html>
[/codesyntax]
Da wir die header.php, sidebar.php und footer.php auslagern möchten, sieht unsere index.php erst mal so aus:
[codesyntax lang=“php“]
<?php get_header(); ?>
<div id=“content“>
….
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
[/codesyntax]
2. Kopf-Bereich in der header.php
Im Head-Bereich wird angegeben, wo sich css-Dateien befinden, wie der Titel der Seite lautet und wo weitere Meta-Angaben festgelegt werden. Ich habe hier eine Vorlage erstellt, die ihr so übernehmen könnt:
[codesyntax lang=“php“]
<?php if ( is_front_page() ) : ?>
<title><?php bloginfo( ’name‘); ?></title>
<?php elseif ( is_404() ) : ?>
<title>Seite nicht gefunden | <?php bloginfo( ’name‘); ?></title>
<?php elseif ( is_search() ) : ?>
<title><?php echo ‚Suchergebnisse ‚. attribute_escape(get_search_query()); ?> – <?php bloginfo( ’name‘); ?></title>
<?php else : ?>
<title><?php wp_title($sep = “); ?> – <?php bloginfo( ’name‘);?></title>
<?php endif; ?>
<meta http-equiv=“Content-Type“ content=“<?php bloginfo(‚html_type‘); ?>; charset=<?php bloginfo(‚charset‘); ?>“ />
<link rel=“stylesheet“ href=“<?php bloginfo(’stylesheet_url‘); ?>“ type=“text/css“ media=“screen“ />
<link rel=“pingback“ href=“<?php bloginfo(‚pingback_url‘); ?>“ />
<?php wp_head(); ?>
[/codesyntax]
Einen Großteil des Head-Bereichs macht hier die Definition des title-Tags aus. Hier wird unterschieden, ob gerade die Home-Page, die Suche oder eine andere Seite aufgerufen wird. Solltest du eh separate Template-Dateien anlegen wollen, kannst du auch die Kurzform nehmen:
[codesyntax lang=“php“]
<title><?php wp_title($sep = “); ?> ?></title>
<meta http-equiv=“Content-Type“ content=“<?php bloginfo(‚html_type‘); ?>; charset=<?php bloginfo(‚charset‘); ?>“ />
<link rel=“stylesheet“ href=“<?php bloginfo(’stylesheet_url‘); ?>“ type=“text/css“ media=“screen“ />
<link rel=“pingback“ href=“<?php bloginfo(‚pingback_url‘); ?>“ />
<?php wp_head(); ?>
[/codesyntax]
Nun habt ihr bereits alles was innerhalb von <head></head> stehen sollte. In die header.php würde ich alles packen, was den Head-Bereich, das Logo und eventuell eine Navigation (oben) umfasst. Das könnte dann so aussehen:
[codesyntax lang=“php“]
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“ „http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>
<title><?php wp_title($sep = “); ?> ?></title>
<meta http-equiv=“Content-Type“ content=“<?php bloginfo(‚html_type‘); ?>; charset=<?php bloginfo(‚charset‘); ?>“ />
<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 id=“logo“>
….
</div>
</div>
[/codesyntax]
3. Fuß-Bereich in der footer.php
Die Fußzeile eines Blogs kann sehr unterschiedlich sein. So kann dort z.B. das Impressum untergebracht werden oder weitere Links bzw. eine eigenständige Navigation. Natürlich ist es auch möglich dort eine Sidebar mit Widgets unterzubringen. In der footer.php werden auch einige Elemente aus der header.php geschlossen.
[codesyntax lang=“php“]
<div id=“footer“>
….
</div>
</div> <!–wrapper-Container wird geschlossen–>
</body>
</html>
[/codesyntax]
Das schließende div-Tag solltet ihr nicht vergessen. Der öffnende HTML-Tag befindet sich mit der id „wrapper“ in der header.php.
4. Navigationsbereich in der sidebar.php
WordPress ist in der Lage dynamische Navigationen zu gestalten. Das hat für den Blogger den Vorteil, dass mit Widgets schnell die Navigation angepasst werden kann. Daher sollte das Theme auf jeden Fall widget-fähig sein. Sollten keine Widgets im WordPress-Adminbereich definiert sein, sollte im Code per default eine Standard-Navigation angezeigt werden. So könnte es aussehen:
[codesyntax lang=“php“]
<div id=“sidebar“>
<ul>
<?php if ( !function_exists(‚dynamic_sidebar‘) || !dynamic_sidebar() ) : ?>
<?php wp_list_pages(‚title_li=<div class=“ueberschrift“>Seiten</div>‘ ); ?>
<li>
<div class=“ueberschrift“>Neue Artikel</div>
<ul>
<?php wp_get_archives(‚type=postbypost&limit=5‘); ?>
</ul>
</li>
<li id=“tag_cloud“><div class=“ueberschrift“>Tags</div>
<?php wp_tag_cloud(‚largest=16&format=flat&number=20‘); ?>
</li>
<li><div class=“ueberschrift“>Meta</div>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
[/codesyntax]
Damit dieser Artikel nicht zu lang wird, ist dieser Teil der Artikelserie beendet. Im 3.Teil werde ich dann näher auf die WordPress-Loop eingehen. Dies ist dann der Inhalt/Content eines Blogs.
Vor zu Teil 3 =><= Zurück zu Teil 1
Pingback: WordPress Themes erstellen: Tutorial [Teil1]
Dein Tutorial ist supergut aufbereitet! Vielen Dank. Gibt es bereits zusätzliche Folgen? Ich würde mich freuen!
Tolles Tutorial! ;-) gut erklärt, aber wo ist der ganze Rest??? Die versprochenen .php dateien fehlen, die comments.php wäre sehr hilfreich, da ich bis jetzt noch keine gute Tutorialversion davon gesehen habe.
Hallo ihr beiden,
es geht weiter. Teil 3 ist bereits fertig und der Rest folgt auch demnächst. Viel Spaß damit.