ショートタグは投稿記事に[](ブラケット)内にショートコード名を記述することで、あらかじめ設定しておいた関数を呼び出すことができます。
で、肝心の関数を記述する場所はというと、プラグインとして読み込ませたり、テンプレートフォルダのfunctions.phpに記述します。
プラグインというとちょっと大げさな気がするので、今回はfunctionsファイルの方を試してみたいと思います。
たぶん一番シンプルなショートコード
ショートコード第一号は呼び出すと決められた文字列を返すだけという、実用性0のコードです。
functions.php
function hogeFunc() { return "ショートコード作ってみたよ。"; } add_shortcode('hoge', 'hogeFunc');
関数を設定したら、「add_shortcode」でショートコード名を設定します。
第1引数がショートコード名、第2引数が呼び出す関数です。
functions.phpが設定できたら、早速使ってみましょう。
管理画面の「投稿」でショートコード名を書くだけ!
WordPress投稿記事
[hoge]
これでブログ記事に「ショートコード作ってみたよ。」と表示されたはずです。
ちなみにxhtml流でいくとブラケットの最後に/(スラッシュ)を付けてみたくなりますが、あってもなくても大丈夫です。
WordPressの関数を使用するショートコード
もうちょっとだけ実用的ということで、Wordpressの関数実行してみましょう。
ブログ名を取得するショートコードです。
functions.php
function hogeFunc() { return get_bloginfo('name'); } add_shortcode('hoge', 'hogeFunc');
ショートコードから引数を渡す
今までは同じ物しか返せなかったけど、引数とか渡せたら便利ですよね。
ということで引数を渡してみます。
functions.php
function hogeFunc($atts) { extract(shortcode_atts(array( 'num' => 0, ), $atts)); return $num * 2; } add_shortcode('hoge', 'hogeFunc');
渡した数値を2倍にして返すショートコードです。
重要なのは「’num’ => 0」のあたりです。
numが変数名(属性名)、0が初期値です。
初期値は引数が渡されなかった場合使用される値です。
WordPress投稿記事
[hoge num=100] [hoge]
引数を渡すにはショートコード名にスペースを空けて変数と値を指定します。
これでnum=100で「200」と表示され、引数を指定しなかった2番目は初期値の「0」と表示されます。
引数を2つ以上渡す場合
これはもうどんどん追加していくだけです。
たとえば3つの合計を返すショートコード。
functions.php
function hogeFunc($atts) { extract(shortcode_atts(array( 'num1' => 0, 'num2' => 0, 'num3' => 0, ), $atts)); return $num1 + $num2 + $num3; } add_shortcode('hoge', 'hogeFunc');
WordPress投稿記事
[hoge num1=100 num2=100 num3=100]投稿記事で使用する場合はスペースを挟んで追加していく感じですね。
囲み方ショートコード
HTMLみたいに文字列を囲んだ形で使いたいときがあるじゃないですか。
そんなときはショートコードで囲むだけです
渡された文字列を「p」「span」で囲んでみたい場合は下記になります。
functions.php
function hogeFunc( $atts, $content = null ) { return '<p><span>' . $content . '</span></p>'; } add_shortcode('hoge', 'hogeFunc');
WordPress投稿記事
[hoge]囲まれてるよ![/hoge]
囲まれた文字列は「$content」に入りますので、こいつをタグで囲んでやればいいんですね。
囲み方ショートコードで引数を渡す。
囲み方の場合でも引数を渡すことができます。
方法は自己完結型のものと同じです。
クラスを引数で指定するショートコードは下記のようになります。
functions.php
function hogeFunc( $atts, $content = null ) { extract( shortcode_atts( array( 'class' => 'default', ), $atts ) ); return '<p class="' . $class. '"><span>' . $content . '</span></p>'; } add_shortcode('hoge', 'hogeFunc');
WordPress投稿記事
[hoge class="new-class"]囲まれてるよ![/hoge]
テンプレートからショートコードを実行する方法
ショートコードは基本的にPHPが使用できない投稿画面に記述するものですが、テンプレートから実行するためのメソッドも用意されています。
テンプレートファイル
<?php echo do_shortcode('[hoge]'); ?>