WordPress benutzt MySQL für die Datenspeicherung. Neben einer kommerziellen Enterprise-Version liegt MySQL als Open-Source-Software vor. Nahezu alle Webserver von Hosting-Anbietern haben MySQL von Grund auf installiert, sodass WordPress dieses RDBMS (Relational Database Management System, relationales Datenbankverwaltungssystem) aufgrund der hohen Beliebtheit (über 35.000 Downloads pro Tag) einsetzt.

Aufbau der MySQL-Datenbank

Auch wenn MySQL nicht zu den schnellsten Datenbanksystemen gehört, die aktuell auf dem Markt existieren (Oracle, MS SQL, DB2 etc.), hat es sich aufgrund der kostenfreien Lizenz und des geringen Speicherbedarfs sowie der leichten Erlernbarkeit schnell für Webanwendungen durchgesetzt.

Wie viele andere Datenbanken gehört MySQL auch zu den sogenannten relationalen Datenbanken. Der Name Relation ist in diesem Zusammenhang eher von Tabellen bekannt. Dieses Verfahren gilt als Quasi-Standard in Datenbanken, da dieses Datenbankmodell verglichen mit anderen Datenbankmodellen sehr einfach und flexibel zu handhaben ist.

Eine Datenbank besteht in der Regel aus mehreren Tabellen (Relationen). Diese Tabellen enthalten wiederum eine bestimmte Menge an Attributen, die als Spalten bekannt sind. Die eigentlichen Datensätze werden in je einer Zeile gespeichert und können pro Datensatz jeweils einen Wert pro Attribut der Spalte enthalten (Datum).

Grundlegende Tabellen

WordPress hat in der Grundinstallation elf unterschiedliche Tabellen in einer Datenbank zusammengefasst. Auch wenn alle Tabellen für den Blog nötig sind, haben sie wie jede Datenbank unterschiedliche Relevanzen. Die wichtigste Tabelle ist in WordPress die Tabelle wp_posts. Sie beinhaltet die gesamten Texte der Beiträge und Seiten.

Abweichender Tabellenname
Je nach eingestelltem table_prefix in der Konfigurationsdatei kann der Tabellenname abweichen. In der Standardinstallation ist als Tabellenpräfix wp_ eingestellt. Die Tabellennamen beginnen also alle mit wp_. Wenn Sie zum Beispiel blog_ als Präfix definiert haben, würde Ihre Post-Tabelle dementsprechend blog_posts heißen.

Die folgende Tabelle zeigt, welche Daten WordPress an welcher Stelle der Datenbank speichert:

Dieser Text ist dem Buch “WordPress-Themes – Design und Implementierung für WordPress 3” von Jonas Hellwig und Christian Gatzen entnommen, das im im Franzis Verlag erschienen ist. Sie können es hier direkt bestellen.

VaultPress bietet einen Live-Backup-Service für Ihre Bloginhalte an - nach Abschluss der Betaphase jedoch kostenpflichtig

XML-Backup

Um ein sicheres Backup Ihrer Datenbank herstellen zu können, reicht diese Funktion nicht aus. Führen Sie, um eine echte Datensicherung zu erhalten, in jedem Fall einen SQL-Export durch, wie es das Backup-Plugin herstellt, oder führen Sie das Backup manuell durch. Die Funktion des XML-Backups finden Sie im Backend unter Werkzeuge/Daten importieren.

Backup-Plugin

Die bei Weitem komfortabelste Lösung ist das Backup durch ein Plugin. Ein richtig gutes Plugin bietet Austin Matzko an: WordPress Database Backup ist der treffende Name, hinter dem sich ein wirklich gutes Plugin verbirgt.

http://bit.ly/11kfW

Nach der Installation und der Aktivierung des Plugins starten Sie, um damit den Ordner wp-content beschreibbar zu machen. Dazu geben Sie dem Ordner die Schreibrechte (CHMOD) 755. Das Plugin erstellt später die Backups in einem kryptisch benannten Ordner innerhalb von /wp-content/.
Wenn Sie die Berechtigungen richtig gesetzt haben und anschließend auf Werkzeuge/Backup klicken, gelangen Sie zu den Backup-Einstellungen des Plugins. Im oberen Bereich haben Sie die Möglichkeit, per Klick ein Backup herzustellen. Dazu wählen Sie zunächst aus, welche Tabellen in Ihr Backup eingeschlossen werden. Wenn Sie mehrere Plugins installiert haben, die zusätzliche Tabellen erstellen, sollten Sie diese ebenfalls in Ihr Backup einschließen. In der mittleren Box können Sie wählen, wie Sie die Sicherung erhalten möchten. Zur Auswahl stehen hier:

Auf dem Server speichern: Mit Sicherheit die angenehmste, aber leider auch die unsicherste Variante, die das Plugin zur Verfügung stellt. Sollte Ihr Server ausfallen, sind auch Ihre Datenbanksicherungen verloren.

Auf den Computer herunterladen: Wenn Sie die Daten händisch auf Ihrem Computer speichern möchten, können Sie das mit dieser Option tun. Es wird Ihnen nach dem Erstellen des Backups eine Download-Möglichkeit angeboten.

Per E-Mail verschicken: Hier wird es sehr interessant. Das WordPress-Plugin ist in der Lage, Ihnen eine Sicherung Ihrer Datenbank per E-Mail zu schicken. Sie können die E-Mail-Adresse dabei natürlich selbst bestimmen.

Geplante Sicherung: Das klingt vielversprechend. Bei dieser Funktion handelt es sich um eine Art Automatisierung (Cron-Job) Ihrer Datenbanksicherung. Sie können sich durch das Plugin E-Mails mit der Sicherung in einem bestimmten Zeitintervall erstellen lassen. Für den Anfang sollte Ihnen eine Sicherung einmal wöchentlich genügen. Wenn Sie das Intervall verkürzen wollen, da Sie mehr und häufiger bloggen, umso besser. Klicken Sie, nachdem Sie eine E-Mail-Adresse Ihrer Wahl eingetragen haben, auf Backup planen. Um einen Sicherungszeitpunkt zu erstellen, ändern Sie oben neben Nächste Sicherung mit dem Button Ändern einen Zeitpunkt, der Ihnen passend erscheint. Wenn Sie zum Beispiel immer am Sonntag neue Beiträge erstellen, wäre ein guter Zeitpunkt der Montagmorgen. Nachdem Sie die Änderung gespeichert haben, errechnet das Plugin selbstständig den nächsten Sicherungszeitpunkt auf Basis des von Ihnen eingestellten Intervalls.

Online-Backup

Um ein Backup relativ sicher abzulegen, können Sie auf einen Free-Webmail-Account zurückgreifen. Fast alle Webmail-Anbieter stellen genügend kostenlosen Webspace zur Verfügung. So haben Sie das leidige Speicherplatzproblem ausgeschlossen, können sich automatisierte Backups per E-Mail zuschicken lassen und haben von jedem internetfähigen Rechner Zugriff auf Ihr Backup.

VaultPress: Seit einiger Zeit gibt es eine Betaversion eines neuen Service. Die Firma Automattic, die auch Inhaber von WordPress.com und der Erfinder des Plugins Akismet ist, bietet einen Live-Backup-Service für Ihren Blog an. Der Dienst, der nach der Betaphase ca. 15 US-$ pro Monat kosten soll, stellt auf speziell für diesen Service bereitgestellten Servern Backups Ihres Blogs her. Neben den Beiträgen, Kommentaren und Einstellungen erkennt das System laut Aussage des Herstellers auch Änderungen am Quellcode. Modifikationen an Templates oder Plugins werden binnen Minuten erkannt, und es wird umgehend ein Sicherheits- Backup der Änderung hergestellt.

Dieser Text ist dem Buch “WordPress-Themes – Design und Implementierung für WordPress 3” von Jonas Hellwig und Christian Gatzen entnommen, das im August 2010 im Franzis Verlag erscheint. Sie können es hier direkt vorbestellen.

Auch der beste Webhoster kann hin und wieder mit Datenverlusten zu kämpfen haben. Sollte dieser Fall eintreten, sind Sie selbst gefragt, konsistente Backups von Ihrem Blog bereitzustellen, um ihm so schnell wie möglich wieder Leben einzuhauchen.

Die Domain

Beachten Sie: Viele Webhoster sind nach Ihren AGB nicht einmal dazu verpfl ichtet, ein Backup durchzuführen. Oder was passiert, wenn Ihr Webhoster auf einmal insolvent ist und Ihre Zugangsdaten für den FTP-Server oder die Datenbank nicht mehr funktionieren? Dann sind Sie wieder gefragt und sollten ein gutes Backup zur Hand haben. An die Domain Ihres Blogs kommen Sie dank der zentralen Verwaltung von Domains (Denic, Internic etc.) immer. Natürlich nur vorausgesetzt, Sie sind selbst der Inhaber der Domain.

Source-Backup

Auch wenn die Datenbank sehr wichtig ist, da diese alle Einstellungen und Beiträge speichert, müssen Sie regelmäßig Ihre medialen Inhalte sichern. Mit jedem Beitrag werden Sie in der Regel ein oder mehrere Bilder hochladen. Diese werden standardmäßig im Ordner wp-content/uploads gespeichert. Das ist der wichtigste Ordner, den Sie mindestens einmal in der Woche sichern sollten. Um ein gutes Backup zu haben, sollten Sie die mühsam erstellten Templates und installierten Plugins auch regelmäßig mit in Ihre Backup-Routine einschließen. Am Anfang Ihres Blogger-Lebens sollten Sie das Backup alle zwei Wochen durchführen. Wenn Sie einen fertigen Blog haben und wirklich gar nichts mehr ändern, sichern Sie einmal im halben Jahr. Um die Daten zu sichern, reicht es, per FTP-Programm die Daten auf Ihren lokalen Rechner zu kopieren.

Wie sagt man doch so schön: 1 GB Platzverschwendung tut nicht so weh wie 1 KB Datenverlust.

Datenbank-Backup

Um Ihre Datenbank zu sichern, haben Sie vielfältigere Möglichkeiten als beim Source- Backup. Neben dem manuellen Exportieren der Daten mit phpMyAdmin gibt es noch sogenannte XML-Backups und Plugins, die nahezu automatisch ein Backup der Datenbank durchführen.

Datenbank-Backup “per Hand”

