Shortcodes sind Codes, welche in eckigen Klammern geschrieben werden und dann vorher definierte Funktionen aufrufen. Die hinter den Shortcodes versteckten Funktionen können zum Beispiel als Plugin oder direkt in der „functions.php“ Datei des Themes bereitgestellt werden.

Shortcodes sollten zentral z.B.: in functions.php initialisiert werden:

// Central location to create all shortcodes.
function us_shortcodes_init() {
	add_shortcode( 'us_loadImage', 'loadImage');
	add_shortcode( 'us_loadIcon', 'loadIcon');
	add_shortcode( 'us_zeigeUeberschrift', 'zeigeUeberschrift');
}
add_action( 'init', 'us_shortcodes_init' );

Der erste Parameter der Funktion „add_shortcode“ ist der Aufrufname des Shortcodes z.B.: „us_loadIcon„. Der zweite Parameter ist der Name der Funktion, die aufgerufen werden soll, wenn der Shortcode genutzt wird.

Damit von mir selbst erstellte Shortcodes erkennbar sind, fangen alle mit dem Prefix „us_“ an.

Shortcodes mit $atts – Parameter

[us_loadImage image="info.png"]

Dieser selbst erstellte Shortcode wird z.B.: in der functions.php Datei des Themes verarbeitet:

function loadImage($atts){
	$a = shortcode_atts( array(
        'image' => ''
    ), $atts );
	$imagePath = get_template_directory_uri() . '/images/' . $atts['image'];
	return '<img src="'.$imagePath.'"/>';
}

Der Shortcode benötigt einen Parameter mit dem Namen „image=“, der den Namen des zu darstellenden Bildes beinhaltet.

Shortcodes mit $content – Parameter

Shortcodes können auch „Content“ also Inhalt haben. Diesen Inhalt schreibt man dann zwischen einen sich öffnenden und sich schließenden Shortcode-Tag:

[us_zeigeUeberschrift] Meine Überschrift [/us_zeigeUeberschrift]

Wieder in functions.php wird dafür eine Funktion definiert:

// der "$atts" Parameter muss mit angegeben sein
function zeigeUeberschrift( $atts, $content = null ) {
	return '<h1>'.$content.'</h1>';
}

Dieser Shortcode gibt den vom Nutzer eingegebenen Text als Überschrift der Größe 1 aus.

Anwendungsgebiete

Das Theme unsere-schule nutzt z.B.: Shortcodes um SVG Icons auf der Webseite darzustellen. Hierzu wurde folgender Shortcode in functions.php eingefügt:

// [us_loadIcon icon="icon-home"]
function loadIcon($atts = [], $content = null, $tag = ''){
	$a = shortcode_atts( array(
		'icon' => '',
		'color' => 'currentColor',
		'width' => '1em',
		'heigth' => '1em'

	), $atts );
	$iconPath = get_template_directory_uri() . '/icons/symbol-defs.svg#' . $a['icon'];
	return '<svg class="icon icon-home" style="color: '.$a['color'].'; width: '.$a['width'].'; height: '.$a['heigth'].';"><use href="'.$iconPath.'"></use></svg>';
}

Dem Shortcode kann man einige Parameter übergeben, die dann die Standardparameter in der Funktion überschreiben. Das Ergebnis sieht dann so aus:

// Shortcode wurde in einem Überschriftenblock eingefügt:
[us_loadIcon icon="icon-home" color="blue" ] Hallo mein Name ist Richard 

Die SVG Icons sind in einer „symbol-defs.svg“ Datei und wurden mit Hilfe der Webseite IcoMoon-App erstellt.

Links

• eigene Icons mit IcoMoon-App erstellen