Grav Tutorial: Custom Shortcodes

Lesedauer 4 Minuten

Das folgende Tutorial zeigt, wie man in Grav auf Einfache Weise eigene Shortcodes anlegen kann, um die Eingabe von Inhalten in Grav zu beschleunigen.

Inhaltsverzeichnis:

Als Beispiel aus der Praxis möchten wir in Grav ein Bild mittels Shortcodes links- oder rechtsbündig anordnen, so dass der Text um das Bild herum fliesst. Dazu benötigen wir Shortcodes, die das Bild in ein DIV einbetten und den Stil flow:left bzw. flow:right zuweisen. Ganz ohne Styles sieht das erst mal so aus:

Das Bild hängt ziemlich verloren irgendwo im Text und es gibt keinen Abstand zwischen Text und Bild.

Im Grav Backend sieht der aktuelle Zustand so aus:

Eigene Shortcodes in Grav mit dem Shortcode Core Plugin

Damit wir für unsere Grav Custom Shortcodes kein eigenes Grav Plugin schreiben müssen, installieren wir ein Plugin, welches uns die meiste Arbeit abnimmt un den gesamten Workflow vereinfacht: Das Grav Shortcode Core Plugin:

Damit wir eigene Shortcodes in PHP definieren können, muss dem Plugin mitgeteilt werden, wo unsere PHP-Dateien zu finden sind. Das geschieht in der Konfiguration des Grav Shortcode Core Plugins, im Feld Custom Shortcodes:

Grav Shortcodes in PHP definieren

Im Ordner /user/custom/shortcodes erzeugen wir nun eine Datei namens LFloatShortcode.php. Hierbei bitte auf die exakte Gross-Kleinschreibung achten. Die Datei hat den folgenden Inhalt:

<?php
namespace Grav\Plugin\Shortcodes;

use Thunder\Shortcode\Shortcode\ShortcodeInterface;

class LFloatShortcode extends Shortcode
{
    public function init()
    {
        $this->shortcode->getHandlers()->add('lfloat', function(ShortcodeInterface $sc) {
            return '<div style="float:left;margin-right:20px">'.$sc->getContent().'</div>';
        });
    }
}

<?php

namespace Grav\Plugin\Shortcodes;

use Thunder\Shortcode\Shortcode\ShortcodeInterface;

class LFloatShortcode extends Shortcode

