Ausgangssituation

Geht es Ihnen auch so? Irgendwann, in den grauen Zeiten vor dem sogenannten Web 2.0 hat manch einer unter uns Zeit, Geld, Nerven usw. in den Aufbau einer eigenen Webpräsenz investiert. Diese basiert meist auf purem HTML, garniert mit etwas CSS (soll ja in möglichst vielen Browsern hübsch aussehen), greift hier und da auf ein wenig Javascript zurück und saugt ggf. sogar einige Informationen aus einer MySQL-Datenbank – im wesentlichen ist das ganze Gebilde aber ziemlich statisch. Was definitiv fehlt, ist die Möglichkeit, Inhalte ohne viel Aufwand zu modifizieren bzw. zu ergänzen und mit den Besuchern der eigenen Seite in einen Dialog zu treten. Mit anderen Worten: Es wird Zeit, den nächsten Schritt zu machen.

Zielsetzung

Konkret geht es darum, die eigene Homepage um eine Blogfunktion zu ergänzen und dafür sich der Dienste von WordPress zu versichern, d. h., die bisherigen Inhalte sollen weiterhin direkt als HTML-Dateien verwaltet und nicht über die Seitenfunktion in WordPress eingepflegt werden. Eine solche Webseite könnte z. B. den folgenden „klassischen“ Aufbau haben:

1. einen Kopfbereich (hier <div id=“banner“>) für die Darstellung des Firmennamens, Logos sowie der Hauptnavigation,
2. den (zweispaltigen) Dokumentenbereich, welcher in unserem Fall von den beiden <div>-Containern „mainContainer“ und „helpBox“ definiert wird und
3. einen Fußzeilenbereich (<div id=“status“) mit Anschrift, Telefon usw.

Ferner wird von der Möglichkeit abgesehen, die WordPress-Seiten mittels IFRAME in das vorhandene Layout einzubetten. Über die Sinnhaftigkeit des Unterfangens kann trefflich gestritten werden – betrachten wir das Ganze einfach als eine Machbarkeitsstudie.

Voraussetzungen

