Beitrag

 
Wie Sie das Design Ihres WordPress Themes anpassen

Wie Sie das Design Ihres WordPress Themes anpassen

Für WordPress gibt es eine riesengroße Auswahl an Webdesigns. Entsprechend gibt es kaum noch einen Grund, unnötig Zeit und viel Geld in die Entwicklung eines eigenen Layouts zu investieren. Stattdessen sucht man sich eine der vielen Designvorlagen aus und passt Sie nach seinen Wünschen an. Wie das geht, lesen Sie in diesem Beitrag.

WordPress und das Webdesign

In WordPress ist das Webdesign von dem Inhalt und den Funktionen der Website getrennt. Wie ein Anzug können Sie das Design ganz einfach austauschen, indem Sie ein neues Design installieren. Von den Themes genannten Designvorlagen gibt es Tausende und täglich werden es mehr.

Statt also ein neues Design entwerfen zu lassen, was anschliessend mühselig für verschiedene Bildschirmgrößen programmiert werden muss, ist es viel zeit- und kostenschonender sich ein fertiges Theme auszusuchen und an seine Bedürfnisse anzupassen. Dabei stehen Ihnen alle Möglichkeiten offen. Von der einfachen Anpassung der Farben sowie dem Austausch des Logos und der Bilder, bis hin zur völligen Veränderung einer Designvorlage an die eigene Corporate Identity (CI).

Die Anpassungsmöglichkeiten der Themes

WordPress Themes bieten von Haus aus mehr oder weniger ausgeprägte Anpassungsmöglichkeiten, die Sie ohne Programmierkenntnisse vornehmen können. Prinzipiell kann man hier zwei Arten von Theme-Typen unterscheiden:

  1. Themes mit vielen Anpassungsmöglichkeiten. Vorteil: Je nach Ausprägung können Sie fast jedes Element der Website nach Farbe, Größe und Anmutung individualisieren. Nachteil: Die Vielfalt der Möglichkeiten überfordert häufig ungeübte Betreiber von Websites. Das Ergebnis: halbfertige Websites, die entweder unprofessionell aussehen, oder nie das Licht der Öffentlichkeit erblicken.
  2. Themes, die kaum Anpassungsmöglichkeiten bieten. Vorteil: Aufgrund der wenigen Optionen bleiben die Theme-Einstellungen übersichtlich. Auch Ungeübte kommen schnell zu einem professionellen Ergebnis. Nachteil: Das Theme muss von sich aus schon sehr nah am gewünschten Ergebnis sein. Anpassungen sind nur mit speziellen Kenntnissen möglich, zu denen wir gleich kommen :-).

Seit einigen Versionen bietet WordPress eine einheitliche Möglichkeit das Webdesign zu konfigurieren. Sie finden Sie im Dashboard Menü oder der Toolbar unter ANPASSUNGEN. Leider hat sich dieses Verfahren noch nicht flächendeckend durchgesetzt. In der Realität entwickeln die Webdesigner für Ihre Themes eigene Konfigurationen, die mehr oder weniger verständlich und übersichtlich sind und in die man sich zunächst einarbeiten muss.

WordPress Anpassungen

WordPress Anpassungen

WordPress Themes mit Hilfe von CSS anpassen

Im modernen Webdesign wird die Information, die für das Layout einer Website verantwortlich ist, vom Inhalt getrennt und in sogenannten Cascading Style Sheet Dateien (CSS) gesammelt.

Die Themes bei WordPress haben entsprechend eine Datei namens style.css, die zum Beispiel Informationen darüber enthält, aus welcher Schrifttype die Überschriften bestehen, wie groß sie sind und in welcher Farbe sie erstrahlen. Dank dieser Methode wirken sich Anpassungen automatisch auf die ganze Website aus, ändert man beispielsweise die Schriftgröße der Überschriften.

Die schnelle CSS Anpassung

Der direkte Weg zu Anpassungen an der CSS-Datei führt über das Dashboard Menü DESIGN > EDITIEREN. Hier können Sie die style.css auswählen und die gewünschten Änderungen direkt vornehmen.

WordPress Editor

WordPress Editor aktivieren

Der Nachteil dieser Methode ist, dass die Anpassung direkt im Theme vorgenommen werden. Dadurch gehen sie auch bei einem Update der Vorlage wieder verloren, wenn Sie nicht aufpassen und die Änderungen vorher sichern und nach dem Update wieder einfügen. Bei ein paar Modifikationen ist der Aufwand noch überschaubar, bei komplexen Veränderungen wird es nervig. Ausserdem verliert man schnell die Übersicht, welche Änderungen man überhaupt vorgenommen hat. Diese Methode ist nicht empfehlenswert.

