Ein WordPress-Thema erstellen – Teil IX

von Clemens Gull

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.

Social Bookmarks: These icons link to social bookmarking sites where readers can share and discover new web pages.

Artikel bewerten

(No Ratings Yet)

Loading ...

Kommentare

Ein WordPress-Thema erstellen – Teil X | webdeveloper.franzis.de

[...] letzten Beitrag aus dieser Reihe waren wir soweit, dass wir das Thema zum ersten Mal testen konnten. Dazu gehen [...]