Kategorien
Development

Einfachen Bild-Shortcode (Responsive) für WordPress erstellen

Ab und zu verwende ich Bilder aus der Mediathek in HTML-Seiten in einem WordPress-System. Bei Seiten mit speziellen Formatierungen usw. kann das durchaus mal sinnvoll sein. Nun kann man zwar mit den hauseigenen Mitteln von WordPress einen img -Tag generieren lassen, doch ist dieser wenig flexibel, da er die komplette Bild-URL beinhaltet, und enthält dieser (Stand: Feb-2017) noch kein srcset  und sites -Attribut, was für responsive Webseiten durchaus von Vorteil ist.

Die Lösung: Ein eigener Shortcode

Viel kürzer und schöner, zudem flexibler und funktionsreicher, ist ein WordPress-Shortcode/Shorttag. WordPress selber demonstriert das zB. anhand des Gallery -Shortcodes. Für einzelne Bilder bietet das System bisher aber noch keine Lösung, dafür aber für zahlreiche andere Anwendungen.

Einen img -Shortcode selber zu definieren ist allerdings nicht schwer:

Definiert wird der Shortcode in der functions.php-Datei im Ordner des aktuell verwendeten Themes. Hier fügt ihr am Ende einfach folgenden Code ein:

<?php

add_shortcode( 'img', 'image_shortcode' );
function image_shortcode($attr) {
    $args = shortcode_atts(
        array(
            'id' => '',
        ),
        $attr,
        'img'
    );
       
    return wp_get_attachment_image($args['id']);
}

?>

Was passiert hier? Kurz Erklärt!

Am Anfang wird über die Funktion add_shortcode  ein neuer Shortcode registriert. Nun weiß WordPress also, dass es auf diesen achten muss. Der Name, nach dem WordPress Ausschau hält, ist das erste Argument. Findet WordPress einen solchen, ruft es zur Verarbeitung die Methode auf, deren Namen im zweiten Argument angegeben wurde.

Nun definieren wir eben diese Funktion, die dann den Shortcode verarbeiten soll. Mit Hilfe der shortcode_atts -Funktion extrahieren wir erstmal die Parameter, in diesem Fall nur eine id eines Bildes. Alternativ könnte man hier durchaus zB. auch einen Pfad oder ähnliches übergeben. Mit Hilfe der ID verwenden wir die WordPress eigene Funktion wp_get_attachment_image  (Dokumentation) um uns einen <img> -Tag generieren zu lassen. Das könnten wir alternativ natürlich auch selber machen und dem Bild zB. eine eigene CSS-Klasse, eine Bildunterschrift oder ähnliches zuweisen. In diesem Fall belassen wir es aber bei dieser sehr einfachen Funktionsweise.

Das war’s auch schon! Das Ergebnis wird zurückgegeben und der eigene Shortcode ist fertig!

Anwendung

Fast überall könnt ihr diesen Shortcode nun einsetzen. Im Post könnt ihr nun einfach mit folgender Zeile das Bild mit der id 1234 einbinden:

[img id=1234]

Das war’s auch schon! Da WordPress seit der Version 4.4 intern auch mit responsiven Bildern arbeitet, gibt es hier von Haus aus einen entsprechenden  <img> -Tag aus. Auf die Notwendigkeit dessen usw. will ich an dieser Stelle nicht eingehen, da es das Thema etwas sprengen würde.

Feedback

Ich hoffe ich konnte euch etwas helfen. Findet ihr Anwendung für diesen Code? Wie habt ihr ihn vielleicht noch optimiert? Denkbar wären zB. Abwandlungen für Titelbilder, Thumbnails, kreisförmige Bilder, Avatare und vieles mehr. Schreibt es doch wenn ihr wollt in die Kommentare!

Von Luke

Blogautor, Webdesigner, Programmierer, Tontechniker, Kameramann, Musiker, Christ, und vieles mehr

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.