【WordPress連載企画 第10回】オリジナルのテンプレートファイルを追加してみよう

【WordPress連載企画 第10回】オリジナルのテンプレートファイルを追加してみよう

さてさて、早いものでこの連載企画も最終回となりました。

今回は、サイト上で共通している部分をオリジナルのテンプレートにしてみよう、という回です。

サイト内で同じ記述をいくつも書かなきゃならない場合があると思います。
例えばアクセス解析のトラッキングコードなどは、サイト内のすべてのページに埋め込む必要があったりしますよね。
その場合は、トラッキングコードを独自テンプレートとして切り出し、それを他から読み込むようにすると便利です。

今回はそういう時に活躍する、オリジナルテンプレートについてお話します。

テンプレートを読み込む関数

テンプレートを用意する前に、テンプレートを読み込む関数を確認しましょう。
関数名は get_tempalte_part() です。

get_tempalte_part($slug, $name);

仕様としては、テンプレートは「($slug)-($name).php」という命名規則になっているので、読み込みたいテンプレートの $slug(スラッグ名)と $name(テンプレート名)を指定する形です。

例えば、テーマ「Twenty Fourteen」に最初からある「sidebar-content.php」を読み込みたい場合は、

get_template_part('sidebar', 'content');

とします。

ちなみに $name は省略可能ですが、$slug は必須です。スラッグ名しかないテンプレートの場合、例えば「content.php」を読み込みたい時は、

get_template_part('content');

という風にします。

テンプレートを作る

では、独自のテンプレートを作っていきましょう。

共通化したい記述をファイルに記述し、「(スラッグ名).php」の形式でファイルを保存します。作ったファイルは、現在利用しているテーマのテンプレート置き場に SFTP などでアップします。

例えば、「theme-bashalog」という名前ののテーマを使っているのであれば、

\wp-content\themes\theme-bashalog

の下が置き場となるので、作ったファイルはこちらに置きましょう。これで、テンプレートとして認識されます。管理画面の「外観 > テーマ編集」に行き、右の一覧に作ったファイルが表示されていれば OK です。

トラッキングコードをテンプレートにしてみる

では具体的にテンプレートを作る例を説明します。

トラッキングコードのテンプレートを作りたいので、「trackingcode.php」というファイル名にしましょう。ファイルの中身は Google Analytics のトラッキングコードです。

<!-- [[ Google Analytics ]] -->
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxx-x']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<!-- / [[ Google Analytics ]] -->

これを挿入したい場所で読み込ませます。

get_template_part('trackingcode');

全てのページで読み込ませたいので、全てのページに表示されるであろう「ヘッダー」で呼び出すなどすると良いかもしれません。

テンプレートをネームベースで分けてみる

前節では「trackingcode.php」というテンプレートを作って読み込みましたが、サイトによってはいろいろなトラッキングコードを利用していたりしますよね。そういう時には、ネームで切り分けると管理もしやすくなります。

例えば、

  • trackingcode-google.php
  • trackingcode-yahoo.php
  • trackingcode-remarketing.php

などなど。

そして、読み込む際にはスラッグの他に、ネームを付けて読み込みます。

get_template_part('trackingcode', 'google');
get_template_part('trackingcode', 'yahoo');
get_template_part('trackingcode', 'remarketing');

こんな感じで読み込んで使用します。

問い合わせの表示をテンプレートにしてみる

コーポレートサイト等の場合は、全てのページの下部にお問い合わせのエリアを置いたりします。このエリアをテンプレートとして切り出しておけば、事務所移転で住所変更しなければならくても、ここの変更だけで作業が済みます。

今回は単純に画像を読み込むだけのテンプレートを作成してみます。ファイル名は「contact.php」にしてみます。

<img src="/images/contact.png" alt="Web制作、フットサルについてのお問い合わせ">

同じく、挿入したい場所で読み込みます。

今回の場合はファイルにスラッグ名しかないので、スラッグ名の指定だけで OK です。

get_template_part('contact');

これを、記事の下部に入れたいので、「content.php」の下部などに入れるといいと思います。

表示確認

その他、使い方いろいろ

他にも、

  • バナースペース
  • サイトからのお知らせ
  • (リンクではなく)お問い合わせフォームそのもの

などなど、いろいろなものに使えます。共通のコードはなるべく一つにまとめるようにすると、後々の作業量が減るので大変オススメです。

まとめ

同じコードは極力少なくすることで、作業量とミスを減らす事ができます。積極的に活用してみてください。

ただし注意点として、共通化した記述に関しては、サイト全体で共通化しないと意味がありません。例えば、先ほどのお問い合わせ表示のテンプレートで、もしも一箇所だけテンプレートを使ってない場所があったとします。会社が移転して住所が変更になったからテンプレートを変更しよう…と作業をしても、一箇所だけ変更漏れが出てしまう可能性があります。そのため、オリジナルのテンプレートについては、役割と使用箇所をどこかにドキュメント化しておくことをオススメします。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