初心者必見!WordPressで0からブログを作ってみよう!検索できるようにしよう編

初心者必見!Wordpressで0からブログを作ってみよう!検索できるようにしよう編

今回はブログ内で検索ができるように機能を追加します。記事の検索をできるようになればユーザーはお目当ての記事を見つけやすくなりますね。実装するには難しそうなイメージがありますが、WordPressではもともと組み込まれている検索フォームを簡単に使うことができます。

こんなブログサイトを作る

一緒に作っていくブログサイトは以下のようなものになります。ほとんどこのブログと同じ感じですけど、一般的なブログを作るという意味ではいいのかなと思います。
こんなブログを作ろう

作れるようになるまでの流れ

実際に作っていく手順としては以下のように進めていこうかと思っています。HTML,CSSできるよってかたは3番のWordPressテーマ作成編から進めていただくといいかもしれません。

1. HTMLの入門編
2. CSSの入門編
3. WordPressテーマ作成編
4. カテゴリメニュー・パンくずリスト・ページャー作成編
5. 検索できるようにしよう編 ←いまここ
6. WordPressで問い合わせページを作ろう編
7. レスポンシブでスマートフォンにも対応させよう編
8. 作ったブログをサーバーにアップしてみよう編

上記以外にも、CSSの管理をしやすいようにSassやGulpを使ってみたり、WordPressのショートコードを作ってみたり、Javascriptでフォームのバリデーションも、その他応用編として記事にしてみようかなと思っています。

今回の作業するにあたって必要なデータ

今回の完成例

検索のテンプレートタグ

WordPressにもともと組み込まれている検索フォームをたった一行のコードで設置できてしまいます。

<?php get_search_form(); ?>

今回は上記コードをsidebar.phpに追記しましょう

<div class="side-content">
	<aside>
		<?php get_search_form(); ?>
		<div class="side-content__item">
			・・・省略
		</div>
	</aside>
</div>

たったのこれだけで検索の機能を使えます。キーワードを入力することで記事を特定することができるようになりましたね。

とりあえず表示させた検索フォーム

ですが、テンプレートタグを入れただけでHTMLが書かれてしまいましたね。じつはこれだと独自にCSSでスタイルするのがちょっとめんどくさいんですよね。なぜかというとクラスの指定もとくにされていないんです。

つぎに独自のget_search_formを表示させる方法をご紹介します。

searchform.php

get_search_formのテンプレートタグでオリジナルの検索フォームを表示させたい場合は、searchform.phpというファイルを作成すればOKです。このsearchform.phpがない場合、を書くとWordPressで最初から組み込まれている検索フォームが設置されます。反対にsearchform.phpがある場合は、その中身が表示されるようになります。

<form role="search" method="get" action="<?php bloginfo('url') ?>" class="searchform">
  <div class="searchform__inner">
  <input type="text" value="" name="s" placeholder="キーワードで検索" class="searchform__input"><button class="btn btn--searchform" type="submit">検索</button>
  </div>
</form>

こんな感じで、マークアップしておきましょう。これで、自分の好きなクラスを付与することができましたね。ちなみに、placeholderを使うと入力欄にうっすら任意の文章を表示させることができます。

CSSはこんな感じにするといいかもです。

/* btn
--------------------------------------------------------- */
.btn{
  color:#fff;
  background:#9265cf;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  padding:16px 0;
  font-size: 1.4em;
  width:100%;
  border:none;
}

