TYPO3 mit WordPress: So spielen beide Systeme zusammen

Möchte man eine leistungsfähige Website mit dem Content-Management-System TYPO3 aufbauen aber nicht auf WordPress – dem Blog-System schlechthin – verzichten wollen, stellt man sich die Frage: Wie arbeiten beide System am besten zusammen? Ich habe genau das auf meiner neuen Webpräsenz gemacht und zeige euch nun, wie ich Navigation, Footer und Sidebar Elemente eingebunden habe.

WordPress parallel zu TYPO3 installieren

WordPress habe ich ganz normal im Root Verzeichnis unter dem Ordner „/blog/“ installiert. In TYPO3 habe ich eine leere Seite im Seitenbaum erstellt um im meinem TYPO3 Menü auch den Punkt „Blog“ einzubinden. Natürlich verweist der Menüpunkt via RealURL auf /blog/. Damit wird vom TYPO3 zu WordPress gesprungen.

WordPress vorbereiten

Kurz vorab: Ich bin kein WordPress-Profi und konzentriere mich mit meiner Arbeit (abgesehen von diesem Projekt) lediglich auf TYPO3.

Meine HTML Struktur der TYPO3 Seite habe eins zu eins in das WordPress Template eingebunden. Somit kann ich sämtliches CSS und JS auch für WordPress nutzen. Wie man ein WordPress Template anpasst liest man am besten extern nach. Sind wir damit fertig und haben auch die nötigen CSS / JS Dateien eingebunden sollten wir einen Blog haben, der so aussieht wie unsere normale Website. Sicherlich muss man an ein paar Stellen ein paar spezifische Anpassungen am HTML Konstrukt vornehmen und auch ein paar extra Stylesheets hinterlegen (diese extra Blog-Stylesheets habe ich in die style.css vom WordPress Theme verpackt).

TYPO3 Navigation & Footer vorbereiten

Um nun in unserem optisch fertigen Blog die Menüstruktur und den Footer aus TYPO3 einzubinden erstellen wir in TypoScript zwei extra PAGE Templates. Einmal für die Navigation, einmal für den Footer. Das könnte ungefähr so aussehen:

blogHeader = PAGE
blogHeader {
  typeNum = 991
  config.disableAllHeaderCode = 1
  config.absRefPrefix < config.baseURL
  10 < lib.navigation
}

blogFooter = PAGE
blogFooter {
  typeNum = 992
  config.disableAllHeaderCode = 1
  config.absRefPrefix < config.baseURL
  10 < lib.copyright
  20 < lib.navigation_footer
}

Diese beiden Objekte erlauben uns nun über folgende URLs den Content von TYPO3 abzurufen. Wir erhalten damit also den Menü und Footer Aufbau aus TYPO3.

http://deineDomain.de/?type=991
http://deineDomain.de/?type=992

Navigation und Footer in WordPress einbinden

Damit wir nun unsere Daten auch in WordPress erhalten fügen wir in die header.php bzw. footer.php von WordPress an die entsprechenden Stellen folgendes ein:

<?php print file_get_contents('http://'.$_SERVER['HTTP_HOST'].'/?type=991'); ?>

Damit sollte nun unser Menü aus TYPO3 in WordPress eingebunden werden. Natürlich wird das menü dann vollständig durch TYPO3 bereitgestellt.

WordPress Sidebar

Auf gleiche Weise können wir auch bestimmte Inhalte aus TYPO3 in unsere WordPress Sidebar einbinden. Ich habe in TYPO3 eine Seite „Blog Sidebar“ erstellt von der sämtliche Inhalte rechts in die WordPress Sidebar eingefügt werden. Dafür habe ich folgendes TypoScript verwendet und wie oben beschrieben eingebunden:

blogSidebar = PAGE
blogSidebar {
  typeNum = 993
  config.disableAllHeaderCode = 1
  config.absRefPrefix < config.baseURL
  10 = CONTENT
  10 {
    table = tt_content
    select {
      orderBy = sorting
      where = colPos = 0 AND hidden = 0
    }
    select.pidInList = ###TYPO3-PAGE-ID###
  }
}

Damit habe ich nun meine drei Hauptlesitungen die ich anbiete in die WordPress Sidebar integriert.

TYPO3 Extension Scriptmerger und WordPress

Gerne würde ich auch die durch die TYPO3 Extension Scriptmerger erstellten CSS und JS Dateien in WordPress einbinden – allerdings bin ich hier bisher leider auf noch keinen grünen Zweig gekommen nur die reinen CSS / JS Sourcen von Scriptmerger zu erhalten, da

config.disableAllHeaderCode = 1

dafür sorgt, dass keine CSS / JS Dateien aus TYPO3 ausgegeben werden. Aktiviere ich wieder den Header-Code, kommt allerdings deutlich zu viel mit – ich brauche ja nur den <link> und <script> Tag der entsprechenden Ressourcen und keinen gesamten HTML Head mit allem was dazu gehört.

Wenn ihr eine Idee habt wie man das lösen kann, sagt mir gerne Bescheid.

Bewerte diese Seite

 
 
 
 
 
 
 
Bewerten
 
 
 
 
 
 
10 Bewertungen
96 %
1
5
4.8
 

Veröffentlicht von

Kevin Lieser

Kevin Lieser

Kevin Lieser ist ausgebildeter Mediendesigner und seit 2008 mit der TYPO3 Agentur KA Mediendesign unternehmerisch tätig. Seine Leidenschaften sind gutes Webdesign und die PHP Programmierung. Als App Entwickler und Autor mehrerer TYPO3 Extensions engagiert er sich aktiv für die Weiterentwicklung von Webapplikationen und mobilen Anwendungen.