WordPressでショートコードを自作する方法

今回は、WordPressのショートコードを自作する方法を紹介します。

ショートコードにはいくつか使い方があるので、パターン別に解説していきます。

単体のショートコード

終了タグがない単体で使うタイプのショートコードです。

[tag]

このような形のショートコードは、以下のように実装します。記述するファイルはfunctions.phpです。

if ( ! function_exists( 'my_shortcode' ) ) {
	function my_shortcode() {
		return '出力されるテキスト';
	}
	add_shortcode( 'tag', 'my_shortcode' );
}

add_shortcode関数の第一引数はショートコードタグ、第二引数はコールバック関数を指定します。

コールバック関数ではテキストやHTMLコードを返します。

開始タグと終了タグのあるショートコード

開始タグと終了タグがあり、コンテンツを囲んで使うタイプのショートコードです。

[tag]テキスト[/tag]

このような形のショートコードは、以下のように実装します。記述するファイルはfunctions.phpです。

if ( ! function_exists( 'my_shortcode' ) ) {
	function my_shortcode( $atts, $content = "" ) {
		$content = '<div class="test">' . $content . '</div>';
		return $content;
	}
	add_shortcode( 'tag', 'my_shortcode' );
}

add_shortcodeのコールバック関数(ここではmy_shortcode関数)の第一引数には属性、第二引数にはショートコードタグで囲まれたコンテンツが格納されます。

ここでは、属性($atts)は使っていません。属性の使い方は以下で解説します。

属性のあるショートコードその1

属性のあるショートコードです。

[tag title="タイトル"]テキスト[/tag]

このような形のショートコードは、以下のように実装します。記述するファイルはfunctions.phpです。

if ( ! function_exists( 'my_shortcode' ) ) {
	function my_shortcode( $atts, $content = "" ) {
		if ( empty( $atts["title"] ) ) return $content;
		$title = $atts["title"];
		$content = '<p title="' . $title . '">' . $content . '</p>';
		
		return $content;
	}
	add_shortcode( 'tag', 'my_shortcode' );
}

ショートタグに記述されたtitle属性は、$atts["title"]で取得できます。

属性のあるショートコードその2

属性のあるショートコードには、以下のような形もあります。

[tag 属性1 属性2 属性3]

属性に値を入れずに、属性名だけを記述するショートコードです。

このような形のショートコードは、以下のように実装します。記述するファイルはfunctions.phpです。

if ( ! function_exists( 'my_shortcode' ) ) {
	function my_shortcode( $atts ) {
		if( empty( $atts ) ) return;
		$list = '<ul>';
		foreach( $atts as $att ) {
			$list .= '<li>' . $att . '</li>';
		}
		$list .= '</ul>';
		return $list;
	}
	add_shortcode( 'tag', 'my_shortcode' );
}

このショートコードは以下のように出力されます。

<ul><li>属性1</li><li>属性2</li><li>属性3</li></ul>

ショートコードを入れ子にする

[parent][child][/parent]

ショートコードをショートコードで入れ子にするパターンです。

このような形のショートコードは、以下のように実装します。記述するファイルはfunctions.phpです。

if( ! function_exists( 'my_shortcode_child' ) ) {
	function my_shortcode_child() {
		return '<p class="child">child</p>';
	}
	add_shortcode( 'child', 'my_shortcode_child' );
}
if( ! function_exists( 'my_shortcode' ) ) {
	function my_shortcode( $atts, $content = "" ) {
		$content = do_shortcode( $content );
		return '<div class="parent">' . $content . '</div>';
	}
	add_shortcode( 'parent', 'my_shortcode' );
}

入れ子内のショートコードは、そのままでは展開されません。

do_shortcode関数を使って、ショートコードの展開を行ってください。

この例では、HTMLは以下のように出力されます。

<div class="parent"><p class="child">child</p></div>

ショートコード周りの自動整形を解除する

ショートコードをには自動でpタグが付与されます。

pタグが自動で挿入されないようにするには、以下のコードをfunctions.phpに追加します。

if( !function_exists( 'remove_autop' ) ) {
	function remove_autop( $content ) {
		$array = array (
			'<p>[' => '[',
			']</p>' => ']',
			']<br />' => ']',
			'<br />[' => '['
		);
		$content = strtr( $content, $array );
		return $content;
	}
	add_filter( 'the_content', 'remove_autop' );
}

ウィジェットでショートコードが使えるようにする

記事本文だけではなく、ウィジェットでショートコードを使いたいというパターンもあるでしょう。

その場合は、以下のコードをfunctions.phpに追加してください。

add_filter( 'widget_text', 'do_shortcode' );

この一行だけで対応できます。

まとめ

ブロックエディターがカスタマイズできるなら、ショートコードの利用は今後減っていくかもしれません。

とはいえ、誰もがブロックエディターのカスタマイズができるとも限らないです。

ブロックエディターが苦手という方は、この記事を参考にショートコードの作成方法をマスターしてください。


他にもこんな記事があります。