36：サイト内に検索フォームを設置

公開日:2019年07月15日更新日:2019年07月22日

WordPress

ウィジェットからサイト内検索フォームを設置するのではなく、テンプレートに直にサイト内検索フォームを設置するにはget_search_form関数を呼び出します。

<?php get_search_form(); ?>

header.php

配下ページヘッダーのグローバルナビゲーション下でget_search_form関数を呼び出します。

<div class="header">
  <div class="inner">
    <div class="flex">
      <div class="flex-item logo">
        <a href="<?php echo home_url(); ?>">
          <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png" alt="ロゴ">
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item nav">

<?php
wp_nav_menu( array(
  'container' => false,
  'theme_location' => 'header-nav',
));
?>
        <div class="search">
          <?php get_search_form(); ?>
        </div>

      </div><!-- .flex-item -->
    </div><!-- .flex -->
  </div><!-- .inner -->
</div><!-- .header -->

出力されるHTML

関数によって出力されるHTMLはハイライト部分になります。

<div class="search">
  <form role="search" method="get" id="searchform" class="searchform" action="http://localhost/WPフォルダ名/">
    <div>
      <label class="screen-reader-text" for="s">検索:</label>
      <input type="text" value="" name="s" id="s">
      <input type="submit" id="searchsubmit" value="検索">
    </div>
  </form>
</div>

style.css

既にコーディング済みです。

.header .searchform {
  text-align: right;
  padding: 0 1em;
}
.header .screen-reader-text {
  display: none;
}
.header input[type="text"] {
  padding: 4px;
}