WordPress-Responsive Themes – So erstellen Sie skalierbare Seiten

Bild: “Bush TVs?” von John Thornton / foistclub. Lizenz: CC BY 2.0

Hierbei sollte berücksichtigt werden, dass immer mehr Nutzer Websites auf Smartphones und Tablet PCs betrachten, die mit einem Touchscreen versehen sind. Der grafische Aufbau einer Website sollte diese Nutzungsmöglichkeiten berücksichtigen und eine komfortable Bedienung auch auf Touchscreens ermöglichen.

Dem kommt das responsive Webdesign entgegen, das dafür sorgt, dass Internetseiten auf die Größe und die Auflösung der Displays der verschiedenen Endgeräte automatisch angepasst werden. Neue Webstandards wie HTML5 und CSS3, die Inhalt und Gestaltung trennen, ermöglichen die Gestaltung dynamischer Websites, die die Größe eines Geräts, die Bildschirmauflösung, die Eingabemöglichkeiten und die Orientierung berücksichtigen.

Für das Content-Management-System WordPress steht Ihnen eine Vielzahl von kostenlosen Themes zur Verfügung, die bereits responsiv konzipiert sind und einen benutzerfreundlichen Webauftritt garantieren. Welches Sie auswählen und installieren, hängt von dem Thema Ihrer Seite und Ihrem persönlichen Geschmack ab.

Ein responsives Theme in WordPress 3.9 installieren

Nach der Installation von WordPress 3.9 stehen Ihnen bereits Themes, wie „Twenty-Fourteen“, „Twenty-Thirteen“ und „Twenty-Twelve“ zur Verfügung. Welche Themes aktuell installiert sind, sehen Sie unter „Design“ und „Theme“ im Hauptmenü. Sie können eines der installierten Themes auswählen oder mit Mausklick auf die Schaltfläche „Installieren“ nach einem anderen Theme suchen.

Nachdem Sie auf „Installieren“ geklickt haben, öffnet sich der Bereich „Themes installieren“, in dem Ihnen bereits verschiedene Themes vorgeschlagen werden. Sie können sich die populärsten oder die neuesten Themes anzeigen lassen oder die Auswahl nach Funktionen filtern lassen. Sofern Sie nicht bereits den Namen eines Themes wissen, nach dem Sie suchen möchten, geben Sie in die Suchmaske „responsive“ ein, um passende Themes zu finden.

Nach kurzer Suchzeit werden Ihnen alle Themes angezeigt, die Ihrer Suche entsprechen. Um sich ein Theme genauer anzusehen, fahren Sie mit der Maus über die Miniaturansicht und klicken auf die angezeigte Schaltfläche „Vorschau“.

Im sich öffnenden Vorschaufenster können Sie sich das ausgewählte Theme genauer ansehen. Im rechten Menüfenster erhalten Sie nähere Informationen zur vorliegenden Version. Ist das Theme responsiv steht das in der Regel in der Beschreibung. Mit Mausklick auf „Installieren“ starten Sie die Installation des Themes. Alternativ können Sie mit Klick auf „Weiter“ durch die Themes-Liste blättern.

Falls Sie „Installieren“ angeklickt haben, erhalten Sie nach kurzer Zeit eine Statusmeldung über die erfolgreiche Installation. Klicken Sie hier auf „Aktivieren“, um das Theme zu nutzen. Sie finden das Theme daraufhin unter „Designs“ und „Themes“ und haben hier die Möglichkeit individuelle Anpassungen zu machen. Klicken Sie dazu auf die Schaltfläche „Anpassen“ rechts unten auf der Miniaturansicht.

Ab WordPress 3.9. bearbeiten Sie Widgets und Designs komfortabel in einem Vorschaufenster. Änderungen, die Sie vornehmen, werden in der Vorschau sofort sichtbar, ohne dass Sie zwischen Backend und Frontend wechseln müssen. Die öffentliche Website wird jedoch erst geändert, wenn Sie Ihre Anpassungen über die Schaltfläche „Speichern & Publizieren“ gespeichert haben. Nach der Speicherung ändert sich die Schaltfläche zu „Gespeichert“. Mit Mausklick auf „Schließen“ kehren Sie zum Administrationsbereich zurück.

