ショートタグは投稿記事に[](ブラケット)内にショートコード名を記述することで、あらかじめ設定しておいた関数を呼び出すことができます。
で、肝心の関数を記述する場所はというと、プラグインとして読み込ませたり、テンプレートフォルダのfunctions.phpに記述します。
プラグインというとちょっと大げさな気がするので、今回はfunctionsファイルの方を試してみたいと思います。

たぶん一番シンプルなショートコード

ショートコード第一号は呼び出すと決められた文字列を返すだけという、実用性0のコードです。

functions.php

  1. function hogeFunc() {
  2. return "ショートコード作ってみたよ。";
  3. }
  4. add_shortcode('hoge', 'hogeFunc');

関数を設定したら、「add_shortcode」でショートコード名を設定します。
第1引数がショートコード名、第2引数が呼び出す関数です。

functions.phpが設定できたら、早速使ってみましょう。
管理画面の「投稿」でショートコード名を書くだけ!

WordPress投稿記事

  1. [hoge]

これでブログ記事に「ショートコード作ってみたよ。」と表示されたはずです。
ちなみにxhtml流でいくとブラケットの最後に/(スラッシュ)を付けてみたくなりますが、あってもなくても大丈夫です。

WordPressの関数を使用するショートコード

もうちょっとだけ実用的ということで、Wordpressの関数実行してみましょう。
ブログ名を取得するショートコードです。

functions.php

  1. function hogeFunc() {
  2. return get_bloginfo('name');
  3. }
  4. add_shortcode('hoge', 'hogeFunc');

ショートコードから引数を渡す

今までは同じ物しか返せなかったけど、引数とか渡せたら便利ですよね。
ということで引数を渡してみます。

functions.php

  1. function hogeFunc($atts) {
  2. extract(shortcode_atts(array(
  3. 'num' => 0,
  4. ), $atts));
  5. return $num * 2;
  6. }
  7. add_shortcode('hoge', 'hogeFunc');

渡した数値を2倍にして返すショートコードです。
重要なのは「’num’ => 0」のあたりです。
numが変数名(属性名)、0が初期値です。
初期値は引数が渡されなかった場合使用される値です。

WordPress投稿記事

  1. [hoge num=100]
  2. [hoge]

引数を渡すにはショートコード名にスペースを空けて変数と値を指定します。
これでnum=100で「200」と表示され、引数を指定しなかった2番目は初期値の「0」と表示されます。

引数を2つ以上渡す場合

これはもうどんどん追加していくだけです。
たとえば3つの合計を返すショートコード。

functions.php

  1. function hogeFunc($atts) {
  2. extract(shortcode_atts(array(
  3. 'num1' => 0,
  4. 'num2' => 0,
  5. 'num3' => 0,
  6. ), $atts));
  7. return $num1 + $num2 + $num3;
  8. }
  9. add_shortcode('hoge', 'hogeFunc');

WordPress投稿記事

  1. [hoge num1=100 num2=100 num3=100]
投稿記事で使用する場合はスペースを挟んで追加していく感じですね。

囲み方ショートコード

HTMLみたいに文字列を囲んだ形で使いたいときがあるじゃないですか。
そんなときはショートコードで囲むだけです
渡された文字列を「p」「span」で囲んでみたい場合は下記になります。

functions.php

  1. function hogeFunc( $atts, $content = null ) {
  2. return '<p><span>' . $content . '</span></p>';
  3. }
  4. add_shortcode('hoge', 'hogeFunc');

WordPress投稿記事

  1. [hoge]囲まれてるよ![/hoge]

囲まれた文字列は「$content」に入りますので、こいつをタグで囲んでやればいいんですね。

囲み方ショートコードで引数を渡す。

囲み方の場合でも引数を渡すことができます。
方法は自己完結型のものと同じです。
クラスを引数で指定するショートコードは下記のようになります。

functions.php

  1. function hogeFunc( $atts, $content = null ) {
  2. extract( shortcode_atts( array(
  3. 'class' => 'default',
  4. ), $atts ) );
  5. return '<p class="' . $class. '"><span>' . $content . '</span></p>';
  6. }
  7. add_shortcode('hoge', 'hogeFunc');

WordPress投稿記事

  1. [hoge class="new-class"]囲まれてるよ![/hoge]

テンプレートからショートコードを実行する方法

ショートコードは基本的にPHPが使用できない投稿画面に記述するものですが、テンプレートから実行するためのメソッドも用意されています。

テンプレートファイル

  1. <?php echo do_shortcode('[hoge]'); ?>