Am einfachsten ist hier wieder das Backup mithilfe von phpMyAdmin. Sie können auch per sogenanntem SSH (Secure Shell) direkt auf Ihrem Server durch die Eingabe einiger Codezeilen ein Backup erstellen. Da wir hier davon ausgehen, dass Sie ein Shared Hosting benutzen, werden Sie selten diese Zugangsdaten bekommen. Deshalb lassen wir diesen
Punkt außen vor.

Nachdem Sie – wie schon von der Installation und dem Umzug Ihres Blogs bekannt – phpMyAdmin aufgerufen haben, führen Sie ein Backup mittels Export durch. Wählen Sie die Datenbank aus, auf der Ihre WordPress-Version installiert ist, und klicken Sie auf den Reiter Export in der oberen Navigation. Wählen Sie mit Alle auswählen sämtliche Tabellen der Datenbank aus und legen Sie SQL als Exportmethode fest. Als Komprimierung wählen Sie zip oder gzip. Alle anderen Einstellungen können Sie unverändert lassen. Speichern Sie mit dem Dateidownload-Diaog die Datei an einen beliebigen Ort auf Ihrem Computer.

Überprüfen Sie anschließend, ob die Datei auch richtig gespeichert wurde! Eine relativ leere Datenbank von WordPress verbraucht ZIP-komprimiert etwa 100 KB. Diese Datenmenge steigt mit der Zeit an. Überprüfen Sie also am besten, ob die jetzige Sicherung größer ist als die vorherige. Das trifft allerdings nur dann zu, wenn Sie nicht in WordPress selbst Sicherungszustände im Backend gelöscht haben. Diese werden auch in der Datenbank gespeichert und verbrauchen dadurch zusätzlich Speicherplatz.

Dieser Text ist dem Buch “WordPress-Themes – Design und Implementierung für WordPress 3” von Jonas Hellwig und Christian Gatzen entnommen, das im August 2010 im Franzis Verlag erscheint. Sie können es hier direkt vorbestellen.

Action-Hooks

Die »Action-Hooks« werden von WordPress an einer definierten Stelle oder bei einem bestimmten Ereignis aufgerufen. Beispielsweise könnte man einige PHP-Befehle ausführen, wenn das Administrationsmenü aufgerufen wird. Wir benutzen später den Action-Hook admin_menu, um einen neuen Navigationspunkt im Backend per Plugin hinzuzufügen.

Filter-Hooks

»Filter Hooks« dienen im Wesentlichen dazu, Texte zu modifi zieren, bevor diese weiterverarbeitet werden. Beispielsweise können Sie den Text vor der Ausgabe im Frontend noch verändern. Wir benutzen den Filter the_content, um Teile des Texts vor der Ausgabe zu ersetzen. Momentan gibt es mehr als knapp 1000 Action- und Filter-Hooks für WordPress.

Bei Template-Tags handelt es sich um einfache PHP-Funktionen, die Sie als Webdesigner im Theme einfügen müssen. Diese Funktionen werden im Gegensatz zu Plugin-Hooks nicht automatisch von WordPress ausgeführt, sondern nur dann, wenn Sie auch im Theme vorhanden sind. Wenn Sie zum Beispiel ein Twitter-Plugin verwenden, das Ihre letzten fünf Tweets ausgeben soll, könnte das neue Template-Tag last5Tweets heißen. Sie müssten diese Funktion nun nur noch an einer beliebigen Stelle im Theme einbauen, zum Beispiel in der Sidebar.

<?php last5Tweets(); ?>

Die Plugin-Datei beinhaltet in diesem Fall eine Funktion, die beispielsweise die letzten fünf Tweets aus Twitter ausliest und darstellt. In folgendem fiktivem Code (Pseudocode) zeigen wir Ihnen, wie so eine Funktion aussehen könnte. Eine funktionierende Version des Codes wäre natürlich deutlich länger. Dieser dient rein der schematischen Darstellung.

<?php
function last5Tweets() {
holeTwitterDaten();
$tweets = findeLetzteTweets();
foreach ($tweets as $tweet) {
echo "<p>".$tweet."</p>";
}
}
?>

- Schematische Darstellung eines fiktiven Plugins –

Dieser Text ist dem Buch “WordPress-Themes – Design und Implementierung für WordPress 3” von Jonas Hellwig und Christian Gatzen entnommen, das im August 2010 im Franzis Verlag erscheint. Sie können es hier direkt vorbestellen.

Wir bedienen uns des Plugin-Hooks the-content, da der Inhalt durchsucht werden muss, um dort die Wörter zu ersetzen. Da Sie später einen <span> mit einer Klasse wpstyled ausgeben, haben Sie auch die Möglichkeit, die Ausgabe grafisch über CSS zu steuern. Zunächst erstellen Sie eine Datei mit dem Namen wpErsetzen.php und legen diese in den Hauptordner von wp-content/plugins/. Da Sie in diesem Fall nur eine Datei benötigen, können Sie auf einen Unterordner für das Plugin verzichten. WordPress stellt im Backend beim Aktivieren der Plugins diverse Informationen über den Autoren, das Plugin selbst und die Version bereit. Diese Informationen bezieht WordPress
aus dem Header der Plugin-Datei. Unser Header könnte zum Beispiel so aussehen:

