ショートコードは引数を渡すことができる。エディター側でショートコードで出力する値をコントロールできるようになりカスタマイズが広がる。

なお、ここでは自己完結型ショートコード（閉じタグがない）を扱う。

ショートコードに引数を渡す

引数を渡す時のショートコードの呼び出し方は、ショートコード名のあとに半角スペースで区切って引数の値を記述する。

[my_shortcode]            // 引数なし
[my_shortcode 引数1 引数2] // 引数あり

引数の値は配列として格納され、関数の中で処理される。

add_shortcode('my_shortcode', function ($atts) {
	$atts = shortcode_atts(
		[
			'fruit' => $atts[0],
		],
		$atts
	);
	extract($atts);
	return '好きな果物は' . $fruit;
});

[my_shortcode いちご]というショートコードを実行すると、フロントには好きな果物はいちごと表示される。

extractを使用しない方法もある。

引数を２つ渡す

[test 3 5]というショートコードを作成する。

function print_number($atts) {
  return "受け取った数字は" . $atts[0] . "と" . $atts[1] . "です";
}
add_shortcode('test', 'print_number');

実行結果は、受け取った数字は3と5ですとなる。

関数を書き換えて、２つ渡した引数の合計値を求め、フロントに返すこともできる。

function print_number($atts) {
  $sum = $atts[0] + $atts[1];
  return "受け取った数字は" . $sum . "です";
}
add_shortcode('test', 'print_number');

実行結果は、受け取った数字は8ですとなる。

HTMLソースを確認してみると、<p>などで囲まれていないので、適切にタグで囲むほうが良さそう。

<div class="content">
            <div id="toc_content">受け取った数字は8です
</div>

属性名を指定する

属性名を指定することもできる。その場合、呼び出し元のショートコードは[test num=3 cat=1]のようになる。

function print_number($atts) {
  return "受け取った数字は" . $atts['num'] . "と" . $atts['cat'] . "です";
}
add_shortcode('test', 'print_number');

実行結果は、受け取った数字は3と1ですとなる。

属性のデフォルト値を設定する

ショートコードはの属性にデフォルト値を設定したい場合は、shortcode_atts関数を使用する。

shortcode_attsを使用してみる。デフォルト値は、num=2、cat=1。

function print_number($atts) {
  $atts = shortcode_atts(array(
    "num" => 2,
    "cat" => 1
  ), $atts);
  return "受け取った数字は" . $atts['num'] . "と" . $atts['cat'] . "です";
}
add_shortcode('test', 'print_number');

引数を渡さない場合の実行結果：受け取った数字は2と1です。

num=5を渡した場合の実行結果：受け取った数字は5と1です。

cat=8を渡した場合の実行結果：受け取った数字は2と8です。

num=5、cat=8を渡した場合の実行結果：受け取った数字は5と8です。