Viewを使ったコンテンツの表示


概要

Viewsプラグインでは、HTML、メディア、リンク、フィールド、タクソノミーを表示するだけでなく、シンプルなコンテンツのリストやパラメーター検索(パラメトリックサーチ)のような高度な要素を作成することが出来ます。美しいサイトを作成するにはHTMLやCSSの知識が欠かせませんが、PHPをコーディングする知識は不要です。このページでは、Viewsプラグインを使ってコンテンツをサイトに表示するための最も基本的な操作を説明します。

 

Viewを作成する

WordPress管理画面からViews>Viewsに移動し、Add new Viewをクリックして新規Viewを作成します。

Views>Viewsをクリック

初めてViewを作成するときは「Create your first View」ボタンをクリック

作成するViewの用途を選択し、名前をつけて「Create View」をクリック

Viewの編集画面が表示された

作成するViewの用途を選択するラジオボタンについてですが、画像では一番上のDisplay all results(全ての結果を表示)を選択しています。ここでの選択は、作成したView設定画面に表示されるセクションが変わる(用途に応じてView編集画面での不要な設定項目を非表示にする)だけなので、あまり重要ではありません(View編集画面で表示させる項目は後から変更できます)。

 

表示するコンテンツを選択する

Viewで表示するコンテンツを、Post types、Taxonomy、Usersの区分から選択します。区分はThis View will display:の後の、ラジオボタンで切り替えることができます。下の画像の例では、標準の投稿(Posts)を選択しました。

コンテンツセレクションで表示させたいコンテンツの種類を選択

  • Post types:WordPress標準の投稿と固定ページ、カスタム投稿タイプが選択できます。
  • Taxonomy:タグ、カテゴリー、カスタムタクソノミーから選択。
  • Users:サイト内のユーザーである、Administrator(管理者)、Editor(編集者)、Author(投稿者)、Contributor(寄稿者)、Subscriber(購読者)、Any role(特別なケース)の6つから選択。
    権限の詳細についてはWordPressのCodexを参照して下さい。

クエリーセクションでは、コンテンツセレクションで選択したコンテンツを、さらに絞り込むためのフィルターを設定できます。この例ではフィルターを設定しません。

 

表示させる項目を指定し、スタイルを加える

ループ出力セクションでは、コンテンツを表示する方法を決定します。Loop Output欄にはあらかじめ基本の書式が入力されており、 <wpv-loop></wpv-loop> タグの中に、表示させたい項目(フィールドなど)を挿入するのですが、ここでは簡単な方法として、Loop Wizardを使用する方法について説明します。(※ウィザードを使わない場合は、Fields and Viewsボタンをクリックして、個別にフィールドを挿入することもできます。)

 ViewsプラグインのVer.1.7で画面上の表記が変更になりました。スクリーンショットはそれ以前のものになりますので適宜読み替えて下さい。
 ①レイアウトセクションループ出力セクション
 ②「Layout HTML/CSS/JS」欄「Loop Output」欄
 ③「Layout Wizard」「Loop Wizard」

Loop Wizardをクリック

好みのスタイルを選択

Add fieldをクリックして表示させたいフィールドを追加していく

カーソル位置に挿入するか、全体を置き換えるかを選択

上記の画像では、リストレイアウトで「リンク付タイトル」、「日付」、「抜粋」を表示項目として選択しました。4つめの画像で「全体を置き換える」を選択するとLoop Wizard使用前の <wpv-loop></wpv-loop> タグの中が全て置き換えられます。

「wpv-loop」タグ内には、選択したフィールドのほか、HTMLでスタイルを記述することができます。

スタイル付与前のレイアウト

スタイル付与後のレイアウト例
ここでは、リンク付タイトルに「H2」タグを、日付を「em」タグで強調、さらに「Read more…」リンクを追加している。

ViewのLoopについての小まとめ

  • クエリーセクションで指定したコンテンツが見つかると、 [wpv-items-found] [/wpv-items-found]の間に記述した内容を出力します。コンテンツが見つからない場合は、の間に記述した内容を出力します。
  • <wpv-loop></wpv-loop>間に挿入した各アイテム(フィールド)がデータベースから繰り返し読み込まれます。
  • ループ内に挿入した各アイテムの前後にHTMLの記述を加えることで、ループの表示内容をカスタマイズできます。

先程のレイアウトセクションで記述した内容は次のようなHTMLとして出力されます。※[]内には具体的なフィールド値が出力されます。

スタイル付与前のレイアウトのHTML出力イメージ

ループ内に記述されたリストタグと各フィールドの値以外は何も出力されません。

スタイル付与後のレイアウトのHTML出力イメージ

作成したViewを表示させる

下の画像の手順を参考に、作成したViewを表示させたい場所に配置します。

挿入したい場所にカーソルを合わせて、「Views」ボタンをクリック

ショートコード挿入画面から、配置したいViewを選択

Viewのショートコードが挿入された

固定ページにViewで設定したループが表示された

上の画像では固定ページに直接配置しましたが、ウィジェットエリアやコンテンツテンプレートに配置することもできます。

利用できるウィジェットに「WP Views」が追加されている

ドロップダウンから、配置したいViewを選択