カスタムページテンプレートの使い方 – [18]WordPressテーマ制作レッスン

  • ブックマーク
  • -
    コピー

このレッスンでは、カスタムページテンプレートの作り方・使い方を解説しています。

動画

レッスンの準備

このレッスンでは、上記リポジトリのwp-lesson-18というディレクトリにあるファイルを使って学習を進めていきます。

WordPressのルートディレクトリにあるwp-contentの中のthemeswp-lesson-18ディレクトリを設置しましょう。

カスタムページテンプレートの使い方

カスタムページテンプレートとは、

複数のページで使用できるページテンプレート 参照:ページテンプレート

では、実際に作ってみましょう。

テンプレートファイルを作る

templatesというディレクトリ(フォルダ)を新しく作り、その中にsingle.phpを複製してファイル名をleft-sidebar.phpに変更したファイルを作りましょう。

このtemplatesというディレクトリは作らなくても動作しますが、他のテンプレートファイルと分けておくために、新しくディレクトリを作成しました。ご自身で考えて最適な運用方法を考えてみてください。

そして、新しく作成したleft-sidebar.phpファイルの一番最初の行にPHPの複数行コメントアウトを記述します。

/* */で複数行コメントを書けばよいので、

/**
 * 
 */

と書くことができます。

今回は、最初の行に<?php get_header(); ?>が記述してあるので、このまま<?php ?>を利用しましょう。以下のように書くことができます。

<?php
/**
 * 
 */
get_header(); ?>

そして、Template Name:と記述し、続いてテンプレートにつけたい名称を記述します。

<?php
/**
 * Template Name: 左サイドバー
 */
get_header(); ?>

管理画面より確認してみる

管理画面内の固定ページ→固定ページ一覧で固定ページの一覧を確認することができます。任意の固定ページタイトル付近にマウスカーソルを近づけると「クイック編集」というリンクが表示されるので、クリックしてみましょう。

こちらの機能を利用することで、固定ページの編集画面に移動しなくても一部ですが編集することができます。こちらで「テンプレート」という項目が追加されていて、先ほど作成したカスタムページテンプレートが選択できることが確認できます。

では、同じように「投稿」でも確認してみましょう。

投稿でもカスタムページテンプレートを利用できるようにする

今のままでは、投稿でカスタムページテンプレートを利用することができないことがわかりました。

投稿でも、固定ページと同様にカスタムページテンプレートを利用できるようにするためには、以下のような記述を追加する必要があります。

<?php
/**
 * Template Name: 左サイドバー
 * Template Post Type: Post, Page
 */
get_header(); ?>

Template Post Type:という項目を追加しました。このカスタムページテンプレートを利用できる投稿タイプを指定しています。ここでは、post, Pageと記述しましたので、Post=投稿Page=固定ページということになります。よって、このカスタムページテンプレートは投稿と固定ページで利用できるようになります。

さらに、カスタム投稿タイプなども指定することで利用することができます。

レイアウトを変更するCSSクラスを追記する

カスタムページテンプレートが認識されることが確認できたので、実際にレイアウトが少し違うテンプレートファイルに仕上げて行きましょう。

上記しているように、ここではサンプルとして**「サイドバーが左に配置されるテンプレート」**を作ってみます。

既にCSSクラスは用意してありますので、<div class="l-content-area c-container">の部分を以下のように修正しましょう。

<div class="l-content-area l-content-area_left-sidebar c-container">

実際の表示を確認

任意の投稿(もしくは固定ページ)のテンプレートを切り替えて、実際の表示を確認してみましょう。

このレッスンの関連動画一覧を見る