SEO対策なら株式会社ペコプラ > Webサイト制作 > Web開発 > 【WordPress】ショートコードを使って投稿からPHPを実行する

【WordPress】ショートコードを使って投稿からPHPを実行する

Webサイト制作

Web開発

2020.11.30

私はもともとPHPプログラマなのですが、今までの業務ではWordPressを触る機会がありませんでした。
この度の業務で初めてWordPressを使用することになったのですが、プログラムを知らなくてもブログが作れる便利さは、現在の普及率も納得のものでした。
ただ、カスタマイズ等をするに辺り、プログラマからの目線でWordPressの理解につまづいたこともありました。
そこで、今回はそのような点を含めて、WordPressの使い方を紹介できればと思います。

1 目標
2 投稿にコードを書いてみる
3 ショートコードを使う
4 ショートコードでパラメータを使う
5 もうひとつのパラメータ
6 var_dumpしてみる
7 まとめ

目標

まずはともかくPHPのプログラムを実行しないことには何も始まりません。
なので、最初の目標は「投稿からプログラムを実行する」としたいと思います。

投稿にコードを書いてみる

投稿からプログラムを実行したいので、まずは投稿内容にプログラムを書いてみたいと思います。

では投稿を見てみましょう。

はい、何も表示されていませんね。

まあこれは想定内というか、これでプログラムが実行されても問題だと思います。
では、投稿からプログラムを実行するにはどうしたら良いのか調べていきましょう。

ショートコードを使う

調べてみると、どうやら「ショートコード」という機能を使うとよさそうです。
ショートコードで実行するプログラムは「functions.php」に書く必要があります。
functions.phpは、WordPressをインストールしたディレクトリ配下の以下の場所にあります。
wp-content/themes/[選択しているテーマ]/functions.php
どうやらテーマごとに処理を書く必要がありそうです。

それでは早速コードを書いてみましょう。

[functions.php]

1function hello_world(){
2    return "こんにちは世界";
3}
4add_shortcode('h_w', 'hello_world');

書き方は、まず呼び出したい関数を作成(hello_world)します。
その後、add_shortcodeで投稿から呼び出すタグ名を設定します。

では実際に投稿から呼び出してみましょう

[投稿内容]

[記事内容]

無事関数が呼び出されていることが確認できました。

ショートコードでパラメータを使う

では次に、パラメータ使った処理を書いていきたいと思います。

[functions.php]

1function hello_world($atts = array()){
2    $params = shortcode_atts(
3            array("word" => "こんにちは世界"),
4            $atts
5    );
6    return $params["word"];
7}
8add_shortcode('h_w', 'hello_world');

作成した関数の第一引数に、配列で指定したパラメータが入ってくるようです。
受け取ったパラメータは、shortcode_attsを使用してフィルタすると良いようです。

ではこちらの処理にパラメータを渡して動かしてみましょう。

[投稿内容]

[記事内容]

はい、パラメータが反映されていることがわかりました。

パラメータが無い場合は、shortcode_attsで指定された初期値が入ります。

[投稿内容]

[記事内容]

もうひとつのパラメータ

ショートコードではもうひとつパラメータを渡す方法があるようです。
それが、第二引数を使う方法です。

[functions.php]

1function hello_world($atts = array(), $content = null){
2    $params = shortcode_atts(
3            array("color" => "00f"),
4            $atts
5    );
6    return "<span style=\"color:#".esc_attr($params["color"])."\">".$content."</span>";
7}
8add_shortcode('h_w', 'hello_world');

第二引数を指定することで、add_shortcodeで設定したタグの内容を受け取ることができます。

[投稿内容]

[記事内容]

var_dumpしてみる

さて、今回作成したプログラムは単純な内容ですが、実際に開発するとなるとやはりデバッグが必要です。
その際はvar_dump等を使用して値を確認したりするわけですが、var_dumpは実行することができるのでしょうか。
先程のプログラムに追記してみます。

[functions.php]

1function hello_world($atts = array(), $content = null){
2    $params = shortcode_atts(
3            array("color" => "00f"),
4            $atts
5    );
6    var_dump($atts);
7    echo "<br>";
8    var_dump($params);
9    echo "<br>";
10    return "<span style=\"color:#".esc_attr($params["color"])."\">".$content."</span>";
11}
12add_shortcode('h_w', 'hello_world');

さあどうなるでしょうか。

[記事内容]

おっ、表示されました。
でも表示位置がなんだか変ですね。

あと、、、

[投稿内容]

投稿の保存に失敗しました。

var_dumpは一応使えますが、あくまでデバッグの範疇で使うのがよさそうです。
※echo等、関数内での出力は同様の結果となりました。

まとめ

今回は「投稿からプログラムを実行する」という目標でWordPressを触ってみました。
目標は達成することができましたが、これだけだとまだWordPressでサイト制作をしている、という感じがあまりありませんね。
という訳で、次回は「固定ページを使用してページを作成する」という目標で開発をしてみたいと思います。