WEB制作

WordPressのテンプレートファイルを必要に応じて分けて読み込む

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

テンプレートファイルを必要に応じて分けて読み込む

WordPressのテーマを見てみると、ヘッダーやフッター、サイドバーなど共通するパーツごとに分けて、それぞれ1つのファイルにまとめてあると思います。

共通するヘッダー部分をまとめて1つのファイルに、共通するフッター部分をまとめて1つのファイルにしておくなど、それらのファイルを必要な箇所に読み込んでいます。

自分でオリジナルのテーマを作成する場合でも、同じような考え方で作成すると思います。

メリットとしては、1つのファイルを修正・編集するだけで、読み込んでいる箇所すべてが変更されるからです。
個別の細かいセッティングがない限り、まとめておくほうが、コードも見やすいですし、把握しやすく、管理がスムーズになるためです。

今回は初歩的なテンプレートファイルの分け方や読み込み方法を説明していきます。テーマをオリジナルでカスタマイズしない方でも、ちょっとした修正をする場合に、ファイル同士の関わりがわかるように説明しておきたいと思います。

テンプレートパーツの読み込み

お使いのテーマによって異なりますが、よくあるテーマでは、「index.php」や「category.php」、「sidebar.php」などのテンプレートファイルに、ヘッダーやフッター、サイドバーなど共通するパーツを読み込んでいると思います。

//ヘッダーパーツの読み込み
<?php get_header(); ?>
//フッターパーツの読み込み
<?php get_footer(); ?>
//サイドバーパーツの読み込み
<?php get_sidebar(); ?>

上記は基本的なパーツですが、他にも共通のパーツにしておきたい場合が多いと思います。



パーツを分けておく

記事ページは「タイトル」と「コンテンツ」を、一覧ページは「タイトル」と「コンテンツの概要」を、お知らせページは「タイトル」だけを一覧で表示させたいなどの設計があるとします。

これらを様々なテンプレートファイルで使い回すなら、初めから共通のパーツに分けておく方が便利です。

例えば「content-single.php」「content-excerpt.php」「content-title.php」などのファイル名にしておきます。

「content-single.php」の内容は「タイトル」と「コンテンツ」。

//content-single.php
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>

「content-excerpt.php」の内容は「タイトル」と「コンテンツの概要」、「続きを読む」のリンク。

//content-excerpt.php
<h2><?php the_title(); ?></h2>
<p><?php echo mb_substr(get_the_excerpt(), 0, 110).'...'; ?></p>
<a href="<?php the_permalink(); ?>">続きを読む</a>

「content-title.php」の内容は「タイトル」のみをリストでループ表示させる。

//content-title.php
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

このように分けておくと必要なパーツを、必要な箇所に読み込むことができます。

※細かくはアイキャッチや日付などを表示したいことがあると思いますが、お好みで追加してください。

パーツを読み込む

これらのパーツを読み込みたい場合は、テンプレートファイルの表示させたい箇所に下記を記述します。

//記事ページ
<?php get_template_part('content','single'); ?>
//一覧ページ
<?php get_template_part('content','excerpt'); ?>
//お知らせページ
<?php get_template_part('content','title'); ?>

その他のパーツファイル

例えばソーシャルボタンを読み込みたいとします。こちらFacebookやTwitterなどボタンを表示させるごとに毎回同じ記述をするのは無駄です。

スクリプト部分はヘッダーやフッターにまとめて1つ入れておき、表示に使用するソースは「_sns.php」などの名前で共通の1つのパーツファイルを作成しておき、必要箇所に読み込むなどの方法があります。

読み込み方は、下記のようになります。

<?php include( TEMPLATEPATH . '/_sns.php' ); ?>

こちらで「_sns.php」というファイルを読み込んでいます。

まとめ

このように必要に応じて、共通するファイルは1つにまとめておき、表示させたい箇所に読み込む方法が便利です。

オリジナルでテーマを作成する場合やちょっとした修正をする場合もファイル同士の関係を早くつかむことが大切です。

「こっちは変更されたけど、あっちは変わってない」や「ここは変更しなくていいのにすべて変わってしまった」など、管理が複雑にならないよう使いやすいようにカスタマイズしてみてくださいね。



  • このエントリーをはてなブックマークに追加
SEO対策でお困りでしたらお任せください

メディア事業部 WEBディレクター

高校の卒業アルバムの「みんな一言」の欄に、安易につまらないことを書き残してしまいました。言葉は本当に難しいです。気を付けます、特にここは真面目な会社なので。

▶ コネル飯塚のTwitter