ホーム  >  IT・プログラミング / WordPress

【WordPress】【小技】検索フォームをオシャレにカスタマイズする方法

Webサイトを閲覧している中で、記事の検索機能があるサイトを見かけることもあると思います。

WordPressの場合は、ウィジェット一覧に検索機能がデフォルトで搭載されていますので、誰でも簡単に設置できるようになっています。

しかし、このデフォルトの検索フォームは正直あまり見た目が良いとは言えません。

せっかくなので、サイトのイメージにあったオシャレな検索フォームにしたいですよね。

というわけで、今回はWordPressにおいて検索フォームをカスタマイズする方法を説明します。

※この記事はWordPressでテーマの自作を試みている初心者の方向けとなっています。

WordPressのウィジェット画面を開く

まずは、WordPressにログインしてね

ウィジェットに「検索」を設置

外観　＞　ウィジェットと進み、利用できるウィジェットの中から「検索」を選択しドラッグ&ドロップでウィジェットメニューに追加します。

検索の▲をクリックすると、タイトルを入力する画面が現れます。

ここに入力したタイトルがそのままサイトに反映されます。

名前は任意のもので構いませんが、ここでは「search」としています。

名前を入力しましたら、保存を押します。

検索フォームのデザインを決める

作成したいフォームのイメージかぁ。どうやって決めたらいいんだろう？

Web上でも様々なテンプレートが見つかるよ！

searchform.phpを設置する

今回は、↓のようなデザインにしていきます。

searchform.phpとは検索フォームのためのテンプレートです。

検索フォームをカスタマイズするためには、このテンプレートを自分のWordPressのテーマに読み込ませる必要があります。

手順は以下の通りです。

①まず、「searchform.php」という空のファイルを作成します。

②次に、WordPressを設置しているサーバーにアクセスし、wp ＞ wp-content＞ themes ＞ カスタマイズしたいテーマ名を選択します。

③①のファイルを移動します。

searchform.phpを編集する

これでテンプレートを設置できましたので、次はカスタマイズしたいフォームのコードを記述していきます。

searchform.phpを開いて実際にやってみます。

※WordPressの管理画面から編集する場合は、外観 > テーマエディタからsearchform.phpを探してください。

ここに、↓のHTMLを記述します。

<form method="get" class="searchform search_container" action="<?php echo esc_url( home_url('/') ); ?>">
	<input type="text" size="25" placeholder="キーワード検索" name="s" class="searchfield" value="" />
	<input type="submit" value="&#xf002" alt="検索" title="検索">
</form>

placeholderとは、検索フォームの中にうっすら浮かび上がっている文字のことです。

任意で、好きな文言に変更してください。

CSSでデザインを整える

これだけでは、見た目が整っていないため、CSSでデザインを調整します。

searchform.phpと同様に、テーマエディタからstyle.cssというファイルを開きます。

今回は、↓のように記述します。

.search_container {
	box-sizing: border-box;
	position: relative;
	border: 1px solid #999;
	padding: 3px 10px;
	border-radius: 20px;
	height: 2.3em;
	width: 100%;
	overflow: hidden;
	margin-bottom: 20px;
}

.search_container input[type="text"] {
	border: none;
	height: 2.0em;
}

.search_container input[type="text"]:focus {
	outline: 0;
}

.search_container input[type="submit"] {
	cursor: pointer;
	font-family: FontAwesome;
	font-size: 1.3em;
	border: none;
	background: none;
	color: rgb(96, 96, 96);
	position: absolute;
	width: 2.5em;
	height: 2.5em;
	right: 0;
	top: -7px;
	outline: none;
}

FontAwesomeを読み込ませる

最後に、検索ボタンである虫眼鏡のマークの部分を仕上げていきます。

今回はFontAwesomeというWebフォントを使用します。おおまかな手順は以下の通りです。

①https://fontawesome.com/にアクセスし、会員登録をします。

②会員登録が完了しますと、以下の画面が表示されます。
　（表示されない場合は、右上のNewKitsを押します）

③赤枠で囲ってある部分を、右側の青いボタンを押してコピーします。

④コピーしたコードをheader.phpの<head>から</head>の間に貼ります。どこに貼れば良いのかわからない場合は、<?php wp_head(); ?>のすぐ上に配置してください。

以上で設置は完了です。

検索結果を表示するテンプレートを作成する

次は、検索結果を表示するためのsearch.phpを作成するよ

search.phpを設置する

前頁で、searchform.phpを編集しましたので検索フォームの見た目を整えることができました。

しかし、今のままでは検索結果を表示させるテンプレートファイルがありませんので、それを作成していきます。

既存のindex.phpもしくはhome.phpなどの全投稿の一覧を表示しているテンプレートのどれかをコピーして、ファイル名をsearch.phpに変えます。

searchform.phpと同様に、wp ＞ wp-content＞ themes ＞ カスタマイズしたいテーマ名の配下にsearch.phpを設置してください。

search.phpを編集する

コピー元のファイルから、投稿一覧を表示させるためのコードを削除します。

どれを削除すればいいのかわからない方は、↓を参考に範囲を選択してください。

<?php 
      if ( have_posts() ) :
          while ( have_posts() ) : the_post();
 ?>
				
<article <?php post_class(''); ?>>
  <a href="<?php the_permalink(); ?>">
    <?php if( has_post_thumbnail() ): ?>
      <figure>
        <?php the_post_thumbnail(); ?>
      </figure>
    <?php endif; ?>

<h2><?php the_title(); ?></h2>
    <?php the_excerpt(); ?>
  </a>
</article>
<?php 
          endwhile;
      endif;
 ?>

他の箇所は任意ですが、最低限<?php get_header(); ?>や<?php get_footer(); ?>などは残しておいて、検索結果を表示させたい箇所に以下の内容を記載します。

<div class="myposthead">

  <h1>検索結果</h1>
    <p>SEARCH</p>
  </div>


    <div class="result">
      <?php if (have_posts()): ?>
<?php
if (isset($_GET['s']) && empty($_GET['s'])) {
echo '検索キーワードを入力してください'; 
} else {
echo '「'.$_GET['s'] .'」の検索結果：'.$wp_query->found_posts .'件見つかりました';
}
?>
    </div>

  <div class="mypostlist">
<?php while(have_posts()): the_post(); ?>
      <article <?php post_class(''); ?>>
        <a href="<?php the_permalink(); ?>">

            <?php if( has_post_thumbnail() ): ?>
          <figure>
            <?php the_post_thumbnail(); ?>
          </figure>
<?php endif; ?>

    <h2><?php echo get_the_title(); ?></h2>
      <?php the_excerpt(); ?>
       </a>
     </article>
<?php endwhile; ?>

<?php else: ?>
  <div class="result">
    <p>検索されたキーワードにマッチする記事はありませんでした</p>
  </div>
<?php endif; ?>
</div>

※上記は一例です。クラス名などは適宜変更してください。

まとめ

これで作業は終わりだよ

おつかれさま！

今回のポイント

＊検索フォームのテンプレート→「searchform.php」
＊検索結果を表示させるテンプレート→「search.php」

本日は以上となります。

最後までお読みくださりありがとうございました。


スポンサーリンク

関連投稿

コメントを残す

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

コメントする