Dieser Beitrag wurde vor über einem Jahr geschrieben. Es kann daher sein, dass er nicht mehr aktuell ist.

Einen eigenen Shortcode erstellen und in WordPress verwenden

Wenn ein Code oder eine bestimmter Stil auf der eigenen Webseite häufig zum Einsatz kommt, kann man dies sehr schön unter WordPress mit Shortcodes lösen. Anstatt jedes mal einen bestimmten Code zB für einen Werbeblock direkt einzufügen, reicht es, bei einem dementsprechend vorhandenen Shortcode in den Beitrag nur den Shortcode in Form von zB [short] einzufügen. Natürlich können wir auch den Shortcode direkt in das Theme an der gewünschten Stelle einfügen mit zB folgendem Code.

<?php echo do_shortcode( '[short]' ); ?>

 

Eine sehr praktische Funktion, die auch in vielen Plugins zum Einsatz kommt. Kontaktformulare oder Slider werden, wenn es sich um ein Plugin handelt und sie nicht direkt im Theme schon integriert sind, normalerweise über eben solche Shortcodes eingebunden.

Wie erstellen wir uns selber so einen Shortcode?

Hierzu versorgt uns, wie sonst auch, die WordPress Codex Seite hier und hier mit den dementsprechenden Infos. Auf GenerateWp können wir uns sogar einige Beispiele ansehen, welche auch direkt in die functions.php des Themes oder in Form eines eigenen Plugins übernommen werden können.

Shortcodes können Selbstschließend [short] sein oder Umschließend [short]Der Shortcode[/short]. Natürlich ist es auch noch möglich bei beiden Varianten zusätzliche Variablen hinzuzufügen in Form von [short wert="1" farbe="rot"].

Ein Shortcode Beispiel zum Einfügen eines Blindtextes (Lorem Ipsum)

function zoman_lorem_shortcode ( $atts ) {
    return '<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>';
}
add_shortcode( 'lorem', 'zoman_lorem_shortcode' );

 

Wenn wir nun [lorem] in einem Beitrag hinzufügen wird automatisch der Blindtext mit return eingefügt. Diesen Blindtext könnten wir natürlich auch noch mit einem eigenem Styling anzeigen lassen. Mit folgendem Codebeispiel wird der Blindtext nun mit der Textfarbe Rot angezeigt.

Shortcode-erstellen-1

function zoman_lorem_shortcode ( $atts ) {
    return '<p style="color:red">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>';
}
add_shortcode( 'lorem', 'zoman_lorem_shortcode' );

 

Shortcode-erstellen-2

Variablen in Shortcodes bereitstellen

Oftmals ist es durchaus nützlich auch mit Variablen in Shortcodes zu arbeiten. Bei diesem Lorem-Beispiel könnte man daher einen Wert für die Textfarbe bereitstellen. Folgender Code hilft uns dabei.

function zoman_lorem_shortcode ( $atts ) {
    extract( shortcode_atts(
        array( 
            'color' => '',
        ), $atts ) );
    return '<span style="color:' . $color .  '">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>';
}
add_shortcode( 'lorem', 'zoman_lorem_shortcode' );

 

Mit einem Shortcode [lorem color="green"] wäre der Text zB Grün. Natürlich können wir die Farbe auch im Hexadezimal Format einfügen, so etwa [lorem color="#e6e6e6"] für ein helles Grau bzw. im RGB Format mit [lorem color="rgb(255,165,0"] für zB Orange oder zusätzlich auch noch mit Transparenz mit dem RGBA Format [lorem color="rgba(255,165,0,.6)"] mit zB nur 60% Deckkraft.

Einen umschließenden Shortcode erstellen

Wenn wir einen Teil des Inhaltes mittels eines Shortcodes anders darstellen wollen bietet sich ein umschließender Shortcode an. Erstellen wir ein Beispiel hierzu.

Shortcode-erstellen-3

function zoman_upper_shortcode ( $atts, $content = null ) {
    return '<span style="text-transform:uppercase">' . $content . '</span>';
}
add_shortcode( 'upper', 'zoman_upper_shortcode' );

 

Dieses Codebeispiel mit einem umschließenden Shortcode wird so angewendet – [upper]Text in Großschreibung[/upper]. Als Ergebnis erhalten wir den Text innerhalb des Shortcodes komplett in Großschreibung.

Shortcode-erstellen-4

Ein Shortcode im Shortcode – Auch das ist möglich

Für den einen sehr praktisch, ein anderer braucht es womöglich nie, aber auch innerhalb eines Shortcodes können wir Shortcodes verwenden. Jedoch müssen wir den Code noch ein bisschen erweitern, damit das möglich wird.

function zoman_upper_shortcode ( $atts, $content = null ) {
    return '<span style="text-transform:uppercase">' . do_shortcode( $content ) . '</span>';
}
add_shortcode( 'upper', 'zoman_upper_shortcode' );

 

Mit [upper]Text in [lorem color="blue"] Großschreibung[/upper] im Artikel erhalten wir dabei folgende Ausgabe.

Shortcode-erstellen-5

WordPress Funktionen oder PHP Code in Shortcodes verwenden

Ein Shortcode wäre nur halb so praktisch, wenn wir nicht auch noch PHP in Shortcodes verwenden könnten. Damit der PHP Code oder die gewünschte WordPress Funktion auch an der gewünschten Stelle angezeigt, müssen wir den Shortcode noch um die PHP Ausgabepufferung erweitern. Ein Beispiel für das einfügen des aktuellen Datums mit PHP.

function zoman_date() {
    echo date( 'j.n.Y' );
}

function zoman_date_shortcode ( $atts ) {
    ob_start();
    zoman_date();
    return ob_get_clean();
}
add_shortcode( 'date', 'zoman_date_shortcode' );

 

Shortcode-erstellen-7

Ohne Ausgabepufferung

Shortcode-erstellen-6

Mit Ausgabepufferung

Shortcode-erstellen-8

Wie man sieht kann man Shortcodes sehr universell einsetzen und man kann sich dadurch bei immer wiederkehrenden Funktionen durchaus das Arbeiten mit und in WordPress vereinfachen. Auch kann man mit einem kleinen zusätzlichen Codeschnippsel auch Shortcodes in den WordPress Widgets nutzen – Mehr dazu hier.


Schreibe einen Kommentar