Effektiv die CSS-Style für AMP-Seiten anpassen - Guru 2.0
Effektiv die CSS-Style für AMP-Seiten anpassen

Effektiv die CSS-Style für AMP-Seiten anpassen

Detail des Eiffelturms bei Sonnenuntergang, Bild: microble.eu

Detail des Eiffelturms bei Sonnenuntergang, Bild: microble.eu

Meine AMP-Serie wächst und gedeiht. Jetzt wird es ja schon wieder ein wenig technischer. Wir haben schon die Einführung und auch die Probleme bei AMP für Entwickler kennengelernt. Die Fußzeile haben wir beim letzten Mal eingefügt und dieses Mal werden wir es ein wenig hübsch machen und einen CSS-Style einfügen.

Der CSS-Style für AMP Seiten

Einfach einen Style reinknallen ist ja nicht so leicht. Wir wollen ja unser AMP-Plugin weiterverwenden, aber auch update-sicher (also nicht bei jedem Update unsere Anpassungen verlieren oder neu eintragen müssen) bleiben. Es gibt ein paar wichtige Kleinigkeiten, die wir beachten müssen. AMP-Seiten müssen nicht hässlich sein. Wir dürfen diese Seiten ruhig einem ordentlichen CSS-Style versehen. Es gibt keinen externen CSS-Style bei AMP. Alle Stylesheets müssen inline im style-Element verzeichnet werden. Ein Stylesheet darf maximal 50.000 Byte groß sein, sonst ist die Seite nicht gültig. Wenn du auf diese Dinge aufpasst ist es kein Problem.

Einen Hook für den CSS-Style anwerfen

Wie gewohnt, naja beim letzten Post haben wir es zum ersten Mal verwendet, ergänzen wir unsere Themefunktionen in der functions.php. Vergiss ja nicht, dass du ein Child-Theme anlegst, denn sonst ist beim nächsten Update alles für die Katz. Ganz am Ende fügst du folgenden Quellcode ein und schon klappt es mit dem Style.

Fast klappt es, denn einen großen Fehler kannst du machen. In Zeile #3 und #19 siehst du, dass der PHP-Interpreter deaktiviert und wieder aktiviert wird. Direkt davor und danach siehst du auch die geschwungenen Klammern der PHP-Funktion. Und genau da liegt die große Falle! Zwischen diesen beiden Klammern darf nur ein CSS-Style notiert werden. Also die verschiedensten Regeln, du darfst auch bestehende Styles überschreiben und ergänzen, aber sonst nichts. Stell dir einfach vor, das die geschwungenen Klammern die Grenzen des style-Elements im head-Element der Seite sind.

Ich denke mal, du hast schon einige Zeit nach diesem Code-Snippet gesucht. Falls du jetzt Fragen oder Tipps hast, dann schreib ruhig einen Kommentar.

Blogheim.at Logo
Diese Website verwendet Cookies - nähere Informationen dazu finden Sie in unserer „Datenschutzerklärung“. Klicken Sie auf „Ich stimme zu“, um Cookies zu akzeptieren und unsere Webseite zu besuchen, oder klicken Sie auf „Cookie-Einstellungen“, um Ihre Cookies selbst zu verwalten.