WordPress Shortcodes selbst erstellen

WordPress Shortcodes selbst erstellen

Shortcodes sind im WordPress Content Management System (CMS) meist kleine Scripts mit Funktionalität, die in Plugins oder im eigenen Theme definiert sind und die in etwa so aussehen können:

[my-shortcode text="Hello World" color="#FF0000"]

Dieser Phantasie-Shortcode würde zum Beispiel - sofern er richtig programmiert wurde - den Text "Hello World" in Rot (Hex #FF0000) ausgeben.

Wie baut man sich selbst einen kleinen Shortcode?

Generell ist ein Shortcode eine in PHP geschriebene Funktion, die entweder in einem eigenen Plugin oder im jeweiligen Theme der Website definiert wird.

Achtung: es ist keine gute Idee, eigene Shortcodes einfach so in eines der Standard-Themes einzufügen - denn beim nächsten Update kann der eigene Code verloren gehen! Immer ein Child-Theme bauen - wie das geht verrät der [WordPress-Codex](https://codex.wordpress.org)!

Für dieses Beispiel nehmen wir an, es gibt ein Child-Theme und in diesem findet man zwei Dateien - styles.css und functions.php. In diese Datei functions.php tragen wir unseren Shortcode jetzt in dieser Form ein:

/**
  * Hello World Shortcode
  */
function hello_world( $atts ) {

	// Attributes
	$atts = shortcode_atts(
		array(
			'text' => '',
			'color' => '',
		),
		$atts
	);

	print '<span style="color: ' . $atts['color'] . '">' . $atts['text'] . '</span>';

}
add_shortcode( 'hello-world', 'hello_world' );

Hier wird mit function hello_world($atts) {} zuerst die nötige PHP-Funktion für den Shortcode erstellt.

Diese nimmt als Attribute text und color an und gibt ein HTML-Element vom Typ <span> aus, wo der Text in der gewünschten Farbe dargestellt wird.

Die Anweisung add_shortcode('hello-world','hello_world') verbindet jetzt die erstellte Funktion hello_world() mit dem Shortcode [hello-world] in WordPress und macht sie so nutzbar.

Man kann natürlich den Shortcode (solang er noch "frei" ist), beliebig vergeben und auch die PHP-Funktion kann anders heißen, man sollte aber immer "sprechende" Bezeichnungen und klare Kommentare nutzen.

Sie möchten mehr dazu erfahren?

Dann freuen wir uns über Ihre Nachricht über die Kommentarfunktion oder gleich direkt per E-Mail - wir beantworten gerne Ihre Fragen!

Besuchen Sie auch unsere Website für mehr Infos zu unseren Services & Skills!

Kommentare anzeigen
Erfahrungen & Bewertungen zu inQrt Digital Solutions