WordPressの記事内にURLのパラメーター値を[ショートコード]で取得して表示させる方法

よくサービスなどを運営しているとURLのパラメーターにつけた会員のIDを取得して、ページ内のリンクに挿入するということをやると思います。飛び先のページで会員を識別するためです。WordPressでも同様のことを行うために、今回はJavaScriptを使わずに、WordPressの「ショートコード」という機能を使ってパラメーターの値を取得するようにしました。実装方法を紹介します。

一般的なGET値の取得方法(JS & PHP)

URLのパラメーター(GET)の値を取得するには一般的に以下のような方法を使います。例えば以下のようなURLがあったとして、ぞれぞれid、nameの値を取得したい場合

http://example.com/?id=001&name=hoge

JavaScriptで書くと以下のようになります。

function getParamVal(param) {
  var query = location.search;
  var regexp = new RegExp('[\\?&]' + param + '\=([^\&#]*)', 'i');
  var val = query.match(regexp) || '';

  return val[1] || '';
}

console.log(getParamVal('id')); // => 001
console.log(getParamVal('name')); // => hoge
JavaScriptでGET値を取得する関数の実装方法

PHPで書くと以下のようになります。

function getParamVal($param) {
  $val = (isset($_GET[$param]) && $_GET[$param] != '') ? $_GET[$param] : '';
  $val = htmlspecialchars($val, ENT_QUOTES);

  return $val;
}

echo getParamVal('id'); // => 001
echo getParamVal('name'); // => hoge
PHPでGET値を取得する関数の実装方法

上記のようにJavaScriptで書けばWordPressの記事内でURLのパラメーターの値を取得して表示させることができます。では、PHPで書く場合はどうなるでしょうか?そうです、WordPressでは記事の中にはPHPのコードを書くことができません。どうしてもPHPで書きたいという人は困ってしまいますね。

WordPressの記事内にPHPのコードを書くためのプラグイン

WordPressの記事内でPHPのコードを書きたいという需要は多少あるみたいで、記事内にPHPのコードを書くためのプラグインも作られています。検索するとよく出てくるのは、「exec-php」というプラグインです。

このプラグインをインストールすると、以下のように記事内にPHPのコードを書いて実行させることができます。

<?php
function hoge($a, $b) {
  return $a + $b;
}
?>

1 + 2 = <?php echo hoge(1, 2); ?> // => 1 + 2 = 3
投稿記事内

ただこのプラグインには問題があり、以下のブログでも言われていますが、数年前から更新が止まっていたり、eval関数が使われていたりして、「セキュリティ的に危険」です。できることなら使わない方がよいでしょう。

では、どうするのか?[ショートコード]でしょ!

そもそもWordPressでは、自分でPHPのコードを書きたいなら「function.phpを使ってください」ということになっていて、記事内にPHPのコードを書くことを前提に作られていません。

ただWordPressもそこまで酷ではなく、function.php内に書かれた関数を呼び出し、戻り値を取得することを可能とする[ショートコード]という機能を設けてくれています。つまり、Smartyのようなテンプレートエンジンのように使うことができるようになっています。これは大変便利です。

ショートコードの作り方

ショートコードは、「[]」を使ってfunction.phpで設定した関数のショートコード名を囲って記事内に置きます。

[ショートコード名]

「関数」と「ショートコード」を結びつけるには、Wordpressの「add_shortcode()関数」を使ってfunction.php内に以下のように書きます。

add_shortcode(ショートコード名, 関数名);

以上のように、ショートコードは簡単につくれます。例として、「よく使う素敵な10個のショートコード」と題した以下のブログ記事を紹介します。参考にしてください。

パラメーター「id」の値を取得する

では、さっそくショートコードを作って、URLのパラメーターの値を取得して表示させてみましょう。WordPressの記事URLに以下のようなパラメーターをつけた場合を例にショートコードを作ります。

http://example.com/?id=001

function.phpには以下のように記述します。「get_id_val」という関数を作り、add_shortcode()関数を使って、「id」というショートコード名と紐付けています。get_id_val()関数は実行するとURLのパラメーターのidの値を取得します。

// get_id_val関数の定義
function get_id_val() {
  // パラメーター「id」の値を取得
  $val = (isset($_GET['id']) && $_GET['id'] != '') ? $_GET["id"] : '';
  // エスケープ処理
  $val = htmlspecialchars($val, ENT_QUOTES);

  // $valを戻り値として設定(ショートコードの値となる)
  return $val;
}

// ショートコード[id]にget_id_val関数をセット
add_shortcode('id', 'get_id_val');
function.php

記事内で以下のようにショートコードを任意の場所に挿入すると、ショートコードがget_id_val()関数を実行させ、パラーメータのidの値「001」を取得し表示します

idの値は[id]です。=> IDの値は001です。
投稿記事内

引数も使える!ショートコードの汎用化

ショートコードは引数にも対応しています。上記のショートコードでは、idというパラメーターにしか対応していません。他のパラメーターの値を取得するために、その都度そのパラメーターに対応した関数とショートコードを作るのは面倒です。そこで、任意のパラメーターのキーを引数として渡し、そのキーに対応した値を取得できる汎用的なショートコードを作ることにします。

ショートコードに引数を渡す

引数を渡す場合のショートコードの書き方は以下のようになります。

[ショートコード名 引数を受け取る変数名=引数]

引数を複数渡すことも可能です。(スペース区切りで追加していきます。)

[ショートコード名 引数を受け取る変数名1=引数 引数を受け取る変数名2=引数]

ショートコードと関数の結び付け方は、上でも紹介した通りです。

add_shortcode(ショートコード名, 関数名);

引数を取得するために、ショートコードと結びつける関数の中に以下のような記述を入れます。(これはお約束みたいなものです。)

function 関数名($atts2) {
  // デフォルトの配列
  $atts1 = array(
    // デフォルト値の設定
    '引数を受け取る変数1' => 'デフォルト値',
    '引数を受け取る変数2' => 'デフォルト値',
    '引数を受け取る変数3' => 'デフォルト値',
  );

  // デフォルトの配列に引数で受け取った配列をマージ
  extract(shortcode_atts($atts1, $atts2));
}

shortcode_atts()関数はWordPressの関数で、2つの連想配列「配列1(デフォルト)」と「配列2」を引数に取り、配列2の値を配列1にマージしてくれます。配列1と配列2のKey名は同じものにしておく必要があります。配列2にあっても、配列1に存在しないKeyは無視されます。

extract()関数はPHPの関数で、連想配列のkeyと同じ名称をもつ「変数」として連想配列の値を格納して(、シンボルテーブルに変数をインポートして)くれます

$var_array = array(
  'color' => 'blue',
  'size' => 'large'
);
extract($var_array);

echo '$color, $size'; /* => blue, large */

URLのパラメーターの値を取得するショートコード

上記を踏まえ、URLのパラメーターの値を取得するget_param_val()関数を作り、add_shortcode()関数でショートコードの設定を行います。以下のようにfunction.phpに記述します。

// get_param_val関数の定義
function get_param_val($atts2) {
  // デフォルトの配列
  $atts1 = array(
    // デフォルト値の設定(ここではデフォルトは値なし)
    'name' => ''
  );

  // デフォルトの配列に引数で受け取った配列をマージ
  extract(shortcode_atts($atts1, $atts2));

  // パラメーターの値を取得
  $val = (isset($_GET[$name]) && $_GET[$name] != '') ? $_GET[$name] : '';
  // エスケープ処理
  $val = htmlspecialchars($val, ENT_QUOTES);

  // $valを戻り値として設定(ショートコードの値となる)
  return $val;
}

// ショートコード[param]にget_param_val関数をセット
add_shortcode('param', 'get_param_val');
function.php

例えば、記事のURLが以下だった場合

http://example.com/?id=001

以下のようにショートコードに引数を設定してパラメーターの「id」の値を取得します。

IDの値は[param name="id"]です。=> IDの値は001です。
投稿記事内

パラメーターが複数の場合でも対応可能です。

http://example.com/?id=001&name=hoge

ショートコードに別々の引数を設定し、それぞれのパラメーター(「id」と「name」)の値を取得します。

[param name='name']さんのIDは[param name='id']です。=> hogeさんのIDは001です。
投稿記事内

以上のように汎用的に使えるようにショートコードを作っておくと使いたいときにすぐ使えるので便利ですね。WordPress内でちょっとした演出などをしたい場合はショートコードの使用をぜひおすすめします。

コメント一覧

  • 必須

コメント