Tweny Twelveでヘッダーに検索ボックスを表示させるコード

Twenty Twelveのヘッダーに検索ボックスがないので、「Search box on Navigation Menu」プラグインを参考に、bloginfoにフィルターフックを使い、検索ボックスを表示させる方法について書きます。

※Twenty Twelveなどでは、h2タグの中にbloginfo(‘description’)があるので、記事のコードを作成すると、h2タグの中に検索フォームが表示される形になりますので、悪いHTMLの形になるで参考程度に読んでください。

functions.phpファイルに下のコードを追加します。

add_filter('bloginfo','add_search_box', 10, 2);
function add_search_box($value, $show) {
  if ($show == 'description') {
    ob_start();
    get_search_form();
    $searchform = ob_get_contents();
    ob_end_clean();

    $value .= '<div class="searchbox-nav">' . $searchform . '</div>';
  }
  return $value;		
}

関数で、bloginfoから2つパラメータを受け取り、$showの入っている値がdescriptionかチェックして、もしそうならheader.phpファイルにあるbloginfo(‘description’)を表示する説明文の後に検索ボックスを追加するコードになります。

get_search_form2

説明文の下に検索ボックスが表示されますが、スタイルシートを使って右端に表示しています。

.searchbox-nav {
  float: right;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です