Wordpress Problem mit code und pre Tags

Viele Wordpress-Benutzer haben massive Probleme mit dem code bzw pre tag, da beide oftmals nur sehr umständlich und je nach Theme sogar gar nicht das tun was man gerne hätte.

Das Problem: in code und pre Tags wird html ausgeführt und nicht einfach nur dargestellt. Es gibt da die umständliche Lösung bei der man alle relevanten Zeichen von Hand umwandelt, das ist aber anstrengend und kostet viel Zeit.

Ich ziele darauf ab den pre (oder code) Tag zu verwenden und das ohne Einschränkungen von Wordpress.

Zuerst wird der Pre Tag (wenn er es nicht schon sein sollte), per CSS gestyled damit er im Text auch hervorgehoben wird, hier lasse ich jedem freie Hand biete aber ein simples Beispiel welches unter Design – Editor in der style.css eingetragen werden kann, sucht vorher ob das pre schon irgendwo gestyled wird und ersetzt es in dem Fall!

pre {
	background: #EBEBEB;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

Nun wird in die functions.php eures Themes (ebenfalls über Design – Editor zu erreichen) folgendes ganz unten reinkopiert
/*pre tag erziehen damit es html anzeigt und nicht ausführt*/
add_filter( 'the_content', 'pre_content_filter', 0 );

function pre_content_filter( $content ) {
return preg_replace_callback( '|<pre.*>(.*)</pre|isU' , 'convert_pre_entities', $content );
}

function convert_pre_entities( $matches ) {
return str_replace( $matches[1], htmlentities( $matches[1] ), $matches[0] );
}

Jetzt werden alle HTML-Codes ebenfalls korrekt angezeigt.

PS ein Problem das ich eben beim Schreiben des Artikels hatte: wenn man innerhalb eines pre Tags versucht etwas darzustellen was ebenfalls einen pre tag enthält zerschießt sich alles, daher ist bei mir um diesen Part der code Tag im Einsatz.

Genau die selbe Bearbeitung erfolgt nun nocheinmal (bestenfalls direkt darunter) für das code Tag, welches ebenfalls HTML einfach ausführt anstatt es anzuzeigen.

/*code tag erziehen damit es html anzeigt und nicht ausführt*/
add_filter( 'the_content', 'code_content_filter', 0 );

function code_content_filter( $content ) {
	return preg_replace_callback( '|<code.*>(.*)</code|isU' , 'convert_pre_entities', $content );
}

function convert_code_entities( $matches ) {
	return str_replace( $matches[1], htmlentities( $matches[1] ), $matches[0] );
}

Anschließend sollten alle code und pre Tags HTML-Code anzeigen anstatt ihn auszuführen.

Schreibe einen Kommentar