Eigenes WordPress Theme – Teil 2 – Bootstrap Layout

Nachdem im ersten Teil der Serie die Grundüberlegungen und Layoutentwürfe besprochen wurden soll jetzt das Grundlayout mit Bootstrap erstellt werden.

Files anlegen

Ein Theme findet sich üblicherweise in wp-content/themes. In diesem Verzeichnis befinden sich alle Themes die du auf deinem Blog installiert hast. Überleg dir also einen Namen für dein Theme und erstelle hier ein Verzeichnis mit dem Namen. (Eigentlich ist der Name des Verzeichnisses egal, aber es macht schon Sinn das Verzeichnis wenigstens ähnlich das Theme zu benennen.)
In diesem Verzeichnis legst du ein CSS File namens style.css an. In diesem File wirst du später eigene styles deklarieren, man braucht aber das File vor allem um WordPress die Grunddaten seines Themes “mitzuteilen”. Kopiere daher folgenden Text in dein style.css:

Wenn du noch ein leeres File namens index.php anlegst, dann erkennt WordPress bereits dein Theme und bietet es im Design Menü als mögliches Theme an. Auch wenn natürlich noch recht wenig zu sehen ist !

Layout mit Bootstrap gestalten

Man kann Bootstrap downloaden oder auch ein extremes Bootstrap verlinken. Ich bevorzuge die erste Variante, weil man dann später auch individuelle Konfigurationen von Bootstrap hochladen kann und so die Dateigrößen deutlich reduzieren kann.

Lade also Bootstrap hier herunter. Wie bei den meisten Websites heute üblich legen wir auch gleich ein paar Verzeichnisse an. css, js, images. In css kopiere die bootstrap.min.css, in js die bootstrap.min.js. Damit haben wir schon mal Bootstrap in unserem Theme verpackt.

WordPress arbeitet nach dem Prinzip, dass es im Template Directory je nach Aktion das passende File sucht. So kann man Suchergebnisse von einem anderen File ausgeben lassen, als Archive usw. Wird das entsprechende File nicht gefunden, dann wird alles an die index.php weitergeleitet. Somit kann man man theoretisch nur mit der index.php ein voll funktionsfähiges Theme aufbauen. Unser Theme wird auch sehr einfach bleiben und trotzdem tolle Optik bieten.

Ein wenig modularisieren möchte ich aber doch. So hab ich es mir angewöhnt den head-Bereich in ein eigenes File auszulagern. WordPress unterstützt dies auch explizit. Erstelle also im Hauptverzeichnis deines Temples ein file namens header.php und auch gleich eines namens functions.php.

In die header.php geben wir mal ein paar Zeilen, die vor allem Bootstrap inkludieren.

wp_head gehört von jedem Theme aufgerufen, weil diesen hook viele Plugins nützen. Hast du also diesen Aufruf nicht im Template werden viele Plugins einfach nicht laufen.

Im index.php fügen wir mal das Layout mit Bootstrap ein. Ich möchte aus SEO-Gründen erst die Spalte mit den Beiträgen im Quelltext, danach erst den Sidebar. Trotzdem will ich den Sidebar links. Mit Bootstrap kein Problem. Wird die Seite auf einem mobilen Gerät ausgegeben, so wird automatisch die Sidebar nach unten geschoben. Das Theme ist also schon “ein wenig responsive”. Weitere Einstellungen für mobile Geräte folgen später.

So das ganze kann man jetzt schon mal betrachten. Theme aktivieren und Seite ansehen, hat zwar nicht viel mit einem Blog zu tun, aber das Layout ist in Ansätzen schon vorhanden. Weiter gehts im nächsten Teil.

download_button_zip

Wordpress Theme Layout mit grossem Display

Darstellung bei grossen Displays

Wordpress responsive Theme

Theme Layout bei schmalen Displays (Handy etc.)

«  -  »

2 Kommentare zu

  1. Servus,
    in Zeile 7 von header.php steht “?”
    GerhardT

  2. Danke. Wird ausgebessert !

Senf dazugeben

*