WordPressのショートコードを作ってみよう!

The WordPress logo with a white background

先日、WordPressのショートコードについてブログを書きました。今回はその2回目、ショートコードを実際に作成しようというものです。それでは、早速作成してみましょう!

ショートコードを作成する

ショートコードを作成するために必要な要点を見ていきます。

//[foobar]
function foobar_func( $atts ){
	return "foo and bar";
}
add_shortcode( 'foobar', 'foobar_func' );

このコード例はWordPress CodexのショートコードAPIから引用しました。ここで利用されている関数を分解していきましょう。

//[foobar]

関数の最初に書かれたコメントアウトで、どんなショートコードか分かりやすくします。

function foobar_func( $atts ){

関数を宣言し、名前を付けます。次に、関数に渡したい属性を挿入します。

	return "foo and bar";

なぜechoではなくreturnを用いるのでしょうか? 最後に載せた動画を見ると分かりやすいのですが、値を返す際はechoではなくreturnを用います。値をechoで返させるとショートコードは正しくない挙動をします。

最後に関数を呼び出します。

}

次は関数を呼び出すためにアクションフックを追加してみましょう。

add_shortcode('foobar', 'foobar_func');

ショートコードに属性を追加したい場合は、shortcode_atts関数を用いて行います。以下のコードを参考にしてみてください。

// [bartag foo="foo-value"]
function bartag_func( $atts ) {
    $a = shortcode_atts( array(
        'foo' => 'something',
        'bar' => 'something else',
    ), $atts );

    return "foo = {$a['foo']}";
}
add_shortcode( 'bartag', 'bartag_func' );

何か疑問があれば気軽にコメントしてくださいね!

これは『WordPress and Shortcodes: In Development』を翻訳したものです。

OUR SERVICE

Fan Commerce

ファンコマース

ファンとのダイレクトなコミュニケーションを実現して「感動体験」をビジネスに結びつけます。

Digital Marketing

デジタルマーケティング

未来を創造する価値ある「顧客体験」を実現する仕組みづくりを提案。