コンテンツテンプレートの作成


概要

Viewsプラグインのコンテンツテンプレートでは、HTMLとCSSを使ってWordPressのエディターを使うのと同じ感覚で、簡単にテンプレートを作成することが出来ます。このページではコンテンツテンプレートの作成から、投稿や固定ページに適用させるまでの手順を簡単に説明します。

 

コンテンツテンプレートを作成する

WordPress管理画面からViews>Content Templatesに移動し、Add new Content Templateをクリックして新規コンテンツテンプレートを作成します。

「Add new Content Template」をクリック

テンプレートを適用させたい投稿タイプを選択し、テンプレートの名前をつける

テンプレート編集画面が表示された

 

テンプレートにフィールドを追加する

次にテンプレートに表示させたいフィールドやViewを追加します。エディター欄にあるViewsボタンをクリックして、フィールドや作成済みのViewの一覧から、追加したいものをクリックして、ショートコードを追加していきます。

「Views」ボタンをクリック

ショートコード選択画面から「Title」を選択した

タイトルフィールドを表示するためのショートコードが挿入された

 

HTMLでテンプレートをデザインする

コンテンツテンプレートはHTMLとCSSを使ってレイアウトします。コンテンツテンプレートのエディターにはHTMLの記述をサポートするためのシンタックスハイライターが組み込まれており、WordPressの通常のコンテンツ作成と同様の使用感を提供しています。

シンタックスハイライト機能によるHTML表示

画像フィールドなどのいくつかのフィールドでは、フィールド挿入時にCSSクラスやスタイルを指定することができる

Content Template Settingsでは、WordPressによる改行などの自動マークアップを抑止することができる

HTMLタグの付与例

 

CSSとJavascript(オプション)

コンテンツテンプレートでは、テーマファイルの編集をしなくても、独自のCSSやJavascriptを追加できます。コンテンツテンプレートが読み込まれるときだけ動作するので、サイト内の複数のテンプレートがある場合にデザインを区別するのに役立ちます。

Content Template CSS and JS欄で、ボタンをクリック

展開したエディター内にCSS(またはJS)を記述

最後に「更新」をクリックしてテンプレートを保存

CSSの記述例

 

デフォルトで適用される投稿タイプの選択

コンテンツテンプレートの新規作成時に、テンプレートを適用させたい投稿タイプを選択しましたが、この設定はContent Template Settingsセクションから変更することができます。

チェックした投稿タイプの新規作成時に、デフォルトでこのテンプレートが適用されるようになる

投稿タイプの中に適用されていないものがあるとアラートが表示される

アラートをクリックするとテンプレートを適用させることができる

 

テンプレートの表示例

コンテンツテンプレートを作成し、適用される投稿タイプで投稿すると下のように表示されました。青い点線の部分がコンテンツテンプレートで作成された箇所で、ヘッダーやサイドバーはテーマファイルの固有の設定に依存しているのがわかります。ヘッダーやサイドバーもコンテンツテンプレートで作成したい場合は、ToolsetBootstrapテーマのようにシンプルなテーマファイルがおすすめです。

例:投稿タイプ「サービス」の投稿画面

コンテンツテンプレートの適用前。本文のみが投稿内容として表示された

投稿内容として、タイトル、抜粋、カスタムフィールドがコンテンツテンプレートで指定したとおりに出力された