ページ用テンプレートの作成(基本編)

Toolsetで作成したカスタムフィールドやその他のパーツ類は、記事本文に挿入してフロントエンドに表示することもできますが、投稿タイプによってはそれらの配置が常に同じ場所のものもあるでしょう。そのような場合には、特定の投稿タイプ用のテンプレートを作っておくと便利です。

このページでは、Viewsプラグインのコンテンツテンプレート機能を使ってカスタムフィールドを表示させるためのテンプレートを作成し、記事に適用させる手順を見ていきます。

ページ用テンプレートの作り方

このページの解説にあたっては、こちらで作成した以下のカスタム投稿タイプ・フィールド・タクソノミを使っています。

  • カスタム投稿タイプ:「料理」
  • カスタムフィールド:「料理のサブタイトル」「料理の写真」
  • カスタムタクソノミ:料理国籍

また、解説画像中の文章はWikipediaの文を利用させていただきました。
作成時の環境は、WordPress 4.9.8 (Twenty Seventeen テーマ)です。

ページ用テンプレートの作成(基本編)

作業の流れ

それでは、解説用の例を使った実際の手順を画像で見てみましょう。

ページ用テンプレートの作成(基本編)

① ダッシュボードからテンプレートを作りたい投稿タイプの「Create Content Template」をクリックします。

ページ用テンプレートの作成(基本編)

② テンプレートの名前とスラグを入力します。
Descriptionをクリックすると、テンプレート作成に関するメモ(説明など)を残しておくことができます。

ページ用テンプレートの作成(基本編)

③ Templateセクションまで移動して「Fields and Views」ボタンをクリックします。

ページ用テンプレートの作成(基本編)

④ テンプレートに表示させたいカスタムフィールドや、WordPress標準のデータフィールドを挿入します(必要なだけ手順を繰り返す)。
ここでは、カスタムフィールド「料理の写真」と、記事本文(Post body)を挿入しました。

ページ用テンプレートの作成(基本編)

⑤ テンプレートに表示させるフィールドを追加したら、必要に応じてHTMLでレイアウトを施してから、青い「Save all sections at once」ボタンをクリックして、編集内容を保存します。

ページ用テンプレートの作成(基本編)

⑥ 記事編集画面の Content Template セクションで作成したテンプレートを選択します。
この時、左のエディタ内にはカスタムフィールドを挿入しません。

ページ用テンプレートの作成(基本編)

フロントエンドにカスタムフィールド(料理の写真)が表示されました。
テンプレートが反映されていない時は、一度記事を「更新」してみてください。

ページ用のテンプレートを記事に適用すると、もともと記事本文の入力内容を表示していたエリアが、作成したテンプレートの内容で上書きされます。一度テンプレートを作ってしまえば、あとは、本文に集中できるのでぜひ活用してみてください。

初心者向けの活用方法としては、ブログなどで記事の文末に、「最後までご覧いただきありがとうございました。」の一文とか、SNSのシェアボタン、AdSense広告を常に表示させたい時に、あらかじめテンプレートを作って配置しておくと便利でしょう。もちろん、テンプレート内には他のプラグインのショートコードも配置可能です。

ヘッダーやフッター、サイドバーエリアも含めたテンプレートを作成する方法もありますが、やや上級者向けの内容なので、ここでは解説しません。

ヒント

上記のテンプレート用のエディタでは、以下のようにHTMLタグでショートコードを囲み、cssやスタイルを使ってレイアウトを制御することができます。

[wpv-post-title]

↑タイトルを出力しH2タグで囲んだ例

なお、テンプレートを表示させた時だけに適用するcssやjavascriptは、テンプレート用エディタの下にある「CSS editor」と「JS editor」に入力しましょう。

Toolset JP Guide

ページ上部へ戻る