WordPress: Themes finden, installieren und anpassen & Suchmaschinenoptimierung

WordPress-Themes finden und installieren

∅ 5 / 7 Bewertungen

WordPress-Themes finden und installieren

Mit Themes – den fertigen und einsatzbereiten Layouts bzw. Designs für WordPress – können Sie Ihrer WordPress-Seite immer wieder ein anderes Gesicht geben.

Wo finde ich WordPress-Themes?

Die WordPress-Themes finden Sie auf den Websites der Autoren oder in Theme-Verzeichnissen, wie ich sie auf meiner Website vorstelle. Aber am besten wenden Sie sich zunächst an die offizielle Themes-Sammlung:

Offizielles Themes-Verzeichnis Das offizielle Themes-Verzeichnis ist englischsprachig und beherbergt mittlerweile mehr als 2.400 einsatzbereite Themes. Alle hier aufgelisteten Themes sind Open-Source und erfüllen die recht strengen Auflagen des Verzeichnisses. So müssen z. B. die Themes CSS-Regeln für die Bilder- und Galerie-Funktion aufweisen, die Gravatre und Widgets müssen unterstützt werden etc.

abbildung-1-offizielles-themes-verzeichnis

Abbildung 1: Offizielles Themes-Verzeichnis

In dem offiziellen Themes-Verzeichnis können Sie sowohl die Suchfunktion bemühen als auch sich die Schlagwörter, nach denen die Themes klassifiziert wurden, auflisten lassen.

Zu den Lizenzmodellen und Einschränkungen der einzelnen Themes kann ich keine pauschale Aussage machen, da sie sich von Fall zu Fall unterscheiden können. Ist das Theme Open-Source, können Sie es natürlich verändern und an eigene Bedürfnisse anpassen. Auch der Einsatz für kommerzielle Projekte sollte kein Problem darstellen, dennoch sollten Sie sich die Regeln genauer durchlesen. Viele Themes-Autoren legen dem Themes-Paket auch eine Info-Datei (redame.txt, liesmich.txt etc.) bei.

Auf unserer Seite perun.net finden Sie zudem einige ausgewählte Anbieter, bei denen Sie Premium WordPress-Themes kaufen können.

Wie installiere ich ein WordPress-Theme manuell?

Wenn Sie sich ein Theme herunterladen, müssen Sie das Paket entpacken und den Ordner mit den Template-Dateien nach /wp-content/themes/ hochladen. Danach sollte es im Bereich "Design » Themes" erscheinen:

abbildung-2-neues-theme-wurde-hochgeladen

Abbildung 2: Neues Theme wurde hochgeladen

In diesem Übersichtsbereich können Sie auch nach installierten Themes suchen, installierte Themes verwalten (aktivieren/deaktivieren).

Fahren Sie mit der Maus über ein Theme erscheint der Link „Theme-Details“. Ein Klick darauf liefert Ihnen ausführliche Informationen zum jeweiligen Theme und auch die Möglichkeit das Theme wieder zu löschen.

Wie installiere ich ein WordPress-Theme automatisch?

Seit der Version 2.8 haben Sie die zusätzliche Möglichkeit, Themes aus dem Backend heraus zu installieren – ähnlich wie bei Plugins. Sie greifen dabei auf die offizielle Sammlung auf WordPress.org zu. Begeben Sie sich dazu einfach zum Menüpunkt "Design »Themes" und wählen dort den Button "Hinzufügen" (oben links) oder den Link „+ Neues Theme hinzufügen“, den Sie in einem leeren Bereich am Ende Ihrer installierten Themes als Platzhalter finden.

Suchen Sie dort nach einem bestimmten Theme. Sie können Ihre Suche auch einschränken, indem Sie nach bestimmten Funktionen filtern.

abbildung-3-im-backend-nach-einem-theme-aus-dem-offiziellen-verzeichnis-suchen

Abbildung 3: Im Backend nach einem Theme aus dem offiziellen Verzeichnis suchen.

Auf der gleichen Seite finden Sie zudem die folgenden Links:

  • Hochladen: Hier können Sie ein gezipptes Theme, das Sie auf Ihrem Rechner gespeichert haben, installieren. Es gilt hierbei das gleiche wie bei gezippten Plugins, die man aus dem Backend heraus installiert.

  • Empfohlen: Hier wird Ihnen eine Auswahl an Themes vorgestellt.

  • Neueste: Hier werden neue Themes vorgestellt.

  • Vor kurzem aktualisiert: Hier finden Sie Themes, die kürzlich aktualisiert wurden.

Aufgabe: Frage zur Selbstprüfung:

In welchen Ordner auf dem Server muss ich ein neues Theme hochladen, wenn ich es manuell installieren möchte/muss?

Mit einem Klick auf die Vorschau eines Themes können Sie das Theme begutachten:

