wordpressでサイト内検索を設置する方法【プラグインなし・コピペ可】

こんにちは、カンです。

ブログサイトをwordpressで作成している方、サイト内検索って必要ですよね。

プラグインを使うと簡単にできるそうですが、SEOで最も重要な指標の1つである「表示速度」が遅くなってしまうので、プラグインなしで作ってみました。

ちなみに、完成するまで3時間かかり、下記のようなエラーを全て克服したサイト内検索です。

そのままコピペで使えるので、ぜひ活用してください。

wordpressのサイト内検索に必要なファイル

サイト内検索を実装するために必要なファイルが下記の3つです。

それぞれ見ていきます。

実際にサイト内検索を作ってみる

ステップ1〜3までの順番で説明していきます。

１.検索フォームの出力画面

検索フォームの出力画面は、phpファイルであればどこでも可能です。

表示させたいphpファイルに入力してください。

<?php get_search_form(); ?>

注意としては、固定ページや投稿ページに上記コードを入力しても検索フォーム画面(search.php)は出力されません。

２.検索フォーム画面

検索フォーム画面は「search.php」を使用します。

search.phpに記述するコードは下記の通りです。

<form id="form" method="get" action="<?php echo home_url('/'); ?>" >
	<input name="s" type="text" class="searchInput" placeholder="気になるキーワードを入力">
</form>

「placeholder」の「きになるキーワードを入力」という文字を変えると、検索フォームの初期に表示される文字を変えることができます。

３.検索結果画面

検索結果画面は「searchform.php」を使用します。

searchform.phpに記述するコードは下記の通りです。

<?php
	global $wp_query;
	$total_results = $wp_query->found_posts;
	$search_query = get_search_query();
?>
<?php
	if( $total_results >0 ):
	if(have_posts()):
	while(have_posts()): the_post();
?>
	<?php the_search_query(); ?>の検索結果(全<?php echo $wp_query->found_posts; ?>件) // 検索結果の情報
	<?php the_title(); ?> //タイトルを出力
	<?php the_post_thumbnail(); ?> //サムネイルの出力
	<?php
		if(mb_strlen($post->post_content,'UTF-8')>100){
			$content= str_replace('\n', '', mb_substr(strip_tags($post-> post_content), 0, 100,'UTF-8'));
			echo $content.'……';
		}else{
			echo str_replace('\n', '', strip_tags($post->post_content));
		}
	?> // 文章の最初の100文字を出力
<?php endwhile; endif; else: ?>
<?php echo $search_query; ?> に一致する情報は見つかりませんでした。 //検索結果がない場合に出力する文字
<?php endif; ?>

上記をhtmlとcssでアレンジすれば完成します。

検索フォームをおしゃれにする

検索フォームをそのまま出力すると、なんとも味気ないものになります。

そこで、cssに下記を追加してください。

input {
    outline-offset: -2px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 3px;
    height: 45px;
    color: #444;
    padding: 0 10px 0px 27px;
    margin: 0;
    background: url(https://nakazawakan.com/wp-content/uploads/iconSearch.png);
    background-size: 44px 44px;
    background-position: -10px;
    background-repeat: no-repeat;
    background-color: #fff;
    border: 1px solid #D8D8D8;
    transition: border-color .15s ease;
    width: 100%;
    font-size: 14px;}

すると、こんな見た目になります。

画像は無料素材のものなので、ダウンロードして勝手に使用して大丈夫です。

サイト内検索はヘビーユーザーのために必要

結論から言うと、サイト内検索は必須だ。

僕自身も「サイト内検索って必要なの？」と感じていた人間で、実際使ったことがない。

しかし、どういう時に必要かというと、「この人から情報が欲しい」と思った時です。

googleの検索結果で表示される情報よりも、あなたから知りたいと思ったユーザーはサイト内検索が使われます。

あって損はないので、是非設置しましょう。

優秀なエンジニア募集

現在、ウェブアプリケーション開発・システム開発の案件を多数保有しており、受託案件希望の優秀なエンジニアを随時募集しております。

そのため、受託希望のエンジニアの方は下記LINE@よりご登録頂き、チャットで簡単な自己紹介をお願いいたします。

使用言語等は指定はありませんので、お気軽にご登録ください。