Eine kurze Notiz für alle, die gerne CodePens in ihren WordPress-Blog einfügen und dies über das Plugin von Chris Coyier tun. Bei mir wollte das Plugin nicht so recht funktionieren. Es hat nicht den Pen ausgegeben, sondern nur den Inhalt des Shortcodes und es hat gleichzeitig die Seite zerstört.
Problem
Ich verwende zum Einfügen des Pens den WordPress Shortcode, den man in den Embed-Optionen bei jedem Pen kopieren kann. Anstatt des Pens wird der Inhalt des Shortcodes etwas kryptisch dargestellt und der restliche Inhalt der Seite fehlt.
Die Analyse des Quelltexts der Seite ergab, dass die Apostroph-Zeichen am Ende von URLs (innerhalb des kopierten Snippets) von WordPress in die HTML-Entität (‘) für das einfache linke Anführungszeichen umgewandelt werden.
<p class=’codepen‘ data-height=’266′ data-theme-id=’15823′ data-slug-hash=’YXVwGm‘ data-default-tab=’result‘ data-animations=’run‘> See the Pen <a href=’http://codepen.io/designerzone/pen/YXVwGm/‘>Natural Stacking Order</a> by Markus Winkelmann (<a href=’http://codepen.io/designerzone‘>@designerzone</a>) on <a href=’http://codepen.io‘>CodePen</a>.</p><script async src=“//codepen.io/assets/embed/ei.js“></script>
Lösung
Ich konnte mir lange nicht erklären, warum das passiert. Irgendwann bin ich auf die Funktion wptexturize von WordPress gestoßen, die standardmäßig aktiv ist. Diese wandelt bestimmte Zeichen in typografisch korrektere Versionen um und gilt auch für Shortcodes. Zum Glück gibt es den no_texturize_shortcodes-Filter, mit dem man den CodePen-Shortcode davon ausschließen kann.
Hierfür fügt ihr einfach folgendes Snippet in eure functions.php ein:
add_filter( 'no_texturize_shortcodes', 'shortcodes_to_exempt_from_wptexturize' );
function shortcodes_to_exempt_from_wptexturize( $shortcodes ) {
$shortcodes[] = 'codepen_embed';
return $shortcodes;
}
Ursache
Ich habe übrigens folgende Zeile im Plugin-Quellcode für das Verhalten ausfindig gemacht:
$content = str_replace(‚&#8217;‘, "’", html_entity_decode($content));
&#8217; steht für das rechte einzelne Anführungszeichen. wptexturizescheint nun bei den URLs im Code das erste Anführungszeichen mit einem rechten einfachen Anführungszeichen zu ersetzen und das zweite Anführungszeichen mit einem linken. Der Code von Chris Coyier ersetzt aber nur das rechte einfache Anführungszeichen mit einem normalen Apostroph.
Als Werbeagentur helfen wir auch gerne mit Webproblemen!
Kommentare