WordPressのショートコードを手短にまとめた

WordPressを使っていると、記事の中に [xxx] の形で埋め込むショートコードという形式を使うことがあります。

記事の中にPHPコードを簡単に入れることができて便利ですよね。

ショートコードは、引数なし／あり、両側から囲む／無名関数、それぞれの形式で作れるのでサンプルを作ってみました。

引数なしのショートコード

「Hello WP」をボールドで出力するだけのショートコードです。

 

function foo1_func() {
    return "<b>文字列を出力するだけ</b>";
}

add_shortcode('foo1', 'foo1_func');

指定例：
[foo1]

returnの戻り値が、ページの中にHTMLの要素として出力されます。

引数のあるショートコード

ショートコードには引数を渡すことができます。

[foo2 num=val]

のようにすると、

変数numに、値valを渡すことができます。

function foo2_func($atts) {
extract(shortcode_atts(array(
'top' => 0,
'bottom, => 0,
), $atts));

return "<div style=\"margin-top:{$height}; margin-bottom:{$bottom};\">中の文字</div>";
}

add_shortcode('foo2', 'foo2_func');

指定例
[foo2 top=108]

margin-top:108; （引数で指定）

margin-botom:0;（デフォルトの値）

が代入されます。

両側を挟むショートコード

ショートコードは両側から挟むことができます。

function foo3_func($atts, $content = "") {
return "<p>{$content}</p>";
}
add_shortcode('foo3', 'foo3_func');

指定例：
[foo3]文字列[/foo3]

両側で挟む：引数あり：ショートコード

ショートコードを両側から囲んで引数がある場合です。

function foo4_func($atts, $content = "") {
extract(shortcode_atts(array(
'color' => 'red',
), $atts));
return "<p style:\"color:${color}</p>"{$content}</p>";
}
add_shortcode('foo4', 'foo4_func');

指定例：
[foo4 color="blue"]文字列[/foo4]

無名関数を使って省略する場合

add_shortcodeの中でしか使わない関数を定義するのは、無駄だしわかりにくいので、無名関数として定義することもできます。

add_shortcode(
    'foo5', 
    function(){
        return "<p>文字列</p>";
    }
);

指定例：
[foo5]

これだとショートカット名（この場合はfoo5）を変更しても、定義関数名を直さなくてもいいですね。