überarbeitet: WordPress in eine normale Seite einbinden
24. September 2009Vor 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. September 2009 
seit Juni 2009 3,922mal gelesen
Kommentare
Stefan Wienströer meint am 24. September 2009 um 15:22 dazu:
Ich hab auch grad vor meinen Blog noch mehr in meine normale Website zu integrierten. Bisher ist schon das Design gleich und neue und beliebte Artikel werden gemischt mit Inhalten der richtigen Seite. Was bei mir noch in Planung ist, dass man die Kommentarfunktion mit seinem Community-Profil zusammenbinden kann. Mal sehen, wie sich das am besten umsätzlen lässt. Aber guter Artikel ;-)
Nicole meint am 24. September 2009 um 17:09 dazu:
super, dass du dir die arbeit mit der neuen anleitung gemacht hast. bin noch nicht fertig aber grad über etwas gestolpert. hast du die aktuellste version von wordpress als grundlage genutzt? denn ich habe den teil:
in der footer.php stehen. deshalb hab ich eben ewig gesucht, in der index aber nicht get_sidebar gefunden und bin dann im footer drüber gefallen.
dann hab ich weiter gelesen und fest gestellt, dass ich nun eine meine seiten in das wordpress layout einbetten soll(?) das ist für mich nicht umsetzbar. ich hab über 50 unterseiten (haben sich in den letzten 3 jahren angesammelt), daher kommt diese wordpresslösung nicht mehr für mich in frage. schade, um die ganze arbeit, die ich mir bis zu diesem punkt gemacht habe.
lg
Nicole meint am 24. September 2009 um 17:10 dazu:
mist, also ich mein diesen teil
mal sehen obs klappt
Nicole meint am 24. September 2009 um 17:11 dazu:
*augen roll nein auch mit sternchen klappt es nicht. ich rede vom get_sidebar teil.
neontrauma meint am 24. September 2009 um 17:24 dazu:
@ Nicole:
wo die Sidebar eingebunden wird, ist letzlich egal. Also, ob der Code-Schnipsel in der header.php, in der index.php oder auch in der footer.php auftaucht, nimmt sich nichts.
Ich hab übrigens die neueste WP-Version dafür aufgesetzt, ja.
(um PHP-Code wird hier in den Kommentaren einzufügen, muss man die spitzen Klammern durch die entsprechenden HTML-Entities ersetzen, also < bzw. > :-) )
Susa meint am 26. September 2009 um 09:39 dazu:
Du, ich hab eine Frage an dich .. Wo kann/soll ich die stellen? /:
Nicole meint am 26. September 2009 um 13:11 dazu:
“@ Nicole:
wo die Sidebar eingebunden wird, ist letzlich egal. Also, ob der Code-Schnipsel in der header.php, in der index.php oder auch in der footer.php auftaucht, nimmt sich nichts.
Ich hab übrigens die neueste WP-Version dafür aufgesetzt, ja.”
da magst du recht haben, für einen laien ist es dennoch nicht leicht, entsprechende stellen zu finden, wenn sie in einer anderen datei liegen ;)
Webdesing Gelsenkirchen meint am 27. Oktober 2009 um 11:34 dazu:
Hilfreicher Artikel
Francis meint am 31. Oktober 2009 um 16:23 dazu:
mhh iwi als komplett neuling mit wordpress bin ich mehr oder weniger trotz der anleitung am verzweifeln :( ..
Stefan meint am 7. November 2009 um 00:49 dazu:
Sehr hilfreich! Danke, gute Arbeit!
Mischa meint am 19. November 2009 um 15:43 dazu:
Danke für das Tutorial!! Hat mir sehr geholfen!
WordPress in eine normale Seite einbinden | neontrauma.de | Tutorials & Webdesign meint am 21. November 2009 um 10:38 dazu:
[...] the rest here: WordPress in eine normale Seite einbinden | neontrauma.de | Tutorials & Webdesign Comments0 Leave a Reply Click here to cancel [...]
Anachronist meint am 22. November 2009 um 16:02 dazu:
In der modifizierten index.php gibt es kein und . Wie soll ich den Content da reinbauen wenn man z.b. vorher rausgelöscht hat indem man nur den Loop in der index.php drin lässt?
Anachronist meint am 22. November 2009 um 16:03 dazu:
In der modifizierten index.php gibt es kein und auch kein . Wie soll ich den content da reinbauen wenn man ja vorher sogar selbst rausgelöscht hat indem man nur den Loop in der index.php drin lässt?
Anachronist meint am 22. November 2009 um 16:06 dazu:
In der modifizierten index.php gibt es kein php_get_header und auch kein php_get_sidebar . Wie soll ich den content da reinbauen wenn man ja vorher sogar php_get_header selbst rausgelöscht hat indem man nur den Loop in der index.php drin lässt?
so, ich hoffe, die php befehle werden jetzt angezeigt…
Heiki meint am 6. Dezember 2009 um 21:39 dazu:
VIELEN VIELEN DANK für dieses geniale Tutorial- du hast mir echt “das Leben gerettet”… ich hätte meinen Blog sonst nie wie gewünscht hinbekommen;);)
SUPER KLASSE ARBEIT!! weiter so;)
Ulrich meint am 15. Dezember 2009 um 12:34 dazu:
Danke für die tolle Anleitung.
Michi meint am 23. Dezember 2009 um 16:17 dazu:
Das ist schon eine feine Sache. Oftmals wollen Firmen ja einen feinen Look für die Website und stehen voll auf Flash und Co. Dann erklären die Optimierer, man bräuchte ein performantes System auf der Webpräsenz. Hier eine Verbdindung zu schaffen, ist klasse…
badewannnelift meint am 11. Januar 2010 um 00:16 dazu:
danke für den artikel.
Robert meint am 16. Januar 2010 um 15:26 dazu:
Bin über Google auf den Artikel gestoßen, genau das, was ich gesucht habe. Schöne Anleitung, danke!
Gruß
herrenmode meint am 31. Januar 2010 um 11:40 dazu:
Perfekte Anleitung, großes Lob von mir ! Ich bin exakt nach Deiner Beschreibung vorgegangen, hat ohne Probleme funktioniert. Deine Blogbesucher inklusive mir wären sehr dankbar wenn Du auch in Zukunft solche hilfreichen Artikel postest. Vielen Dank dafür!
mj12bot meint am 25. Februar 2010 um 09:21 dazu:
Hallo zusammen.
Ich habe die alte Variante gewählt, da die für meine Zwecke einfach besser geeignet ist.
Funktioniert auch, nur wird mir statt der Artikel der
“Keine Artikel gefunden” Part angezeigt mit einer Liste der WP Seiten. Dort jedoch sind die Artikel gelistet in der Kategorie “Allgemeines”.
Sollte WP nicht standardmäßig diese Kategorie abrufen?
Wenn nein, wie gebe ich dem Loop die Kategorievorgabe mit?
Vielen dank vorab,
Gruß,
Bot
Fred meint am 3. März 2010 um 15:14 dazu:
So einfach kann es also sein! Danke für die einzige einfache und logische Anleitung unter vielen. Im Style-Sheet noch die Speicherpfade anpassen und alles funktioniert! Danke nochmals (Seite mit meinem Beispiel ist vorerst noch nicht online). LG aus Ö
Datenbanken meint am 3. März 2010 um 21:37 dazu:
Ich kann es auch nicht ganz nachvollziehen, dass zuerst der Quellcode aus einem anderen PHP-Script ausgeführt werden soll und im Anschluss der Header ermittelt werden soll. Vermutlich wäre die Webseite auch nicht mehr valide, wenn plötzlich an anderer Stelle HTML-Befehle zum Start einer HTML-Seite auftauchen würden.
Was man natürlich machen kann ist, ein PHP-Script so zu entwerfen, dass im Bodybereich der Webseite der Conten aus einem Wordpressblog eingebaut wird. Hier kann man dann das entsprechende Wordpress-PHPscript inkludieren bzw. den Code mit require einbauen, da dann abgefangen wird, dass das Script evtl. an anderer Stelle schon eingebunden wurde.
Tom meint am 4. März 2010 um 18:24 dazu:
An diese Möglichkeit hatte ich noch garnicht gedacht, mal sehen, wie sich das sinnvoll einbinden läßt.
und was denkst du dazu?