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.
neontrauma, 23 Jahre alt, Studentin und freiberufliche Webdesignerin, liebt Coding & Fotografie und wohnt in Leverkusen. 
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 ;-)
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
mist, also ich mein diesen teil
mal sehen obs klappt
*augen roll nein auch mit sternchen klappt es nicht. ich rede vom get_sidebar teil.
@ 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. > :-) )
Du, ich hab eine Frage an dich .. Wo kann/soll ich die stellen? /:
“@ 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 ;)
Hilfreicher Artikel
mhh iwi als komplett neuling mit wordpress bin ich mehr oder weniger trotz der anleitung am verzweifeln :( ..
Sehr hilfreich! Danke, gute Arbeit!
Danke für das Tutorial!! Hat mir sehr geholfen!
[...] the rest here: WordPress in eine normale Seite einbinden | neontrauma.de | Tutorials & Webdesign Comments0 Leave a Reply Click here to cancel [...]
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?
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?
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…
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;)
Danke für die tolle Anleitung.
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…
danke für den artikel.
Bin über Google auf den Artikel gestoßen, genau das, was ich gesucht habe. Schöne Anleitung, danke!
Gruß
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!
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
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 Ö
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.
An diese Möglichkeit hatte ich noch garnicht gedacht, mal sehen, wie sich das sinnvoll einbinden läßt.
Vielen Dank für diese tolle Anleitung, sehr hilfreich
Das ist eine Perfekte Anleitung, große Anerkennung von mir ! Ich bin genau nach Deiner Beschreibung vorgegangen, hat es hat alles ohne Probleme funktioniert. Ich wäre Dir sehr dankbar wenn Du auch in Zukunft solche hilfreichen Artikel postest.
Vielen Dank, Stefan
Viele Grüße, Stefan
Sehr gutes Tutorial, Danke!
Allerdings seh ich noch nicht 100%ig den Sinn seine Seiten weiterhin per Hand in HTML anzulegen, aber sollte es mal zu so einem Fall kommen, dass ich darauf angewiesen bin, hab ich mit deinem Artikel nun die perfekte Anleitung das ganze auch mal “unkonventionell” anzugehen und zu lösen :)
Hat bei uns in der Seite 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.
Viele Grüße, Switch-it Fan
Hi,
ich habe das versucht und soweit auch geschafft. Es gibt nur ein Problem, auf dass mir niemand eine Antwort geben kann. Wie lege ich für diese Seiten den Titel im Head fest? Meine Seite
Vielen Dank für die Mühen …
Daniel
Vielen Dank für die gute Anleitung, sehr hilfreich !!!
Danke für die tollen Tipp`s
Sehr hilfreich
Danke.
Schön, dass es so hilfreiche Blogs gibt. Die Anleitung auch für Anfänger gut nachvollziehbar.
Super Tutorial! Ist sehr enfach zu verstehen. Danke sehr.
Sehr coole anleitung genau so etwas habe ich gesucht und bin endlich fündig geworden. Vielen dank noch einmal dafür
Über Google hier gelandet. Sehr ausführliche und hilfreiche Anleitung! Arbeite grade am Relaunch meiner Seite und da sind solche fundierten Infos natürlich super…
Vielen Dank für die hilfreichen Tips.
@ den Schreiber der Page:
Sehr gut beschrieben. Endlich mal nicht nur allgemeines gerede, sondern auch was Konkretes mit eingebaut. Bin auch über die Google Suche hier gelandet.
Wünsche dirnoch viel Erfolg ein weiterhin ein gutes Ranking mit deiner Seite
Gruß aus Köln
Lukas
Sehr hilfreicher Artikel, die Sache mit dem “Pferd von hinten aufzäumen” ist wirklich einfacher, und oft sieht man das einfache ja nicht direkt – sehr hilfreich also, danke :)
Klasse Anleitung, vielen Dank dafür, Maike
Super Tips.
Danke dafür und noch eine schöne Zeit
Das hat mir bei einem ähnlichen Problem bei meinem eigenen Blog sehr weitergeholfen, vielen Dank dafür. Man kann doch immer noch etwas dazulernen ;-)
Genial. Genau das hatte ich für ein anderes Projekt gesucht. Werdee ich demnächst mal versuchen umzusetzen. Sollte mit Deiner sehr ausführlichen Anleitung wohl auch klappen.
Super Tips. Vielen Dank
endlich mal ein Blog der einem wirklich weiterhilft. Vielen Dank für die guten Tipps!!
Danke dir! So ein Tutorial habe ich schon sehr lange gesucht!
Respekt, Anne! Ein hervorragender und vor allem hilfreicher Artikel! Tausend Dank.