concrete5 検索ブロックを複合検索にしてセレクトメニューをラジオボタンに変える方法

このブログは、concrete5 アドベントカレンダー 2016  に参加しています。前日の、take556さんのconcrete5 2016の総括 でした。

※2016-12-5追記
⑤複合検索にするために検索ブロックのカスタムテンプレートを作成 の コードを5.7推奨用に書き直しました。

このブログはconcrete5 バージョン5.7.9をベースに書いています。

concrete5 の検索ブロックをカスタムテンプレートという機能を使ってカスタマイズすると、ページ属性やブロックを使った複合検索が可能になります。また、ページ属性の選択を設定すると通常はセレクトメニューになりますが、それをラジオボタンに変更してみたいと思います。他のブログでも紹介されているのですが、ワークショップ形式で一から作っていきたいと思います。

・サイトの説明

このような、食事の種類と場所を検索できるようなサイトを作ります。

sitemap

①concrete5のインストール

今回は空白のサイトでインストールします。

インストールに関してはconcrete5公式サイト等をご覧ください。

http://concrete5-japan.org/help/5-7/installation/

②ページタイプを作成する。

[管理画面(上部メニュー一番右のボタン)→ページとテーマ→ページタイプ]

[ページタイプの追加]をクリックし、下記の通り入力して、[新規]ボタンを押します。

page_type

③ページ属性を作成する

[管理画面→ページとテーマ→ページ属性]

最下部「属性を追加」のプルダウンメニューで「選択」を選択し[実行]ボタンを押します

%e3%83%9a%e3%83%bc%e3%82%b8%e5%b1%9e%e6%80%a7%ef%bc%88%e5%a0%b4%e6%89%80%ef%bc%89

④ページを作成する

今回作成するのは、下の6ページです。

ページタイトル 食事のジャンル(ページ属性) 地域(ページ属性)
ハンバーグ 洋食 東京
パスタ 洋食 大阪
ラーメン 中華 東京
餃子 中華 広島
寿司 和食 大阪
天ぷら 和食 広島

1.上部メニューの[新規作成]ボタンを押し[食事詳細]をクリック

%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ae%e4%bd%9c%e6%88%901

2.上部[ページ設定]ボタン(歯車のマーク)→[属性]をクリック

3.左側のメニューから、「食事のジャンル」と「地域」をクリック

4.下の画像のように入力し、[変更を保存]ボタンを押します。

5.[編集モード終了]ボタン(鉛筆マーク)を押し[変更の公開]ボタンを押す。

続いて1にもどり.2つ目のページ以降を作成します。画像のようにパスタ・洋食・大阪と入力されている項目を上記の表を参照し置き換えて6ページ作成してください。

%e3%83%9a%e3%83%bc%e3%82%b8%e4%bd%9c%e6%88%90

⑤複合検索にするために検索ブロックのカスタムテンプレートを作成

標準の検索ブロックでは、キーワード検索のみが有効になっていますが、下記のコードのようにページ属性を追加することで、そのページ属性が設定されているページの検索も可能になります。

・concrete/blocks/search/view.php  ->

application/blocks/search/templates/meal_search.php コピーし下記のコードを挿入してください。

※上記は変更部分のみです。ファイルの全体のコードが必要な場合は下記よりダウンロードしてください

⑥トップページに検索ブロックを設置して、カスタムテンプレートを適用

1.[管理画面→サイトマップ]よりトップページに移動します。

2.[編集モード]ボタンを押してください。

3.メインエリア上で、左クリックし、出てきたエリアメニューのブロックを追加をクリックします。

4.左のブロックタイプメニューから、[検索]を選択します。

5.ブロック編集画面になりますので、タイトル欄にに”グルメ”・ボタンテキスト欄に”検索”・「ここ以下のページ」を選択して[新規]ボタンを押してください。これで、検索ブロックの設置が完了です。この時点では、キーワードのみの検索項目になります。

5.次に先ほど作成したカスタムテンプレートを適用します。設置した検索ブロックの上で左クリックし、ブロックメニューから、[デザイン&カスタムテンプレート]を選択し、出てきたメニューの歯車のマークを押し、下の画像のようにMeal Search を選択し、[保存]をクリックします。

%e6%a4%9c%e7%b4%a2%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ae%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88

6.[編集モード終了]ボタンを押し、検索をしてみてください。この時点では、各項目がセレクトメニューで表示されます。

⑦セレクトメニューをラジオボタンに変更

concrete/attributes/select/search.php -> application/attributes/select/search.php へコピー

application/attributes/select/search.phpの11行目から16行目を下記のコードに変更します。

※上記は変更部分のみです。ファイルの全体のコードが必要な場合は下記よりダウンロードしてください

⑧実際にボタンを選択して、検索をしてみてください。

%e3%83%a9%e3%82%b8%e3%82%aa%e3%83%9c%e3%82%bf%e3%83%b3

 

以上です。concrete5の検索ブロックは4行程度のphpのコードを足せば簡単に複合検索が実現できます。また、ここでは紹介してないですが、ページ属性のIDを使用して特定のページ属性だけをラジオボタンにすることも可能です。ぜひ、参考にしていただきポータルサイトなどに役立てていただければと思います。ここ分かりにくい、ここ間違っているよなどのご意見もいただけたらと思います。

このブログは、concrete5 アドベントカレンダー 2016  に参加しています。翌日は、tao-sさんの Ver.8 から使えるExpressオブジェクトとは? です

concrete5 検索ブロックを複合検索にしてセレクトメニューをラジオボタンに変える方法” への1件のコメント

  1. ピンバック: Ver.8 から使えるExpressオブジェクトとは? | concrete5 開発blog

コメントを残す