<?php
/*
Plugin Name: WP-Text ersetzen
Plugin URI: http://www.domain.tld
Description: Dieses Plugin ersetzt den Text "WP" durch <span
class='wpstyled'>WordPress</span>
Author: WordPress für Webdesigner
Version: 1.0
Author URI: http://www.domain.tld
*/

Danach folgt die eigentliche Programmierung des Plugins. Zunächst erstellen Sie eine Funktion mit dem Namen wpErsetzen und füllen sie mit nachfolgendem Code:

function wpErsetzen($content) {
$suche = 'WP';
$ersetze = '<span class="wpstyled">WordPress</span>';
$content = str_replace($suche,$ersetze,$content);
return $content;
}

Zur Erklärung: Sie geben der Variablen $suche den Wert WP, nach dem gesucht werden soll. Der Variablen ersetze weisen Sie den einzusetzenden Codeblock zu. Anschließend suchen und ersetzen Sie den Inhalt von $content mit der PHP-Funktion str_replace.$content. Der wird uns später vom Filter-Hook selbst übergeben und enthält den Blog-Beitrag. Als Letztes fehlt noch der sogenannte Filter-Hook, den Sie direkt unter die Funktion schreiben können:

add_filter("the_content","wpErsetzen");
?>

Der Filter wird immer dann ausgeführt, wenn die WordPress-Funktion the-content aufgerufen wird. Als Inhalt übergibt der Filter die Ausgabe von the-content, also den Inhalt des Blog-Beitrags oder einer statischen Seite, und nimmt den ersetzten Inhalt wieder auf, um ihn später auf der Seite auszugeben. Nun sind Sie auch schon fertig mit dem ersten Mini-Plugin und werden jetzt noch die Klasse .wpstyled, die Sie im ersetzten Text genutzt haben, in der CSS-Datei des Themes definieren:

.wpstyled {
background: #ffff66;
padding: 2px 3px;
}

Der Text WordPress wird nun auf allen Seiten mit einem gelben Hintergrund dargestellt. Noch sehen Sie im Frontend keine Änderungen. Sie müssen zunächst das Plugin aktivieren. Dazu gehen Sie genauso vor, wie mit einem heruntergeladenen externen Plugin. Auf der Plugin-Seite im Backend fi nden Sie jetzt das von uns neu hinzugefügte Plugin.

Wenn Sie nun auf Aktivieren klicken und das Frontend aktualisieren, sehen Sie die von Ihnen durchgeführte automatische Textersetzung mit einem WordPress, das einen gelben Hintergrund hat, da wir im Text WP geschrieben haben.

Dieser Text ist dem Buch “WordPress-Themes – Design und Implementierung für WordPress 3” von Jonas Hellwig und Christian Gatzen entnommen, das im August 2010 im Franzis Verlag erscheint. Sie können es hier direkt vorbestellen.

Beachten Sie allerdings, dass durch diesen Code zwei URLs auf ein und denselben Artikel verweisen, was die Auswertung der Seitenzugriffe für diesen Beitrag beeinfl ussen kann. Fügen Sie folgenden PHP-Code in die Datei single.php oder die Datei page.php Ihres Themes ein:

PHP-Markup:

<?php echo get_bloginfo('url')."/?p=".$post->ID; ?>

Frontend-Ausgabe:

http://ihredomain.tld/?p=123

TinyURL anzeigen

Im Gegensatz zur soeben beschriebenen Short URL können Sie auch eine echte Tiny URL erzeugen, indem Sie die API (Programmierschnittstelle) des Onlinediensts tinyurl.com nutzen. Fügen Sie zunächst folgenden Code in die Datei functions.php ein:

PHP-Code:

function tinyURL($permalink) {
$urlapi = file_get_contents("http://tinyurl.com/api-create.
php?url=".$permalink);
return $urlapi;
}

Anschließend binden Sie an beliebiger Stelle in der Datei single.php oder page.php die Tiny URL über folgenden Code ein:

PHP-Code:

<?php
$tinyurl = tinyURL(get_permalink($post->ID));
echo 'Tiny URL: <a href="'.$tinyurl.'" title="">'.$tinyurl.'</a>'
?>

Die Bildschirmausgabe lautet folgendermaßen:

Frontend-Ausgabe:

Tiny URL: http://tinyurl.com/xyzabc

Dieser Text ist dem Buch “WordPress-Themes – Design und Implementierung für WordPress 3” von Jonas Hellwig und Christian Gatzen entnommen, das im August 2010 im Franzis Verlag erscheint. Sie können es hier direkt vorbestellen.

Nun können wir im Kopfbereich des Backends auf den Titel unseres Blogs klicken, damit wir das Thema in voller Aktion sehen.

Den Loop erstellen

Den Abschluss bildet jetzt unser Platzhalter, wir werden also den Loop einfügen. Wir ersetzen die Zeile innerhalb des div-Tags mit der ID „theLoop“ durch das folgende Listing, welches wir jetzt schrittweise ergänzen werden.

Jetzt können wir den Loop in der Datei index.php erweitern. Zuerst stellen wir die Frage, ob es überhaupt Posts gibt. Dies ist ein typischer Anwendungsfall für die if-else-Anweisung. Denn es gibt nur zwei Möglichkeiten: Es wurden entweder Artikel gefunden oder nicht. Wir verändern also den Platzhalter für den Loop wie in diesem Listing gezeigt. Dabei geben wir, falls nichts gefunden wurde, einen kurzen erklärenden Text aus und zeigen ein Suchformular an.

...
<!-- anfang des inhalts -->
    < div id="content">
        <?php if (have_posts()): ?>
            <div id="theLoop">
                <p>Hier stehen die einzelnen Posts!</p>
            </div>
        <?php else: ?>
            <h2 class="page_header">
                Leider konnten wir f&uuml;r den Begriff 
                <em><?php echo $s; ?></em> nichts finden!
            </h2>
            <h3>Willst Du es nochmals probieren?</h3>
            <div class="entry">
                <?php get_search_form(); ?>
            </div>
        <?php endif; ?>
    </div>
<!-- ende des inhalts -->
...

Nun passen wir den Loop zur Ausgabe der Posts an. Denn was wäre das Blog ohne die Ausgabe der einzelnen Artikel? Schauen wir uns den Ausschnitt aus diesem Bereich an.

...
<div id="theLoop">
    <?php
    while (have_posts()):
        the_post();
    ?>
    <h3>
        <a href="<?php the_permalink() ?>" rel="bookmark">
            <?php the_title(); ?>
        </a>
    </h3>
    <?php endwhile; ?>
</div>
...

Auch hier sind außer der while-Schleife einige neue Befehle eingebaut. Die komplexesten Anweisungen sind have_posts() und the_post(). Die erste Anweisung ist sehr praktisch, denn sobald das Blog aufgerufen wird, ermittelt es alle passenden Posts und legt sie in einer speziellen Variable ab. Mit have_posts() kann man jetzt jeden einzelnen Artikel in dieser Variablen ansprechen. Solange ein Artikel gefunden wird, gibt die Funktion true, ansonsten false zurück. Damit eignet sie sich sehr gut als Abbruchbedingung.

Der zweite Befehl the_post() macht nichts anderes, als in der speziellen Variablen einen Schritt weiterzugehen und den nächsten Artikel zur Verfügung zu stellen. Er entspricht in etwa unserer Zählvariablen aus der eben erst kennen gelernten while-Schleife.

Der nächste Befehl ist the_permalink(). Er ermittelt eine dauerhafte URL für den Artikel. Je nach Einstellung im Blog kann das die URL des Blogs mit einem Titel sein oder auch die URL mit einem speziellen Query-String. Dies hat einerseits den Sinn, die wirklichen Parameter, die die Anwendung benötigt, zu verstecken. Andererseits kann sich der Leser einen klingenden Titel leichter merken als einen kryptischen Query-String. Zusätzlich wird unsere Webseite durch die Permalinks suchmaschinenfreundlicher, denn Suchmaschinen bewerten URLs ohne Query-String besser.

Nun können wir nach dem schließenden h3-Tag die Metainformationen zu jedem Beitrag einfügen. Das sind Informationen zum Autor, zum Datum oder auch zu den Kategorien und Schlüsselwörtern.

...
<div class="post">
    abgelegt unter: <?php the_category(', ') ?> &bull; 
    <?php the_tags('Tags:&nbsp;', ', ', ' &bull; '); ?>
    geschrieben von <?php the_author() ?> 
    am <?php the_time('j. F Y') ?> um <?php the_time() ?>
    <?php edit_post_link('bearbeiten'); ?>
</div>
...

Mit dieser Erweiterung sehen wir, wie praktisch der Loop ist. Wir müssen uns nur vorstellen, wie ein Artikel aussehen soll, die entsprechende Formatierung programmieren und der Loop erledigt die ganze Arbeit für alle Posts. Auch hier sind wieder einige neue Wordpress-Funktionen eingebaut worden. Darum soll es im kommenden Teil dieser Reihe gehen.

Dieser Textabschnitt ist dem Buch “PHP für WordPress – Themes und Templates selbst entwickeln” von Clemens Gull entnommen, das im Franzis-Verlag erschienen ist. Sie können es hier direkt bestellen.

]]> http://webdeveloper.franzis.de/wordpress/ein-wordpress-thema-erstellen-teil-x/feed/ 0 http://webdeveloper.franzis.de/wordpress/ein-wordpress-thema-erstellen-teil-ix/ http://webdeveloper.franzis.de/wordpress/ein-wordpress-thema-erstellen-teil-ix/#comments Thu, 08 Apr 2010 16:14:55 +0000 Clemens Gull http://webdeveloper.franzis.de/?p=1964 Im letzten Teil dieser Reihe hatten wir uns mit Widgets beschäftigt. Nun folgt noch die Formatierung für das Suchformular. Da wir dieses erstens quer oberhalb der beiden Seitenleisten positionieren wollen und es zusätzlich nahtlos in das Layout integrieren werden, sind einige Stiländerungen gegenüber dem Standardformular notwendig.

Hier entsteht aber ein Sonderfall: Wir wollen den Knopf für das Absenden des Suchformulars mit einer Grafik versehen. Dies geht leider nicht direkt im Stylesheet; wir müssen es später im Quellcode nachholen. Gleichzeitig fügen wir noch die Definition für die verschiedenen Arten der Suchformulare im Inhaltsbereich ein, die wir später verwenden werden.