.btn:link{color:#fff; text-decoration: none;}
.btn:visited{color:#fff; text-decoration: none;}
.btn:active{color:#fff; text-decoration: none;}
.btn:hover{
  opacity: 0.7;
  filter: alpha(opacity=70);
}


.btn--searchform {
  width: 56px;
  height: 56px;
}

/* searchform
--------------------------------------------------------- */
.searchform{}

.searchform__inner{
  text-align: center;
  margin-bottom:40px;
}

.searchform__input {
  display: inline-block;
  height: 52px;
  padding: 0 16px;
  vertical-align: bottom;
  font-size: 1.6em;
}

※ちなみに、作業用のデータをダウンロードされた方はすでに同梱されているstyle.css内にbtnの記述はされているので、btn–searchとsearchform関連の記述だけでいいと思います。

スタイルを適用した検索フォーム

search.phpで検索結果ページを作成

現状でもindex.phpのおかげで検索結果が表示されていますが、もっとわかりやすい検索結果ページにしたですね。今回は『◯◯の検索結果:◯件』とページの上部に表示されるようにしましょう。

んで、search.phpというのがもともとWrodPressで決められた検索結果ページ用のテンプレートになります。ちなみに、search.phpがない場合はindex.phpが表示されます。

search.phpをテーマフォルダ直下に新規作成してください。中身はindex.phpのものをほぼそのまま流用します。

search.php

<?php get_header(); ?>

<div class="wrapper clearfix">
	<div class="main-content">
	<h1 class="title title--h3"><?php the_search_query(); ?>の検索結果 : <?php echo $wp_query->found_posts; ?>件</h1>
		<section>
		<?php if (have_posts()) : ?>
			<ul class="pannel-group clearfix">
				
				<?php while (have_posts()) : the_post(); ?>

				<?php 
					// カテゴリー情報を取得
					$category = get_the_category();
					$cat_name = $category[0]->cat_name;
					$cat_slug = $category[0]->category_nicename;
				?>
				
				<li class="pannel-group__item">
					<a href="<?php the_permalink() ?>">
						<p class="pannel-group__item__category pannel-group__item__category--<?php echo $cat_slug; ?>"><?php echo $cat_name ?></p>
						<div class="pannel-group__item__img">
							<?php if(has_post_thumbnail()) { echo the_post_thumbnail( 'list-thumbnail' ); } ?>
						</div>
						<h2 class="pannel-group__item__title"><?php the_title(); ?></h2>
						<div class="pannel-group__item__text">
							<?php the_excerpt(); ?>
						</div>
						<p class="pannel-group__item__date"><?php the_time('Y/m/j') ?></p>
					</a>
				</li>

				<?php endwhile; ?>

			</ul>
			<!-- 繰り返しなので省略します -->
		</section>
		<nav class="pager">
			<?php if(function_exists('wp_pagenavi')) : wp_pagenavi(); endif; ?>
		</nav>
		<?php else : ?>
			<h2 class="title--h2">記事がありません</h2>
		<?php endif; ?>
	</div>

	<?php get_sidebar(); ?>
	
</div>

<?php get_footer(); ?>

5行目に検索のキーワードと件数を表示されるようにしています。ここまでできたらブラウザで確認をしていろんな文言で検索してみてくださいね。

パンくずリストの調整

検索結果ページ(search.php)では、パンくずリストに検索したキーワードがでるようにしたいですね。ということで、前回作成したbreadcrumb.phpを修正しましょう。

breadcrumb.php

<nav class="breadcrumb">
	<ul class="breadcrumb__menu">
	<?php 
		$postcate = get_the_category();
		$title = get_the_title();
	?>
		<li class="breadcrumb__list"><a href="<?php echo home_url(); ?>">Home</a></li>
	<?php if(!is_home()&&!is_admin()){

		if(is_category()){
		?>
			<li class="breadcrumb__list"><?php echo get_category_parents($postcate[0]->term_id,false,''); ?></li>
		<?php } elseif(is_single()){ ?>
			<li class="breadcrumb__list"><?php echo get_category_parents($postcate[0]->term_id,true,''); ?></li>
			<li class="breadcrumb__list"><?php echo $title; ?></li>
		<?php }elseif(is_search()){ ?>
				<li class="breadcrumb__list">「<?php echo get_search_query(); ?>」で検索した結果</li>
		<?php }; ?>
	<?php }; ?>
	</ul>
</nav>

16、17行目に検索結果ページに関するコードを追記しています。is_searchで検索結果ページかどうかの判別を行っています。さらにget_search_query()で検索に使われたテキストを表示させているんですね。

キーワードが入力されていなくても検索をしてしまう問題の解消

今のままでもほぼほぼいいのですが、現状だとじつは問題点があります。というのも、検索フォームに何も入力をしなくても空白として検索をしてしまうんですね。ただ、検索結果として全件表示されるだけなのですが・・・。これだと若干気持ち悪いので今回は検索フォームに何も入力されていない場合は検索ボタンを押しても検索されないようにしてみたいと思います。

jQueryで送信されないようにする

jQueryとは
JavaScriptというスクリプト言語のライブラリです。初心者の方には難しいですね。ざっくりいうとJavaScriptというのは、サイトに動きをつけたりするのが得意なプログラミング言語です。たとえば、トップへ戻るというボタンを押したらスルスルとページの上部にスクロールしたりするサイトがありますよね。こういったものはJavaScriptで実装をします。

で、jQueryはそのJavaScriptを手助けするJavaScriptのコードです。なので、通常JavaScriptだと10行くらいコードを書かなければいけないものが3行で終わったりします。

もしjQueryについて詳しく知りたい方は
jQueryってなに?超初心者向け入門講座 | 株式会社WEB企画スタッフブログ
jQuery入門道場 – 【jQueryとは?】

jQueryの読み込み

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<?php wp_deregister_script('jquery'); ?>

1行目のコードでjQueryを読みこんでいます。今回はCDNといってインターネット上に提供されているコードを使うことができます。
2行目はじつはWordPressでは独自仕様のjQueryを読み込みがされるのですが、これだとコードの書き方が多少変えなければいけなかったり、他のjQueryのコードと干渉してしまう恐れがあるので使わないほうがいいでしょう。

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>オリジナルテーマを作成しよう</title>
	<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
	<?php wp_deregister_script('jquery'); ?>
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/reset.css">
	<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
	
	<?php wp_head(); ?>
	
</head>

※WordPress4.2.3を今回使っていますが、WordPressの独自仕様jQueryは読み込みがされなくなっているかもしれません。現在調査中です。

jQueryでコードを書く

ここまでできたら「索フォームに何も入力されていない場合は検索ボタンを押しても検索されないようする」プログラムを書いてみたいと思います。

テーマフォルダ直下 > jsフォルダ作成

その中に、「common.js」というファイルを新規作成しましょう。

common.js

jQuery(function($) {

	// 検索フォーム 空白の場合はsubmitしない
	////////////////////////////////////////////////////////////////////////////////

	$('.searchform').submit(function(){
		var $input = $(this).find('.searchform__input');
		if($input.val().length == 0){
			return false;
		}
	});
});

ここまで書いたらheader.php内でcommon.jsを読み込みます。

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>オリジナルテーマを作成しよう</title>
	<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
	<?php wp_deregister_script('jquery'); ?>
	<script src="<?php bloginfo('template_url'); ?>/js/common.js"></script>
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/reset.css">
	<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
	
	<?php wp_head(); ?>
	
</head>

これでブラウザで確認してみてくださいね。

おわりに

今回は、前に引き続きブログを使いやすくなるようにしました。検索ができるようになったことで、ユーザーが目当ての記事を探せるようになりましたね。さらに今回はJavaScriptとjQueryにも触れました。現在のWEBサイトの多くはJavaScriptもしくはjQueryを使ってサイトに動きをつけています。もはや必須のスキルと言えると思います。今回は詳しく説明していませんが、今後機会を作ってご紹介していきます。

今回の完成例

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

同じカテゴリーの記事

ページの先頭へ