Integration von phpBB3 in Wordpress

<< Zurück zu Seite 1

Scrolle nun im Quelltext-Fenster ein wenig nach unten, vorbei an den Meta-Angaben und was sich dort sonst noch so tummelt, bis du bei dem Tag <body> ankommst. Unter diesem Tag beginnt nun der eigentliche Inhalt der Seite. Sieh dir die Struktur genau an. Im folgenden Bild siehst du einen Quelltext-Ausschnitt meines Wordpress-Layouts:

Wordpress-Quelltext Header

Die div id’s “container” und “page” umgeben hier die gesamte Seite. Danach folgt die div id “header”, die wiederum zwei div id’s enthält: “masthead” und “topmenu”. Der Container “masthead” enthält also das Headerbild, der Container “topmenu” das Menü unter dem Bild. Diese beiden Container brauchen wir also. Dabei beachte, dass du auch alle schließenden div-Tags mitkopierst. Der Container “masthead” wird gleich nach dem öffnen wieder geschlossen, zu sehen an dem darunter stehenden Tag </div>. In meinem Layout erkennt man außerdem die schließenden Tags für “header” und “topmenu” an den dahinter stehenden HTML-Kommentaren.

Ist das bei deinem Layout nicht der Fall, dann zähle einfach die div’s, die für den Header stehen, und achte darauf, dass du ebensoviele schließende div’s hinter dem Inhalt des Headers findest und kopierst. Ist dein Layout sauber geschrieben, sollte das an sich kein Problem sein, denn wie du im Beispiel sehen kannst folgt nach den schließenden div’s des Headers gleich der Container für die Sidebar. (Ist deine Sidebar rechts, so würde hier vermutlich der Container für den Hauptinhalt folgen.)

Die schließenden div’s für die gesamte Seite, hier “container” und “page”, brauchst du hier nicht suchen – sie stehen unter dem Footer. Logisch, denn sie umschließen wie gesagt die ganze Seite und werden daher erst ganz am Ende der Seite wieder geschlossen.

Auf dem obenstehenden Bild ist alles, was für den Header kopiert werden muss, rot markiert. Hast du nun erfolgreich die entsprechenden Codeteile aus deinem Quelltext herausgesucht, so markiere sie mit der Mau, kopiere sie in die Zwischenablage und erstelle irgendwo auf deinem PC an einer leicht auffindbaren Stelle eine einfache Windows-Textdatei, in der du den Codeteil ablegst. Am einfachsten geht das auf dem Desktop: Einfach mit rechter Maustaste anklicken, “Neu” und dann “Textdokument” wählen und den Text aus der Zwischenablage einfügen. So hast du den Code parat, wenn du du ihn brauchst.

Das gleiche musst du jetzt noch einmal für den Footer machen. Scrolle weiter herunter, bis du ans Ende der Seite kommst. Hier steht der Tag </body>. Er zeigt an, dass das HTML-Dokument hier zuende ist. Gleich darüber findest du den Quelltext für den Footer:

Wordpress-Quelltext Footer

Der Container für den Footer heißt hier auch “footer”. Bei den meisten Themes dürfte er ebenfalls so oder ähnlich heißen. Markiere nun einfach alles ab dem Footer-Container bis vor </body>.

Die schließenden div-Tags für die gesamte Seite, “container” und “page”, findest du nun ebenfalls hier. Sie müssen mitkopiert werden. Eventuell heißen sie anders, hier kannst du aber im Grunde nichts falsch machen wenn du einfach alles vor dem schließenden Body-Tag markierst. Den schließenden Body-Tag aber bitte nicht mitkopieren.

Den markierten Code nun wie beim Header auch in die Zwischenablage kopieren und entweder in der gleichen Textdatei ablegen oder eine neue Textdatei erstellen. So kannst du auch später nichts durcheinanderbringen. Wenn du willst kannst du die Textdateien noch unter den Namen Header und Footer abspeichern. Verwendest du nur eine Textdatei, lässt du am besten zwischen den beiden Codeblöcken eine größere Anzahl von Zeilen frei. So hast du auch eine gut erkennbare Abtrennung, wenn es gleich ans Einbauen des Codes geht.

Des weiteren benötigst du noch das Stylesheet des Wordpress-Themes. Es befindet sich im Quelltext ganz oben. Scrolle also hoch und suche nach einer Zeile, die in etwa so aussieht: <link rel="stylesheet" href="http://www.domain.de/wp-content/themes/theme/style.css" type="text/css" media="screen" />. Diese komplette Zeile markierst du und fügst sie in eine weitere Textdatei ein, oder, falls du nur eine Textdatei verwendest, unter die vorherigen Codeteile.

Weiter zu Seite 3 >>