WordPress ist wie eine Droge! Diesen Satz habe ich vor Kurzem in einem Blogbeitrag gelesen und kann dem Autor auf jeden Fall zustimmen. Die Software hat durchaus ein gewisses Suchtpotential. Mal eben schnell eine einfache Vereins- oder Hochzeits-Website erstellen und ehe man sich versieht, steckt man mitten drin in der Theme Anpassung und erstellt sogar eigene WordPress Themes, weil die übrigen 100.000 Themes, die es bereits gibt, niemals den eigenen Vorstellungen entsprechen können ;-). So in etwa lässt sich auch mein Start in das WordPress Leben kurz zusammenfassen.
(*) = Affiliate Links
Die folgende Artikelreihe wird hoffentlich auch dich in den WordPress Bann ziehen. Denn du wirst sehen, wie einfach es ist, ein bestehendes WordPress Theme an die individuellen Bedürfnisse anzupassen.
Die Artikelserie „WordPress Theme anpassen wie ein Profi“ wird aus folgenden Artikeln bestehen:
- Teil 1 – Theme Optionen & Theme Customizer
- Teil 2 – Eigenes CSS und Browser Entwicklertools
- Teil 3 – Eigene Shortcodes erstellen mit Plugin Post Snippets
- Teil 4 – WordPress Child Theme erstellen mit Plugin
- Teil 5 – WordPress Template Dateien bearbeiten
- Teil 6 – WordPress Page Template erstellen
- Teil 7 – WordPress Hooks verstehen und anwenden
Die Serie startet mit der einfachsten Möglichkeit, ein Theme anzupassen, nämlich nur über die vom Theme Entwickler zur Verfügung gestellten Optionen. Die Theme Optionen findest du entweder auf einer Unterseite im Adminbereich (old fashion way) oder im Theme Customizer, wie es bei modernen und neueren Themes der Fall ist.
WordPress Theme Anpassung über Theme Optionen im Adminbereich
Da es jedem Entwickler frei steht, wo er die Theme Optionen platziert, sind diese teilweise gar nicht so einfach zu finden. Man aktiviert ein Theme und muss dann erst mal überprüfen, welche Menü-Punkte bzw. Untermenü-Punkte im Adminbereich neu dazugekommen sind.
Historisch bedingt ist es leider immer noch gängige Praxis, dass die Theme-Optionen im Adminbereich zu finden sind. Selbst beim beliebtesten WordPress Theme Divi (*) befinden sich die Einstellungen im Adminbereich. Da es Divi schon lange vor der Theme Customizer Funktion gab, gehe ich davon aus, dass die Entwickler die schön gestylten Theme Optionen nicht nachträglich umswitchen wollten.
Als Ersatz für die Anpassung im Customizer bekam Divi einen komfortablen Page Builder, der eine einfache Handhabung mit Live-Vorschau bietet.
[wpc]Ich lehne mich jetzt mal aus dem Fenster und sage: Falls du ein neues/junges Theme verwendest, welches die Theme Optionen anstatt im Customizer im Adminbereich hat, rate ich dir ein anderes Theme zu wählen. Da ich selbst schon WordPress Themes erstellt habe, weiß ich, dass die Entwicklung / Programmierung für den Customizer nicht ganz einfach ist. Ein Entwickler, der diese Hürden scheut, wird sehr wahrscheinlich auch an anderen Stellen im Code den Weg des geringsten Widerstands gehen und möglicherweise eine Code-Qualität produzieren, die nicht „state of the art“ ist.[/wpc]
WordPress Theme Anpassung über Theme Customizer
Der größte Vorteil des Theme Customizers gegenüber der Anpassung im Adminbereich ist die Live-Vorschau. Übrigens den Begriff Live-Vorschau darfst du ruhig wörtlich nehmen. Wenn du deine Seite erst aktualisieren musst, damit die Änderungen sichtbar werden, ist es keine Live-Vorschau. Das darf man gerne auch als Quailtätsmerkmal eines Themes bezeichnen, wenn jede Anpassung sofort sichtbar wird.
Zu dem Customizer gelangst du im Adminbereich über Design > Customizer oder indem du in der Adminbar auf Customizer klickst. Hier am Beispiel des WordPress Themes Twenty Seventeen.
Seit WordPress Version 4.9 ist es möglich, die Customizer Einstellungen zu speichern, ohne diese gleich zu veröffentlichen (Punkt 1 im oberen Screenshot). Praktisch ist auch, dass die gespeicherten Design-Optionen per Link an Mitarbeiter, Kunden oder Lieferanten verschickt werden können. Außerdem lassen sich die Änderungen planen und zu einem späteren Zeitpunkt veröffentlichen.
Darüber hinaus gibt es bestimmte Sektionen, die standardmäßig bei jedem Theme enthalten sind (Punkt 2 bis 7 sowie Punkt 9 im oberen Screenshot). Im Großen und Ganzen können hier die gleichen Anpassungen vorgenommen werden, wie im Adminbereich . Das sind z. B. Titel und Beschreibung der Seite ändern (2), ein allgemeines Farbschema auswählen (3), Header-Bild hochladen (4), Menüs erstellen (5), Widgetbereiche mit Widgets befüllen (6) oder Startseite festlegen (7). Standard bedeutet jedoch nicht, dass diese Optionen auch automatisch in deinem Theme zu finden sind. Der Theme Entwickler kann nämlich bestimmte Default-Optionen auch entfernen.
Die Theme Optionen wurden beim Theme Twenty Seventeen unter einer eigenen Sektion zusammengefasst.
Zusätzliches CSS (9) ist wiederum eine Funktion, die standardmäßig enthalten ist. Wir werden uns im 2. Teil dieser Artikelreihe näher mit dieser Option befassen.
Sehr nützlich sind auch die 3 Icons am unteren Rand des Customizers (10), mit denen man überprüfen kann, wie gut die eigene Website für mobile Geräte optimiert ist.
Es gibt WordPress Themes, wie z. B. das tolle OceanWP (*), die durch die zahlreichen Theme Optionen im Customizer die Theme Anpassung selbst für WordPress Einsteiger erheblich vereinfachen.
Die Optionen (Settings) wurden übersichtlich einzelnen Sektionen zugeordnet, die wiederum in Panels zusammengefasst wurden. Selbst bei der kostenlosen Version des Themes ist die Anzahl der Theme Optionen sehr beeindruckend.
Export/Import Funktion für den Customizer
Zum Abschluss des ersten Teils möchte ich dir noch ein wirklich tolles Plugin vorstellen: Customizer Export/Import. Damit kannst du alle deine Einstellungen im Customizer exportieren und auf einer anderen WordPress Seite wieder importieren. Das Tolle an dem Plugin ist, dass nicht nur die Standard-Einstellungen exportiert werden, sondern alle theme-spezifischen Optionen, die sich im Customizer befinden.
Vermisst du bestimmte Optionen bei deinem WordPress Theme?
Viele WordPress Einsteiger kommen irgendwann an den Punkt, an dem die individuellen Änderungswünsche über die verfügbaren Theme Optionen hinausgehen. Dann wird es Zeit für den zweiten Teil unserer Artikelserie „WordPress Theme anpassen wie ein Profi“ mit dem Browser Entwickler Tools und zusätzlichem CSS.
Du kannst noch Einfluss auf die Artikelreihe nehmen. Sollen in den folgenden Artikeln bestimmte Themen bzgl. Theme Anpassung behandelt werden? Hast du Schwierigkeiten dein WordPress Theme anzupassen? Hinterlasse einfach unten einen Kommentar.
[stay id=“2075″]
16 Antworten
Hallo Danijel,
ich hatte vor Jahren für meine Seite https://affiliate-erfolge.de/ das WordPress Theme 2016 verwendet.
Gilt das von Dir zum Theme 2017 auch für das Theme 2016 ?
Ich habe diese Seite seit Einführung der DSGVO nicht mehr geplegt.
Jetzt wollte ich mein Kindle Ebook „Erfolgreiches Affiliate Marketing“ mit Google Ads bewerben. Da erhielt ich die Info, dass Google verschiedene Änderungen bei Google Ads nach dem 30.06.2022 einführt.
Diese Zeit will ich nutzen, um o.g. Seite zu aktualisieren, um dort die Landingpage abzulegen. Google nennt das die Ziel URL. Angeblich ist das besser, wenn das meine eigene Seite ist und keine Affiliate URL.
In diesen Zuge will ich zunächst nur den Punkt „Above the Fold“ besser nutzen. Bezogen auf o.g. WS
1. Den weißen Bereich über dem Headerbild fast auf „Null“ reduzieren
2. Das Headerbild kann vielleicht in der Höhe noch etwas reduziert werden
3. Den Abstand zwischen Headerbild und Headline etwa auf die Hälfte reduzieren
4. Den Abstand zwischen Headline und Subheadline auf die Hälfte reduzieren
5. Vieleicht kann man auch die Abstände zwischen Absätzen noch etwas reduzieren?
6. Im Footer sollte die Datenschutzerklärung und das Impressum ausgeschrieben sein und nicht wie jetzt als unscheinbare Icons.
Braucht man für die Landingpage ein spezielles Formular, da die Landingpage weder Navigation noch Suchfeld noch Kategorien usw. aber dafür Datenschutzerklärung und Impressum enthalten soll?
Sorry, dass es so lang geworden ist. Was kannst Du mir hierfür anbieten? Auch gegen Bezahlung. Oder in welchem Deiner Beiträge finde ich die Lösung dafür?
Alles Gute und bleib gesund
Manfred Keller
Manfred Keller
Hallo Manfred,
aufgrund vieler Projekte, kann ich leider zurzeit keine neunen Projekte mehr aufnehmen. Ich kann Dir aber natürlich meine Online Kurse empfehlen, mit denen Du sicherlich ein wunderschönes Redesign Deiner Seite hinbekommen würdest. Ich füge mal 2 Gutscheine zu meinem WordPress und Elementor Kurs hinzu:
WordPress: https://www.udemy.com/course/wordpress-kurs-von-wpc/?couponCode=APRIL-22
Elementor: https://www.udemy.com/course/wordpress-elementor-praxis-kurs/?couponCode=APRIL-22
Schöne Grüße und viel Erfolg!
Danijel
Hallo Danijel,
trotzdem vielen Dank.
Vielleicht könntest Du aber eine Wertung abgeben, welche der 6 aufgeführten Punkte sinnvoll sind?
Nicht, dass der eine oder andere Punkt eher schädlich ist.
Alles Gute und bleibe gesund
Manfred
Super hilfreich für WordPress Anfänger! Habe so auch einiges auf meiner Webdesign Bonn Seite geändert.
Beste Grüße!
Sorry, es fehlen immer mal wieder Buchstaben oder Wörter, wenn ich den Text nicht durchlese bevor ich ihn abschicke, weil ich immer wieder umdenke, wie ich mich am verständlichsten artikuliere. Ich möchte den schwarzen Balken herausnehmen, der die Schrift über dem Header-Bild unterlegt, so daß nur die weiße Schrift übrig bleibt. Und natürlich, falls Du noch Kommentare beantwortest.
Hallo Monika aus Tölz 🙂
vielen Dank für Deinen Kommentar. Wenn man über den Customizer diesen schwarzen Hintergrund nicht herausnehmen kann bzw. wenn es dafür keine Einstellung gibt, dann geht es nur über Eigenes CSS. Das wäre dann der 2. Teil der Artikelserie: https://wpconsultant.de/wordpress-theme-anpassen-2-eigenes-css-browser-entwicklertools/
Viel Erfolg!
Schöne Grüße, Danijel
Hi Danijel,
danke erstmal dafür, dass Du immer noch für alle da bist – und ich habe eine super einfache Methode gefunden – ich habe die Farbe auf transparent gesetzt 😉 🙂
Lieber Gruß
Monika
Hi Monika,
ja klar, gerne. Ich hoffe, ich kann das auch noche eine Weile weitermachen, denn es macht mir sehr viel Spaß. So kann mans natürlich auch machen 🙂
LG, Danijel
Hi Danijel,
ich starte gerade mit WP und würde gerne bei dem Theme „Hemingway“ von Anders Norén den schwarzen Balken, auf dem Header-Bild liegt, nehmen. Geht das irgendwie? Falls Du noch Kommentar beanwortest.
Danke für Info.
Gruß aus Tölz 😉
Monika
Hi Danijel,
ach, ok, besten Dank für dein Mühe und Rückmeldung!
Lese ich dann mal nach .
Sonnige Grüße aus HH
Nicola
Hallo Danijel,
ich verwende Twenty Seventeen…. ich hatte da Foto oben gesehen, welches dort auch als Vordesign hochgeladen ist…
Ja, habe im Customizer Bereich die MP4 Datei unter Video hochgeladen. Wie gesagt in dem kleinen Vorschauviedeo kann ich es mit ton Starten, dann auf der website im Header nicht.
Kannst du mir da weiter helfen?
Sonnige Grüße
Nicola
Danke für deine schnelle Reaktion 😉
Hallo Nicola,
wenn du das Theme Twenty Seventeen verwendest, muss ich dich leider enttäuschen. Das Theme hat keinen voll-funktionsfähigen Video Player eingebaut. Du kannst im Header Videos einbinden aber leider nur ohne Ton. Mehr Details kannst du in diesem Support Thread nachlesen: https://wordpress.org/support/topic/no-sound-in-youtube-on-frontpage/
LG, Danijel
Hallo Danijel,
ich benutze das Theme und versuche seit geraumer Zeit meine Animation, als mp4 Video angespeichert und
im Customizer-Bereich hochegalden, mit Ton auf der Startseite zu hören. Das Video geht gleich auf der Startseite im Header los. Im Customizer-Bereich wird die kleine Vorschau mit Ton abgespielt, leider nicht auf der Startseite. Kannst du mir da einen Tipp geben? Muß ich noch ein Plugin istallieren oder habe ich eine Einstellung übersehen?
Meine Seite ist noch nicht online!
Danke
LG Nicola
Hallo Nicola,
welches Theme verwendest du – OceanWP oder Divi? Werden beide im Artikel erwähnt. Bei welcher Customizer Einstellung hast du die mp4-Datei hochgeladen?
LG, Danijel
Der neue Customizer ist wirklich klasse. Leider habe ich es bis jetzt nicht geschafft Shortcode dort unterzubringen (von Polylang). ICh habe die Funktion wp_filter_nohtml_kses ausgeblendet, in der Hoffnung, wenn HTML funktioniert nimmt der Customier auch Shortcode. Tut er leider nicht. Gibt es einen Trick?
Viele Grüße
Ralf
Hallo Ralf,
ich weiß nicht, ob ich deine Frage richtig verstehe. Wo hast du denn versucht den Shortcode im Customizer einzugeben? Die einzige mir bekannte Möglichkeit im Standard Customizer Shortcodes zu verwenden, ist das Text Widget. Seltsamerweise akzeptiert nicht einmal das neue HTML Widget Shortcodes. Aber wenigstens kann man seit der Version 4.9 in das Text Widget Shortcodes eingeben, ohne zusätzlichen Code in die functions.php Datei einzutragen.
Übrigens im nächsten Teil unserer Artikelserie wird es genau um das Thema Shortcodes gehen 🙂
Viele Grüße, Danijel