Toolset Views:Loopセクションの設定と使い方

View作成画面のLoopセクションでは、Queryセクションで抽出したコンテンツから、フロントエンドに表示させたい項目(カスタムフィールドなど)を選択してスタイリングすることができます。ここでは、Loopセクションの使い方を見ていきましょう。

Loop(ループ)とは

Loopとは、QueryセクションやFilterセクションの設定に応じて WordPressのデータベースから抽出したコンテンツが動的に変化して表示される部分のことで、WordPressのアーカイブページも同じ仕組みで成り立っています。

Loop Editor の使い方

Loop Editor の画面構成

要素を挿入するためのボタン

  • Loop Wizard
    画面の指示に従って、Loop内の要素の出力スタイルやフィールドを指定するだけで、エディタ内に最低限必要な記述を自動でおこなってくれます。特に、Bootstrapのグリッドと余白を活用するスタイルや並べ替え可能なテーブル(表形式)スタイルの記述をおこなう場合は非常に便利です。ただし、Loop Wizardを使うとエディタ内の既存の記述は上書きされるので注意しましょう。
  • Fields and Views
    WordPress標準のフィールドやカスタムフィールドなどを一覧画面から選択して簡単に挿入することができます。
  • Content Template
    Loop内のHTML構造が複雑になる場合などは、Loopエディタ内の <wpv-loop> と </wpv-loop> タグの中にHTMLを直接記述せずに別途用意したコンテンツテンプレートを挿入することができます。既存のコンテンツテンプレートを挿入するだけでなく、編集中のView専用のコンテンツテンプレートを新規作成して直接割り当てることも可能です。
  • Pagination Controls
    通常はFilterセクションの「Search and Pagination エディタ」内に記述するページ送りのためのコントロールパーツをLoopエディタ内に記述する際に使用します。FilterセクションでPagination(ページ送り)を有効にしている場合のみ使用できるボタンです。
  • Media
    画像や動画をメディアライブラリにアップロードして挿入するためのボタンです。
  • Grid
    2カラムや3カラムなど、bootstrapのグリッドを簡単に挿入するためのボタンです。

htmlタグ用のショートカットボタン

html用のタグを挿入するショートカットの他、以下のToolset用のショートカットボタンが利用できます。

  • raw
    [wpv-noautop][/wpv-noautop] のショートコードを挿入します。このショートコード内に配置したコンテンツでは、WordPressの自動段落機能が無効化されるので、意図しない改行を防止することができます。
  • format
    [wpv-autop][/wpv-autop] のショートコードを挿入します。このショートコード内に配置したコンテンツでは、WordPressの自動段落機能が有効化されるので、エディタで意図した改行をフロントエンドに反映させたい場合に便利です。
  • Conditional output
    [wpv-conditional if=”“][/wpv-conditional] のショートコードを挿入します。このショートコードを使って、カスタムフィールドやViewショートコードの戻り値を判定し、出力内容を条件分岐させることができます。
  • Show Bootstrap buttons
    Bootstrapで使用する要素やCSSを、Bootstrap公式サイトのドキュメントで参照するためのショートカットを開きます。ドキュメントからサンプルコードをコピペして利用するのに便利です。

エディタ部分

Viewで表示させる要素の配置やスタイリングをおこなうための記述をする部分です。なお、デフォルトで記述されているショートコード等の役割は以下のとおりです。これらのショートコード等は、Loopエディタの記述を正しく動作させるために必須のものなので、消さないように注意しましょう。なお、慣れないうちは前述のLoop Wizardを活用して、どこに何を記述すべきかを徐々に覚えていくと良いでしょう。

  • [wpv-layout-start] と [wpv-layout-end]
    Loopセクションを機能させるためのショートコードで、Loopに関する内容はすべてこのショートコード内に記述する必要があります。したがって、Loopエディタ内の記述は、必ず [wpv-layout-start] から始まり、[wpv-layout-end] で終わることになります。
  • [wpv-items-found][/wpv-items-found]
    このショートコード内には、Queryセクションで指定した条件のコンテンツが存在する場合(≒結果がヒットした場合)に表示する内容を記述します。
  • [wpv-no-items-found][/wpv-no-items-found]
    このショートコード内には、Queryセクションで指定した条件のコンテンツが存在しない場合(≒結果がヒットしなかった場合)に表示する内容を記述します。デフォルトでは、[wpml-string context=”wpv-views”]No items found[/wpml-string] (訳:アイテムが見つかりませんでした)が記述されていますが、お好みで日本語に直したり、画像などを配置しても構いません。
    なお、[wpml-string context=”wpv-views”][/wpml-string]は、多言語サイトを構築するためのWPMLプラグインで使用するためのショートコードなので、WPMLプラグインを使わない場合は、ショートコード部分を削除して、テキストのみの記述にしても問題ありません。
  • <wpv-loop></wpv-loop>
    このタグ内にループさせる内容(htmlの要素やカスタムフィールドなど)を配置します。このタグの外にある記述はループされません。デフォルトでは[wpv-items-found] [/wpv-items-found] のショートコードで囲われています。

