Filter für caption-Shortcode in WordPress

Anzeige

Die Überschrift mag nicht sonderlich für sich sprechen und daher erkläre ich ein wenig mehr zum Thema und lege nicht nur einfach meine Code-Schnipsel ab.

Nutzt man den „Mediauploader" in WordPress nicht nur um das Bild hoch zuladen, sondern auch zur Integration in den Beitrag oder die Seite, dann wird, sobald man einen Bildtitel zum Bild hinterlegt, der Shortcode angelegt und in den Content eingefügt. Der Titel sollte aber gepflegt werden, da er als alt-Attribut zum img-Tag genutzt wird.

Nicht jeder Nutzer ist mit dieser Ausgabe zufrieden und ich zeige mal, wie man darauf zugreifen kann und die Ausgabe ändert.

Ist zum Bild ein Titel vorhanden, dann wird der Shortcode immer eingefügt, der dann einen div zur Ausgabe bringt, der beispielsweise wie folgt aussieht.

<div id="attachment_34" class="wp-caption alignnone" style="width: 160px"><img class="size-thumbnail wp-image-34" title="1" src="pfad_zum_bild" alt="Caption, Bildtitel" width="150" height="150" />
<p class="wp-caption-text">Caption, Bildtitel</p>
</div>

Nun möchten aber nicht alle Nutzer diesen Shortcode nutzen und die Ausgabe daran anpassen. Man kann im Grunde mit drei Möglichkeiten die Ausgabe beeinflussen.

1. Nach dem Einfügen händisch löschen oder eigenes HTML einbauen
2. CSS erweitern und den entstehenden div ausblenden
3. Per Hook eingreifen und den div vor der Ausgabe filtern oder an die eigenen Bedürfnisse anpassen

Aus meiner Sicht scheidet Punkt 2 sofort aus, da er nur im Zusammenhang mit CSS funktioniert und damit das Markup noch immer so unzureichend bleibt.
Den ersten Punkt kann man ebenso nicht sauber vertreten, da Risiko beim Vergessen und der Mehraufwand beim Erstellen von Artikeln nicht wirklich angenehm ist.

Widmen wir uns daher Punkt 3 der ausgewählten Möglichkeiten und greifen mit ein wenig PHP ein. Auch dabei gibt es diverse Ansätze und so möchte ich drei recht unterschiedliche Wege zeigen und die Entscheidung zur Nutzung überlasse ich dann euch. Je nach Anforderung wird das sicher auch sehr verschieden ist.

Schön beim Einfügen löschen

WordPress fragt den Filter disable_captions ab und lässt damit den Shortcode erstellen: if ( ! apply_filters( 'disable_captions', '' ) ) {. Hier setze ich an und gebe eine Funktion ein, die ein true zurück gibt. Damit geht kein Shortcode mehr in der Editor beim Bilder einfügen.

add_filter( 'disable_captions', create_function('$a', 'return true;') );

Die Funktion legt man entweder in einem Plugin ab oder in der functions.php des Themes.

Filtern in der Ausgabe

Nun will man aber eventuell nicht immer den Shortcode entfernt haben, und in einigen Sichten des Frontend die Möglichkeit schon nutzen. Das heißt, der Shortcode darf nur in einigen Fällen genutzt werden.
Auch dafür hat WordPress eine Funktion hinterlegt, die ich im folgenden Anspreche und direkt im Frontend keinen div erzeugen lasse.

img_caption_shortcode($attr, $content = null)
The Caption shortcode.

Allows a plugin to replace the content that would otherwise be returned. The
filter is 'img_caption_shortcode' and passes an empty string, the attr
parameter and the content parameter values.

The supported attributes for the shortcode are 'id', 'align', 'width', and
'caption'.

Das Zitat entstammt der Beschreibung der Funktion und lässt schon die erwünschen Möglichkeiten hoffen.

add_filter( 'img_caption_shortcode', create_function('$a, $b, $c', 'return $c;'), 10, 3 );

Auch diese Funktion legt man in der functions.php des Themes oder in einem Plugin ab. Ab nun wird im Frontend keine Markup mehr aus dem Shortcode erzeugt.

Diesen Filter kann man natürlich auch mit diversen Conditional Tags kombinieren und so den Filter nur anwenden, wenn es sich um eine bestimmte Ausgabe handelt. Das folgenden Beispiel filtert daher nur, wenn man auf der Homepage des Blog ist.

if ( is_home() )
add_filter( 'img_caption_shortcode', create_function('$a, $b, $c', 'return $c;'), 10, 3 );

Eigenes HTML liefern

Hat man einen gewissen Anspruch im Markup, dann helfen aber auch diese Funktionen nicht und man muss das eigene Markup generieren. Als Beispiel gebe ich mal den Titel zum Bild in einer Definitionsliste aus. Diese Möglichkeit gefällt mir am besten und wurde schon in den Kommentaren eines älteren Artikel diskutiert.

Ich zeige mal eine einfache Lösung, die man gern an seine Bedürfnisse anpassen kann. Das entstehende Markup ist damit frei nutzbar und die möglichen Variablen habe ich drin, so dass das Anpassen nicht so schwer sein sollte. Daraus resultiert aber auch, dass das entstanden Markup recht umfangreich ist, was aber nur der Demo nutzt und so alle Möglichkeiten zeigt. Ansonsten sollte man aus meiner Sciht zum Beispiel kein Inline-Style in der Definitionsliste haben.

Im Ergebnis der folgenden Funktion, die wieder in ein Plugin oder die functions.php ausgelagert werden muss, erzeugt dann beispielhaft das folgende Markup.

<dl id="attachment_34" class="wp-caption alignnone" style="width: 160px">
<dt><a href="pfad_zum_bild"><img class="size-thumbnail wp-image-34" title="1" src="pfad_zum_bild" alt="Caption, Bildtitel" width="150" height="150" /></a></dt>
<dd class="wp-caption-text">Caption, Bildtitel</dd>
</dl>

function fb_img_caption_shortcode($attr, $content = null) {

// Allow plugins/themes to override the default caption template.
$output = apply_filters('img_caption_shortcode', '', $attr, $content);
if ( $output != '' )
return $output;

extract(shortcode_atts(array(
'id'	=> '',
'align'	=> 'alignnone',
'width'	=> '',
'caption' => ''
), $attr));

if ( 1 > (int) $width || empty($caption) )
return $content;

if ( $id ) $id = 'id="' . $id . '" ';

return '<dl ' . $id . 'class="wp-caption ' . $align . '" style="width: ' . (10 + (int) $width) . 'px"><dt>'
. do_shortcode( $content ) . '</dt><dd class="wp-caption-text">' . $caption . '</dd></dl>';
}

add_shortcode('wp_caption', 'fb_img_caption_shortcode');
add_shortcode('caption', 'fb_img_caption_shortcode');

Ich hoffe, dass damit dem einen oder anderen Webdesigner der Eingriff leichter fällt und das tägliche Fluchen über dieses Thema ein wenig abnimmt.
Anregungen, Kritik und Fehlerhinweise sind wie immer erwünscht und der Artikel stellt sich wieder eurem kritischen Auge.