Home » Blogs » Drupal 7の検索ブロックをカストマイズ

pict-drupal-7.png次期バージョンDrupal 7用のテーマ作成などをぽちぽち始めたのですが、Drupal 6の時とちょっと違っている箇所のひとつとして検索ブロック（検索フォーム）があります。ここではDrupal 7用にテーマを移植したり新規開発する人への情報として検索ブロックのカストマイズ方法を紹介します。

まず、どういう感じにカストマイズするのかを画像にしました。

一番上がオリジナルの検索ブロックです。Drupal 6の場合にはテキストフィールドの前に「Search(検索)」のラベルが付いていたのですがDrupal 7ではデフォルトではラベルは表示されないようになりました。
ss-search-box.png
二番目のRev.Aとあるのが第一段階のカストマイズです。そして三番目のRev.Bが最終的な状態となります。テキストフィールドの中にある「search this site」の文字はテキストフィールド入力時には消えます。つまり何も入力されていない時だけ「search this site」と表示されます。
Rev.A とRev.Bはコードに関しては時に違いはありません。CSSを使ってRev.Aの見た目をカストマイズした結果がRev.Bです。

では、またRev.Aにする方法から紹介します。Drupal 6の場合とDrupal 7の場合はそれぞれこうなります。どちらの場合も使っているテーマのtemplate.phpファイルに以下を追加します。

Drupal 6の場合

  1. function mytheme_search_theme_form($form) {
  2.     $prompt = t('search this site');
  3.     // remove 'search this site' label
  4.     unset($form['search_theme_form']['#title']);
  5.     // remove 'search' button
  6.     unset($form['submit']);
  7.  
  8.     // add javascript
  9.     $form['search_theme_form']['#value'] = $prompt;
  10.     $form['search_theme_form']['#size'] = 25;
  11.     $form['search_theme_form']['#attributes'] = array(
  12.         'onblur'  => "if (this.value == '') { this.value = '$prompt'; }",
  13.         'onfocus' => "if (this.value == '$prompt') { this.value = ''; }" );
  14.  
  15.     $output .= drupal_render($form);
  16.     return $output;
  17. }
Drupal 6まではtheme_search_theme_form()というテーマ関数をオーバーライドすることで簡単にカストマイズすることができましたが、Drupal 7ではこの関数は無くなってしまいました。リサーチしたところtemplate_preprocess_search_block_form()という関数をオーバーライドすればよさそうだということがわかりましたので、template_preprocess_search_block_formのソースコード(コアのサーチモジュール内）を参考にして作成しました。

Drupal 7の場合
  1. function mytheme_preprocess_search_block_form(&$variables) {
  2.   $prompt = t('search this site');
  3.   $variables['search'] = array();
  4.   $hidden = array();
  5.   // remove 'search' button
  6.   unset($variables['form']['actions']['submit']);
  7.   unset($variables['form']['actions']['#children']);
  8.  
  9.   // add javascript
  10.   $variables['form']['search_block_form']['#value'] = $prompt;
  11.   $variables['form']['search_block_form']['#size'] = 25;
  12.   $variables['form']['search_block_form']['#attributes'] = array(
  13.     'onblur'  => "if (this.value == '') { this.value = '$prompt'; }",
  14.     'onfocus' => "if (this.value == '$prompt') { this.value = ''; }" );
  15.  
  16.   foreach (element_children($variables['form']) as $key) {
  17.     $type = $variables['form'][$key]['#type'];
  18.     if ($type == 'hidden' || $type == 'token') {
  19.       $hidden[] = render($variables['form'][$key]);
  20.     }
  21.     else {
  22.       $variables['search'][$key] = render($variables['form'][$key]);
  23.     }
  24.   }
  25.   // reconstruct search form
  26.   $variables['search']['hidden'] = implode($hidden);
  27.   $variables['search_form'] = implode($variables['search']);
  28. }
これで、Rev.Aのカストマイズが完了です。$variables['form']['search_block_form']['#size']は入力テキストフィールドの横幅を決定しますので自分のテーマにあわせて好きな数値を指定してください。また、関数名のmytheme_XXXXXのmythemeの部分はお使いのテーマにあわせて変更してください。

このままでも良いのですがわかりやすくするために虫眼鏡のアイコンを入れて見た目をカストマイズしたRev.Bにするには以下のようにします。

Drupal 6の場合
  1. #search-theme-form .form-text {
  2.     width: 200px;
  3.     height: 24px;
  4.     color: #555555;
  5.     padding: 4px 2px;
  6.     margin: 0px;
  7.     border: solid 1px #aaa;
  8.     background: #fff url('images/search.png') no-repeat center right;
  9. }

Drupal 7の場合
  1. .form-item-search-block-form .form-text {
  2.     width: 200px;
  3.     height: 24px;
  4.     color: #555555;
  5.     margin: 0px;
  6.     border: solid 1px #aaa;
  7.     padding: 0px 4px;
  8.     background: #fff url(images/search.png) no-repeat center right;
  9. }

つまりテキストフィールドの見た目をスタイルシートでカストマイズし、背景の右側に虫眼鏡の画像( search.png )をセットしています。このあたりは自分のテーマに併せて好きにデザインしてください。

検索ボックスをページ中の任意の場所に固定で表示させる。

検索ボックスは通常ブロックとして標準装備されていますのでそのブロックをサイドバーなどの好みの場所を指定して表示するようにするのが普通ですが、ちょっと凝ってヘッダー部などにレイアウトしようとするとブロックとして表示するのでは都合が良くない場合があります。そのような場合には、使っているテーマ用のページテンプレートファイルpage.tpl.phpに直接検索ボックスを表示するコードをpage.tpl.phpの好きな場所に追加してしまうのがてっとり早くて便利です。

Drupal 6の場合
  1. <?php print $search_box; ?>
Drupal 6の場合には$search_boxという変数に検索ボックスのフォーム用のHTMLコードが既にセットされていますのでそれをprintするだけなのでとても簡単です。しかしDrupal 7の場合には、$search_boxという変数は設定されていませんのでこの方法は使えません。代わりに以下のようにします。

Drupal 7の場合
  1. <?php print render(drupal_get_form('search_block_form')); ?>

このDrupal 7のコードに「おやっ？」と思った方もいるかと思いますが、Drupal 7のAPIではdrupal_get_form()はレンダリングされたHTMLコードを返さないでフォームの要素を全て含んだ配列を返すようになりましたので、Drupal 7の場合にはdrupal_get_form()の戻り配列をrender()関数でレンダリングしてあげる必要があります。

(注) Drupal 7の情報はこの記事の執筆時点でのDrupal 7のベータ版であるbeta 3に基づいたものですので正規リリースまでに変更になる可能性があります。また、ここで紹介している情報は当方が独自で調べた範囲での情報です。もっといい方法があることが十分考えられますのでもしそういう情報をお持ちであれば教えていただけると幸いです。

Your rating: None Average: 5 (4 votes)