GHWEB06.GRASSHOPPER

WordPressのショートコード APIを使ってみた

  • Category:Web関連
  • Web関連の備忘録

sort1ショートコード APIを利用すると、記事投稿に用いるマクロコードの作成が出来ます。PHP等のソースを弄らなくても複雑な表示をする事が出来ます。

試用バージョン:Wordpress 4.0

独自のショートコードを指定する

add_shortcode の指定

WordPressの関数 add shortcode を使って、ショートコードタグへのフックを追加します。
例えば、[dog]というショートコードを作成する場合、

add_shortcode('dog', 'dog_func');
dog ショートコードタグ
dog_func ショートコードが見つかったときに実行されるフック

実行される処理

returnecho にすると、投稿本文で指定した表示位置では無い所(the_content() の上)にショートコードが表示されます。

function dog_func() { return "犬が好き"; }

まとめて書くとこんな感じ

記入場所は、functions.phpです。

function dog_func() {
	return "犬が好き";
	}
add_shortcode('dog', 'dog_func');

ショートコードと表示結果

ショートコード:[dog]

表示結果:犬が好き

独自のショートコードで引数を渡せるようにする

functions.phpに下記を記入

function animal_func($atts) {
    extract(shortcode_atts(array(
    'type' => '',
    ), $atts));
    $type = esc_html($type);
    return "好きな動物は、".$type."です。";
    }
add_shortcode('animal', 'animal_func');

ショートコードと表示結果

ショートコード:[animal] / 表示結果:好きな動物は、です。

ショートコード:[animal type="犬"] / 表示結果:好きな動物は、犬です。

独自のショートコードで複数の引数を渡せるようにする

functions.phpに下記を記入

function animal_func($atts) {
    extract(shortcode_atts(array(
    'type1' => '',
    'type2' => '',
    'type3' => '',
    ), $atts));
    $type1 = esc_html($type1);
    $type2 = esc_html($type2);
    $type3 = esc_html($type3);
    return "好きな動物は、".$type1."と".$type2."と".$type3."です。";
    }
add_shortcode('animal', 'animal_func');

ショートコードと表示結果

ショートコード:[animal type1="猫" type2="犬" type3="鳥"]

表示結果: 好きな動物は、猫と犬と鳥です。

テーマ内でショートコードを記述する

<?php echo do_shortcode('[animal]'); ?>
  • 掲載: