ショートコードを使って、WordPressで動的なページを作ろう

GET IT系 PHP POST REQUEST shortcode WordPress クエリ ショートコード リクエスト

WordPressを本格的に使い始めて2ヶ月弱が経ちました。 元々PHPで幾度かサイト構築した経験はあったのですが、WordPressの便利さには感服するのみで、デファクトスタンダードになっているのも納得です。

WordPressに慣れてきて、自作PHPサイトをWordPressに置き換えたい、と思いました。 置き換えをするにあたり、1つ大きく不足している知識がありました。

WordPressで、GETやPOSTのクエリ情報(URLパラメータ, リクエスト情報)ってどうやったら受け取れるんだろうか？ということです。

それを解決するために用いるのが、ショートコードでした。

今回はこのショートコードの基本的な使い方をご紹介します。

この記事は、PHPでのWEBサイト構築ができるだけの知識を持った方が、WordPressでその知識を活用するための情報を記載しています。 そのためコードの説明等は少なめになっています、ご承知おきください。 内容に理解できないことがありましたら、コメントやTwitterでご連絡ください。

ショートコードの基本的な書き方

WordPress("投稿"や"固定ページ")のコンテンツ内に直接PHPのコードを書いても、そのコードは動作しません。 自作のコードを動作させるための仕組みがショートコードです。

ショートコードを使うのに必要な記述は、記述場所と役割から2つに分類されます。

  1. 自作関数を作成し、ショートコードハンドラーとして登録するPHPプログラム
  2. 登録されたショートコードを使用するコンテンツ

自作関数を作成し、ショートコードハンドラーとして登録するPHPプログラム

これを記述する場所は、functions.phpになります。

WordPressの管理画面から、[外観] -> [テーマの編集] を選び右側のテーマファイル一覧からfunctions.phpを選ぶと編集することができます。

このファイルに、以下のようなコードを追記します。

function sample(){
  return "Hello ShortCode!";
}

add_shortcode('smpl', 'sample');

3行目までは、初歩的なPHP関数の宣言ですね。 5行目の記述が、ショートコードの肝ですね。 第1引数smplというタグ名で、第2引数sample関数をショートコードとして登録するという意味になります。

登録されたショートコードを使用するコンテンツ

続いて、上で登録したショートコードを使用するコンテンツを作成します。

WordPressの管理画面から、[固定ページ] -> [新規追加] を選び、コンテンツ編集画面を開きます。(固定ページではなく投稿でも同様です) コンテンツのタイトルは、"ショートコード練習"とでもしておきましょう。 また練習の間は、右側の公開メニューから、公開状態を"非公開"とするのが良いでしょう。

コンテンツの内容はテキストエディタモードで、以下のように書きます。

smpl

これだけです。

これで、今作成したコンテンツを開いてみると、以下のように表示されます。

[smpl]

ここまでがショートコードの一番基本的な使い方の説明となります。 ショートコードは、引数の受け渡しや、囲み型ショートコードなど、拡張的な使い方がいくつかあります。 それについては、以下のサイトが詳しいですのでそちらをご参照ください。

ショートコード API - WordPress Codex 日本語版

ショートコードでクエリ情報を処理する

それでは、今回の主題です。

ショートコードでGETクエリ,POSTクエリを処理する方法を紹介します。

ショートコードでGETクエリ情報を処理する

下記のプログラムをfunctions.phpに追記してください。

function getMode(){
  return $_GET["mode"];
}

add_shortcode('getmode', 'getMode');

そして、以下のコンテンツを作成してください。

getmode

このコンテンツをただ表示しても、クエリを送っていませんので、クエリ情報は表示されません。

コンテンツのパーマリンクが https://exapmle.com/test/ と仮定すると、 ブラウザのアドレスバーに https://example.com/test/?mode=testと入力して開いてみてください。

記事本文の部分に

test

と表示されたと思います。

ショートコードでPOSTクエリ情報を処理する

下記のプログラムをfunctions.phpに追記してください。

function getMode2(){
  return $_POST["mode"];
}

add_shortcode('getmode2', 'getMode2');

そして、以下のコンテンツを作成してください。 パーマリンクはhttps://exapmle.com/test2/とします。

getmode2

POSTクエリの送信は、アドレスバーからできませんので、送信フォームを作る必要があります。 これもコンテンツで作ります。 パーマリンクはhttps://exapmle.com/send/とします。

formタグのaction属性で指定しているのは、上で作った表示部分のパスです。

このフォームを作ったコンテンツを開くと、テキスト入力欄と送信ボタンができます。

テキスト入力欄に post!! と入力し、送信ボタンを押すと、表示部分のコンテンツページに切り替わり、 記事本文の部分に

post!!

と表示されたと思います。

まとめ

いかがでしたでしょうか。 本当に初歩の部分のご紹介でしたが、GET/POSTのクエリを受けるプログラムがWordPress上で作れたかと思います。

PHPコード部分とそれを使うショートコード部分と分離されてはいますが、 $GETや$POSTの使い方は、標準のPHPと変わりません。

  • PHPコードとする部分は関数化が必須となる
  • 作った関数をショートコードとして登録する必要がある
  • 呼び出しはショートコードタグで行う

の3点さえ意識すれば、PHPプログラミング経験がある方なら、大きく悩むことはないと思います。

WordPressの母体の大きさに惑わされることなく、自身のプログラミングスキルを発揮したサイトづくりを楽しみましょう!