In der Vorschau ändern sie den Seiten- und den Untertitel und bestimmen, ob der Headertext angezeigt werden soll. Außerdem legen Sie die Textfarbe im Header, das Header-Bild und das Hintergrundbild fest, richten die Startseite ein und wählen aus, welche Widgets auf Ihrer Seite erscheinen sollen.

Ein installiertes WordPress Theme ändern

Wenn Sie bereits grundlegende Kenntnisse in HTML5 und CSS3 haben, können Sie umfassendere Änderungen eines Themes, wie beispielsweise die Hintergrundfarbe und die Anordnung der Elemente vornehmen.

Klicken Sie dazu auf „Design“ und „Editor“. WordPress öffnet das Fenster „Themes bearbeiten“ mit einem Editor, in dem der Stylesheet des aktuellen Themes geöffnet ist. Hier haben Sie unter anderem die Möglichkeit, die allgemeine Schriftgröße, die Schriftart sowie das Verhalten von Listen und Tabellen anzupassen.

Wenn Sie ein anderes Theme bearbeiten möchten, wählen Sie dieses aus der Aufblendliste hinter „Zu bearbeitendes Theme wählen:“ aus und klicken auf „Wähle“. Außerdem können Sie andere Templates, zum Beispiel den Footer oder den Header bearbeiten, indem Sie die entsprechende Datei in der Liste unter „Templates“ auswählen. Gehen Sie bei Änderungen jedoch behutsam vor, um die Grundfunktionen der Website nicht zu stören.

Noch komfortabler bearbeiten Sie die Dateien eines Themes offline in einem externen Editor, beispielsweise „Notepad++“. Laden Sie dazu den entsprechenden Theme-Ordner auf Ihre Festplatte. Sie finden diesen in Ihrer WordPress-Installation unter „wp-content“ und „themes“. Arbeiten sie idealerweise mit einer Kopie des Theme-Ordners, um Dateien eventuell schnell wieder herstellen zu können.

Um das Design zu ändern, wählen Sie den Ordner „css“ und darin die „style.css“ (in den Twenty-Themes editor-style.css).

Nachdem Sie die Datei bearbeitet haben, laden Sie diese per FTP in den Ordner „css“ auf den Server und schauen sich die Änderungen an. Falls Sie mit den Änderungen nicht zufrieden sind, stellen Sie gegebenfalls den Originalzustand durch Hochladen der unbearbeiteten „style.css“ wieder her. Eine gute Möglichkeit ist es auch, ein Testsystem mit Hilfe des Programms „XAMPP“ auf dem Computer anzulegen und die Änderungen vor dem Hochladen dort zu betrachten.

Was beim responsiven Webdesign zu beachten ist

Bei einem WordPress-Layout sollte darauf geachtet werden, dass die Flexibilität des CMS erhalten bleibt. Daher ist es wichtig, dass die wichtigsten Designelemente gut durchdacht und benutzerfreundlich sind. Zu den wichtigsten Elementen gehört dabei die Seitennavigation.

Beachten Sie, dass es auf mobilen Endgeräten keine Hoverfunktion gibt, so dass Dropdown-Menüs nicht angezeigt werden können. Sie sollten deshalb die Navigation möglichst einfach und überschaubar halten. Links und Buttons müssen eindeutig erkennbar sein, beispielsweise durch die Farbgebung, und sie sollten nicht zu klein sein, damit Sie mit den Fingerspitzen gut angeklickt werden können.

Achten Sie auch auf die Schriftgröße und die Schriftart – nicht jede Schrift ist auf kleinen Displays gut lesbar. Bedenken Sie zudem die Ladezeiten Ihrer Website auf mobilen Geräten. Große Datenmengen können hier häufig nur langsam geladen werden. Es empfiehlt sich daher, auf Diashows mit zu großen Bildern und WordPress-Plugins mit JavaScript-Effekten zu verzichten.

Testen Sie Ihre Website auf möglichst vielen Geräten, nur so finden Sie heraus, wie benutzerfreundlich Ihr Design ist. Mehr Wissen zum Einrichten des CMS finden Sie in unserem WordPress Tutorial!