WordPress ショートコード 書き方・使い方（１）

2019年4月21日2019年6月3日

まずは、基本から

基本のショートコード

ショートコードの基本は、 ”functons.php”と 投稿画面だけになります。

ここでは、自己完結型ショートコードで説明して行きます。

入力と結果

functions.php

function fnc_hello() {
    return "はじめまして、ショートコード";
}
add_shortcode('hello', 'fnc_hello');

Wordpress投稿画面

[hello]

HTML出力結果

はじめまして、ショートコード

解説

functions.php

	function fnc_hello() {

ここからfnc_helloと言う関数が始まります。

	return “はじめまして、ショートコード”;

returnの後に、画面に表示させたい文字列を返します。

	}

fnc_helloはここまでです。一行目の”｛”と対になります。

	add_shortcode(‘hello’, ‘fnc_hello’);

ショートコードとして登録します。
[hello]と投稿が簡単に入力したら、 fnc_hello関数の処理を実行します。

値を渡すショートコード

では、次に値を渡すショートコードを作ってみましょう。

入力と結果

functions.php

function fnc_tashizan($atts){
 	return ($atts[0] . "＋" . $atts[1] . "＝" . ($atts[0] + $atts[1]) . "です");
}
add_shortcode('tashizan','fnc_tashizan');

Wordpress投稿画面

	[tashizan 5 8]

HTML出力結果

	5＋8＝13です

解説

数値を二つ渡し、計算式と足し算の値に加工し、表示するショートコードです。
[]の中で、”tashizan”の後に書かれた”5”・”８”は引数と言います。
先頭の引数が $atts[0]、二番目の引数が $atts[1]へと順に格納されます。

属性を渡すショートコード

一つ前の『値を渡すショートコード』の上級版です。早速コードを見てみましょう。

入力と結果

functions.php

function fnc_tashizan($atts){
 	return ($atts['num1'] . "＋" . $atts['num2'] . "＝" . ($atts['num1'] + $atts['num2']) . "です");
}
add_shortcode('tashizan2','fnc_tashizan');

Wordpress投稿画面

	[tashizan2 num1=6 num2=4]

HTML出力結果

	6＋4＝10です

解説

一つ前の『値を渡すショートコード』と同じく、足し算のショートコードです。
先程の何番目の引数という方法は、簡単な処理のときは問題ありませんが、複雑になると分かりにくくなりますので、通常はこちらの属性を利用します。
投稿画面でnum1=6と指定することにより、プログラム側で$atts[‘num1’]と処理することが出来ます。

[tashizan 5 8]と [tashizan2 num1=6 num2=4]のように、全く同じ処理でも、投稿画面での入力を考えると、前者の何番目の引数のパターンの方が楽になります。
よく考え、使い分けて下さい。