WEBOPIXEL

WordPressのショートコードを自作してみる

Posted: 2010.07.11 / Category: WordPress / Tag: 

Wordpressで記事を書いていると、投稿記事からテンプレートタグを使いたくなったり、自作のプログラムを動かしたいくなる場合があると思います。
そんなときに便利なのがショートタグです。

Sponsored Link

ショートタグは投稿記事に[](ブラケット)内にショートコード名を記述することで、あらかじめ設定しておいた関数を呼び出すことができます。
で、肝心の関数を記述する場所はというと、プラグインとして読み込ませたり、テンプレートフォルダの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]'); ?>
	

COMMENTS

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。