WordPressでショートコードを作成する方法

ショートコードとは何か？

WordPressの記事や固定ページの編集画面では、普通に文章を書いていくか、HTMLとして入力するかしかできません。

普通に文章だけ書くのであればそれで問題ありませんが、もし記事や固定ページ内で、関連記事を出したり、お問い合わせフォームを出したり、PHPの処理も関わってくるものを間に挟みたい時があります。

そんな時に使えるのがショートコードというブラケット（［］）で囲まれた文字列です。

ショートコードを予め設定しておいて、編集画面で入力 → 保存すると、プレビュー時にはそのショートコードが展開され、HTMLとなった状態で表示されます。

また、PHPの処理を行わなくても、よく使う定型文などをショートコードに設定しておけば、それで済むようになりますし、後から定型文を修正すれば全てのページで定型文が一括で変わる。なんてこともできます。

ショートコードの作り方

今回はとりあえず、ショートコードで定型文を呼び出してみましょう。

functions.phpにadd_shortcode('ショートコード名', '呼び出す関数名');を追加するだけです（変更する前に、必ずバックアップを取っておきましょう）。

function shortcord_sample() {
  return 'これはショートコードで定型文を呼び出すサンプルです';
}
add_shortcode('sample', 'shortcord_sample');

コードを追加したら、保存して投稿の編集画面へアクセスして[sample]と入力して保存します。

プレビューを表示すると、ちゃんと「これはショートコードで定型文を呼び出すサンプルです」という文章が表示されているはずです。

add_shortcode('ショートコード名', '呼び出す関数名');の「ショートコード名」の方がブラケットで囲むテキスト、「呼び出す関数名」の方はfunctionの後に設定する関数名と一致させる必要があります。

関数内はreturnを使ってテキストを返しているだけです。
functions.php内は、PHPが使えるので、ここで色々と処理をして、最終的にreturnで値だけ返して上げて、それを表示する。というのがショートコードの仕組みになります。

引数を渡す

今のままだと、同じ定型文が出てくるだけですが、引数を渡すことで、別の定型文を出せたりもします。

function shortcord_sample($num) {
  if ($num = 1) {
    return '引数に1が設定されています';
  }
  return 'これはショートコードで定型文を呼び出すサンプルです';
}
add_shortcode('sample', 'shortcord_sample');

あとは編集画面で[sample 1]と入力してプレビューすると「引数に1が設定されています」と表示され、[sample 2]や[sample]と入力すると「これはショートコードで定型文を呼び出すサンプルです」と表示されます。

ショートコードで囲む

文字を囲んで、その囲んだテキストに対して何か行う。みたいな事をしたいときもあります。

そんな時は下記のようなコードを書いてあげます。

function shortcord_sample($num ,$content) {
  return '<div class="sample">'.$content.'</div>';
}
add_shortcode('sample', 'shortcord_sample');

文字を囲みたい時は2つ引数を設定して、2つ目の引数が囲まれた文字列になります。

あとは編集画面に移動して「[sample]ショートコードで囲む[/sample]」と入力してプレビューします。この時、HTML同様に閉じタグには「/（スラッシュ）」が必要なので忘れないように気をつけましょう。

すると、ちゃんと<div class="sample">ショートコードで囲む</div>というHTMLが生成されているはずです。