Eigene Shortcodes in WordPress erstellen

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 10 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet ...

Shortcodes sind eine schöne, einfache Art, um WordPress mit HTML-lastigen Einbettungen zu versehen. Der große Vorteil ist dabei, dass die womöglich sehr komplexen Codezeilen einfach durch Shortcodes ersetzt werden, die auch für Laien verständlich sind. In der Praxis stößt man dabei aber auf ein paar Probleme. Hier sind ein paar Lösungsansätze.

Der Codex enthält ein einfaches Beispiel für einen Shortcode in dieser Art:

/**
* Intro Shortcode
*/
function intro_shortcode( $atts, $content = null ) {
  return '<div class="intro">' . $content . '</div>';
}
add_shortcode( 'intro', 'intro_shortcode' );

Soll der Shortcode noch weitere Shortcodes enthalten können, so kann dies durch einen Aufruf von do_shortcode erreicht werden:

/**
* Intro Shortcode
*/
function intro_shortcode( $atts, $content = null ) {
  return '<div class="intro">' . do_shortcode($content) . '</div>';
}
add_shortcode( 'intro', 'intro_shortcode' );

Auch das Übergeben von Parametern ist möglich:

function caption_shortcode( $atts, $content = null ) {
  extract( shortcode_atts( array( 'class' => 'caption',), $atts ) );
  return '<span class="' . esc_attr($class) . '">' . $content . '</span>';
}

Dabei aber immer an das korrekte Maskieren denken!

Gibt es nur einen Return-Wert ohne Einfügen des Inhalts gibt es eigentlich keine Probleme, auch für Inline-Auszeichnungen ist das hervorragend geeignet. Sobald aber ein Absatzende in dem Shortcode-Inhalt existiert gibt es ein Problem.

<div class="intro">Nicht lange darauf kam Kay mit großen Fausthandschuhen und seinem Schlitten auf dem Rücken. Er flüsterte Gerda in die Ohren: Ich habe Erlaubnis bekommen, auf den großen Platz zu fahren, wo die Anderen spielen und fort war er.</p>
<p>Nicht lange darauf kam Kay mit großen Fausthandschuhen und seinem Schlitten auf dem Rücken. Er flüsterte Gerda in die Ohren: Ich habe Erlaubnis bekommen, auf den großen Platz zu fahren, wo die Anderen spielen und fort war er.</div>

Beim Absatzende wird korrekterweise der dafür vorgesehene „/p“-Tag gesetzt, analog dazu beim Absatz-Anfang ein „p“-Tag, aber gekapselt ist das Ganze in einem DIV… – ein HTML-Fehler.

Dieser Core-Bug ist bekannt: 12061, 24846. Und die Theme-Entwickler sind kreativ beim Umgehen des Problems.

Da wird versucht die überflüssigen Absätze zu entfernen, oder die Filterreihenfolge zu verändern.

Die einfachste Lösung schien mir allerdings einfach die Absätze beim Shortcode mit einzubauen:

/**
 * Intro Shortcode
 */
function intro_shortcode( $atts, $content = null ) {
	return '<div class="intro"><p>' . $content . '</p></div>';
}
add_shortcode( 'intro', 'intro_shortcode' );	

Und das CSS für die Änderungen entsprechend anzupassen:

.intro p {
	color: #458792;
	font-size: 200% !important;
	 }

Soll das Ganze Theme-übergreifend erhalten bleiben, ist der Code am besten in einem Plugin aufgehoben, ansonsten kommt er in die functions.php des Themes (oder besser per Code Snippet noch in ein Toolbox-Modul).

Damit es für den Nutzer noch einfacher wird, kann der neue Shortcode auch direkt in den Editor eingebaut werden. Wer den Code dafür nicht selber schreiben will und es zudem etwas flexibler und komfortabler haben möchte, der nutzt dazu das Plugin AddQuicktag von Frank Bültge.

Schreibfaule Entwickler (und hey, wer ist das nicht) finden hier einen kleinen Shortcode-Generator.

Habe ich etwas übersehen? Gibt es noch weitere Probleme oder bessere Wege für Shortcodes, schreibe es mir in den Kommentaren!

5 Antworten auf Eigene Shortcodes in WordPress erstellen

  1. Pingback: Shortcodes und mehr | WP Meetup Hamburg

  2. Super Artikel. Sehr aufschlußreich. 🙂

  3. Pingback: Wozu sind Shortcodes in WordPress gut? Die Erklärung - √

  4. Hallo! Ich habe eine wahrscheinlich ganz blöde Frage, da ich noch Anfängerin in all diesen Sachen bin… Man möge es mir verzeihen 🙂 Ich habe ein widget mittels Shortcode auf eine wordpress Seite eingebunden, soweit, so gut, aber das Widget missachtet einige Einstellungen, die ich getroffen habe. Die „Werte“ bzw. Spezifikationen der Parameter (weiß nicht, ob das der korrekte Begriff ist, aber Sie wissen sicher, was ich meine ;-)), wie zB, dass ich die Temperatur in Grad C angezeigt haben möchte und nicht in Fahrenheit, stehen auch brav im Shortcode drin, werden aber gnadenlos missachtet.

    Ich weiß, dass man bei css die Möglichkeit hat, die Themes zB durch „!important“ auszutricksen und zu erzwingen, dass ein bestimmter Wert angenommen wird – wie mache ich das aber in einem Shortcode?

    Hier ist mal mein Shortcode-Beispiel, aus dem Wetter Widget „Awesome weather widget“:

    [intense_widget widget=“AwesomeWeatherWidget“ widget_settings=“location=Seychelles&owm_city_id=241131&override_title=&units=C&size=tall&forecast_days=2&background=&custom_bg_color=#6997bf&text_color=#000000&widget_title=“]

    Ich habe also eingegeben, dass er 2 Tage Vorhersage angeben soll, und zwar in Grad Celsius, Schriftfarbe Schwarz und einen Hintergrund, der eine Art blau ist. Stattdessen werden wie default mäßig 5 Tage in Fahrenheit angegeben, Schriftfarbe weiß und himbeerfarbener Hintergrund……. Hilfe! Wie kann ich das Ding dazu zwingen, das zu tun, was ich von ihm will?

    Vielen Dank,
    herzliche Grüße,
    Eva

    • Das hat eigentlich überhaupt nichts mit dem Artikel zu tun, da geht es um eigene Shortcodes. Das wäre im Supportforum des Plugins oder im deutschen allgemeinen Supportforum daher besser aufgehoben.

      Wenn du schreibst, dass es sich um das Awesome weather widget handelt, dann passt der Shortcode überhaupt nicht dazu.

      Folgt man dem Link auf der Pluginseite zur Dokumentation der Shortcodes oder schaut sich das Beispiel an, dann müsste das eigentlich so aussehen:

      [awesome-weather location="Seychelles" units="C" owm_city_id="241131" size="tall" forecast_days="2" custom_bg_color="#6997bf" text_color="#000"]

      Wie kommst du auf das „intense_widget“? Kommt das vielleicht hiervon: https://intenseplugin.com/shortcodes/widget-shortcode/?

      Wenn es mit der korrekten Original-Fassung nicht klappt, dann frage am besten den Support des Intense-Plugins, wie man das korrekt übergibt.