このブログは、concrete5 アドベントカレンダー 2016 に参加しています。前日の、take556さんのconcrete5 2016の総括 でした。
※2016-12-5追記
⑤複合検索にするために検索ブロックのカスタムテンプレートを作成 の コードを5.7推奨用に書き直しました。
このブログはconcrete5 バージョン5.7.9をベースに書いています。
concrete5 の検索ブロックをカスタムテンプレートという機能を使ってカスタマイズすると、ページ属性やブロックを使った複合検索が可能になります。また、ページ属性の選択を設定すると通常はセレクトメニューになりますが、それをラジオボタンに変更してみたいと思います。他のブログでも紹介されているのですが、ワークショップ形式で一から作っていきたいと思います。
・サイトの説明
このような、食事の種類と場所を検索できるようなサイトを作ります。
①concrete5のインストール
今回は空白のサイトでインストールします。
インストールに関してはconcrete5公式サイト等をご覧ください。
http://concrete5-japan.org/help/5-7/installation/
②ページタイプを作成する。
[管理画面（上部メニュー一番右のボタン）→ページとテーマ→ページタイプ]
[ページタイプの追加]をクリックし、下記の通り入力して、［新規］ボタンを押します。
③ページ属性を作成する
[管理画面→ページとテーマ→ページ属性]
最下部「属性を追加」のプルダウンメニューで「選択」を選択し［実行］ボタンを押します
④ページを作成する
今回作成するのは、下の６ページです。
| ページタイトル |
食事のジャンル（ページ属性） |
地域（ページ属性） |
| ハンバーグ |
洋食 |
東京 |
| パスタ |
洋食 |
大阪 |
| ラーメン |
中華 |
東京 |
| 餃子 |
中華 |
広島 |
| 寿司 |
和食 |
大阪 |
| 天ぷら |
和食 |
広島 |
1.上部メニューの［新規作成］ボタンを押し[食事詳細]をクリック
２．上部[ページ設定]ボタン（歯車のマーク）→［属性］をクリック
３．左側のメニューから、「食事のジャンル」と「地域」をクリック
４．下の画像のように入力し、［変更を保存］ボタンを押します。
５．［編集モード終了］ボタン（鉛筆マーク）を押し［変更の公開］ボタンを押す。
続いて１にもどり．２つ目のページ以降を作成します。画像のようにパスタ・洋食・大阪と入力されている項目を上記の表を参照し置き換えて６ページ作成してください。
⑤複合検索にするために検索ブロックのカスタムテンプレートを作成
標準の検索ブロックでは、キーワード検索のみが有効になっていますが、下記のコードのようにページ属性を追加することで、そのページ属性が設定されているページの検索も可能になります。
・concrete/blocks/search/view.php ->
application/blocks/search/templates/meal_search.php コピーし下記のコードを挿入してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
?><form action="<?php echo $view->url($resultTargetURL)?>" method="get" class="ccm-search-block-form"><?php if (isset($title) && ($title !== '')) { ?><h3><?php echo h($title)?></h3><?php }?> <!-- 追加した部分です ------------------------------------------------------------- --> <h4>食事ジャンル</h4> <div> <?php $ak = Concrete\Core\Attribute\Key\CollectionKey::getByHandle('meal_genre'); $ak->render('search'); ?> </div> <h4>場所</h4> <div> <?php $ak = Concrete\Core\Attribute\Key\CollectionKey::getByHandle('meal_area'); $ak->render('search'); ?> </div> <!-- 追加した部分ここまで ------------------------------------------------------------- --> <?php if ($query === '') { ?><input name="search_paths[]" type="hidden" value="<?php echo htmlentities($baseSearchPath, ENT_COMPAT, APP_CHARSET) ?>" /><?php } elseif (isset($_REQUEST['search_paths']) && is_array($_REQUEST['search_paths'])) { foreach ($_REQUEST['search_paths'] as $search_path) { ?><input name="search_paths[]" type="hidden" value="<?php echo htmlentities($search_path, ENT_COMPAT, APP_CHARSET) ?>" /><?php } } |
※上記は変更部分のみです。ファイルの全体のコードが必要な場合は下記よりダウンロードしてください
⑥トップページに検索ブロックを設置して、カスタムテンプレートを適用
１．［管理画面→サイトマップ］よりトップページに移動します。
２．［編集モード］ボタンを押してください。
３．メインエリア上で、左クリックし、出てきたエリアメニューのブロックを追加をクリックします。
４．左のブロックタイプメニューから、［検索］を選択します。
５．ブロック編集画面になりますので、タイトル欄にに”グルメ”・ボタンテキスト欄に”検索”・「ここ以下のページ」を選択して［新規］ボタンを押してください。これで、検索ブロックの設置が完了です。この時点では、キーワードのみの検索項目になります。
５．次に先ほど作成したカスタムテンプレートを適用します。設置した検索ブロックの上で左クリックし、ブロックメニューから、［デザイン＆カスタムテンプレート］を選択し、出てきたメニューの歯車のマークを押し、下の画像のようにMeal Search を選択し、［保存］をクリックします。
６．［編集モード終了］ボタンを押し、検索をしてみてください。この時点では、各項目がセレクトメニューで表示されます。
⑦セレクトメニューをラジオボタンに変更
concrete/attributes/select/search.php -> application/attributes/select/search.php へコピー
application/attributes/select/search.phpの１１行目から１6行目を下記のコードに変更します。
|
|
<input type="radio" id="<?php echo $this->field('atSelectOptionID')?>0" name="<?php echo $this->field('atSelectOptionID')?>[]" value="" checked><label for="<?php echo $this->field('atSelectOptionID')?>0"><?php echo t('** All')?></label> <?php foreach($options as $opt) { ?> <input type="radio" id="<?php echo $this->field('atSelectOptionID') . $opt->ID ?>" name="<?php echo $this->field('atSelectOptionID')?>[]" value="<?php echo $opt->getSelectAttributeOptionID()?>" <?php if (in_array($opt->getSelectAttributeOptionID(), $selectedOptions)) { ?> checked <?php } ?>> <label for="<?php echo $this->field('atSelectOptionID') . $opt->ID ?>"><?php echo $opt->getSelectAttributeOptionDisplayValue()?></label> <?php } ?> |
※上記は変更部分のみです。ファイルの全体のコードが必要な場合は下記よりダウンロードしてください
⑧実際にボタンを選択して、検索をしてみてください。
以上です。concrete5の検索ブロックは４行程度のｐｈｐのコードを足せば簡単に複合検索が実現できます。また、ここでは紹介してないですが、ページ属性のIDを使用して特定のページ属性だけをラジオボタンにすることも可能です。ぜひ、参考にしていただきポータルサイトなどに役立てていただければと思います。ここ分かりにくい、ここ間違っているよなどのご意見もいただけたらと思います。
このブログは、concrete5 アドベントカレンダー 2016 に参加しています。翌日は、tao-sさんの Ver.8 から使えるExpressオブジェクトとは？ です
