Vor rund anderthalb Jahren hatte ich ein kurzes Tutorial geschrieben, wie man die Blogfunktion von WordPress in eine “normale” Seite einbinden kann. Damals hätte ich nicht damit gerechnet, dass der Artikel so viele Leser und Kommentatoren findet, und angesichts von über fünfzig Kommentaren und Rückfragen folgt hier nun die angekündigte überarbeitete Version des Tutorials. :o)
Ausgangsposition
Du hast eine “normale” Webseite – sprich, ohne WordPress, geschrieben in HTML. Nun möchtest du deine Homepage um eine Blogfunktion erweitern und dafür WordPress nutzen – aber deine bisherigen Inhalte möchtest du aus irgendwelchen Gründen nicht über die Seitenfunktion in WordPress einpflegen, sondern weiterhin direkt als HTML-Dateien verwalten.
Damit du WordPress verwenden kannst, benötigst du eine MySQL-Datenbank und einen PHP-fähigen Server. WordPress hast du bereits installiert – eine Anleitung zur Installation von WordPress findest du hier.
unser Vorgehen
Anders als in der ersten Version dieses Tutorials werden wir das Pferd nun quasi von hinten aufzäumen: anstatt uns die Dateien der bisherigen Webseite zu schnappen und dort mühsam den WordPress-Code hineinzufrickeln (was gerne für kunterbunte Fehlermeldungen sorgt), nehmen wir eine saubere WordPress-Installation als Grundlage und bauen dort unsere bisherigen Inhalte hinein. Somit sparen wir uns jede Menge Arbeit und Fehlerquellen.
Exkurs: WordPress-Themes verstehen
Das Aussehen einer WordPress-Seite und die Ausgabe des Inhalts wird von den Theme-Dateien bestimmt. Diese enthalten das HTML-Gerüst, in das via PHP die Blogeinträge usw. eingebaut werden. Die Dateien der einzelnen Themes befinden sich im Verzeichnis wp-content/themes/deinthemename – in diesem Tutorial gehen wir davon aus, dass du noch kein eigenes WordPress-Theme angelegt hast. Also schnappen wir uns das mitgelieferte classic-Theme, aktivieren es über das Dashboard und werfen einen Blick in das Verzeichnis und die darin enthaltenen Dateien.
Du siehst hier diverse PHP-Dateien und ein Stylesheet (style.css). Das Stylesheet enthält die Formatierungsangaben wie Farbe, Schriftgröße usw. In der Datei header.php steht alles, was vor dem eigentlichen Inhalt kommt und sich auf jeder Unterseite gleicht (also den head-Bereich des HTML, die Headergrafik, …). Analog dazu enthält die footer.php alles, was nach dem Inhalt kommt. Beide werden mit <?php get_header(); ?> bzw. <?php get_footer(); ?> in diejenigen Dateien eingebunden, die den eigentlichen Inhalt – also etwa die Blogeinträge – ausgeben. Die Datei index.php ist für die Ausgabe der Blogeinträge zuständig. Die anderen Dateien interessieren uns erst einmal nicht.
den Blog stylen
Als erstes kümmern wir uns darum, dass der Blog so aussieht wie auch die “normale” Webseite.
Dafür ersetzt du die Datei style.css im Theme-Verzeichnis mit dem Stylesheet deiner normalen Seite – ich gehe einfach mal davon aus, dass du vorbildlich mit Stylesheets arbeitest und nicht all deine Formatierungsangaben direkt im HTML machst. ;-) Andernfalls musst du das eben von Hand in die Blogdateien eintragen.
Neben dem CSS ist natürlich auch das HTML für das Aussehen der Seite verantwortlich. Du musst nun also deine Div-Container oder Tabellen – je nachdem, wie dein Layout aufgebaut ist – in die Blogseiten übertragen. Keine Angst, das ist nicht schwer.
Öffne die Datei wp-content/themes/classic/header.php und ersetze den folgenden letzten Teil dieser Datei:
<body <?php body_class(); ?>>
<div id="rap">
<h1 id="header"><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div id="content">
<!-- end header -->
einfach durch <body>
Falls du eine Headergrafik oder Ähnliches verwendest, was auf jeder Seite oberhalb des Contents angezeigt wird, kannst du den dafür zuständigen Code hier in die header.php enfügen.
Öffne die Datei index.php und baue das HTML so um, wie es deinem Layoutgerüst entspricht. Da, wo sonst dein Inhaltstext steht und wo die Blogeinträge hingeladen werden sollen, befindet sich hier der sogenannte Loop – das ist alles zwischen <?php if (have_posts()) : ?> und <?php endif; ?>. Das lässt du einfach so stehen.
Damit die Div-Verschachtelung stimmt, musst du dir jetzt noch die footer.php schnappen und an dein Layout anpassen. Das heißt, es bleibt entweder nur das hier stehen:
<?php wp_footer(); ?>
</body>
</html>
… oder eben auch noch der Footer-Bereich deiner Webseite, etwa ein Div mit einem Copyright-Hinweis.
deine Inhalte einbauen
Jetzt kommen wir zu deinen Inhalten.
Kopiere die Datei index.php aus deinem Theme-Verzeichnis und benenne sie in ueber-mich.php um (oder wie auch immer diese Unterseite heißen soll). Öffne deine entsprechende “normale” Unterseite und kopiere den Codeteil, der zwischen den beiden <body>-Tags steht (ggf. natürlich ohne die Headergrafik, sofern du das bereits in die header.php eingebaut hast), in die ueber-mich.php zwischen das <?php get_header(); ?> und das <?php get_sidebar(); ?>.
Ganz zu Beginn dieser Datei, vor das <?php get_header(); ?>, fügst du noch ein:
<?php require('../../../wp-blog-header.php'); ?>
Deine Navigation werden wir später noch genauer betrachten – die wird nämlich in die Datei sidebar.php ausgelagert und über das <?php get_sidebar(); ?> eingebunden. Wenn in deinem Layout die Navigation also vor dem Inhalt steht, musst du das <?php get_sidebar(); ?> entsprechend unterhalb des <?php get_header(); ?> einfügen. Den Code deiner Navigation fügst du also nicht hier ein, um den kümmern wir uns später!
Du hast also:
<?php require('../../../wp-blog-header.php'); ?>
<?php get_header(); ?>
<!-- ab hier kommt dein Inhalt -->
<div id="content">
<h2>ueber mich</h2>
<p>blah...</p>
</div>
<!-- Ende deines Inhalts -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
So verfährst du mit all deinen “alten” Unterseiten: Du bettest sie in das WordPress-Layout ein und ersetzt den Teil, wo WordPress normalerweise den Inhalt aus der Datenbank abruft, einfach direkt mit deinem HTML-Inhalt.
Wenn du jetzt http://deineseite.de/wp-content/themes/classic/ueber-mich.php aufrufst – siehst du deine entsprechende Unterseite. :-)
die Navigation
Ganz fertig sind wir noch nicht. Denn was wäre eine Webseite ohne Menü?
Wie gesagt, steht die Navigation in der sidebar.php und wird über <?php get_sidebar(); ?> eingebunden. Öffne also die sidebar.php und lass dich nicht von dem ganzen Code dort erschlagen. ;-) Der Einfachheit halber ersetzen wir ihn mit einer abgespeckten Version:
<div id="sidebar">
<ul>
<?php /* Widget-Sidebar */ if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</ul>
<ul>
<li><h2><?php _e('Blog-Archiv'); ?></h2>
<ul><?php wp_get_archives('type=monthly'); ?></ul>
</li>
<?php wp_list_categories('show_count=1&title_li=<h2>' . __('Blog-Kategorien') . '</h2>'); ?>
</ul>
</div>
Hier wird zunächst ein Platzhalter für die Widgets gelassen. Widgets sind Inhalte der Sidebar, die du im Dashboard von WordPress ganz einfach per Drag&Drop einfügen oder verändern kannst – mehr dazu habe ich hier erklärt.
Darunter wird das Archiv deiner Blogeinträge angezeigt, gruppiert nach Monaten. Als nächstes wird dann eine Liste deiner Blogkategorien generiert, in die du deine Einträge eingeordnet hast. Wenn du beispielweise das Archiv nicht haben möchtest, kannst du den Codeteil natürlich einfach löschen. Weitere Elemente, wie etwa die Tagcloud, kannst du als Widget einfügen.
So. Das ist der Menüteil, der dein Blog betrifft – jetzt wollen aber natürlich auch die eben eingebauten Unterseiten verlinkt werden. Das machen wir als “normales” HTML hier in der sidebar.php. Dein Code könnte beispielsweise so aussehen:
<div id="sidebar">
<ul>
<?php /* Widget-Sidebar */ if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</ul>
<ul>
<li><h2><?php _e('Blog-Archiv'); ?></h2>
<ul><?php wp_get_archives('type=monthly'); ?></ul>
</li>
<?php wp_list_categories('show_count=1&title_li=<h2>' . __('Blog-Kategorien') . '</h2>'); ?>
</ul>
<h2>Seiten</h2>
<ul>
<li><a href="<?php bloginfo('template_directory'); ?>/ueber-mich.php" title="über mich">über mich</a></li>
<li><a href="<?php bloginfo('template_directory'); ?>/meine-haustiere.php" title="meine Haustiere">meine Haustiere</a></li>
<li><a href="<?php bloginfo('template_directory'); ?>/impressum.php" title="Impressum">Impressum</a></li>
</ul>
</div>
… okay, das war ein langes Tutorial, aber ich hoffe, ich habe alles verständlich erklärt! :-)
Wenn ihr noch Fragen habt, könnt ihr sie hier natürlich wie immer gerne stellen.
24. Januar 2010 
857mal gelesen
