gotohayato.com

月(ダークモード)
太陽(ライトモード)

Drupal 7 で検索フォームを Font Awesome 風に変える方法

Drupal 7

Drupal のデフォルトの検索フォームのボタンを Font Awesome のものにスタイル変更する方法について。

Drupal に Font Awesome を導入するには、「そのまま Font Awesome を自作のテーマに含めて使う方法」と「専用のコントリビュートモジュールを使う方法」の 2 つの方法があります。 モジュールの扱いに慣れていれば後者の「モジュールを使う方法」がとてもかんたんなのでまずはそれで Font Awesome を利用できる環境にしましょう。

$ drush dl fontawesome
$ drush -y en fontawesome

Drupal コアの検索フォームに手を入れるには hook_form_search_form_alter() を使います。 以下のように submit の部分をボタンに変更して CSS class を追加すれば OK です。

/**
* @file
* Drupal の検索フォームにスタイルをつける。
*/
/**
* Implements hook_form_alter().
*/
function njrc_search_form_search_form_alter(&$form, &$form_state, $form_id) {
// スタイルをつけるため input submit を button に変更
if (!empty($form['basic']['submit'])) {
$form['basic']['submit']['#type'] = 'item';
$form['basic']['submit']['#prefix'] = '<button type="submit" name="op" class="form-submit fa fa-search">';
$form['basic']['submit']['#suffix'] = '</button>';
}
}

以上です。

参考


後藤隼人
ウェブサイト制作・ウェブアプリ開発やマーケティングをしています。
GitHub

お知らせ

大阪大学医学部附属病院さんで現在クラウドファンディングのプロジェクトをされています(後藤も少しだけ寄附させていただきました)。
© 2020 gotohayato.com
サイトについてタグアーカイブメッセージを送る