neontrauma.de » WordPress » überarbeitet: WordPress in eine normale Seite einbinden
24. September 2009

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="&uuml;ber mich">&uuml;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.

verwandte Beiträge

48 Kommentare

  1. Stefan Wienströer meinte dazu am 24. September 2009 um 3:22 pm: antworten
    #1

    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 ;-)

  2. Nicole meinte dazu am 24. September 2009 um 5:09 pm: antworten
    #2

    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

  3. Nicole meinte dazu am 24. September 2009 um 5:10 pm: antworten
    #3

    mist, also ich mein diesen teil

    mal sehen obs klappt

  4. Nicole meinte dazu am 24. September 2009 um 5:11 pm: antworten
    #4

    *augen roll nein auch mit sternchen klappt es nicht. ich rede vom get_sidebar teil.

  5. neontrauma meinte dazu am 24. September 2009 um 5:24 pm: antworten
    #5

    @ 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 &lt; bzw. &gt; :-) )

  6. Susa meinte dazu am 26. September 2009 um 9:39 am: antworten
    #6

    Du, ich hab eine Frage an dich .. Wo kann/soll ich die stellen? /:

  7. Nicole meinte dazu am 26. September 2009 um 1:11 pm: antworten
    #7

    “@ 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 ;)

  8. Webdesing Gelsenkirchen meinte dazu am 27. Oktober 2009 um 11:34 am: antworten
    #8

    Hilfreicher Artikel

  9. Francis meinte dazu am 31. Oktober 2009 um 4:23 pm: antworten
    #9

    mhh iwi als komplett neuling mit wordpress bin ich mehr oder weniger trotz der anleitung am verzweifeln :( ..

  10. Stefan meinte dazu am 7. November 2009 um 12:49 am: antworten
    #10

    Sehr hilfreich! Danke, gute Arbeit!

  11. Mischa meinte dazu am 19. November 2009 um 3:43 pm: antworten
    #11

    Danke für das Tutorial!! Hat mir sehr geholfen!

  12. pingback 21. November 2009 10:38 am
    #12

    [...] the rest here: WordPress in eine normale Seite einbinden | neontrauma.de | Tutorials & Webdesign Comments0 Leave a Reply Click here to cancel [...]

  13. Anachronist meinte dazu am 22. November 2009 um 4:02 pm: antworten
    #13

    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?

  14. Anachronist meinte dazu am 22. November 2009 um 4:03 pm: antworten
    #14

    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?

  15. Anachronist meinte dazu am 22. November 2009 um 4:06 pm: antworten
    #15

    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…

  16. Heiki meinte dazu am 6. Dezember 2009 um 9:39 pm: antworten
    #16

    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;)

  17. Ulrich meinte dazu am 15. Dezember 2009 um 12:34 pm: antworten
    #17

    Danke für die tolle Anleitung.

  18. Michi meinte dazu am 23. Dezember 2009 um 4:17 pm: antworten
    #18

    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…

  19. badewannnelift meinte dazu am 11. Januar 2010 um 12:16 am: antworten
    #19

    danke für den artikel.

  20. Robert meinte dazu am 16. Januar 2010 um 3:26 pm: antworten
    #20

    Bin über Google auf den Artikel gestoßen, genau das, was ich gesucht habe. Schöne Anleitung, danke!

    Gruß

  21. herrenmode meinte dazu am 31. Januar 2010 um 11:40 am: antworten
    #21

    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!

  22. mj12bot meinte dazu am 25. Februar 2010 um 9:21 am: antworten
    #22

    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

  23. Fred meinte dazu am 3. März 2010 um 3:14 pm: antworten
    #23

    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 Ö

  24. Datenbanken meinte dazu am 3. März 2010 um 9:37 pm: antworten
    #24

    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.

  25. Tom meinte dazu am 4. März 2010 um 6:24 pm: antworten
    #25

    An diese Möglichkeit hatte ich noch garnicht gedacht, mal sehen, wie sich das sinnvoll einbinden läßt.

  26. Holzhaus meinte dazu am 12. März 2010 um 5:28 pm: antworten
    #26

    Vielen Dank für diese tolle Anleitung, sehr hilfreich

  27. Stefan meinte dazu am 16. März 2010 um 1:18 pm: antworten
    #27

    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

  28. Chris meinte dazu am 26. März 2010 um 12:55 pm: antworten
    #28

    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 :)

  29. Switch-it Fan meinte dazu am 26. März 2010 um 3:18 pm: antworten
    #29

    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

  30. Daniel meinte dazu am 29. März 2010 um 9:56 pm: antworten
    #30

    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

  31. Fenix meinte dazu am 1. April 2010 um 11:04 am: antworten
    #31

    Vielen Dank für die gute Anleitung, sehr hilfreich !!!

  32. Walther meinte dazu am 1. April 2010 um 11:05 am: antworten
    #32

    Danke für die tollen Tipp`s

  33. Fenix meinte dazu am 1. April 2010 um 11:06 am: antworten
    #33

    Sehr hilfreich
    Danke.

  34. Folien meinte dazu am 3. April 2010 um 12:50 pm: antworten
    #34

    Schön, dass es so hilfreiche Blogs gibt. Die Anleitung auch für Anfänger gut nachvollziehbar.

  35. Karlson meinte dazu am 15. April 2010 um 3:45 am: antworten
    #35

    Super Tutorial! Ist sehr enfach zu verstehen. Danke sehr.

  36. Jana meinte dazu am 25. April 2010 um 9:32 pm: antworten
    #36

    Sehr coole anleitung genau so etwas habe ich gesucht und bin endlich fündig geworden. Vielen dank noch einmal dafür

  37. Wohngestalter meinte dazu am 29. April 2010 um 10:08 am: antworten
    #37

    Ü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…

  38. reiner meinte dazu am 29. April 2010 um 11:50 am: antworten
    #38

    Vielen Dank für die hilfreichen Tips.

  39. Spiele kaufen meinte dazu am 28. Mai 2010 um 1:57 am: antworten
    #39

    @ 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

  40. Umzugshelfer meinte dazu am 4. Juni 2010 um 11:06 am: antworten
    #40

    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 :)

  41. Wandtattoo meinte dazu am 18. Juni 2010 um 6:59 pm: antworten
    #41

    Klasse Anleitung, vielen Dank dafür, Maike

  42. Volker meinte dazu am 20. Juni 2010 um 7:39 pm: antworten
    #42

    Super Tips.
    Danke dafür und noch eine schöne Zeit

  43. topdsl meinte dazu am 21. Juni 2010 um 6:06 pm: antworten
    #43

    Das hat mir bei einem ähnlichen Problem bei meinem eigenen Blog sehr weitergeholfen, vielen Dank dafür. Man kann doch immer noch etwas dazulernen ;-)

  44. Melanie meinte dazu am 12. Juli 2010 um 11:42 am: antworten
    #44

    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.

  45. reiner meinte dazu am 18. Juli 2010 um 3:00 pm: antworten
    #45

    Super Tips. Vielen Dank

  46. Friseur München meinte dazu am 28. Juli 2010 um 11:20 pm: antworten
    #46

    endlich mal ein Blog der einem wirklich weiterhilft. Vielen Dank für die guten Tipps!!

  47. Kathy meinte dazu am 29. Juli 2010 um 3:02 pm: antworten
    #47

    Danke dir! So ein Tutorial habe ich schon sehr lange gesucht!

  48. Dana meinte dazu am 15. August 2010 um 3:59 pm: antworten
    #48

    Respekt, Anne! Ein hervorragender und vor allem hilfreicher Artikel! Tausend Dank.

Und deine Meinung?

HTML erlaubt

Abonnieren, ohne einen Kommentar zu hinterlassen

die Autorin
neontrauma neontrauma, 23 Jahre alt, Studentin und freiberufliche Webdesignerin, liebt Coding & Fotografie und wohnt in Leverkusen. mehr?
neontrauma im www
flickr fotocommunity deviantART twitter facebook StudiVZ lifestream.fm last.fm