コンテンツやデータを抽出して表示する

ToolsetのViewsプラグインを使うと、WordPress内のデータベースからコンテンツやデータを抽出してフロントエンドに表示することができます。このデータ抽出~出力までの一連の設定を後から簡単に呼び出せるようにまとめたもの(モジュール)を「Viewと呼びます。Viewは目的に応じていくつでも作ることができます。
※ プラグインの名前と違って最後に「s」が付きません。

Viewの活用方法はいろいろ

Viewを使うと、アイデア次第でいろいろなことができます。例えば、取り扱っている商品や製品を紹介するために、商品のデータを格納するためのカスタム投稿タイプやフィールドを作成しておいて、通常の投稿や固定ページに価格や性能などを条件として抽出表示させたり、サイトの閲覧者が自分で条件を指定できる商品検索ページを構築することができます。

私がToolsetの使い方の勉強を兼ねて作成したサイトの例を見てみましょう。

コンテンツやデータを抽出して表示する

【A】Viewを使った抽出表示の例
https://sim.1push.net/mvno/rakuten-mobile/

コンテンツやデータを抽出して表示する

【B】Viewを使った検索ページの作例
https://sim.1push.net/favorite-plan-search/

作例の【A】では、スマホの価格やスペックに関する情報や商品画像を格納するカスタム投稿タイプを作成し、Viewを使って格安SIMを取り扱う事業者の紹介ページに抽出表示させています。作例の【B】では、格安SIMを取り扱う通信事業者のプランを格納するカスタム投稿タイプを作成し、フロントエンドから料金などの条件を指定してプランを絞り込むViewを表示させています。

※ 上記の作例の出来栄えはともかく、抽出した結果を見やすく整えるにはHTMLやCSSの基本的な知識が必要になります。

Viewの作り方

コンテンツやデータを抽出して表示する

作業の流れ

シンプルな以下の例を使ってViewの作り方を見てみましょう。

  • カスタム投稿タイプ:「料理」
  • カスタムフィールド:「料理のサブタイトル」「料理の写真」
  • カスタムタクソノミ:料理国籍
  • 環境:WordPress 4.9.8 (Twenty Seventeen テーマ)

コンテンツやデータを抽出して表示する

① 管理画面のメニューからToolsetのViews -> Add New をクリックします。
※Toolsetのダッシュボードから作成することもできます。

コンテンツやデータを抽出して表示する

作成したいViewのタイプを選んで、名前を付け、Create View をクリックします。
※Viewのタイプは後から変更できるので、ここでは1番上を選択しました。

コンテンツやデータを抽出して表示する

③ Content Selectionから、Viewで抽出したいデータが格納されている投稿タイプ等を選択します。
 
※ ダッシュボードから作成した場合は、あらかじめ投稿タイプが選択されています。なお、Content Selectionが選択されていないと、Viewの編集がロックされるので、必ず何かを選択する必要があります

コンテンツやデータを抽出して表示する

④ Query section では、抽出したデータの並び順、最大抽出数、先頭のスキップ数、追加条件によるフィルタを設定できますが、この解説ではそのままにしておきます。
 
Queryセクションの設定と使い方

コンテンツやデータを抽出して表示する

⑤ Loop section のLoop Editorでは、抽出したデータから、フロントエンドに表示するフィールドを選択してレイアウトします。ここではウィザードを使ってみます。
 
Loopセクションの設定と使い方

コンテンツやデータを抽出して表示する

⑥ ウィザードでは、まず出力するレイアウトのタイプを選択します。ここでは、自分で一からレイアウトするので一番上の Unformatted を選びました。

コンテンツやデータを抽出して表示する

⑦ ここでは、Viewの中で直接レイアウトを施すので、「Use Content Template…」のチェックを外して、Add Field をクリックします。
 
※複雑なレイアウトを施したい場合は、Content Templateのチェックをつけても良いでしょう。

コンテンツやデータを抽出して表示する

⑧ プルダウンから表示させたいフィールドを選択し、「Add Field」ボタンを使って必要なだけ追加していきます。

コンテンツやデータを抽出して表示する

⑨ ここでは、タイトルと料理の画像、料理のサブタイトルを指定しました。指定し終わったら「Finish」をクリックします。

コンテンツやデータを抽出して表示する

⑩ Loopエディタ内に、表示させるフィールドがまとめて追加されました。

コンテンツやデータを抽出して表示する

⑪ 例えば、こんな感じで出力するフィールドをHTMLで装飾します。
※ここでは解説のため便宜styleを使って記述しましたが、CSSを使う場合はエディタの真下にあるCSS editorに記述しましょう。

コンテンツやデータを抽出して表示する

⑫ 最後にViewの一番上に戻って、スラグをわかりやすいもの(英半角小文字)に変更し、「Save all sections at once」をクリックして保存します。

作成したViewを表示させる方法

記事や固定ページにViewを表示させる

作成したViewを表示させるには、投稿や固定ページにViewのショートコードを挿入するだけです。

コンテンツやデータを抽出して表示する

作業の流れ


ここでは、上記で作成したViewを投稿画面に挿入して表示させてみます。

コンテンツやデータを抽出して表示する

① 記事編集画面を開いて、Viewを挿入する場所にカーソルを移動し、エディタの上にある「Fields and Views」をクリックします。

コンテンツやデータを抽出して表示する

② 開いた画面のPost View 欄から挿入したいViewをクリックします。

コンテンツやデータを抽出して表示する

③ 画面右下の「Insert Shortcode」をクリックします。
※なお、この画面でView作成時にQueryセクションで指定した内容を一時的に変更することもできます。

コンテンツやデータを抽出して表示する

④ 記事本文にViewのショートコードが挿入されました。

コンテンツやデータを抽出して表示する

⑤ Viewで指定した条件に合致するデータがレイアウトされた状態で出力されました。

ウィジェットにViewを表示させる

ToolsetではViewを表示するためのウィジェットも用意されています。ウィジェットの場合は、サイドバーにView用のウィジェットを配置した後、表示させたいViewをプルダウンから選択します。

コンテンツやデータを抽出して表示する

外観 -> ウィジェットに進み、「WP Views」ウィジェットをサイドバーに配置して、表示させたいViewを選択します。

Toolset JP Guide

ページ上部へ戻る