Website-Icon The Magical Digital Nomad

Integriere ein normale HTML-Seite in deinen WordPress Blog

WordPress mit eigenen Funktionen erweitern

WordPress mit eigenen Funktionen erweitern

Es wäre doch cool manchmal Seiten welche nicht in WordPress erstell wurden trotzdem in den Blog zu integrieren. Ein eigenes JavaScript für eine WordPress-Seite geht wieder nur mit einem PlugIn oder es wird immer mit geladen. Klar kann ich so ein kleines Script bei jedem WordPress-Aufruf mitsenden. Ist ja kein Performance-Problem. Aber jedes kleine Ding, dass mit geladen wird, kostet ein wenig Zeit und schwupp-di-wupp, bist du bei Ladezeiten jenseits von Gut und Böse. Und jetzt das 123. PlugIn wegen so etwas in meinen WordPress-Blog zu installieren kommt ja gar nicht in Frage. Eine andere Lösung musste her!

Eine externe Seite erstellen

Das ist für uns jetzt wirklich kein Problem. Schnell die Verzeichnisstruktur angelegt und dort eine index.php erstellt. Das ganze lässt sich über die URL (= Verzeichnisstruktur) super aufrufen und WordPress funkt auch nicht dazwischen. Aber wie bekomme ich jetzt das Blog-Layout auf meine Seite?

Eine nicht WordPress-Seite in den Blog integrieren

Eine sehr laienhafte Idee (um in diesem Fall nicht zu sagen: vollkommen verrückte Idee) ist, die Elementstruktur von einer WordPress-Seite einfach nachzubauen. Schaut zwar fürs Erste gut aus, aber kaum änderst du etwas, kannst du auch auf der externen HTML-Datei alles nachändern. Daher ist es besser, die Seite in WordPress zu integrieren und der Software den Aufbau der Struktur zu überlassen. Und das ist nicht einmal so schwierig.

Das head-Element und die Kopfzeile von WordPress übernehmen

Ganz am Anfang deiner php-Datei fügst du folgende Zeilen ein.

<?php 
  require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php' );
  global $title;
  $title = 'mein neuer Seitentitle für das title-Element';
  get_header();
?>

Mit diesen paar Zeilen lädst du die Grundstruktur von WordPress in deine externe Seite. In der Zeile 3 und 4 legst du den Seitentitel fest. Aber nicht die h1-Überschrift, sondern den Text für das title-Element. Das musst du in den Zeilen vor der Funktion get_header() machen. Denn diese erzeugt das head-Element und auch die erste Grundstruktur der html-Seite.

Nun kannst du ab Zeile 7 deinen eigenen Code für die Seite schreiben. Ob das jetzt weiteres php, JavaScript oder „nur“ html ist, kannst du selbst entscheiden. Sobald du fertig bist, kommen die letzten Schritte. Jetzt kannst du auch alle von WordPress zur Verfügung gestellten Funktionen, Tags und ShortCodes verwenden.

Die Seitenleiste in deine externe Seite einfügen

Jeder Blog hat ja eine Seitenleiste. Naja fast jeder. Aber wenn du eine in deinem Blog verwendest, willst du sie natürlich auch auf deiner Nicht-WordPress-Seite verwenden. Dazu fügst du am Ende deiner Datei folgende Codezeilen ein.

<?php 
  get_sidebar();
?>

Ja du siehst richtig! Das ist nur dieser einfache Aufruf und deine Seitenleiste(n) wird/werden in die Seite geladen. Jetzt kann es sein, dass du noch offene div-Elemente schließen musst. Das hängt von deinem Theme ab. Am besten öffnest du die Datei page.php und schaust wie die Elemente richtig (in der richtigen Reihenfolge) geschlossen werden.

Die Fußzeile von WordPress übernehmen

Die letzten Zeilen in deiner externen WordPress-Seite sind jetzt noch das Anzeigen der Fußzeile und alle footer-Elemente der html-Datei zu laden. Das geht genauso einfach wie vorher.

<?php 
  get_footer();
?>

Damit ist deine Seite fertig und du kannst sie aufrufen. Du siehst in deinem Browser jetzt, dass das Layout perfekt übernommen wurde und keinem fällt auf, dass diese Seite gar nicht mit WordPress angelegt wurde, sondern außerhalb der Datenbank gespeichert ist.

Wenn du Fragen hast, trau dich! Direkt unter diesem Post kannst du jederzeit einen Kommentar schreiben.

Die mobile Version verlassen