{

public function init()

{

$this->shortcode->getHandlers()->add('lfloat', function(ShortcodeInterface $sc) {

return '<div style="float:left;margin-right:20px">'.$sc->getContent().'</div>';

});

}

Im Grav Backend betten wir nun unser Bild in den soeben erstellten Shortcode “lfloat” ein:

Im Frontend von Grav ist nun das Bild linksbündig und der Text fliesst mit einem Abstand von 20px um das Bild herum:

Wie funktioniert der Grav Custom Shortcode im Detail?

Das Grundgerüst eines Grav Custom Shortcodes ist immer gleich:

<?php
namespace Grav\Plugin\Shortcodes;

use Thunder\Shortcode\Shortcode\ShortcodeInterface;

class LFloatShortcode extends Shortcode
{
    public function init()
    {
        $this->shortcode->getHandlers()->add('lfloat', function(ShortcodeInterface $sc) {
            return '<div style="float:left;margin-right:20px">'.$sc->getContent().'</div>';
        });
    }
}

<?php

namespace Grav\Plugin\Shortcodes;

use Thunder\Shortcode\Shortcode\ShortcodeInterface;

class LFloatShortcode extends Shortcode

{

public function init()

{

$this->shortcode->getHandlers()->add('lfloat', function(ShortcodeInterface $sc) {

return '<div style="float:left;margin-right:20px">'.$sc->getContent().'</div>';

});

}

Wirklich interessant sind die folgenden Zeilen:

Zeile 6: Der Klassenname, hier LFloatShortcode muss identisch mit dem Dateinamen sein, damit der PHP Autoloader die Klasse einbinden kann.
Zeile 10: Hier wird der Shortcode Handler hinzugefügt. Diese Zeile bestimmt auch den Namen des Shortcodes, hier “lfloat”.
Zeile 11: Diese Zeile gibt den veränderten Inhalt zwischen den Shortcode Tags [lfloat] und [/lfloat] zurück. In unserem Beispiel wird der original Inhalt in ein DIV eingebettet, welches das Bild links anordnet und rechts einen Rand von 20px hinzufügt.

Nach dem gleichen Prinzip legen wir nun eine 2. Datei namens RFloatShortcode.php an. Diese hat den folgenden Inhalt:

<?php
namespace Grav\Plugin\Shortcodes;

use Thunder\Shortcode\Shortcode\ShortcodeInterface;

class RFloatShortcode extends Shortcode
{
    public function init()
    {
        $this->shortcode->getHandlers()->add('rfloat', function(ShortcodeInterface $sc) {
            $p = $sc->getParameter('p1', false);
            return '<div style="float:right;margin-left:20px">'.$sc->getContent().'</div>';
        });
    }
}

<?php

namespace Grav\Plugin\Shortcodes;

use Thunder\Shortcode\Shortcode\ShortcodeInterface;

class RFloatShortcode extends Shortcode

{

public function init()

{

$this->shortcode->getHandlers()->add('rfloat', function(ShortcodeInterface $sc) {

$p = $sc->getParameter('p1', false);

return '<div style="float:right;margin-left:20px">'.$sc->getContent().'</div>';

});

}

Die Unterschiede:

Unser Shortcode heisst “rfloat”
Das Bild wird rechts angeordnet und es wird links ein Rand von 20px hinzugefügt.

Im Grav-Frontend sieht das Ergebnis ebenfalls perfekt aus:

Es geht noch mehr: Grav Shortcodes mit Parametern

Wer gerne komplexere Shortcodes mag, kann rfloat und lfloat auch zu einem einzigen Shortcode zusammenfassen, denkbar wäre z.B.

[float direction=”left”]…..[/float]

Von PHP aus können Parameter über die folgende Funktion abgegriffen werden:

$direction = $sc->getParameter(‘direction’, false);

Zu den Funktionsparametern: ‘direction’ ist der Name des Parameters und ‘false’ der Default-Wert, wenn der Parameter nicht angegeben wurde. Der komplette PHP-Code lautet:

<?php
namespace Grav\Plugin\Shortcodes;

use Thunder\Shortcode\Shortcode\ShortcodeInterface;

class FloatShortcode extends Shortcode
{
    public function init()
    {
        $this->shortcode->getHandlers()->add('float', function(ShortcodeInterface $sc) {
            $direction = $sc->getParameter('direction', false);
            if($direction === 'right') {
                 return '<div style="float:right;margin-left:20px">'.$sc->getContent().'</div>';
            }
            else {
                return '<div style="float:left;margin-right:20px">'.$sc->getContent().'</div>';
            }
        });
    }
}

<?php

namespace Grav\Plugin\Shortcodes;

use Thunder\Shortcode\Shortcode\ShortcodeInterface;

class FloatShortcode extends Shortcode

{

public function init()

{

$this->shortcode->getHandlers()->add('float', function(ShortcodeInterface $sc) {

$direction = $sc->getParameter('direction', false);

if($direction === 'right') {

return '<div style="float:right;margin-left:20px">'.$sc->getContent().'</div>';

}

else {

return '<div style="float:left;margin-right:20px">'.$sc->getContent().'</div>';

}

});

}

Mit Parameter direction=”left” wird das Bild links angeordnet, ohne Parameter rechts.

Somit sind der Phantasie und der Komplexität eigener Grav-Shortcodes keine Grenzen gesetzt.

Viel Spass beim Coden :-)

Hat Dir der Beitrag gefallen?

Wenn Du Fragen oder Anmerkungen zu diesem Beitrag hast, dann starte einen Kommentar. DANKE für Dein Feedback!

GRATIS: Hol Dir Pulse², die App zu meinem Blog.

0 Kommentare

Inline Feedbacks

View all comments

Name	Borlabs Cookie
Anbieter	Eigentümer dieser Website, keine Übermittlung von Daten and Dritte, Impressum
Zweck	Speichert die Einstellungen der Besucher, die in der Cookie Box ausgewählt wurden.
Cookie Name	borlabs-cookie
Cookie Laufzeit	1 Jahr

Name	Wordpress Application Firewall
Anbieter	Eigentümer dieser Website, keine Übermittlung von Daten and Dritte.
Zweck	Essentielles Session-Cookie um die Sicherheit unserer Website zu gewährleisten. Identifiziert den Besucher anhand einer anonymen ID um mehrfache Hackversuche wiederkehrender Besucher zu verhindern.
Cookie Name	icwp-wpsf

Name	Wordpress Login Session
Anbieter	Eigentümer dieser Website, keine Übermittlung von Daten and Dritte.
Zweck	Dieses Session Cookie speichert den Zustand unseres Login-Bereichs, um festzustellen ob ein User eingeloggt ist oder nicht.
Cookie Name	swpm_session

Name	PHP Session ID
Anbieter	Eigentümer dieser Website, keine Übermittlung von Daten and Dritte
Zweck	Dieses Session-Cookie wird benötigt um die einwandfreie Navigation auf unseren Seiten zu gewährleisten. Es identifiziert den Besucher anhand einer anonymen ID.
Cookie Name	PHPSESSID

Name	WooCommerce
Anbieter	Eigentümer dieser Website, keine Übermittlung von Daten and Dritte
Zweck	Dieses Cookie wird zur Funktionalität des WooCommerce Onlineshops benötigt.
Cookie Name	woocommerce_cart_hash, tk_ai

Akzeptieren	Google Analytics
Name	Google Analytics
Anbieter	Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Ireland
Zweck	Cookie von Google für Website-Analysen. Erzeugt statistische, anonymisierte Daten darüber, wie der Besucher die Website nutzt. Google Analytics hilft uns, unser Angebot auf unsere Besucher besser abstimmen zu können.
Datenschutzerklärung	https://policies.google.com/privacy
Cookie Name	_ga,_gat,_gid
Cookie Laufzeit	1 Jahre

Akzeptieren	Vimeo
Name	Vimeo
Anbieter	Vimeo Inc., 555 West 18th Street, New York, New York 10011, USA
Zweck	Wird verwendet, um Vimeo-Inhalte zu entsperren.
Datenschutzerklärung	https://vimeo.com/privacy
Host(s)	player.vimeo.com
Cookie Name	vuid
Cookie Laufzeit	2 Jahre

Akzeptieren	YouTube
Name	YouTube
Anbieter	Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Ireland
Zweck	Wird verwendet, um YouTube-Inhalte zu entsperren.
Datenschutzerklärung	https://policies.google.com/privacy
Host(s)	google.com
Cookie Name	NID
Cookie Laufzeit	6 Monate

Grav Tutorial: Custom Shortcodes

Eigene Shortcodes in Grav mit dem Shortcode Core Plugin

Grav Shortcodes in PHP definieren

Wie funktioniert der Grav Custom Shortcode im Detail?

Es geht noch mehr: Grav Shortcodes mit Parametern

Hat Dir der Beitrag gefallen?

Titel