Eigenen Shortcode in Wordpress programmieren

Einen eigenen Shortcode erstellen für die Verwendung im Wordpress Theme oder Plugin über den Editor ist eigentlich recht simpel. In dem Plugin oder der functions.php einfach folgenden Code einbinden.

Wichtig ist nur: Nirgendswo im Code darf ein echo oder print stehen. Es darf keine Ausgabe erzeugt werden, sonst speichert er den Post fehlerhaft.

Dieser Code ist ein Beispiel für einen eigene Shortcode, welcher einen Post-Teaser in einem Beitrag erzeugt. Der Redakteur kann optional eine Beitrags ID und die maximale Länge des Textauszuges (Excerpt) angeben.

Einfaches Beispiel

<?php
 
namespace my_namespace;
 
/*
	[my_shortcode post_id="1"]
	[my_shortcode]$content[/my_shortcode]
 */
// Shortcode Registrieren
add_shortcode( 'my_shortcode', 'my_namespace\shortcode_logic' );
 
// Die Shortcode Funktion - hier nur Logik und HTML am besten in eine eigene Funktion legen
function shortcode_logic( $atts = [], $content = null ) {
	$defaults = [
		'post_id' => '1',
	];
	$atts     = shortcode_atts( $defaults, $atts );
 
	// Falls im Text-Content auch Shortcodes enthalten sein dürfen
	// $content  = do_shortcode( $content );
	$return_html = shortcode_html( $atts['post_id'] );
 
	return $return_html;
}
 
// HTML Renderer - zur sauberen Trennung
function shortcode_html( $post_id ){
 
	$return_html = "
		<div class=\"post-teaser\">
			Die Post-ID ist: {$post_id}
		</div>
	";
 
	return $return_html;
}

Beispiel in Anwendung

Dieser Shortcode gibt einen Post-Teaser aus.

namespace brandgrad;
 
/*
	[display_post_teaser post_id="1" limit_excerpt="30" ]
 */
// Den Code registrieren, das WP weiß welche Funktion es aufrufen muss
add_shortcode( 'display_post_teaser', 'brandgrad\display_post_teaser' );
 
// Die eigentliche Funktion die an WP zurück gibt was ausgegeben werden soll
function display_post_teaser( $atts ) {
	$defaults = [
		'post_id'      => '1',
		'limit_excerpt'=> '30',
	];
	$atts = shortcode_atts( $defaults, $atts );
 
	$post_id       = (int) $atts['post_id'];
	$limit_excerpt = (int) $atts['limit_excerpt'];
	$return_html   = get_post_teaser_html( $post_id, $limit_excerpt );
 
	return $return_html;
}
 
// Das ist nur eine Helfer Funktion, damit der Code in der Shortcode Funktion nicht zu lang und unübersichtlich wird
function get_post_teaser_html( $post_id, $limit_excerpt = 30 ){
	$post_object = get_post( $post_id, 'OBJECT', 'display' );
	if( !$post_object ){ return "<p><em>Beitrag mit der ID: {$post_id} nicht gefunden.</em></p>"; }
 
	$title       = $post_object->post_title;
	$excerpt     = $post_object->post_excerpt;
	$has_excerpt = ( strlen($excerpt) > 0 ) ? true : false;
	$excerpt     = ( $has_excerpt ) ? $excerpt : wp_trim_words( $post_object->post_content, $limit_excerpt );
	$permalink   = get_the_permalink( $post_id );
	$thumb_url   = get_the_post_thumbnail_url( $post_id, 'full' );
 
	$return_html = "
		<div class=\"post-teaser\">
			<div class=\"post-teaser__image-container\">
				<a href=\"{$permalink}\" class=\"post-teaser__image-link\" style=\"background-image:url('{$thumb_url}');\">
				</a>
			</div>
			<div class=\"post-teaser__text-container\">
				<p class=\"post-teaser__categories\"></p>
				<h2 class=\"post-teaser__title\">
					<a href=\"{$permalink}\" class=\"post-teaser__title-link\">
						{$title}
					</a>
				</h2>
				<p class=\"post-teaser__excerpt\">
					{$excerpt}
				</p>
				<a href=\"{$permalink}\" class=\"post-teaser__button\">Weiterlesen »</a>
			</div>
		</div>
	";
 
 
 
	return $return_html;
}

Page Tools