Embed-Iframe in WordPress anpassen
In meinem ersten Artikel zum Theme WordPress Embeds habe ich am Ende ja schon erwähnt, dass es die Möglichkeit gibt, das Aussehen des eingebetteten Iframe über den Hook „embed_head“ zu ändern.
Dazu habe ich hier ein Beispiel zusammengestelt:
Das PHP-Skript (WP-custom_embed_header.php) gehört in die functions.php eures Themes oder Child-Themes. In dem Skript ersetzte ich die Schrift „Open Sans“ durch die „Droid“, die wir auch sonst auf unserer Seite verwenden und binde ein eigenes Stylesheet ein.
Das Beispiel-CSS (wp-style_embed.css) findet Ihr auch in dem Beispiel. Dort können auch die Farben der Icons angepasst werden, die als SVGs eingebunden sind. Diese Datei muss im Theme- oder Child-Theme-Ordner abgelegt werden.
Bei dem jeweiligen Background-Image müsste Ihr nur folgenden Stelle suchen
>> fill%3D%27%23
Das ist die URL-encodierte Schreibweise für
>> fill=“#
Die folgenden sechs Ziffern sind dann die Farbe des Icons als HEX-Wert.
Und so sieht dann der angepasste Embed aus:
Einklang Feinkost – Vegetarische Feinkost mit frischen Kräutern
Fitnessgeist|11. Januar 2019
Hallo!
In welcher Datei kann ich bitte das CSS ändern?
Christian|11. Januar 2019
Hallo, die erste Funktion (goyippi_embed_header) gehört in die functions.php des Themes oder Child-Themes. Das zweite Beispiel muss als CSS-Datei im Theme- oder Child-Theme-Ordner abgelegt werden.
ankegro|16. August 2019
Dickes Danke – letzten Tag vorm Urlaub gerettet!
Nu kann ich die unansehnlichen Woo-Produkt-Embeds fein layouten!