WP topics

ワードプレスで任意のファイルをテンプレート化しインクルードさせる方法

ワードプレスで任意のファイルをテンプレート化しインクルードさせる方法

CVボタンやインフォメーションなど、各記事毎に読み込ませたい内容や、記事内で何度も記述のあるソースはテンプレート化し関数で呼び出すことで毎度のコピペの手間、更新の手間を減らすことができます。
毎回記事毎にソースをコピーして貼り付けを行っていると、例えばCVボタンの文言を変えたりコンテンツを追加したりといった場合、全ての記事で変更を行わないといけません。
そんなことやってられませんよね。

では実際にパーツをテンプレート化してインクルードする方法を試してみます。
上手く動かなかったときに確認したいポイントも書いていますので合わせて確認してみてください。

目次

テンプレート化するソースを用意

まずはテンプレート化するパーツを用意します。
今回は記事毎に毎回呼び出している（という事にした）CVボタンをテンプレート化してみます。

記述しているcvボタンはこんな感じ。

\ 24時間受付中！/

お問い合わせはこちら

 

<div class="cvBtn">
    <a href="contact.php">
        <p>\ 24時間受付中！/</p>
        <p><span>お問い合わせはこちら</span></p>
    </a>
</div>

まぁ実際にはお問い合わせに対応なんてしてないのでここでしか使われないcvボタンですが。今回は例として、です。
ではこちらのcvボタンをテンプレート化してみましょう。

phpとして保存する

といっても非常に簡単です。
テキストエディタでphpファイルを作成し、呼び出したいソースを貼り付けるだけ。
任意の名前を付けて保存します。今回はcvbtn.phpという名前にしました。

イメージとしてはこんな感じです。
これで呼び出すphpの作成は完了。
あとは任意の位置でcvbtn.phpファイルを呼び出すだけです！

テンプレートパーツを呼び出す

テンプレート化させたファイルを呼び出すには以下のコードを使います。

function Include_php($params = array()) {
    extract(shortcode_atts(array(
        'file' => 'default'
    ), $params));
    ob_start();
    include(get_theme_root() . '/' . get_template() . "/$file.php");
    return ob_get_clean();
}
add_shortcode('phpInclude', 'Include_php');

まずfunctions.phpにこのように記述します。
ショートコードを使って指定した階層にいる特定のファイルを呼び出しますよーというコードです。
上記が記述できたら固定ページor投稿ページで以下のように呼び出し用のショートコードを記述してあげればOKです。

[[phpInclude file=’cvbtn’]]

file=””の中にはテンプレートとして作成したphpの名前を入れてあげます。
今回の例でいうとcvbtn.phpの「cvbtn」の部分ですね。拡張子（.php）まで記述する必要はありませんので注意してください。

うまく表示されましたでしょうか？

記述時に気を付けたいポイント2点！

上手くいかないという時に確認したい「よくあるミスポイント」もまとめておきますので、記述は間違ってないはずなのに動かない！という時は以下を確認してみてください。

階層は正しいか

上記のコードは呼び出すテンプレートファイルと呼び出し先が同じ階層にいることを前提に書いておりますので、ファイルを置く階層によっては上記のコードではうまく動きません。
下図のように呼び出すファイルとcvbtn.phpが同階層にいる場合は

include(get_theme_root() . '/' . get_template() . "/$file.php");

6行目の記述はそのままでいいのですが、下図のようにテンプレートパーツをフォルダを作って管理する場合や既に作成されたフォルダの中に置いた場合は

include(get_theme_root() . '/' . get_template() . "/temp/$file.php");

/$file.phpの前に/temp（下部のディレクトリ）を追加してあげる必要がありますので注意が必要です。
ファイルの置き方はサイトや個人のやり方があると思うので、サイトに合わせて上手い事やってあげてください。

子テーマを使用していないか

階層の指定は間違えてないのにショートコードを記述したらエラーがでる！という方は、子テーマを使って運用していないでしょうか？

include(get_theme_root() . '/' . get_template() . "/$file.php");

ここで使われているget_template()は親テーマのディレクトリ名を取得する関数になります。
get_template()を使うと上記の場合、親テーマの階層にあるcvbtn.phpを参照しようとしますので「そんなものはない」とエラーが出るわけです。

もし子テーマを使ってサイトを運用している場合はget_template()の箇所をget_stylesheet()に書き換えてあげる必要があります。

include(get_theme_root() . '/' . get_stylesheet() . "/$file.php");

このようにすることで、子テーマのフォルダを参照する事ができるのでエラーが解消できるかと思います。

まとめ

こうやって一元管理できるようにしておくことで、cvボタンに電話番号を追加したり、文言の追加をしたりといった際に10記事も20記事も書き直すなんて時間がもったいないことをしなくて済みます。
効率よく記事を作成、更新するためにもぜひ使ってみてください。

WordPressの基礎情報カテゴリの最新記事