WordPressで投稿内に[my_shortcode]のように書くと、その部分をプログラム側でHTMLを作成し、表示する「ショートコード」という便利な機能があります。
あまり頻繁に作らないせいか、毎回作り方を忘れてしまうので、今回はそのショートコードの作り方のメモです。
目次
WordPressのショートコードの作り方3種類
僕はショートコードの作り方を次の3種類に分けて考えています。
- パラメーター無し（ただ出すだけ）
- パラメーターあり
- コンテンツあり（ショートコードで囲むタイプ）
それではそれぞれ作り方を見ていきます。
パラメーター（属性）無し
ショートコードを使う時にパラメーターの指定などをしないパターンです。
投稿内では[my_shortcode]のような形で使います。
テーマやプラグインでショートコードの中身を作るコードのサンプルはこちら▼
function my_shortcode_function(){
return '<p>ショートコードです！</p>';
}
add_shortcode( 'my_shortcode', 'my_shortcode_function' );add_shortcodeで投稿内で使うショートコード名とショートコードを展開するための関数名を指定します。
あとはショートコードを展開するための関数で表示内容を作成するのですが、たとえHTMLとして出力する内容でもreturnすることに注意が必要です。
echoではないことに注意しましょう。
パラメーターあり
ショートコードを使う際に、何か条件指定できるようなショートコードの作り方です。
投稿内では[my_shortcode type="aaa"]のような形で使います。
テーマやプラグインでショートコードの中身を作るコードのサンプルはこちら▼
function my_shortcode_function( $atts ){
$args = shortcode_atts( array(
'type' => 'none',
), $atts );
return "<p>type:{$args['type']}のショートコードです！</p>";
}
add_shortcode( 'my_shortcode', 'my_shortcode_function' );shortcode_attsに使用する属性の名前と初期値を定義した配列と関数で受け取った引数の配列を渡して関数内で使用する属性の準備をします。
ショートコード内で使用する予定の属性はすべてshortcode_attsの第1引数にわたす配列に定義しましょう。
定義されていない属性はすべて無視されます。
コンテンツあり（ショートコードで囲むタイプ）
ショートコードをHTMLのタグのような[my_shortcode]コンテンツ[/my_shortcode]といった形で使用するタイプの作り方です。
テーマやプラグインでショートコードの中身を作るコードのサンプルはこちら▼
function my_shortcode_function( $atts, $content = null ){
return "<p>注目： <span=\"chumoku\">${content}</span></p>";
}
add_shortcode( 'my_shortcode', 'my_shortcode_function' );ショートコードで囲むタイプでも属性を受け取ることができます。
function my_shortcode_function( $atts, $content = null ){
$args = shortcode_atts( array(
'title' => '参考記事',
'type' => '',
), $atts );
return "<div class=\"sanko type-{$args['type']}\">
<span class="sanko-title">{$args['title']}</span>
<p>${content}</p>
</div>";
}
add_shortcode( 'my_shortcode', 'my_shortcode_function' );投稿データを使うときなどにショートコードが便利
ショートコードのパラメーターに投稿名や投稿IDを指定して情報を取得・表示したり、最新の投稿一覧取得・表示するときなど、プログラム処理が必要な内容はショートコードを利用すると便利です。
ではまた。