WordPress5速習10(検索ページ)

WordPress

サイト内検索ができる仕組みを入れていこう。WPを使えばこういったことも簡単にできる。

検索フォーム設置の際のルール

検索フォームは以下のルールを満たさなければならない。
1.formタグのaction属性はトップページURL
2.formタグのmethodはget
3.labelタグを含める
4.name属性は[s]を使用する。

searchform.phpの作成

上記のルールを踏まえsearchform.phpを以下のように作成する。

<form action="<?php echo home_url('/');?>" method="get">
    <label for="search">検索:</label>
		<input type="text" name="s" id="search" value="<?php the_search_query(); ?>" />
		<input type="submit" value="Search"/>
</form>

header.phpからの読み込み

searchform.phpをheader.phpから読み込むようにしよう。
header.phpでフォームを表示している部分を削除し、
<?php get_search_form();?>
を埋め込む

省略
<div id="searchBox">
      <!--削除する部分
      <form>
      <input type="text" name="">
      <button type="submit">Search</button>
      </form>
    -->
  <?php get_search_form();?>
    </div>
省略

css

マークアップに変更があったのでcssも以下のように変更する。
(30行目付近#searchBox関連に変更を加える)

#searchBox{
  background: #aaa;
  text-align: center;
  padding:5px;
}
#searchBox label{
  display: none;
}
#searchBox input[type="text"]{
  height:34px;
  width:400px;
  font-size:20px;
}
#searchBox input[type="submit"]{
    width: 139px;
    height: 34px;
    cursor: pointer;
    background-color: rgb(64, 112, 255);
    font-size:20px;
    color:white;
}

確認

検索ワードを入れて検索してみよう。その言葉が含まれたページがリストアップされる。

search.phpテンプレートの作成

現在はindex.phpで表示されているので検索結果用ののテンプレートを作成しよう。
front-page.phpを複製し、search.phpにリネーム。
検索結果が0件だったときの処理を含めながら以下のように変更する。

<?php get_header();?>
  <div id="mainWrapper">
      <div id="mainContents">
        <h1 id="searchResult">「<?php the_search_query();?>」の検索結果</h1>
        <?php if($wp_query->found_posts > 0):?>
          <?php get_template_part('loop','excerpt');?>
        <?php else:?>
          <p id="resultZero">検索結果はありませんでした。</p>
        <?php endif;?>
      </div>
      <aside id="sideContents">
        <?php get_sidebar('category');?>
        <?php get_sidebar('date');?>
      </aside>
    </div><!--mainWrapper-->
<?php get_footer();?>

css

main.cssの末尾に以下を追記する。

/***search***/
#searchResult{
  font-size:20px;
  background:#eee;
  border-left:5px solid #333;
  border-bottom:2px solid #333;
  margin-bottom:20px;
  padding:10px;
}
#resultZero{
  font-size:20px;
  padding:20px;
}

確認

検索ワードにhogeといれて実行してみよう。以下のように表示されれば成功だ。

404.phpの作成

現在は存在しないURLにアクセスされた場合index.phpが表示されてしまう。
404.phpテンプレートを作成し、こういった場合に適切に誘導できるようにしよう。サイドバーはいらないのでpage.phpを複製し404.phpとリネームし以下のように記述する。

<?php get_header();?>
  <div id="mainWrapper">
      <div id="mainContents">
        <h1 id="notFound">404 Not Found</h1>
        <p id="notFoundP">お探しのページが見つかりませんでした。<br>
          申し訳ございませんが、 <a href="<?php echo home_url('/');?>">こちらのリンク</a>からトップページにお戻りください。
        </p>
      </div>
    </div><!--mainWrapper-->
<?php get_footer();?>

css

main.cssの末尾に以下を追記する。

/***404***/
#notFound{
  font-size:20px;
  background:#eee;
  border-left:5px solid #333;
  border-bottom:2px solid #333;
  margin-bottom:20px;
  padding:10px;
}

#notFoundP{
  font-size:20px;
  text-align: center;
  line-height:1.5;
}

存在しないurlを入れて実行してみよう。以下のように表示されれば成功だ。

テーマのスクリーンショット

いよいよ最終仕上げだ。サイトのスクーンショットを作成する。
この際以下のルールを守る必要がある。
1.ファイル名はscreenshot.png
2.画像の縦横比は3:4

作成したらthemeフォルダに配置する。

確認

管理画面。外観からテーマを見てみよう。以下のようにスクショファイルが反映されていれば成功だ。

まとめ

以上でWPオリジナルテンプレートの作成は終了だ。
今回の記事をもとに是非あなたのオリジナルテンプレートを作成してみてもらいたい。

コメント

タイトルとURLをコピーしました