...
/* Suchformular oberhalb der Seitenleisten, innerhalb von div.sidebars */
div#sidebars div.searchForm {
    background: transparent url(images/search_left.png) no-repeat top left;
    height: 25px;
    padding: 0px;
    margin: 51px 0px 25px 23px;
    width: 350px;
}
div#sidebars input.searchInput {
    background: transparent url(images/search_input.png) repeat-x top left;
    border: 0px solid transparent;
    width: 270px;
    height: 25px;
    padding: 0px;
    margin: 0px;
    font-size: 0.9em;
    line-height: 1.2em;
    color: #99CC33;
    padding: 2px;
    position: relative;
    top: -9px;
    left: 12px;
}
div#sidebars .searchButton {
    cursor: pointer;
    width: 42px;
    height: 25px;
    margin-left: 7px;
}
 
div.entry div.searchForm {
    background: transparent url(images/search_left.png) no-repeat top left;
    height: 25px;
    padding: 0px;
    margin: 5px 0px 0px 0px;
    width: 380px;
}
div.entry input.searchInput {
    background: transparent url(images/search_input.png) repeat-x top left;
    border: 0px solid;
    width: 270px;
    height: 25px;
    margin:0px;
    font-size: 0.9em;
    line-height: 1.2em;
    color: #99CC33;
    padding: 2px;
    position: relative;
    top: -7px;
    left: 12px;
}
div.entry .searchButton {
    cursor: pointer;
    width: 42px;
    height: 25px;
    margin-left: 7px;
}
...

Zum Abschluss folgen nun die Formatierungen für den Inhalt des Blogs. Diese nehmen wir momentan nur sehr einfach vor, da wir sie bei der Programmierung weiter verfeinern werden.

...
/* Formate fuer den Loop */
div#content {
    width: 530px;
    float: left;
}
div#content div#theLoop {
    position: relative;
    margin-left: 73px;
    padding: 0px 0px 0px 10px;
}
...

Den Kopfbereich in eine Datei auslagern

Jetzt definieren wir in der Datei header.php den Kopfbereich für unser Thema. Da Eclipse bei jeder neuen PHP-Datei den Befehl phpinfo() einfügt, müssen wir ihn zuerst löschen. Danach definieren wir die notwendigen Einträge. Da diese Datei als erste geladen wird und der Webserver eine HTML-Datei an den Anwender senden soll, müssen wir auch mit den entsprechenden Kopfdaten die HTML-Datei beginnen. Natürlich fügen wir aber als erstes unseren Kommentarblock ein, gefolgt von der Document Type Definition (DTD).

<?php
/*****
 * Funktion:  Kopfbereich des Themas prettyNew
 * Dateiname: header.php
 * Autor:     Clemens Gull
 * Version:   1.0
 * Erstellt:  25. Juli 2008, 12:16
 *****/
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
...

Nun folgt der head-Tag mit der Beschreibung der HTML-Datei, gefolgt vom beginnenden body-Tag mit dem sichtbaren Kopfbereich des Blogs.

...
<head>
    <title>Blog mit dem Thema prettyNew</title>
    <style type="text/css" media="screen">
        @import url( <?php bloginfo('stylesheet_url'); ?> );
    </style>
</head>
 
<body>
<!-- anfang des headers -->
    <div id="header">
        <h1 id="header">Blog mit dem Thema prettyNew</h1>
    </div>
<!-- ende des headers -->
...

Im Kopfbereich und bei der Überschrift der HTML-Datei ist mehrmals ein neuer Befehl versteckt: bloginfo(). Dies ist eine Funktion von Wordpress und stellt uns verschiedene Basisdaten des Blogs zur Verfügung.

Die Datei für den Fußbereich definieren

Für den Anfang, um unser Thema testen zu können, definieren wir einen einfachen div-Tag für den Fußbereich. Wir müssen aber trotzdem aufpassen, denn die footer.php wird als letzte Datei aufgerufen und muss daher den body- und den html-Tag, die im Kopfbereich in der Datei header.php geöffnet wurden, wieder sauber schließen.

<?php
/*****
 * Funktion:  Fussbereich des Themas prettyNew
 * Dateiname: index.php
 * Autor:     Clemens Gull
 * Version:   1.0
 * Erstellt:  25. Juli 2008, 12:26
 *****/
?>
<!-- anfang des footers -->
    <div id="footer">
        Hier steht die Fusszeile
    </div>
<!-- ende des footers -->
 
</body>
</html>

Die Seitenleiste erstellen

Dieser Bereich der Webseite wird in Zukunft verschiedene Informationen und Listen oder auch Inserate aufnehmen. Für den Moment reicht uns aber ein einfacher div-Tag. Ist das geschehen, können wir das thema zum ersten Mal testen.

<?php
/*****
 * Funktion:  Kopfbereich des Themas prettyNew
 * Dateiname: index.php
 * Autor:     Clemens Gull
 * Version:   1.0
 * Erstellt:  25. Juli 2008, 12:21
 *****/
?>
<!-- anfang der seitenleiste -->
    <div id="sidebar">
        Hier steht die Seitenleiste
    </div>
<!-- ende der seitenleiste -->

Dieser Textabschnitt ist dem Buch “PHP für WordPress – Themes und Templates selbst entwickeln” von Clemens Gull entnommen, das im Franzis-Verlag erschienen ist. Sie können es hier direkt bestellen.

