Ausgangslage
Um ein Wort separat mit CSS zu formatieren, muss im HTML ein SPAN-Tag ergänzt werden. Diesem wird eine CSS-Klasse zugewiesen. Der Inhalt der CSS-Klasse ist erstmal nicht relevant. So kann z.B. der HTML-Code aussehen, um das Wort ‚Wort‘ hervorzuheben:
<p>Dieses <span class="highlight-yellow">Wort</span> ist markiert.</p>Dieses Wort ist markiert.
‚Wort‘ ist nun zusätzlich formatiert. In diesem Beispiel mit einem Textmarker-Effekt. Das Einfügen im HTML ist aber eine kleine Fummelei.
Ausserdem ist der Effekt im Backend von WordPress im visuellen Modus nicht sichtbar, was das Ganze sehr unübersichtlich macht, weil man so nicht sieht wo Ergänzungen gemacht wurden.
Umsetzung in WordPress
Deshalb helfen wir hier mit einem Shortcode nach. Dieser ist im visuellen Modus gut sichtbar und fügt den zusätzlichen Code im HTML ein.
Dieses [textmarker typ=’highlight‘ klasse=’yellow‘ text=’Wort‘] ist markiert.
Der Shortcode dazu lautet:
add_shortcode('textmarker', 'view_rad_textmarker');
function view_rad_textmarker( $atts ) {
$atts = shortcode_atts(
array(
'typ' => '',
'text' => '',
'klasse' => '',
),
$atts,
'textmarker'
);
$out = '<span class="'.esc_attr( $atts['typ'] ).'-' . esc_attr( $atts['klasse'] ) . '">' . esc_attr( $atts['text'] ) . '</span>';
return $out;
}Und so schaut es dann aus:
Dieses Wort ist markiert.