Damit wir WordPress verwenden können, benötigen wir eine MySQL-Datenbank und einen PHP-fähiger Server. Zunächst sind beide Voraussetzungen mit dem Provider unseres Vertrauens zu klären, ihre Nutzung sollte gegen eine überschaubare monatliche Gebühr problemlos möglich sein. Die größeren unter den Serviceanbietern unterstützen den Einsatz von WordPress direkt, so daß nach Aktivieren der entsprechenden Option die Software nach wenigen Minuten nutzbar ist. Andernfalls kann die aktuelle deutsche Version etwa auf den Servern von wordpress.org geladen werden, dort finden wir auch eine Anleitung zur Installation von WordPress. Die weiteren Ausführungen basieren auf der Annahme, daß PHP- und MySQL-Server laufen und WordPress auf der eigenen Domäne im Verzeichnis blog (Order http://www.meineSeite.de/blog/) installiert wurde.

Man nehme …

Die folgenden Arbeitsgänge zeigen eine Möglichkeit auf, wie die formulierte Aufgabenstellung gelöst werden kann. Daneben existieren weitere Varianten, sich dem Ziel zu nähern, der beschriebene Weg ist einfach und mehrfach erprobt.

Zu Beginn etwas Arbeit am Dateisystem der WordPress-Installation.

1. Per FTP-Verbindung wechseln wir in den Ordner themes unserer WordPress-Installation (d. h., wir befinden uns im Verzeichnis blog/wp-content/themes).
2. In diesem Ordner erzeugen wir parallel zu den bereits vorhandenen Vorlagenordnern ein neues Verzeichnis beliebigen Namens (etwa foo).
3. In diesem Ordner foo legen wir die beiden, vorerst leeren Dateien index.php und style.css an. Letztere wird von WordPress zur Identifikation der neuen Vorlage benötigt und ist mit den folgenden, auf die eigenen Bedürfnisse zugeschnittenen Codezeilen zu füllen:

[css]
/*
Theme Name: foo
Theme URI: http://www.meineSeite.de
Description: WordPress Vorlage für meine Seite.
Author: Xaver Unrath
Version: 1.0
*/
[/css]

foo zur aktuellen Vorlage der WordPress-Installation machen.

1. Wir rufen die Seite http://www.meineSeite.de/blog/wp-login.php auf.
2. In der linken Navigationsleiste wechseln wir zu Design > Themes.
3. Aus den verschiedenen Vorlagen wählen wir nun unsere Vorlage foo aus und aktivieren diese. Im Falle von Fehlermeldungen haben wir die zuvor gespeicherte style.css zu kontrollieren. Im Erfolgsfall zeigt die Vorschau nichts als eine leere Seite.

Anpassen des Navigationsmenüs bzw. der Menü-Datei.

1. Abhängig von der konkreten Umsetzung sind Änderungen am Menübereich bzw. einer separaten Navigationsdatei (z. B. navigation.php) erforderlich.
2. Für unseren angenommenen Fall haben wir den <div id=“banner“> Abschnitt um einen neuen Listeneintrag zu erweitern (letzte Zeile innerhalb von <ul>…</ul>). Wichtig ist, daß der Link auf die leere Blogseite verweist (hier: /blog/).

Erzeugen der WordPress Kopfdatei.

Im foo Verzeichnis legen wir die Datei header.php an und fügen die folgenden Codezeilen ein:

[php htmlscript=“true“]
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( ‚charset‘ ); ?>" />
<title>
<?php
/* Print the tag based on what is being viewed. */
global $page, $paged;
wp_title( ‚|‘, true, ‚right‘ );
// Add the blog name.
bloginfo( ’name‘ );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( ‚description‘, ‚display‘ );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ‚ | ‚ . sprintf( __( ‚Page %s‘, ‚twentyten‘ ), max( $paged, $page ) );
?>
</title>
<link href="http://gmpg.org/xfn/11" rel="profile" />
<link href="<?php bloginfo( ’stylesheet_url‘ ); ?>" rel="stylesheet" media="all" type="text/css" />
<link href="<?php bloginfo( ‚pingback_url‘ ); ?>" rel="pingback" />
<?php // wp_head(); is required.
wp_head();
?>
</head>
<body>
[/php]

Hiermit werden neben anderen Sachen der <title>-Tag der Seite verankert, die Stylesheet-Datei style.css eingebunden und der <body>-Bereich eröffnet.

WordPress Fußzeilendatei generieren.

Als nächstes wird im Ordner foo die Datei footer.php erzeugt und in dieser die folgenden Einträge abgelegt:

[php htmlscript=“true“]
<?php wp_footer(); ?>

</body>
</html>
[/php]

Den WordPress Kopf- und Fußbereich der index.php hinzufügen.

1. In der (bislang leeren) index.php Datei aus dem Verzeichnis foo werden nachstehende Einträge gespeichert:

[php htmlscript=“true“]
<?php get_header(); ?>

<!– SPECIFIC PAGE CONTENT BEGINS HERE –>

<!– SPECIFIC PAGE CONTENT ENDS HERE –>

<?php get_footer(); ?>
[/php]

2. Die WordPress-Vorschau sollte nun eine leere Seite, aber mit dem Seitentitel zeigen.

In die WordPress Stylesheetdatei style.css importieren wir unsere individuellen Stylesheets.

Im Ordner foo öffnen wir die Datei style.css und ergänzen diese unterhalb des Kommentarblocks um den Importaufruf unserer Stylesheetdatei css/layout.css:

[css]
@import url("http://www.meineSeite.de/css/layout.css");
[/css]

Wir sichern alle zu inkludierenden Dateien im foo-Verzeichnis.

1. Sofern eine eigene Header-Datei existiert, sichern wir eine Kopie dieser im foo Ordner (wir verwenden „sprechende“ Titel als Dokumentenbezeichnung die etwa banner.php). Nach Möglichkeit sollte das Dokument nicht in einem Unterordner abgelegt werden.
2. In analoger Weise ist mit den Menü- und Fußzeilen-Dateien zu verfahren, d. h., wir erzeugen wieder Kopien der Originaldateien im Ordner foo (in unserem Beispiel sind dies die beiden Dateien navigation.php und status.php).

Die Kopf- und Menüdateien werden in der header.php zugewiesen.

1. Die header.php aus dem foo-Verzeichnis ergänzen wir um die PHP-Funktion get_template_part(para), welche es uns erlaubt, beliebige Dateien der WordPress-Vorlage hinzuzufügen. Hierzu fügen wir direkt nach dem <body>-Tag folgenden Aufruf ein:

[php]
<?php get_template_part(‚banner‘); ?>
[/php]

Da wir unsere Kopfdatei banner.php genannt haben, übergeben wir den Dokumentennamen ohne Erweiterung als Parameter an die Funktion.

2. Für unsere Navigationsdatei navigation.php rufen wir ein weiteres mal die PHP-Funktion get_template_part(para) auf:

[php]
<?php get_template_part(’navigation‘); ?>
[/php]

Die Fußzeilendatei in der footer.php bekannt machen.

1. In der footer.php aus dem foo-Verzeichnis binden wir in der ersten Zeile die PHP-Funktion a get_template_part(para) mit dem Namen unserer Fußzeilendatei als Parameter ein:

[php]
<?php get_template_part(’status‘); ?>
[/php]

2. Die Blogvorschau sollte nun Kopf-, Navigations- und Fußbereich unserer Seite zur Anzeige bringen.

Struktur unserer Webseite

Unsere Beispielseite weist die nachstehende Struktur auf:

[html]
<div id="container">
<div id="banner">
<ul id="navList"> </ul>
<!– #navList –>
</div>
<!– #banner –>
<div id="helpBox"> </div>
<!– #helpBox –>
<div id="mainContainer"> </div>
<!– #mainContainer –>
<div id="status"> </div>
<!– #status –>
</div>
<!– #container –>
[/html]

Diese <div>-Abschnitte befinden sich zwischen dem öffnenden und schließenden <body>-Tag.

In der header.php Datei

1. Unmittelbar unter dem öffnenden <body>-Tag fügen wir <div id=“container“> ein. Dieser wird später in der Datei footer.php geschlossen.

[html]
<div id="container">
[/html]

2. Nun werden die beiden get_template_part(para)-Aufrufe mit para=’banner‘ bzw. para=’navigation‘ in die Struktur eingebaut.

[html]
<div id="banner">
<?php get_template_part(‚banner‘); ?>
<div id="navList">
<?php get_template_part(’navigation‘);?>
</div>
<!– #navList –>
</div>
<!– #banner –>
[/html]

3. Hieran schließt sich der Bereich mit id=“helpBox“ an, welchen wir später den Inhalt der WordPress-Sidebar zuweisen werden.

[html]
<div id="helpBox"></div>
<!– #helpBox –>
[/html]

4.  Als letztes wird der mainContainer-Abschnitt geöffnet. Diesen schließen wir wie auch den Abschnitt <div id=“container“> erst in der Datei footer.php wieder ab.

[html]
<div id="mainContainer">
[/html]

In der Datei footer.php.

1. Am Anfang der footer.php fügen wir den schließenden Tag des <div id=“mainContainer“>  sowie einen Zeilenumbruch <br /> der Klasse „clearfloat“ ein.

[html]
</div>
<!– #mainContainer –>
<br class="clearfloat" />
[/html]

2. Innerhalb des Bereichs mit der id=“status“ wird die PHP-Funktion get_template_part(’status‘) aufgerufen und schlußendlich der Bereich <div id=“container“> wieder geschlossen.

[html]
<div id="status"><?php get_template_part(’status‘); ?></div>
<!– #status –>
</div>
<!– #container –>
[/html]

Wenngleich unsere Blog-Seite noch keinen Inhalt aufweist, wird in der Vorschau deren Gestalt erkennbar.

Der Blog- und Sidebar-Inhalt

Den Sidebar-Inhalt einfügen

Wir öffnen die Datei header.php, suchen in dieser den Bereich <div id=“helpBox“> und fügen in diesen die PHP-Funktion get_sidebar() ein. That‘s it.

[html]
<div id="helpBox"><?php get_sidebar();?></div>
<!– #helpBox –>
[/html]

Den Blog-Inhalt zur Anzeige bringen

1. Aus dem Verzeichnis foo öffnen wir die Datei index.php.
2. Zwischen den HTML-Kommentaren <!– SPECIFIC PAGE CONTENT BEGINS HERE –> und <!– SPECIFIC PAGE CONTENT ENDS HERE –> notieren wir die PHP-Funktion get_template_part, welche für die sogenannte WordPress-Loop verantwortlich ist. Der Loop-Code generiert die Ausgabe der Beiträge und Seiten.

[html]
<!– SPECIFIC PAGE CONTENT BEGINS HERE –>

<?php get_template_part( ‚loop‘, ‚index‘ );?>

<!– SPECIFIC PAGE CONTENT ENDS HERE –>
[/html]

3. Die Vorschau zeigt nun eine rudimentär gefüllte Sidebar, während der Hauptdokumentenbereich weiterhin leer ist. Ursache hierfür ist die fehlende loop.php, welche von der Funktion get_template_part( ‘loop’, ‘index’ ) aufgerufen wird. Wir lösen das Problem durch Kopieren weiterer Dateien aus der TwentyTen-Vorlage.

Kopieren von Dateien aus der TwentyTen-Vorlage.

1. Die folgenden Dokumente sind aus den Vorlagenorder TwentyTen in unser Vorlagenverzeichnis foo zu kopieren. Nach diesen Dokumenten sucht die Funktion get_template_part( ‚loop‘, ‚index‘ ):
   • comments.php
   • loop-attachment.php
   • loop-page.php
   • loop-single.php
   • loop.php
2. Bei dieser Gelegenheit kopieren wir gleich noch die beiden Dateien sidebar.php (fügt den Code der WordPress-Sidebar-Widgets hinzu) und functions.php aus dem twentyten-Ordner in unser foo-Verzeichnis.
3. Jetzt sollte die Vorschau erstmals auch Inhalt darstellen.

Verschiedene Dateien für die unterschiedlichen Blog-Seiten

Mit diesem Schritt sorgen wir dafür, daß einzelne, spezialisierte Dateien des foo-Ordners individual zugeschnittene Informationen ausgeben. Die Datei archives.php etwa stellt die Beiträge nach Archiven geordnet zur Verfügung, während category.php dies nach Kategorien sortiert tut . In der Datei index.php haben wir den Code zwischen den Kommentaren <!– SPECIFIC PAGE CONTENT BEGINS HERE –> und <!– SPECIFIC PAGE CONTENT ENDS HERE –> für alle Seitentypen geändert. Exemplarisch zeigen wir die notwendigen Handlungsschritte am Beispiel der Datei 404.php. Diese sind analog auf die restlichen Dateien anzuwenden.

1. Im Ordner foo öffnen wir die index.php.
2. Die Datei 404.php aus dem Ordner twentyten wird geöffnet.
3. Aus dieser kopieren wir die Codezeilen zwischen <div id=“content“ role=“main“> und </div><!– #content –> in die Zwischenablage, also hone den öffnenden und schließenden <div>-Tag:

[html]
<div id="post-0" class="post error404 not-found">
<h1 class="entry-title"><?php _e( ‚Not Found‘, ‚twentyten‘ ); ?></h1>
<div class="entry-content">
<p><?php _e( ‚Apologies, but the page you requested could not be found. Perhaps searching will help.‘, ‚twentyten‘ ); ?></p>
<?php get_search_form(); ?>
</div><!– .entry-content –>
</div><!– #post-0 –>
[/html]

4. Wir speichern index.php aus dem foo-Ordner als 404.php in diesem.
5. Den Code zwischen den Zeilen  <!– SPECIFIC PAGE CONTENT BEGINS HERE –> und <!– SPECIFIC PAGE CONTENT ENDS HERE –> ersetzen wir durch den Inhalt der Zwischenablage. Die 404.php sollte nun wie folgt aussehen:

[html]
<?php get_header(); ?>

<!– SPECIFIC PAGE CONTENT BEGINS HERE –>

<div id="post-0" class="post error404 not-found">
<h1 class="entry-title"><?php _e( ‚Not Found‘, ‚twentyten‘ ); ?></h1>
<div class="entry-content">
<p><?php _e( ‚Apologies, but the page you requested could not be found. Perhaps searching will help.‘, ‚twentyten‘ ); ?></p>
<?php get_search_form(); ?>
</div><!– .entry-content –>
</div>
<!– #post-0 –>

<!– SPECIFIC PAGE CONTENT ENDS HERE –>

<?php get_footer(); ?>
[/html]

6. Wir speichern das Ergebnis als 404.php im Ordner foo.
7. Die Schritte 1–6 sind analog für die nachstehenden Dokumente aufzurufen:
   • archive.php
   • attachment.php
   • author.php
   • category.php
   • onecolumn-page.php
   • page.php
   • search.php
   • single.php
   • tag.php
8. Danach sollten in unserem Blog alle Seiten inhaltlich richtig funktionieren, aber höchstwahrscheinlich noch nicht optimal dargestellt werden.

Styles

WordPress verwendet Unmengen an CSS, aber nicht alle CSS-Definitionen sind optimal auf die vorhandene Webseite zugeschnitten. Daher sind vielerorts Modifizierungen wünschenswert.

Importieren der CSS-Styles aus dem TwentyTen-Ordner.

1. Im Verzeichnis foo öffnen wir unsere style.css.
2. Vor der Zeile, in welcher die Stylesheets der existierenden Webpräsenz importiert werden, fügen wir den Aufruf @import url(„../twentyten/style.css“); ein, wodurch die style.css etwa so aussieht:

[css]/*
Theme Name: foo
Theme URI: http://www.meineSeite.de/
Description: WordPress Vorlage für meine Seite.
Author: Xaver Unrath
Version: 1.0
*/
@import url("../twentyten/style.css");
@import url("http://meineSeite.de/css/style.css");
[/css]

Hiermit wird sichergestellt, daß die eigene Stylesheet-Datei gleichlautende Definitionen innerhalb der WordPress-Stylesheets substituiert.

CSS-Definitionen in Einklang mit dem Webseiten-Layout individualisieren.

Diese Arbeiten können auf unterschiedlichste Weise erfolgen. Grundsätzlich sollten keine Änderungen an der Datei style.css aus dem Verzeichnis twentyten vorgenommen werden, u. a. weil jede Aktualisierung der Vorlage diese Modifikationen überschreiben wird. Folglich haben wir die Überarbeitungen entweder an der CSS-Datei unserer Webseite oder – und dies sollte die bevorzugte Variante sein, da hierdurch nur die Blogseiten beeinflußt werden – an der Datei style.css im Ordner foo vorzunehmen.

1. Um beispielsweise den Bereich für die Darstellung der WordPress-Sidebar an die eigenen Erfordernisse anzupassen, ergänzen wir die folgende CSS-Definition unterhalb der beiden @import Zeilen in der Datei style.css aus dem Ordner foo:

[css]
#primary, #secondary { width: 300px; }
[/css]

Hiermit ändern wir die Breite der <div>-Abschnitte mit der Bezeichnung id=“primary“ bzw. id=“secondary“ von 220px auf 300px.

2. Weitere Anpassungen sind in analoger Weise an der Datei vorzunehmen.

[css]
#mainContent h1, #mainContent h2 { margin-bottom: … }
[/css]

Vor der Veröffentlichung sollte der so gestaltete Blog-Bereich einer letzten, kritischen Kontrolle unterzogen werden.

Quellen

[1] Anne Mühlbauer: WordPress in eine normale Seite einbinden
[2] Integrate WordPress into Any Website Using TwentyTen 2011
[3] How to Integrate a WordPress Blog Into An Existing Website