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' );

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

まとめ

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

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

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

---

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

WordPress v6.0以降でクイックタグが表示されない場合の対処…

先日、自分で開発したブログで執筆をしようとしたら、テーマで追加したはずのクラシックエディターのクイッ…

WordPressでTwitterとInstagramの埋め込みを遅延読み込みさせ…

TwitterとInstagramの読み込みは、サイト表示速度を低下させます。これらの埋め込みがある…

WordPressで記事中の見出し前にアドセンスを自動で挿入

今回は、WordPressで記事の見出し前にアドセンスを自動で挿入する方法を紹介します。この記事で紹…