Craft CMS で手軽にページ分割付きの検索ページを作る方法

Craft CMS では、とても簡単にキーワード検索のフォームを設置することができます。

今回はその方法をご紹介します。

検索フォームを設置

ページのどこかに下記のような検索フォームを設置します。

検索結果を表示するページを作成

検索結果を表示するテンプレートを作成します。

今回は、上記の form タグの action 属性に {{ url('search/results') }} と指定しているので、検索結果ページは下記のように設置します。

craft/template/search/results.twig

なお、Craft のテンプレートについて知りたい方は @BUN さんの下記の記事を参考にしてください。

• Craft CMS のテンプレートについて理解しよう（基本編） | BUN:Log
• Craft CMS のテンプレートについて理解しよう（ベーステンプレート編） | BUN:Log
• Craft CMS のテンプレートについて理解しよう（エントリの一覧用テンプレート編） | BUN:Log
• Craft CMS のテンプレートについて理解しよう(エントリの詳細用テンプレート編) | BUN:Log

results.twig には下記のように書きます。なお、ここでは _layout_base というベーステンプレートを継承しています。

{# ベーステンプレートとして _layout_base を継承 #}
{% extends '_layout_base' %}

{# 出力対象のエントリを変数にセット #}
{% set query = craft.request.getParam('q') %}
{% set results = craft.entries({
 section: 'blog',
 search: {
 query: query,
 subLeft: true,
 subRight: true,
 order: 'score'
 }
}) %}

{# results を20件ごとにページ分割 #}
{% paginate results.limit(20) as pageInfo, pageEntries %}

{% block mainContent %}
 

 

 
検索結果
 {% if results|length %}
 
{{ results|length }} 件見つかりました。
 

 {% for entry in pageEntries %}
 

 
 {{ entry.postDate|date("Y年m月d日") }}
 

 {{ entry.title }}
 
 
 
 {% endfor %}
 
 {% else %}
 
「{{ query }}」が見つかりませんでした。
 {% endif %}
 
 

 
 
 
{% endblock %}

　解説

順を追って解説していきます。

ベーステンプレートを継承

{# ベーステンプレートとして _layout_base を継承 #}
{% extends '_layout_base' %}

ベーステンプレートを継承します。

出力対象のエントリを変数にセット

{# 出力対象のエントリを変数にセット #}
{% set query = craft.request.getParam('q') %}

まず q パラメータの値を変数 query にセットします。

{% set results = craft.entries({
 section: 'blog',
 search: {
 query: query,
 subLeft: true,
 subRight: true,
 order: 'score'
 }
}) %}

上記のように entries に取得する条件をセットしてエントリを取得します。

• section で blog セクションに限定
• query に変数 query を渡す
• subLeft と subRight に true をセットして、検索キーワードの左右にワイルドカードを付けたのと同じ状態する（ *キーワード* と同じ）
• order に 'score' をセットしてスコア順に並べる

20件ごとにページ分割する

{# results を20件ごとにページ分割 #}
{% paginate results.limit(20) as pageInfo, pageEntries %}

これで 20 件ごとにページ分割できるようにします。

検索結果を表示

{% block mainContent %}
 

 

 
検索結果
 {% if results|length %}
 
「{{ query }}」が {{ results|length }} 件見つかりました。
 

 {% for entry in pageEntries %}
 

 
 {{ entry.postDate|date("Y年m月d日") }}
 

 {{ entry.title }}
 
 
 
 {% endfor %}
 
 {% else %}
 
「{{ query }}」が見つかりませんでした。
 {% endif %}
 

検索結果を表示します。ポイントだけ解説します。

{% if results|length %}...{% else %}...{% endif %} で検索結果がある場合とない場合を分岐しています。結果件数は {{ results|length }} で出力できます。

{% for entry in pageEntries %}...{% endfor %} で現在のページのエントリをループします。

ページ送りを表示

ページ送りのリンクを表示します。