こんにちは、ふみです。みなさんはWordPress(ワードプレス)の記事の一部にPHPコードを記述しようと思ったことはありますか?
今回はプラグインを使わずにWordPressの記事内の任意の箇所にPHPの処理結果を表示させる方法を紹介します。
WordPressの記事にPHPコードを組み込むには?
WordPressの記事はPHPコードを直接記述することができない
WordPressのエディタには、「ビジュアルエディタ」と「テキストエディタ」の2つのモードがあります。「テキストエディタ」に切り替えることで、HTMLコードを直接入力することができます。
しかし、「テキストエディタ」にPHPタグ「<!?php」を記述すると、「<!–?php」に自動変換されてしまいます。
これはセキュリティのために行われるエスケープ処理です。WordPressは記事内に直接埋め込まれたPHPコードが実行されるのを防ぐ為、このような変換を行います。
このエスケープ処理を無効化するには、別途、プラグインが必要になります。
ショートコードはWordPressの記事内の任意の箇所に記述できる
ショートコードは、WordPressの機能をカスタマイズするための独自のタグです。テーマの’functions.php’ファイルで定義することができます。
ショートコード自体はPHPの関数になっており、PHPコードで作成した自作の関数を定義することができます。記事内にショートコードを記述した場合、定義した関数の戻り値(返り値)が記事に反映されます。
ショートコード作成の注意点
記述に誤りがあるとWordPressにアクセスできなくなる恐れがある
‘functions.php’ファイルの編集は、少しでも記述の誤りがあるとWordPressにアクセスできなくなる恐れがあります。’functions.php’を編集する前に、必ずサーバーデータのバックアップ等ですぐに元の状態に戻せる準備をしておきましょう。
‘echo’、’print’はショートコードの記述箇所に文字列を出力できない
WordPressのショートコードは’echo’、または’print’で文字を出力するコードを記述しても、記事内に反映されません。
WordPressの記事内に文字列を反映させるには、出力する文字列を変数にまとめた後、’return (文字列の変数);’で戻り値を返すように設定する必要があります。
ショートコードからPHPの外部ファイルを呼び出す場合は、外部ファイル内の記述に’echo’、’print’を記述するとエラーが発生するので、一つの変数に文字列を集約してから戻り値を返すように外部ファイルのPHPコードを記述修正する必要があります。
WordPressのショートコードで’echo’、または’print’で文字を出力したい場合は、出力する文字列を変数にまとめた後、’return (文字列の変数);’で戻り値を返すように設定すれば、WordPressの記事内に出力させたい文字列を反映させることができます。
ショートコードからPHPの外部ファイルを呼び出す場合も、外部ファイル内の記述に’echo’、’print’が含まれているとエラーが発生するので、戻り値の変数に出力する文字列を集約してから返す処理になるように外部ファイルのPHPコードの記述を修正する必要があります。
ショートコードの名前は重複しないようにする
ショートコードの名前は重複しないようにする必要があります。他のプラグインやテーマで同じ名前のショートコードが使用されていないか確認しましょう。重複した名前のショートコードは予期しない動作を引き起こす可能性があります。
パフォーマンスに配慮する
処理が複雑な場合やデータベースへのアクセスが必要な場合は、ページの読み込み速度が遅くなる可能性があります。ショートコードは必要最小限の処理のみを行い、高速かつ効率的な実装を心掛けましょう。
‘functions.php’はテーマのアップデートで上書きされる可能性がある
‘functions.php’はWordPressのテーマのアップデートによって、ファイルが上書きされる可能性があります。
この場合、テーマの’functions.php’ファイルに直接ショートコードを追記した箇所が消去されます。
テーマのアップデートは新しい機能や修正を取り込むために重要ですが、カスタマイズされたコードが上書きされることでカスタマイズが失われる可能性があることにも注意しましょう。
そのため、テーマの’functions.php’ファイルにショートコードを追記する場合、以下のいずれかの方法を検討しましょう
- カスタムプラグインの作成
- 子テーマを使用する
これらの方法を使用することで、テーマのアップデートが行われてもショートコードの追記が保持されるようになります。
WordPressのテーマをアップデートする前に、ショートコードのデータをバックアップしておく事も有効です。
やり方
‘functions.php
‘を編集する
ここではショートコードを定義するファイル’functions.php’を編集する方法を2つ紹介します。
‘functions.php’を編集する前は、WordPressにアクセスできなくなった時に備えて、すぐに元の状態に戻せる準備をしておきましょう。
WordPressのダッシュボード画面から編集する(非推奨)
‘functions.php’は、WordPressのダッシュボード画面から編集することができます。
外観 > テーマファイルエディター
を選択し、画面右側のテーマファイルから「Theme Functions (functions.php)」を選択すると’functions.php’に記述されているPHPコードが表示されます。
PHPコードを編集した後、画面下の「ファイルを更新」ボタンをクリックすると、WordPressの記事内でショートコードを利用できるようになります。
ただし、‘functions.php’の編集に失敗してサイトにアクセスできなくなった場合、WordPressのダッシュボードにもアクセスできなくなり、すぐに再修正することができないので、サイトの復旧が遅れます。
したがって、WordPressのダッシュボード画面から’functions.php’を編集する方法は推奨できません。
この方法でWordPressにアクセスできなくなってしまった場合は、次に紹介する方法で記述の誤りを修正する必要があります。
ファイルサーバーの管理画面から編集する(推奨)
‘functions.php’ファイルは、ファイルサーバーの管理画面から編集することもできます。
やり方は次のとおりです。
1.
サーバーにログインする。
2.
FTPファイルサーバーの管理画面に移動する。
3.
FTPファイルサーバー内のWordPressのフォルダ内から
(ワードプレスの保存フォルダ)/wp-content/themes/(テーマ名)/functions.php
にアクセスする。(テーマが親子に分かれている場合は子テーマにアクセス)
4.
ダウンロード後、編集してアップロードで上書きするか、直接編集して保存する。
5.
WordPressでショートコードの動作を確認する。
‘functions.php’の編集に失敗した場合、サイトにアクセスできなる恐れがあるので、レンタルサーバーの管理画面から’functions.php’ファイルを編集した後は、すぐにWordPressのダッシュボードにアクセスできるか確認しましょう。
‘functions.php’の編集に失敗してサイトにアクセスできない状態になっても、FTPファイルサーバーの管理画面はアクセス可能な状態が続くので、すぐに修正することができます。
‘functions.php
‘にショートコードを追記する
ショートコードを追記する場所
’functions.php’ファイルにショートコードを追加するには、最下行にショートコードに定義する関数を記述したあと、’add_shortcode’というWordPressの関数で定義します。
’functions.php’のファイルの場所と記述内容は、WordPressのテーマによって異なります。
ちなみに、当サイトはWordPressで作成していて、テーマは「Cocoon(コクーン)」を使用しています。
Cocoonの子テーマの’functions.php’のファイルの場所は、次のとおりです。
(ワードプレスの保存フォルダ)/wp-content/themes/cocoon-child-master/functions.php
Cocoonの子テーマの’functions.php’の記述は、未編集状態で次のとおりです。
<?php //子テーマ用関数 if ( !defined( 'ABSPATH' ) ) exit; //子テーマ用のビジュアルエディタースタイルを適用 add_editor_style(); //以下に子テーマ用の関数を書く
この場合は「//以下に子テーマ用の関数を書く」の最後を改行してからショートコードを追記します。
‘functions.php’のコードの記述の最後に「?>」タグを記述する必要はありません。PHPファイルがPHPコードのみを含む場合、PHPタグの終了タグ「?>」は不要です。
通常、’functions.php’ファイルや他のテンプレートファイルでは、PHPコードの最後に終了タグを記述しない方が推奨されています。これは、終了タグの後に余分な空白や改行が含まれる可能性があり、それが意図しない出力を引き起こすことを防ぐためです。
PHPコードの最後の行で終了タグを省略することで、意図せずスペースや改行が出力されることを避けることができます。そのため、‘functions.php’の最後には終了タグを記述しないようにしましょう。
ショートコードを使って文字列を出力する
‘add_shortcode’は定義した関数の戻り値(返り値)を記事内に出力するしくみになっているので、定義した関数に’echo’や’print’等、文字列を出力するコードを組み込んでも、ショートコードの記載箇所に文字列が出力されません。
WordPressの記事内に「Hello world!」の文字列を表示させる場合は、’functions.php’にショートコードを次のように記述します。
function hello_world() { # 「Hello world!」の文字列を表示 return 'Hello world!'; } add_shortcode('shortcode_example01', 'hello_world');
‘functions.php’ファイルの最後に上記コードを追記した後、WordPressの記事内に [shortcode_example01] を記載すると、’add_shortcode’で定義した関数’hello_world’が実行され、戻り値の文字列「Hello world!」が記載箇所に反映されます。
外部のPHPファイルを使う
ショートコードは外部のPHPファイルを利用することができますが、外部ファイルに’echo’や’print’等、文字列を出力するコードを組み込まれていると、ショートコードを記載した場所ではなく、記事の先頭に文字列が表示されてしまいます。
WordPressの記事内に外部ファイルの処理で文字列を表示させる場合は、外部ファイルの文字列を出力するコード’echo’や’print’を変数に置き換える必要があります。
まず、外部ファイルを読み込むショートコードの記述例は、次のとおりです。
function read_external_file() { # 外部ファイルから文字列を出力 $html_value = ''; //ショートコードの戻り値 include('(PHPファイルのパス)'); return $html_value; } add_shortcode('shortcode_example02', 'read_external_file');
【注意】外部ファイルのパスはURLで指定できません。サーバーのファイルパスを記述しましょう。
ここでは’include’で外部ファイルを読み込んでいます。ファイルパスの指定に失敗した場合、処理が実行されずに何も表示されません。
‘include’の代わりに’require’で外部ファイルを読み込んでファイルパスの指定に失敗した場合は、レイアウトの表示が崩れて、「このサイトで重大なエラーが発生しました。」が表示されます。
ちなみにPHPコードに「;(セミコロン)」の記述を忘れた時もエラーが表示されます。
外部ファイルの処理が原因でエラーが表示されてワードプレスの記事の編集ができなくなってしまった場合は、定義した関数の’include’の行を「//(コメントアウト)」で削除して外部ファイルの読み込みを停止させると、ワードプレスの記事の編集ができるようになります。
次は上記のショートコードから読み込む外部ファイルの記述例です。
<?php
# 「Hello world!」の文字列を表示 $html_value = ''; //ショートコードの戻り値 $html_value .= 'Hello'; $html_value .= ' world!';
この外部ファイルの例は、PHPコードのみを含んでいるので、PHPタグの終了タグ「?>」は不要です。
‘echo’の部分は「(文字列の変数名).=」に全て置き換えて、文字列を連結します。
‘functions.php’ファイルの最後に外部のPHPファイルから文字列を出力するコードを追記した後、WordPressの記事内に [shortcode_example02] を記載すると、’add_shortcode’で定義した関数’read_external_file’が実行され、戻り値の文字列「Hello world!」が記載箇所に反映されます。
‘functions.php’のファイルパスを確認する
サーバーのファイルパスがわからない場合は「functions.php」にショートコードを次のように記述します。
function file_path() { # ファイルパスの取得 return __FILE__; } add_shortcode('shortcode_example03', 'file_path');
‘functions.php’の最後に上記コードを追記した後、WordPressの記事内に[shortcode_example03] を記載後、プレビューすると’functions.php’のファイルパスが表示されます。
‘functions.php’のファイルパスがわかれば、サーバー内のファイルの位置関係から外部ファイルのフルパスがわかります。
また、’__FILE__’をPHPの外部ファイルで実行した場合は、外部ファイルのパスが表示されます。
ただし、いずれの場合もファイルパスは「プレビュー」で確認するところまでにして、「公開」しないように注意しましょう。
ショートコードにパラメーターを使う
ショートコードには、パラメーターを指定することもできます。
ショートコードのパラメーターは、定義された関数の引数の配列の要素として代入されます。関数内では、パラメーターの値を取得して処理を行うことができます。
ショートコードの名前を’my_shortcode’、1つ目のパラメーター名を’param1’、2つ目のパラメーター名を’param2’とするとき、WordPressの記事内に記載するショートコードは次のような形になります。
[my_shortcode param1='(パラメーター1)' param2='(パラメーター2)']
パラメーターの囲みは「’(シングルクォーテーション)」、「”(ダブルクォーテーション)」のどちらも使えます。
パラメーターを2つ使うショートコードを定義する、’functions.php’の記述例は、次に紹介します。
文字列の表示に期限を設定する
文字列の表示に期限を設定するショートコードを作成します。
‘functions.php’にショートコードを定義する記述例は、次のとおりです。
function time_limited_words($atts) {
# パラメーターの取得
$atts = shortcode_atts(
array(
'word' => 'default value',
'datetimelimit' => 'default value', ), $atts, 'word_datetimelimit' ); # パラメーターの値を取得 $word_value = $atts['word']; $datetimelimit_value = $atts['datetimelimit']; # $datetimelimit_valueで指定した期限切れの日時になる前は$word_valueを返す date_default_timezone_set ('Asia/Tokyo'); //日本標準時を設定 $datetimelimit_time = strtotime($datetimelimit_value); //$datetimelimit_value(日時)をUnixタイムスタンプに変換 if(time() < $datetimelimit_time) { //現在の時刻が期限切れになっていない時 return $word_value; //期限前は$word_valueを返す } else { return; //期限切れは戻り値なし } } add_shortcode('word_datetimelimit', 'time_limited_words');
'functions.php'ファイルの最後に上記コードを追記した後は、WordPressの記事内(ビジュアルエディタを使っている場合はカスタムHTML)に次のショートコードを記載します。
[word_datetimelimit word='<span style="background-color:red; color:white;">新着</span>' timelimit='2100-01-01']
上記ショートコードを記載した記事を「プレビュー」または「公開」すると、'add_shortcode'で定義した関数'time_limited_words'が実行され、1つ目のパラメーター'word'に入力したHTMLコードによる表現「新着」が、2つ目のパラメーター'datetimelimit'に入力した期限切れの日時「2100年1月1日」になるまで記載箇所に表示されます。
期限切れの日時に時間も設定する場合は「datetimelimit='2100-01-01 0:00'」の形式で記載します。
パラメーター名を使わずに入力する(非推奨)
ショートコードのパラメーターは、パラメーター名を指定せずに半角スペース区切りで入力することもできます。
ただし、この方法はパラメーターがどのような意図で使用されているのか把握するのが困難になる為、推奨できません。また、半角スペースをパラメーターに入力することができません。
ここではショートコードに2つの数字をパラメーターに入力して掛け算する例を紹介します。
'functions.php'にショートコードを次のように記述します。
function kakezan($atts) { # 2つのパラメーターを数値型に変換して掛け算 $result = intval($atts[0]) * intval($atts[1]); return $result; } add_shortcode('shortcode_example04', 'kakezan');
'functions.php'の最後に上記コードを追記した後、WordPressの記事内に [shortcode_example04 2 3] を記載すると、'add_shortcode'で定義した関数'kakezan'が実行されます。
入力したパラメーターは定義された関数の引数'$atts'の配列の要素として代入されます。
1つ目のパラメーター「2」が'$atts[0]'、2つ目のパラメーター「3」が'$atts[1]'に代入されます。
2つのパラメーターを数値型に変換後、「2×3」の掛け算をします。
計算結果により、戻り値は「6」となり、記載箇所に反映されます。
まとめ
- WordPressはPHPコードを直接記述すると、エスケープ処理により実行されない
- WordPressはショートコードを使うと、PHPコードを記事内に組み込むことができる
- 'echo'、'print'は、ショートコードを記載した箇所に文字列を表示することができない
- ショートコードの名前は重複できない
- 'functions.php'ファイルを編集する前は、WordPressにアクセスできなくなった時に備えて、すぐに元の状態に戻せる準備をしておく
- ‘functions.php’の最後は、終了タグ「?>」を記述しない
- 'include'、'require'のファイルパスはURLで指定できない
- 外部ファイルの読み込みが原因でワードプレスの編集ができなくなった場合は、'include'の行を「//(コメントアウト)」で削除すると編集できるようになる
- PHPのファイルパスは’__FILE__’で確認できるが、公開しないように注意する
- ショートコードのパラメーターは、定義された関数の引数の配列の要素として代入される
ありがとうございました。
コメント