Tag 4: Änderungen im Layout per Child-Theme

Der Vorstand der CDU Brieselang ist gestern Abend meiner Empfehlung gefolgt und hat beschlossen, den Internetauftritt unseres Ortsverbandes neu zu gestalten, Blog und Homepage auf eine Domain zusammenzuführen und dabei – trotz aller Kritikpunkte – das neu vorgegebene Layout der CDU-Bundesgeschäftsstelle zu verwenden. Nur leider passt ja das offizielle WordPress-Theme der CDU nicht zur Vorgabe. Wir kaufen deshalb in Schleswig-Holstein das Theme des Kreisverbandes Segeberg. Dort hat Webmaster Hauke von Essen die Vorgabe besser umgesetzt.

Ein bisschen anpassen werden wir aber auch dieses Theme, zum Beispiel möchte ich gern auch den Titel in original Helvetica und in Großbuchstaben haben. Wenn schon, denn schon. Doch dazu mehr in den nächsten Wochen, heute übe ich schon einmal und baue weiter am Design von Manfred Grund. Arbeitstag 4 verbringe ich am Samstag vor dem heimischen Rechner. Ohne Parlakom-Beschränkung kann ich auf sinnvolle Firefox-Erweiterungen zugreifen, Open Source-Tools nutzen und auch die Ergebnisse in den anderen Browsern (inklusive älteren Versionen) kontrollieren. Mein Ziel war die Navigation zu überarbeiten und das eigene Logo mit Bundestagsadler und Namenszug des Abgeordneten in den Kopf zu bekommen.

Für mein Vorgehen wähle ich ein Child-Theme. Bei Frank Bültge lerne ich, dass man WordPress zwingen kann, Änderungen zu einem Theme aus einem Child-Theme auszulesen. WordPress kombiniert bei der HTML-Erzeugung für das Frontend im Browser (die sichtbare Homepage) die Theme-Definitionen mit den Änderungen aus dem Child-Theme. Damit bleibt das Original-Theme unberührt und trotzdem kann man eigene Vorstellungen umsetzen. Der Webmaster muss nicht selbst ein komplettes Theme von der Festlegung der XHTML-Definitionen und Javascript-Aufrufe über die PHP-Steuerungen mit WordPress-Hooks bis zur letzten Textauszeichnung oder Bilddatei für den Hintergrund selbst erstellen. Das ist clever (ja stimmt, dies konnte TYPO3 schon länger) und folgt der CSS-Möglichkeit, das jeweils die letzte Definition vorherige überschreibt.

So gehe ich auch vor: Ich lege einen neuen Ordner im WordPress-Verzeichnis Themes an und verweise auf Agivee. Dazu muss eine eigene „style.css“ im neuen Ordner die originale „style.css“ von Agivee per @import einbeziehen. Außerdem benötigt WordPress einen CSS-Komentar am Anfang. Danach können in der eigenen, neuen Datei „style.css“ die Änderungen vorgenommen werden. Ich importiere stattdessen eine weitere CSS, in die ich erst meine Änderungen schreibe.

So überschreibe ich die Agivee-Definition, die im Kopf einen grauen Farbverlauf anzeigt. Weil ich nicht weiß, ob man einen Bildaufruf im Original-Theme per späterem Befehl löschen kann, überschreibe ich die Definition mit dem späteren Aufruf eines transparenten Bildes. Das Ergebnis: Das Agivee-Platzhalterbild verschwindet, der Link zur Homepage bleibt, wenn ihn auch niemand mehr sieht.

Screenshot

Wordpress zeigt Pages und Posts im Menü

Jetzt will ich das Menü endlich anpassen. Dazu kopiere ich die „header.php“ aus Agivee in meinen Ordner. Das Original bleibt erhalten, geändert wird in der Kopie. Beim Menüaufruf in Agivee werden die angezeigten Ebenen auf 2 beschränkt. Also setze ich den Werth für „depth“ auf 4.

Dann füge ich zum WordPress-Befehl für die Ausgabe eines Menüs der Pages einen Befehl für die Ausgabe der Kategorien. Ja, es entsteht dank der Superfish-Einbindung in Agivee ein Ausklapp-Menü mit mehreren Ebenen sowohl aus „Page“- als auch aus „Post“-Artikeln. Geht doch. Jetzt gilt es, die im Backend anzulegende Struktur der Pages und der Post horizontal schlank zu halten. Derzeit sind es etwas viele obere Kategorien. Diese muss ich dann im nächsten Schritt ab Montag auf drei begrenzen. Denn zu zwei „Page“-Oberseiten „Über mich“ und „Wissenswertes“ kommt noch Home, damit sich Besucher immer wieder nach Hause finden, sprich zur Startseite.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s