abbildung-4-vorschau-des-neuen-themes

Abbildung 4: Vorschau des neuen Themes

Im linken Bereich des Fensters können Sie diese Vorschau wieder schließen oder aber das Theme installieren.

Nach der Installation haben Sie die Möglichkeit eine Live-Vorschau des Themes anzusehen bevor Sie es endgültig aktivieren. Klicken Sie dafür einfach auf den Link "Live-Vorschau".

abbildung-5-live-vorschau

Abbildung 5: Live-Vorschau

Live-Vorschau bedeutet hierbei, dass Sie das Theme mit ihren eigenen Inhalten angezeigt bekommen.

Nur, wenn Sie das Theme auch aktivieren ist es auch im Frontend sichtbar.

abbildung-6-das-neue-theme-wird-im-backend-als-aktiv-angezeigt

Abbildung 6: Das neue Theme wird im Backend als aktiv angezeigt

Achtung:

Mit der Aktivierung des neuen Themes ändern sich meist auch die Unterpunkte im Menü "Design". Das liegt daran, dass nicht alle Themes im gleiche Umfang angepasst und individualisiert werden können, wie dies z. B. beim Standardtheme Twenty Fourteen der Fall ist.

Da das neue Theme aktiv ist, können wir uns das Ergebnis im Frontend anschauen:

abbildung-7-geschafft

Abbildung 7: Geschafft!

Das war's. Das Theme ist kompatibel und funktioniert. Was will man mehr?

Worauf sollte ich bei der Auswahl eines Themes achten?

Es gibt nicht viel, aber auf einige Punkte sollte man bei den WordPress-Themes achten, wenn man das Theme von einer anderen Quelle bezieht. Zum einen wäre dies die Lizenz. Die große Mehrheit der Themes ist frei und steht unter einer Open-Source-Lizenz (meistens GPL ). Das ist einerseits sehr vorteilhaft, weil man es frei nutzen und anpassen kann. Auf der anderen Seite muss der Copyright-Link erhalten bleiben und alle Anpassungen, die Sie an diesem Layout vornehmen, stehen ebenfalls unter der Open-Source-Lizenz.

Es gibt allerdings auch kostenpflichtige WordPress-Themes. Hier sollte man ebenfalls auf die Lizenz achten.

Dann müssen Sie darauf achten, ob das Theme nur auf bestimmten WordPress-Versionen funktioniert und welchen Umfang es bietet. Hat es Unterstützung für die dynamische Sidebar und die Widgets? Ist es eingedeutscht? Kann man es leicht anpassen? etc. Üblicherweise werden diese Informationen in einer separaten Datei im Paket notiert oder Sie stehen auf der Website des Autors.

Welche Möglichkeiten stehen mir zur Verfügung um die Themes anzupassen?

Viele Wege führen nach Köln.

Dieses alte und bewährte Sprichwort hat auch hier seine Gültigkeit. Prinzipiell stehen Ihnen mehrere Wege offen, um ein WordPress-Theme anzupassen.

Das Standardtheme Twenty Fourteen bietet, im Gegensatz zu vielen anderen Themes, die Möglichkeit, innerhalb der Admin-Oberfläche eigene Anpassungen vorzunehmen. Sie können eigene Einstellungen bzgl. der Kopfzeile machen und sogar eigene Menüs erstellen, die sie dann als Widget implementieren können.

Die Kopfzeile anpassen

Im Menüpunkt" Design / Kopfzeile" haben Sie die Möglichkeit den Kopfbereich bzw. die Kopfgrafik anzupassen.

abbildung-8-kopfzeile-anpassen

Abbildung 8: Kopfzeile anpassen

Sie können entweder ein eigenes Bild hochladen oder aber eines aus der Mediathek wählen. Sofern das Bild nicht genau 1.260 x 240 Pixel groß ist, müssen Sie es in einem weiteren Schritt noch zuschneiden.

Mehrere hoch geladene Bilder kann man sich auch nach dem Zufallsprinzip anzeigen lassen.

Selbstverständlich hat man auch die Möglichkeit komplett auf eine Grafik im Kopfbereich zu verzichten.

abbildung-9-eine-eigene-grafik-in-der-kopfzeile

Abbildung 9: Eine eigene Grafik in der Kopfzeile

Außerdem ist es möglich die Schriftfarbe des Titels und Slogans ihrer Website anzupassen. Der Text kann außerdem auch komplett ausgeblendet werden.

Individuelle Menüs erstellen

Eine aus Nutzer-Sicht sehr interessante Neuerung in WordPress 3.0 ist die Möglichkeit aus dem Backend heraus individuelle Navigationsmenüs zu erstellen und auf der Website bzw. im Frontend ausgeben zu lassen. Damit das überhaupt erst funktioniert, muss diese neue Funktion in der functions.php aktiviert werden und damit die Ausgabe im Frontend klappt muss man in der entprechenden Template-Datei <?php wp_nav_menu(); ?> einfügen oder das Theme muss widget-fähig sein.