Wir müssen uns zuerst über die Struktur, besser über die Verschachtelung, der einzelnen Tags klar werden. Zusätzlich müssen wir wissen, wie Wordpress die Widgets darstellt, also welche Tags verwendet werden.

Schauen wir uns dazu folgende Abbildung an. Wir sehen deutlich, wie ein äußerer div-Tag jene für das Suchformular und die Seitenleisten einschließt.

Beginnen wir mit dem äußeren Tag und verwenden wir dafür die Klasse sidebars:

...
/* Formate fuer die Seitenleiste */
div.sidebars {
    width: 350px;
    margin-right: 73px;
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
}
 
...

Nun können wir den Stil für beide Seitenleisten definieren. Da sie gleich aussehen sollen und auch den gleichen Abstand haben sollen, können wir mit einer einzelnen Klasse arbeiten.

...
div.sidebar {
	width: 150px;
	float: left;
	margin-left: 25px;
}
...

Nun kümmern wir uns um die Darstellung der Widgets in den Seitenleisten. Wordpress integriert die Widgets in einer unsortierten Liste, also einen ul-Tag pro Seitenleiste. Wobei jedes Widget aus einem Listenelement, einem li-Tag, einem h2-Tag für die Überschrift und einem ul-Tag mit weiteren Listenelementen für den Inhalt besteht. Dies klingt jetzt komplizierter, als es ist. Werfen wir einfach einen Blick auf die folgende Abbildung, dann wird es verständlicher.

Wir müssen daher die passenden Tags wie weiter unten dargestellt formatieren. Zusätzlich nehmen wir gleichzeitig die Anpassung der Stile für Tabellen und Absätze vor. Denn manche Widgets, wie jenes für den Kalender, verwenden diese Tags für die Darstellung. Auch die a-Tags vergessen wir nicht, damit alle Hyperlinks gleich formatiert sind. Damit diese Stile aber nicht auf die gesamte Webseite, sondern nur auf die Seitenleiste angewendet werden, müssen wir die passenden Klassen angeben. Diese sehen wir auch in der obigen schematischen Darstellung.

...
div.sidebar ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
div.sidebar li.widget {
    width: 150px;
    margin: 0px 0px 25px 0px;
}
div.sidebar li.widget h2.widgettitle {
    background: transparent url(images/widget_header.png) no-repeat top left;
    font-family: "Times New Roman", Times, serif;
    font-weight: normal;
    font-size: 1.2em;
    color: #99CC33;
    text-align: center;
    line-height: 1.3em;
    letter-spacing: 0.1em;
    height: 28px;
    margin: 0px;
    padding: 0px;
}
div.sidebar li.widget ul li,
div.sidebar li.widget div table,
div.sidebar li.widget div table caption,
div.sidebar li.widget div p {
    background: transparent url(images/widget_background.png) repeat-y top left;
    padding: 2px 10px 2px 10px;
    font-weight: normal;
    font-size: 0.9em;
    color: #FFFFFF;
    text-align: left;
    width: 130px;
}
div.sidebar li.widget div table {
    font-size: 0.8em;
    width: 150px;
}
div.sidebar li.widget div table caption {
    text-align: center;
    color: #99CC33;
    font-size: 1em;
    width: 150px;
}
div.sidebar li.widget div p {
    margin: 0px;
    width: 135px;
}
div.sidebar li.widget ul li {
    padding-bottom: 3px;
}
div.sidebar li.widget ul,
div.sidebar li.widget div {
    background: transparent url(images/widget_bottom.png) no-repeat bottom left;
    padding-bottom: 15px;
    width: 150px;
}
div.sidebar li.widget ul a {
    text-decoration: none;
    color: #FFFFFF;
}
div.sidebar li.widget ul a:hover {
    color: #FFE400;
}
...

Dieser Textabschnitt ist dem Buch “PHP für WordPress – Themes und Templates selbst entwickeln” von Clemens Gull entnommen, das im Franzis-Verlag erschienen ist. Sie können es hier direkt bestellen.

]]> http://webdeveloper.franzis.de/wordpress/ein-wordpress-thema-erstellen-teil-viii/feed/ 1 http://webdeveloper.franzis.de/wordpress/ein-wordpress-thema-erstellen-teil-vii/ http://webdeveloper.franzis.de/wordpress/ein-wordpress-thema-erstellen-teil-vii/#comments Wed, 31 Mar 2010 14:50:45 +0000 Clemens Gull http://webdeveloper.franzis.de/?p=1897 Bevor wir die Grundstruktur des in dieser Reihe erstellten Themes prettyNew testen können, müssen wir noch die Dateien für den Kopf-, Fußbereich und die Seitenleiste anpassen. Zusätzlich benötigen wir noch ein Stylesheet, da Wordpress das Thema sonst als fehlerhaft markiert und wir es im Backend nicht aktivieren können.

Ein einfaches Stylesheet festlegen

Dazu legen wir eine neue CSS-Datei mit dem Namen style.css im Ordner /wp-content/themes/prettyNew/ an. Dazu öffnen wir im Projektexplorer von Eclipse das Kontextmenü des Ordners und wählen aus dem Untermenü Neu den Befehl CSS File aus. Als File name geben wir style.css ein. Wichtig: Dieser Dateiname für das Stylesheet ist zwingend vorgeschrieben, denn Wordpress erkennt die Stile sonst nicht.

