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.
