[WordPress]ショートコードを活用しよう！ブログでよく使う定型文や広告コードを短いコードでまとめる方法

こんにちは。でんすけ（@notgeek_densuke）です。

今回は、WordPressの「ショートコード」というものについて。

ブログ記事に毎回書くような定型の文章や、
よく埋め込む広告コードなどなど、
ありますよね。

毎回文章を書いたり、広告コードを書いてもいいんですが、
毎回書くのはめんどくさい、というとき。

WordPressのショートコードという機能を使ってみましょう。

WordPressのショートコードとはなんぞや

WordPressのショートコードとは、
WordPressの記事編集画面にて、

[myshortcode]

のように、自分で決めたおまじない（[と]で囲んだもの）を書くことで、

なんか 定型の

パーツを 呼び出す

といった感じで、何か自分で決めた文章やHTMLコードを呼び出すことができる機能です。

WordPressのプラグインなどで、このショートコードを利用するものもありますので、使ったことがある人もいらっしゃるかと。

これ、意外と簡単に自作できるので、積極的に使っていこうぜ！というのが今回の記事の趣旨です。

WordPressのショートコード作り方

ショートコードの作り方は簡単。

WordPressの「外観」→「テーマの編集」をクリック

画面右側から「functions.php」をクリックして開きます。

で、このfunctions.phpの中身に、
こういうソースコードを書き加えます。

/**
 * ショートコードの説明
 */
function myShortCodeFunc() {
    return 'ここに好きな文章やHTMLコードを記入';
}
add_shortcode('myshortcode', 'myShortCodeFunc');

すると、記事編集画面の文章内に

[myshortcode]

と書くだけで、

「ここに好きな文章やHTMLコードを記入」

と出力されるようになるわけです！
やったね！

ショートコード関数の説明

一応、ソースコードの解説をしておくとこんな感じ。

/**
 * ショートコードの説明
 */

function myShortCodeFunc() {
    return 'ここに好きな文章やHTMLコードを記入';
}
//ここまででmyShortCodeFunc()という関数を定義

add_shortcode('myshortcode', 'myShortCodeFunc');
/*
add_shortcode()というWordPressの関数は
add_shortcode(ショートコードの名前 , 呼び出される関数)
という構文。

つまり
[myshortcode]というショートコードを書くと、
myShortCodeFunc()を呼び出してください
ということになります。
*/

add_shortcode()という、WordPressに用意された関数を呼び出すことで、
[myshortcode]というショートコードを使ったら、
myShortCodeFunc()を実行してね、ということになるわけです。

ショートコード、何の役に立つの？

この「ショートコード」、何の役に立つのか。

ひとつは、
よく書く定型文を、短いコードだけで表現できるということで
素早く定型文を書くことができるようになります。

もう一つ、
ショートコードの中身を、後から一括で変更できるということ。

たとえば、ショートコードの中身を広告にしていたとします。
で、何らかの理由で
「やっぱり別の広告にしたいなー」と思った時。

直接広告コードを記事に埋め込んでいると、埋め込んだ記事をすべて修正しないといけなくなりますが、
ショートコードを使っていれば、functions.phpの中身だけを変えれば、ショートコードを使った記事全てに変更が適用されることになります。

後から変更が発生するかもしれないモノを記事に埋め込むときに便利、というわけです。

挟むショートコードや、引数あり版も作れる

挟む版のショートコードや、
ショートコードに引数を渡すようなこともできます。

[myspan color=red size=12px]こんな感じ[/myspan]

「こんな感じ」という文字列を、ショートコードで囲むパターンですね。

functions.phpの方では、こんなコードを書きます。

/**
 * 文字色と大きさを変えるショートコード
 */
function mySpanTag($atts, $content = null ){
	extract(shortcode_atts(array(
		'color' => 'red',
		'size' => '1em',
	), $atts));

	return '<span style="color:'. $color .'; font-size:'. $size .';">' . $content . '</span>';
}
add_shortcode('myspan' , 'mySpanTag');

すると、実行結果は

こんな感じ

になります。

まぁ、この程度であれば、自分でspanタグを書けばいいという話ですが・・・
応用すれば、より便利なショートコードを作れそうですね。

挟むショートコードや、引数あり版のソースコード解説

function mySpanTag($atts, $content = null ){
	/**********
	ショートコードで指定された引数はすべて$attsに、
	ショートコードで挟まれた文章は$contentに
	それぞれ格納されています。
	**********/

	extract(shortcode_atts(array(
		'color' => 'red',
		'size' => '1em',
	), $atts));
	/**********
	ここでは、$attsに「color」と「size」という引数が与えられると想定して
	その初期値を color = red、size = 1emと設定しています。
	使いたい引数は全てここで初期化するべし。
	**********/

	return '<span style="color:'. $color .'; font-size:'. $size .';">' . $content . '</span>';
	/**********
	spanタグに、CSSスタイルで文字色とサイズを指定。
	設定する値を、引数で渡された値（$color、$size）にしています。
	引数で指定されなければ、デフォルトのredと1emが設定されます。
	**********/
}
add_shortcode('myspan' , 'mySpanTag');

まとめ

ということで、WordPressのショートコードについてでした。

functions.phpにちょっとコードを入れるだけで簡単に実現できるので、割と便利です。
ぜひご活用ください。

それではまたー。