WordPressでブログやウェブサイトを運営していると、特定の投稿だけに特別なデザインやレイアウトを適用したいと考えることがあります。例えば、特定の商品紹介やイベント告知ページを他の投稿とは異なるデザインにしたい場合です。そこで役立つのが、投稿ページのカスタムテンプレートです。本記事では、PHPを活用してカスタムテンプレートを作成し、活用する方法を初心者にもわかりやすく解説します。
子テーマの作成で安全にカスタマイズをスタート
まず初めに行うべきなのは、子テーマの作成です。親テーマに直接変更を加えると、テーマのアップデート時に変更が上書きされ、これまでの作業が無駄になる可能性があります。そこで、子テーマを作成することで、親テーマのアップデートによる影響を受けずにカスタマイズを進められます。
子テーマを作成する手順
- 子テーマフォルダの作成
WordPressのwp-content/themesディレクトリ内に、新しいフォルダを作成します。このフォルダには親テーマ名に-childを付けた名前をつけると良いでしょう（例:twentytwenty-child）。 - スタイルシートの作成
作成した子テーマフォルダ内に、style.cssファイルを新規作成し、以下の内容を記述します。
/*
Theme Name: Twenty Twenty Child
Template: twentytwenty
*/
Theme Nameには任意の名前を、Templateには親テーマのフォルダ名を記載します。
functions.phpの作成
次に、functions.phpファイルを子テーマフォルダ内に作成し、以下のコードを追加します。
<?php
// 親テーマのスタイルシートを読み込む
function enqueue_parent_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
?>
これで子テーマの準備は完了です。
テンプレートファイルの新規作成でオリジナリティを
続いて、カスタムテンプレートを作成します。子テーマ内にsingle-custom.phpという名前の新しいPHPファイルを作成します。このテンプレートファイルが、特定の投稿に適用されるカスタムデザインの基盤となります。
基本的なPHPコード
以下は、カスタムテンプレートの基本コードです。
<?php
/**
* Template Name: カスタム投稿
* Template Post Type: post
*/
get_header(); // ヘッダーを読み込む
if ( have_posts() ) :
while ( have_posts() ) : the_post();
?>
<article>
<h1><?php the_title(); ?></h1> <!-- 投稿タイトルを表示 -->
<div class="post-content">
<?php the_content(); ?> <!-- 投稿内容を表示 -->
</div>
</article>
<?php
endwhile;
endif;
get_footer(); // フッターを読み込む
?>
コードのポイント解説
Template Name: テンプレートの名前を指定します。この名前が管理画面で表示されます。Template Post Type: 適用する投稿タイプを指定します。ここではpostを指定しているため、通常の投稿に適用されます。get_header()とget_footer(): ヘッダーとフッターを読み込む関数です。the_title()とthe_content(): 投稿のタイトルと本文を表示します。
管理画面でのテンプレート適用方法
コードの記述が完了したら、WordPressの管理画面に移動します。次に、テンプレートを適用したい投稿の編集ページを開きます。右サイドバーにある「テンプレート」オプションから「カスタム投稿」を選択し、更新ボタンをクリックします。これで、その投稿にカスタムテンプレートが適用されます。
適用の確認
公開後、実際の投稿ページを確認してみましょう。指定したカスタムレイアウトが適用されていれば成功です。
カスタムテンプレートを活用した高度なデザイン
カスタムテンプレートを使うことで、単に見た目を変えるだけでなく、機能面でも投稿を拡張できます。例えば以下のような要素を追加することができます。
カテゴリーやタグを表示
投稿のカテゴリーやタグを表示することで、ユーザーが関連コンテンツにアクセスしやすくなります。
<div class="post-meta">
<p>カテゴリー: <?php the_category(', '); ?></p>
<p>タグ: <?php the_tags('', ', '); ?></p>
</div>
カスタムフィールドの活用
カスタムフィールドを利用すれば、投稿ごとに異なるデータを表示することも可能です。
<div class="custom-field">
<p><?php echo get_post_meta(get_the_ID(), 'カスタムフィールド名', true); ?></p>
</div>
テンプレートの管理と削除
作成したテンプレートは、必要に応じて削除やリセットが可能です。例えば、テンプレートを適用したい投稿が増えた場合でも、コードを少し修正するだけで柔軟に対応できます。また、不要になったテンプレートはファイルを削除するだけで無効化できます。
カスタムテンプレートでサイトの魅力を最大化
カスタムテンプレートを活用することで、サイト全体のデザインを統一しつつ、特定の投稿には独自性を持たせることができます。これにより、訪問者にとって魅力的で使いやすいサイトを構築できるでしょう。
まとめ
この記事では、WordPressでPHPを活用して投稿ページのカスタムテンプレートを制作する方法を解説しました。子テーマの作成からテンプレートの適用方法、さらには具体的なソースコードの記述まで、必要な手順をすべて網羅しています。これを機に、ぜひカスタムテンプレートに挑戦し、サイトの個性をさらに引き出してみてください。