Anpassungen im Child Theme

Haben Sie vor, das Webdesign in vielen Bereichen abzuändern, empfiehlt sich, alle Anpassungen in einem sogenannten „Child Theme“ auszulagern. Der geringe Mehraufwand macht die Anpassungen unabhängig vom Theme und sichert alle Modifikationen auch bei einem Update. In einem weiteren Beitrag haben wir beschrieben, wie Sie ein Child Theme anlegen.

Die Plug-in Empfehlung

Natürlich gibt es auch eine Lösung, Änderungen direkt im Dashboard vorzunehmen, die auch ein Update des Themes überstehen. Das Plug-in Simple Custom CSS bietet nach der Installation im Dashboard Menü DESIGN > CUSTUM CSS die Möglichkeit, die gewünschten Modifikationen durchzuführen. Die Anweisungen überschreiben in der Regel direkt die Vorgaben, die aus der Datei style.css stammen. Ist das mal nicht der Fall, reicht eine !Important, Anweisung, um die ursprünglichen Designvorgaben zu überschreiben.

Simple Custom CSS

Simple Custom CSS Plug-in

Wie funktioniert CSS?

OK, die Beantwortung dieser Frag sprengt den Rahmen dieses Artikels. Aber wir haben für Sie ein paar Beiträge gefunden, die Ihnen weiterhelfen können, wenn Sie sich mit den Möglichkeiten von CSS noch nicht auskennen:

So, nun wissen Sie, wie Sie das Design Ihrer Website anpassen können. Vielleicht finden Sie Spaß daran Ihre Website eigenhändig an Ihre Wünsche anzupassen. Da wären Sie nicht die Ersten. Vielleicht haben Sie bei der Lektüre dieses Beitrags aber auch festgestellt, dass Sie die Anpassungen nicht selbst durchführen möchten. Dann sind wir Ihnen gern behilflich.

 

Quelle Bilder: Eigene Screenshots
Anmerkung: Einige der Links in diesem Beitrag sind „Affiliate-Links“. Wenn Sie auf den Link klicken und einen Artikel kaufen, erhalten wir eine Provision. Auf Ihren Kaufpreis hat es keine Auswirkung. Vielen Dank für Ihre Unterstützung!

Autor:

Elbnetz ist ein Team enthusiastischer WordPress-Fans. Wir sind davon überzeugt, dass niemand überkandidelte, komplizierte Websites braucht. Mit WordPress ist es möglich, grandiose Websites zu entwickeln.

  • Andreas

    Darf ich Themes modifizieren, welche unter der GPL, AGPL oder LGPL stehen?

    Antworten
    • Elbnetz Redaktion

      Ja: Die GNU General Public License (kurz GNU GPL oder GPL; aus dem Englischen wörtlich für allgemeine Veröffentlichungserlaubnis oder …genehmigung) ist die am weitesten verbreitete Software-Lizenz, die einem gewährt, die Software auszuführen, zu studieren, zu ändern und zu verbreiten (kopieren). aus Wikipedia

      Beste Grüße,
      Die Elbnetz-Redaktion

      Antworten
      • Andreas

        Moin,

        vielen Dank für die Rückmeldung.
        1.) Und worin liegen die Unterschiede zwischen der GPL, AGPL und LGPL?
        2.) Darf ich den Hinweis/Backlink des Autors im Theme entfernen, wenn sich das Theme unter einer der oben genannten Lizenzen befindet?
        3.) Woran erkenne ich, unter welcher Lizenz sich das Theme befindet? In der style.css, in der license.txt, …? Und welche Angabe ist relevant, wenn in den beiden Dateien unterschiedliche Lizenzen stehen?
        4.) Muss ich nach der Modifizierung des Themes, den Quellcode der Veränderung/Anpassung veröffentlichen?

        Antworten
  • Andreas

    Vielen Dank für die gute Anleitung und die Auflistung der Möglichkeiten zur Anpassung.

    Antworten
  • Moritz

    Hallo Elbnetz,
    wie bzw. kann ich überhaupt, bestimmte Textpassagen im wordpress backend ändern. Als Beispiel, bei der Themeübersetzung wurden nicht alle Passagen gut übersetzt. Gibt es eine Art globale Textsuchfunktion?

    Antworten
    • Elbnetz Redaktion

      Moin Moritz,

      wenn wir Dich richtig verstehen, willst Du Elemente im Backend übersetzen. Dazu können wir das Plug-in Loco Translate empfehlen.

      Beste Grüße,
      Das Elbnetz-Team

      Antworten

Ein Kommentar? Gern!

Ihnen gefällt unser Blog?

Dann wird Sie unser
Buch begeistern!

Mehr erfahren

Ihnen gefällt unser Blog?