Tipps

wie sie das design ihres wordpress themes anpassen

Wie Sie das Design Ihres WordPress Themes anpassen

Funktion

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 anschließend 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. Außerdem 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!

turned_in_notPlugins, Tutorials

17 Kommentare. Wir freuen uns über Ihren Kommentar

  • Katrin Salzinger
    30. Oktober 2019 12:20

    Hallo,
    kann ich ein gekauftes Theme anpassen und dieses veränderte Theme dann wieder für eine andere Homepage verwenden?
    Mit den besten Grüßen!

    Antworten
    • Moin Katrin,
      je nach Lizenzmodell des kommerziellen Themes musst Du eine neue Lizenz für jede Website erwerben.
      Sind es kostenfreie Themes von z.B. wordpress.org, dann kannst du die Themes so häufig einsetzen, wie Du möchtest.
      Ahoi!
      Thorsten

      Antworten
  • Servus,
    ich nutze immer noch FrontPage und FTP-Pro zum editieren bzw. hochladen meiner Website.
    Nun hab ich ein paar hübsche wordpress themes gefunden und es stellt sich die Frage: kann ich die mit meinen „Lieblingswerkzeugen“ bearbeiten?
    Über eine Antwort würde ich mich freuen
    lg silvia

    Antworten
  • Moin ihr lieben.
    Eine frage….
    Wie ändern ich ein theme einer einzelnen seite ohne das design der website zu ändern.
    Ich habe angefangen die Seite zu bauen, und bis auf den shop ist alles fertig und ich bin zufrieden soweit. Doch der shop soll nach Möglichkeit ein anderes theme haben… Ist das möglich? Und wie?
    Danke fuer eure zeit.
    Greetz paul

    Antworten
  • Hallo
    Na schön und gut.
    Aber wie sieht die ganze Sache in der Praxis aus?
    Ich habe ein WP Template. Das zu bearbeiten brauche ich einen PHP Editor (z.B. Dreamweaver)
    Dann kann ich das Template reinladen und bearbeiten.
    Jetzt brauche ich ein Browser wo ich anschauen kann was ich gemacht habe.
    Ich habe gehört da PHP offline zu anschauen braucht man einem virtuellen Server.
    Und da fängt mein Problem an.
    Ich habe schon mit xampp versucht aber irgendwie klappt es nicht.
    Bei HTML ist ganz einfach Das Template mit Editor bearbeiten und mit einen Browser (offline) betrachten. Wie funktioniert das bei WordPress (PHP)?
    Danke T. Kuppan

    Antworten
    • Elbnetz-Redaktion
      29. September 2017 10:33

      Moin,
      Sie können auch PHP-Dateien mit einem einfachen Texteditor analog HTML-Code bearbeiten, wenn Sie sich mit der Programmiersprache auskennen.
      Einen Editor, der Ihnen das Programmieren abnimmt, kennen wir allerdings nicht.
      Ahoi!

      Antworten
  • Gut gemacht. Bin heute zufällig auf dieser Seite gelandet. Begeistert ; ) Frage, wo oder bei wem kann ich mich in der Materie einüben. Wohne auch an der Elbe. Gibt’s Kurse oder vielleicht auch privat ?

    Antworten
    • Kim Salewski
      19. Dezember 2016 8:37

      Moin Mike,
      Vielen Dank, es freut uns, dass du hier her gefunden hast.
      Zu deiner Frage:
      Wir bieten auf unserer Website wp-schulung.de Einsteiger-Kurse oder Individuelle Schulungen an.
      Unsere Fortgeschrittenen-Kurse werden momentan umstrukturiert, werden aber auch bald wieder aufgenommen.
      Falls du interesse hast, schau gerne auf wp-schulung.de vorbei, vielleicht findest du hier das, was du suchst.
      Viele liebe Grüße,
      Kim

      Antworten
  • 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
      27. Juli 2016 11:54

      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
  • Vielen Dank für die gute Anleitung und die Auflistung der Möglichkeiten zur Anpassung.

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

    Antworten
    • Elbnetz Redaktion
      6. Juni 2016 8:27

      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
      • 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
      • Hallo ich hatte die selben fragen wie Andreas bzw. Die 4 fragen. Da stand keine Antwort aber die hätten mich auch sehr interessiert. Wäre noch nett besonders mit der Definition des Autors in der css Datei und ob man diese entfernen darf. Also nach kompletter Modifikation znd Änderung. Sehr schöner Artikel ansonsten.
        Grüsse Matthias

        Antworten
        • Elbnetz Redaktion
          4. Oktober 2016 10:04

          Moin Andreas & Matthias,
          vorab, wir sind keine Juristen und dürfen deswegen keine entsprechenden Auskünfte geben. Also unter Vorbehalt und gesundem Menschenverstand hier unsere Antworten zu Euren Fragen:
          1. Die Unterschiede der einzelnen Lizenzen betreffen im Wesentlichen ob und wie der Quellcode der eigenen Software-Teile offenzulegen ist. Informiert Euch hierzu bestens bei Wikipedia: LGBL und AGPL.
          2. Hierzu ist unter Freizügige Open-Source-Lizenz (Wikipedia) zu lesen: „Freizügige Lizenzen vereinbaren oft einige begrenzte Pflichten, wie zum Beispiel dass der Originalautor genannt werden muss (attribution). Falls ein Werk tatsächlich gemeinfrei ist, so ist dies aus rechtlicher Sicht normalerweise nicht nötig, doch die Nennung des Urhebers eines Werks wird z. B. im akademischen Bereich als ethische Pflicht betrachtet.„. Wir meinen: Das nennen desjenigen, auf dem Eure Arbeit basiert, muss genannt werden. Ohne seine oder ihre Leistung hättet Ihr Euer Ziel nicht erreicht.
          3. Tendenziell gilt die license.txt. Gibt es einen Widerspruch mit der style.css würden wir den Autor kontaktieren.
          4. Das kommt auf die Lizenz des Themes an (s.o.).
          Unser Fazit: Nennt den ursprünglichen Autor und macht Eure Anpassungen kenntlich. Das ist doch nur fair und Ihr seid auf der sicheren Seite. Was meint Ihr?

          Antworten

Wir freuen uns über Ihren Kommentar!

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Fill out this field
Fill out this field
Bitte geben Sie eine gültige E-Mail-Adresse ein.
You need to agree with the terms to proceed

expand_less
  Elbnetz GmbH hat 4,96 von 5 Sternen 54 Bewertungen auf ProvenExpert.com