このほか、デフォルトで記述されているもの以外に、 と タグの中でだけ使える [wpv-items 〇〇] のような、[wpv-items] ショートコードに専用のパラメーターをつけて利用するものがあります。これはLoopの出力で偶数や奇数番目に応じて出力内容(例えばCSSのclass)を変えて、縞模様の表にしたり、Bootstrapグリッドで余白が生じた場合に表示させるコンテンツを制御したりするためのパラメーターになります。

Loop出力時に読み込ませたいCSSの記述エリア

CSS editorと書かれたタイトル部分をクリックすると、このViewを表示する際に適用させたいCSSを記述するエリアが展開します。必要に応じて使用してください。

Loop出力時に実行させたいjQueryの記述エリア

JS editorと書かれたタイトル部分をクリックすると、このViewを表示する際に呼び出したいjQueryなどを記述するエリアが展開します。必要に応じて使用してください。

Loopエディタの使い方に関するヘルプ

Loop Editorで利用できるボタンやエディタ内にデフォルトで記述されているショートコードの役割などについて簡単な説明を読むことができます。

Loop Editor の記述方法

Viewでは、Loop Editorを使ってループさせる内容を と <wpv-loop>と</wpv-loop> タグの中に記述します。例えば、コンテンツのタイトルをリスト表示するだけのシンプルなViewなら、以下のようになります。なお、ループ内にタイトルを配置するには前述の「Fields and Views」ボタンを使用して「Post title」を選択します。

<ul>
<wpv-loop>
  <li>[wpv-post-title]</li>
</wpv-loop>
</ul> 

ここで注意したいのが、ulタグはwpv-loopタグの外側にあるということです。ループさせたいのは、あくまでも liタグで囲んだ [wpv-post-title] の部分だからです。

Disable the wrapping DIV around the View

通常、作成したViewを配置すると、ページ送りなどの機能を提供するためのIDやクラスが付与された  div タグで囲われたhtmlが出力されますが、viewによっては、テキスト内にインラインで結果を表示させたい場合もあります。このオプションにチェックを入れると、一部の機能が利用できなくなる代わりに、インラインで結果を出力することができます。

以下は通信事業者が現在取り扱っているスマートフォンの件数をカウントするViewを作成してテキスト内にインラインで配置している例です。

Output Editor の使い方

Outputエディタでは、前述の「Loopエディタ」とFilterセクションの「Search and Pagination エディタ」の内容を合わせたViewの最終的な出力を制御します。デフォルトで記述されているショートコードの役割は以下のとおりです。

  • [wpv-filter-meta-html]
    ページ送りやカスタム検索を実装するViewを作成する際に使用するFilterセクションの「Search and Pagination エディタ」の内容を出力します。
  • [wpv-layout-meta-html]
    このページで解説している「Loopエディタ」の内容を出力します。

上記のショートコードの記述順を入れ替えれば、ページ送りやカスタム検索用のパーツの位置を入れ替えることができます。またOutputエディタでもhtmlやToolsetのショートコードを利用することができるので必要に応じてレイアウトやスタイリングを施すことができます。作例を見てみましょう。

previous arrow
next arrow
Full screenExit full screen
Slider
Toolsetの使い方・全目次