;
SERVICE

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

shadow
The WordPress logo with a white background
matsushita

Author :  

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

動画

より多くのことを学びたい方は、こちらの動画も参考にしてみてください。

YouTube Preview Image

上記の動画は複数の属性を渡しています。

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

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

SERVICE