Colorscheme

Eigenes WordPress Template in wenigen Schritten – Schritt 5

Diese WordPress Anleitung hat nun schon einige Jahre auf dem Buckel und die Code-Formatierung ist, nett ausgedrückt, nicht akzeptabel. Daher habe ich auf folgender Seite ein komplett neues verfasst: WordPress Template Tutorial auf deutsch.

Struktur fürs Template – mit einem Css Boxenmodell Ordnung auf der Website schaffen
Wir haben bisher die index.php, die header.php und die footer.php angelegt. Mit dem jetzigen Wissen können viele schon alleine weitermachen, aber es gibt noch einige andere Dinge zu erfahren. Damit die nächsten Dateien auch einen gute Platz haben, werden wir jetzt erstmal ein bisschen Css in die index.php packen.

Jeder kennt den Aufbau des WordPress Standardtemplates: Oben das Kopfbild, Links die Navigation und rechts der Contentbereich. Dabei bleiben der Kopfbereich und das Menü unverändert, der Contentbereich aber passt sich an. Wird zum Beispiel ein Suchbegriff eingegeben, werden die gefundenen Ergebnisse dort angezeigt. Oder eine Übersicht aller in einer Kategorie befindlichen Artikel usw.

Wie sieht der benötigte CSS-Code aus:

index.php
<body>
<div id="wrapper">
<div id="box_header">
</div>
<div id="box_content">
</div>
<div id="box_sidebar">
</div>
</div>
</body>

style.css
#wrapper {
width: 800px;
margin: auto;
border: 1px solid black;
}
#box_header {
width: 100%;
height: 150px;
border-bottom: 1px solid black;
}
#box_content {
width: 550px;
float: left;
border-right: 1px solid black;
}
#box_sidebar {
width: 100%;
float: left;
}

Somit erstellen wir ein Standardgerüst, welches im Browser zentriert wird. Nun müssen Dateien noch an der richtigen Stelle eingebunden werden, dabei ist zu beachten, das die Datei “header.php” nicht in die “box_header” eingefügt wird. Die Metadaten werden am Kopf der index.php eingebunden.

wordpress template erstellen

Verwandte Artikel
  1. Eigenes WordPress Template in wenigen Schritten – Schritt 6
  2. Eigenes WordPress Template in wenigen Schritten – Schritt 4
  3. Eigenes WordPress Template in wenigen Schritten – Schritt 3
  4. Eigenes WordPress Template in wenigen Schritten – Schritt 2
  5. Eigenes WordPress Template in wenigen Schritten – Schritt 1

am Dezember 13, 2005 um 21:16 Uhr | in Webdesign | 1 Kommentar


1 Kommentare
  1. Birgit, Juli 19, 2006:

    Also hier kann nun etwas nicht stimmen – oder ich verstehe nicht, was wo hin soll. Wir haben doch eingangs die index.php mit Code gefüllt…soll das jetzt davor, dahinter, dazwischen?

Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.