WordPress-Look für statische Seiten und externe PHP-Apps

WordPress-Look für statische Seiten und externe PHP-Apps

Statische Webseiten, eine externe Bildergalerie oder eine bestehende Datenbank-Anwendung soll im selben Design erscheinen wie das Blog? Mit einem Trick lässt sich WordPress sehr einfach in andere PHP-Apps und Webseiten integrieren. 

WordPress ist häufig der Mittelpunkt einer Website. Sollen externe Anwendungen integriert werden, sucht man daher instinktiv nach einem WordPress-Plugin, um diese Anwendung zu integrieren.

Um die Ecke gedacht

Tatsächlich funktioniert es umgekehrt aber viel besser: WordPress-Funktionen und -Design lassen sich sehr einfach in externe Seiten und PHP-Anwendungen einbinden. Dieser Ansatz hat nebenbei den Vorteil, dass die Anwendung komplett unabhängig von WordPress und dort eingesetzter Plugins läuft. Das reduziert das Risiko künftiger Inkompatibilitäten und bei Sicherheitslücken.

Natürlich lässt sich mit diesem Trick auch problemlos der „Design-Rahmen“ von WordPress um bereits bestehende, statische HTML-Seiten herumbauen. Diese Seiten wirken dann wie ein Teil von WordPress, ohne den Content tatsächlich in das CMS importieren zu müssen.

Und so geht’s:

Mit einer einzigen PHP-Code-Zeile im head-Bereich integriert man die WordPress-Funktionen:

<?php require('/serverpfad/zur/wordpress-installation/wp-blog-header.php'); ? >

Damit stehen die Grundfunktionen zur Verfügung. Jetzt kannst Du Code-Elemente aus den WordPress-Theme-Dateien herauskopieren und übernehmen kann, die Du wiederverwenden möchtest. Am häufigsten wird das der Header-Bereich mit Header-Grafik und Navigation sein:

<?php get_header(); ? >

Umgekehrt ist es sinnvoll, in den WordPress-Navigationsmenüs einen Link zu der externen Anwendung oder Seite einzubauen.

Wo genau die gewünschten WordPress-Elemente in die externe Anwendung integriert werden müssen, hängt natürlich stark vom strukturellen Aufbau der jeweiligen Applikation ab. Hier ist eine genauere Auseinandersetzung mit den Templates und der Template-Struktur dieser Applikation unvermeidlich.

Anpassungen und Konfiguration

Am einfachsten ist die Integration, wenn die externe App so konfigurierbar ist, dass sie bei der Integration des WordPress-Headers keinen eigenen Header ausgibt, denn sonst enthält das Ergebnis beispielsweise die html-, head– und body-Tags doppelt. Erlaubt eine PHP-Anwendung eine solche Konfiguration nicht, ist zwar beispielsweise die WordPress-Funktion get_header() nicht verwendbar, einzelne Elemente aus dem Header-Bereich von WordPress lassen sich aber dennoch herüberziehen. Dazu suchst Du die passenden Code-Zeilen im WordPress-Theme und übernimmt diese einfach direkt. Die Funktion wp_nav_menu() übernimmt beispielsweise die Navigation aus WordPress.

Grundprinzip testen

Um das Grundprinzip zu verstehen und die Integration im ersten Schritt zu vereinfachen, legst Du am besten eine leere .php-Datei an, die lediglich HTML-Basics enthält wie die Tags html, head und body. In diese Datei fügst Du dann den require-Befehl für wp-blog-header.php ein sowie die WordPress-Funktionen, die Du nutzen willst. Dazu gehören in der Regel natürlich auch CSS-Anweisungen, die Du ebenfalls direkt aus der header.php des WordPress-Themes kopieren und einbinden kannst. Letzteres hat den Vorteil, dass diese CSS-Datei in der Regel bereits im Browser-Cache des Users liegt und nicht neu geladen wird.

Erst wenn das Ergebnis zur Zufriedenheit ist, baust Du diesen funktionierenden Code in die Templates der externen Applikation ein. Dieses schrittweise Vorgehen macht eine Fehlersuche deutlich einfacher.

Grundlegende Code-Beispiele enthält eine PDF-Datei, die Ihr hier herunterladen könnt.

Schlagworte:

Teilen

Sie können erst kommentieren, wenn Sie unseren Datenschutzbestimmungen und den Cookies zugestimmt haben. Aus Datenschutzrechtlichen Gründen dürfen wir andernfalls keine personenbezogenen Daten von Ihnen aufzeichnen.

Klicken Sie dazu einfach unten im Browser Fenster auf den blauen Button Akzeptieren. Nach dem Neuladen der Seite können Sie Ihr Kommentar schreiben.