WEB制作

WordPressのショートコードの引数の使い方

  • このエントリーをはてなブックマークに追加

ショートコードで引数を使う方法

こんにちは、メディア事業部ウェブディレクターのコネル飯塚です。

WordPressの投稿記事や固定ページの中で、繰り返し使いたいものやPHPのコードなどを「ショートコード」として定義していると、とても便利に使いまわすことができます。

例えば、共通で使用しているマークアップされた内容を、投稿記事に繰り返し入れるのは面倒ですし、それをすべて別の文言に変更したいとなった場合に、「ショートコード」なら一発で変更することができます。

WordPressのショートコードの基本的な使い方

複数のショートコードを設定したり、グーグルアドセンスなどの広告を貼ったり、変更したりするのに便利なWordPressのショートコードですが、今回は引数(パラメーター)を使って、もっと便利にショートコードを活用できる方法を紹介いたします。

ショートコードで引数を使う方法

投稿記事や固定ページの編集画面で、ショートコードを記述して使えるように、使用中のテーマ内にある「functions.php」ファイルに、使いたい内容をショートコードとして定義します。

まずは基本的な文字列を表示させる

まずは、例として文字列を表示するショートコードを作ってみます。
下記を「functions.php」に記述します。

function wbfunc1() {
    return "ホワイトベアー株式会社は四谷にあります。";
}
add_shortcode('wbcode1', 'wbfunc1');

そして、投稿編集する記事の文字列を挿入したい箇所に下記のショートコードを記述します。

[wbcode1]

すると、プレビュー画面または公開された記事の該当箇所に

「ホワイトベアー株式会社は四谷にあります。」

という文字列が表示されます。

引数としてデータを受け渡す

先ほどの文字列の「四谷」の部分を引数として受け渡せるように「functions.php」を変更してみます。

function wbfunc1($attr) {
    return "ホワイトベアー株式会社は{$attr[0]}にあります。";
}
add_shortcode('wbcode1', 'wbfunc1');

こちらのプログラムに受け渡したい値である「四谷」をショートコードに追加したいと思います。

投稿編集する記事への挿入方法ですが、ショートコード名の後ろに半角の空白を入れて引数を追加します。

そして、文字列を挿入したい箇所に下記のショートコードを記述します。

[wbcode1 四谷]

すると、先ほどと同じように

「ホワイトベアー株式会社は四谷にあります。」

という文字列が表示されます。

ショートコードの受け渡したい値を「新宿」「渋谷」などに変更することで、実際に出力される文字列を置き換えることが可能となります。

[wbcode1 新宿]

「ホワイトベアー株式会社は新宿にあります。」

[wbcode1 渋谷]

「ホワイトベアー株式会社は渋谷にあります。」

※実際には、ホワイトベアー株式会社は四谷にあります!

ショートコードで変数を利用する

複数の変数をプログラムの中で使用することができます。
それぞれの変数を区別するために変数には任意の変数名を付けておきます。

変数は「$」+変数名で表されます。

$変数名 = 値;

「functions.php」に下記のように変数に格納する値をあらかじめ記述しておきます。

function wbfunc1() {
		$company = 'ホワイトベアー株式会社';
		$location = '四谷';

    return $company . 'は' . $location . 'にあります。';
}
add_shortcode('wbcode1', 'wbfunc1');

そして、投稿編集する記事の挿入したい箇所に下記のショートコードを記述します。

[wbcode1]

こちらはもちろん、先ほどと同じように

「ホワイトベアー株式会社は四谷にあります。」

という文字列が表示されます。

変数に値が格納され、それぞれが文字列として連結されショートコードによって出力されています。

ショートコードの引数を配列で利用する

ショートコードの引数を使うときに、場合によっては違う値を受け渡したい時があると思います。

次に、配列を利用してショートコードに引数がない場合はデフォルトの値を渡し、引数を設定している場合はその値を格納する方法について説明します。

配列を作成するには次のように引数を設定します。

array(‘キー1’ => 値1, ‘キー2’ => 値2, ‘キー3’ => 値3, …);

記述の仕方は、要素1つに付きキーと値をペアで指定し、「キー => 値」という形式で記述していきます。

「functions.php」に下記のように配列を記述しておきます。

function wbfunc1($atts){
		extract(shortcode_atts(array(
				'company' => 'ホワイトベアー株式会社',
				'location' => '四谷'
		), $atts));

    return $company . 'は' . $location . 'にあります。';
}
add_shortcode('wbcode1', 'wbfunc1');

そして、投稿編集する記事の挿入したい箇所に下記のショートコードを記述します。

[wbcode1]

すると、こちらはデフォルト値である「ホワイトベアー株式会社」「四谷」が格納され、文字列として連結され

「ホワイトベアー株式会社は四谷にあります。」

という文字列が表示されます。

プログラム内の「shortcode_atts()」はショートコードの無効な属性値を除外します。もし属性が省略されている場合は、デフォルト値が設定されます。

「extract()」はPHPの関数で配列から変数を格納します。各キーについて変数名として有効であるかどうか、 そして既存の変数と衝突しないかどうかを確認します。

もし仮に、すべてではなく特定の箇所だけ
「ホワイトベアー株式会社」→「WHITEBEAR Inc.」
「四谷」→「日本」
に置き換えたいとします。

ショートコードの引数として、別の値を渡したい場合は、投稿編集する記事の挿入したい箇所に下記のショートコードを記述します。

[wbcode1 company="WHITEBEAR Inc." location="日本"]

すると、上記を挿入した箇所だけ

「WHITEBEAR Inc.は日本にあります。」

という文字列が表示されます。

まとめ ショートコードの引数の使い方

内容が変更になる可能性が高い情報など、事前にショートコードとして設定していれば、変更時の手間を減らすことができます。

参考例を応用して、表示や処理させたい自分の用途にあった形で使っていただければと思います。

  • このエントリーをはてなブックマークに追加
SEO対策でお困りでしたらお任せください

メディア事業部 WEBディレクター

高校の卒業アルバムの「みんな一言」の欄に、安易につまらないことを書き残してしまいました。言葉は本当に難しいです。気を付けます、特にここは真面目な会社なので。

▶ コネル飯塚のTwitter