Die IDE legt die Datei neu an und öffnet sie sofort im Editor. Den bereits eingefügten body-Tag müssen wir mit weiteren Zeilen ergänzen, damit wir eine gültige Definition erhalten. Selbstverständlich werden wir diese Stil-Definitionen in der Folge erweitern und verbessern. Auch hier fügen wir gleich am Anfang einen Kommentar-Block ein. Der Block hat diesmal ein festes Format, denn er wird von Wordpress verwendet, um die Informationen im Backend anzuzeigen.

/*
Theme Name: prettyNew
Theme URI: http://franzis.de/
Description: Das erste Thema zum Buch
Version: 1.0
Author: Clemens Gull
Tags: Hintergrundfarbe, fixe Breite (950px) 3 Spalten, widgetfaehig
 
Dieses Thema wird im Rahmen des Buchs PHP und Wordpress erstellt.
*/
 
...

Jetzt ergänzen wir den body-Tag und legen die grundlegende Definition für die Überschrift-Tags fest.

...
/* Formatierung fuer den body */
body {
    background-color: #2851BD;
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2em;
    color: #FFFFFF;
    margin: 0px;
    padding: 0px;
    text-align: center; /* zentrieren fuer NS 4 und IE 4-6 */
}
 
/* Ueberschriften festlegen */
h3 {
    font-size: 1.2em;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    letter-spacing: 0.1em;
    color: #FFE400;
}
h3 a {
    color: inherit;
    text-decoration: none;
}
h3 a:hover{
    color: #99CC33;
}
 
...

Tipp: Auch in CSS-Dateien sind Kommentare möglich. Im Hinblick auf ein besseres Verständnis ist es auch hier sinnvoll, sie zu benutzen.

Da dieses Thema eine fixe Breite hat, sieht es nicht gut aus, wenn es im linken oberen Eck fixiert ist. Daher werden wir ein sogenanntes Wrapper-Element verwenden. Dieser div-Tag hat nur eine Funktion, nämlich den Inhalt im Browserfenster zentriert darzustellen.

...
/* Format fuer den Wrapper-Div zum zentrieren des Blogs */
div#wrapper {
    background: transparent url(images/background_wrapper.png) no-repeat top left;
    width: 955px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
} 
 
...

Wie wir sehen, ist beim Wrapper der Hintergrund definiert worden. Da unser Design nicht nur funktional, sondern auch ansprechend sein soll, benötigen wir einige Bilder. Diese Grafiken kopieren wir in das Themenverzeichnis in den neuen Unterordner images. Nun folgen die Formatierungen für den Kopfbereich des Themas. Da wir später auch Überschriften im Kopf verwenden werden, definieren wir die entsprechenden h1 und h2-Tags. Da es der Anwender gewohnt ist, mit einem Klick auf das Logo oder den Titel einer Webseite auf die Startseite zu gelangen, müssen wir das berücksichtigen. Wir ändern somit auch gleich die Formatierung der a-Tags, wenn sie in einem h1 oder h2-Tag vorkommen.

...
/* Formate fuer den Kopfbereich */
div#header {
    background: transparent url(images/header.png) no-repeat top center;
    height: 97px;
    width: 100%;
    padding: 5px;
}
div#header h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #2851BD;
    font-size: 1.8em;
    margin-left: 100px;
    margin-top: 10px;
    line-height: 1em;
    letter-spacing: 0.2em;
}
div#header h2 {
    color: #FFFFFF;
    font-weight: normal;
    font-size: 1.1em;
    font-style: italic;
    margin-left: 150px;
    margin-top: -20px;
    line-height: 1em;
    letter-spacing: 0.1em;
}
div#header h1 a,
div#header h2 a {
    color: #2851BD;
    text-decoration: none;
}
div#header h1 a:hover,
div#header h2 a:hover {
    color: #FFE400;
}
 
...

Nun folgt die Formatierung für den Fußbereich. Auch hier passen wir die a-Tags sowie den p-Tag an. Denn damit können wir die notwendigen Informationen komprimiert in der Fußzeile darstellen.

...
/* Formate fuer den Fussbereich */
div#footer {
    background: transparent url(images/footer.png) no-repeat bottom center;
    height: 56px;
    width: 100%;
    padding-top: 25px;
    text-align: center;
    clear: both;
    margin-left: 7px;
}
div#footer p {
    position: relative;
    top: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7em;
    font-weight: normal;
    letter-spacing: 0.1em;
}
div#footer a {
    color: #C8583E;
    text-decoration: none;
}
div#footer a:hover {
    color: #2851BD;
}
 
...

Der nächste Schritt sind die Formate für die Seitenleisten. Dies wird ein wenig komplizierter: Wir werden zwei Bereiche nebeneinander und quer über das Suchformular darstellen. Zusätzlich wird unser Thema widgetfähig, was wir auch berücksichtigen müssen.

Dieser Textabschnitt ist dem Buch “PHP für WordPress – Themes und Templates selbst entwickeln” von Clemens Gull entnommen, das im Franzis-Verlag erschienen ist. Sie können es hier direkt bestellen.