Nutzen Sie das neue Standard-Theme (Twenty Fourteen) oder ein anderes Theme, welches diese Funktion unterstützt, dann müssen Sie sich weder um die Aktivierung noch um die Ausgabe der neuen Funktion sorgen.

Sind Sie neugierig geworden? Dann sollten Sie sich Richtung "Design / Menüs" begeben.

Für die Erstellung eines eigenen Menüs sind nur wenige Schritte notwendig.

abbildung-10-navigationsmenues-im-backend-erstellen

Abbildung 10: Navigationsmenüs im Backend erstellen

  • Geben Sie Ihrem Neuen Menü einen Namen und Klicken Sie auf den Button"Menü erstellen". Sie können auch mehrere unterschiedliche Menüs erstellen.

  • Danach können Sie aus verschiedenen Quellen – individuelle Links, Seiten und Kategorien – das Menü erstellen.

  • Die einzelnen Menüpunkte können Sie dann durch Klicken und Ziehen ordnen und wenn gewünscht auch verschachteln, womit Sie die Möglichkeit haben, die einzelnen Menüpunkte hierarchisch zu ordnen.

abbildung-11-individuelles-menue-positionieren

Abbildung 11: Individuelles Menü positionieren

Nachdem Sie ein Menü erstellt und abgespeichert haben, entsteht im oberen Bereich ein zusätzlicher Reiter mit dem Namen „Positionen verwalten“. Wenn Sie diesen aufrufen, dann haben Sie die Möglichkeit, dass neu erstellte Menü im Theme zu positionieren und zwar an den Stellen, die die Autoren des jeweiligen Themes vorgesehen haben. Im Fall von Twenty Fourteen ist dies entweder die horizontale Navigation im Kopfbereich (Oberes primäres Menü) oder in der linken Seitenleiste.

Wenn Sie sich dafür entschieden haben die Hauptnavigation nicht zu ersetzen, sondern das individuelle Menü in der Sidebar unterzubringen, dann können Sie dies mit Hilfe von Widgets realisieren.

abbildung-12-individuelles-menue-als-widget-einfuegen

Abbildung 12: Individuelles Menü als Widget einfügen

Einfach das Widget "Individuelles Menü" durch Klicken und Ziehen in den entsprechenden Widget-Bereich bewegen, Menü auswählen, falls benötigt eine Überschrift geben und abspeichern.

Und so schaut das Ergebnis im Frontend aus:

abbildung-13-frontend

Abbildung 13: Frontend

Sie haben natürlich die Möglichkeit mehrere individuelle Menüs zu erstellen. Damit haben Sie, zumindest im Standard-Theme, die Möglichkeit, die Hauptnavigation zu ersetzen sowie die Sidebar und den Fußbereich mit eigenen Inhalten zu füllen.

CSS anpassen

Alternativ können Sie die CSS-Datei (styles.css) anpassen. Haben Sie solide CSS-Kenntnisse, können Sie sehr schnell und einfach einem WordPress-Theme Ihre individuelle Note verleihen.

Verfügen Sie zusätzlich noch über gute (X)HTML- und rudimentäre PHP-Kenntnisse, können Sie die Template-Dateien anpassen oder mit etwas Übung ein eigenes Theme erstellen.

Sie können dies sogar im Backend von WordPress machen. Unter dem Menüpunkt "Design » Editor" können Sie sich alle Dateien, der installierten Themes anschauen und auch bearbeiten. Voraussetzung dafür ist, dass die Dateien beschreibbar sind bzw. über die entsprechenden Dateiberechtigungen verfügen.

abbildung-14-themes-im-backend-bearbeiten

Abbildung 14: Themes im Backend bearbeiten

Die Bearbeitung im Backend ist allerdings bei weitem nicht so komfortabel wie in einem separaten Editor. Was vor allen Dingen für eine übersichtliche Bearbeitung fehlt, sind die Syntaxhervorhebung und die Zeilennummerierung.

Tipp:

Für die ersten Versuche in der Anpassung der CSS- und den anderen Template-Dateien bietet sich das "Classic-Theme" von Dave Shea an. Der Aufbau des Themes ist wesentlich einfacher als der des Standardthemes Twenty Fourteen und eignet sich somit hervorragend für Anfänger und Quereinsteiger.

Das "Classic-Theme" gehörte bis vor kurzem noch zum Standardumfang einer WordPress-Installation. Jetzt müssen sie sich – bei Interesse – das Theme erst installieren.

Aufgabe: Fragen zur Selbstprüfung

1. Nennen Sie DIE Anlaufstelle, wenn man auf der Suche nach freien WP-Themes ist?

2. Worauf sollte man bei der Auswahl der Themes achten?