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.
Hallo Anne,
ich habe ja früher bevorzugt Serendipity verwendet und bin nun auch in der WordPress-Welt zuhause (wenn auch noch einige s9y-Blogs laufen). WordPress ist einfach funktionaler. Einige Hinweise für meine Seiten habe ich aus Deinem Tutorial. Danke für die Mühe, die Du Dir gemacht hast!
LG
Anna
Ein super Tutorial, vielen Dank!
Hat bei uns in dem Blog wunderbar funktioniert und ich habe endliche die Informationen des Blogs sinnvoll mit dem Shop verbinden können.
Danke für die umfangreiche Erklärung zur Integration.
Grüße,
Stefan
ich habe meinen index.php geöffnet aber bei mir steht da fast gar nichts.. nur
This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
* Learn more: http://codex.wordpress.org/Template_Hierarchy
sowas in der art.. es gibt nur die php tags, get_header, get_template und get_footer..
hilfe??
nochwas: wenn ich die php dateien geändert habe muss ich sie dann eigentlich noch auf meinen server laden? also geändert..?
@ mia:
Guck mal in der loop.php; Themes wie TwentyTen haben den betreffenden teil aus der index.php in die loop.php ausgelagert.
Nach dem Ändern musst du die Dateien natürlich auch auf den Server laden, sonst weiß deine Webseite ja nichts von den Änderungen. :)
Vielen Dank! Du hast mir echt geholfen haben die ganze Zeit etwas übersehen
Vorher hatte ich die ganze Zeit Fehlermeldung aber dank dir sind die jetzt Vergangenheit! ;)
Warning: require(../../../wp-blog-header.php) [function.require]: failed to open stream: No such file or directory in /mnt/webd/c2/65/52559165/htdocs/wp-content/themes/derbiene/index.php on line 1
Fatal error: require() [function.require]: Failed opening required ‘../../../wp-blog-header.php’ (include_path=’.:/opt/RZphp5/includes’) in /mnt/webd/c2/65/52559165/htdocs/wp-content/themes/derbiene/index.php on line 1
Warning: require(../../../wp-blog-header.php) [function.require]: failed to open stream: No such file or directory in /mnt/webd/c2/65/52559165/htdocs/wp-content/themes/derbiene/index.php on line 1
Fatal error: require() [function.require]: Failed opening required ‘../../../wp-blog-header.php’ (include_path=’.:/opt/RZphp5/includes’) in /mnt/webd/c2/65/52559165/htdocs/wp-content/themes/derbiene/index.php on line 1
hi bekomme immer wieder diese fehlermeldung, zuvor hat es allerdings noch funktioniert nur war das auf meinem testserver.
sorry für die drei Comments, habs hinbekommen mußt nur meinen Server umleiten. Geht das auch ohne Umleitung.
Erstmal danke fürs Tutorial!
Ich habe in meinem Seitenlayout, in welches ich WordPress einbinden möchte, mehrere PHP-Include-Funktionen, die alle nicht mehr funktionieren (die Dateipfade sind aber definitiv richtig), sobald ich WordPress in das Layout bastele. Hat jemand eine Ahnung woran das liegen könnte?
Ich hätte 2 Fragen:
Ist es möglich Archiv,Tagcloud usw. (also alles was nur zum Blog gehört) auch nur beim Blog anzeigen zu lassen? (rein logisch würde ich auf den anderen Seiten den codeteil einfach weglassen, oder?)
Ist es nicht möglich WordPress als blog unter “meineseite.de/blog” laufen zu lassen? Ich möchte ungern diesen Umweg für alle html-Seiten über wp machen.
Genau das würde mich auch interessieren. Alle Seiten eines Shops umzubauen wäre schon sehr hart. :-)