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

こんにちは、カンです。
ブログサイトをwordpressで作成している方、サイト内検索って必要ですよね。

プラグインを使うと簡単にできるそうですが、SEOで最も重要な指標の1つである「表示速度」が遅くなってしまうので、プラグインなしで作ってみました。
ちなみに、完成するまで3時間かかり、下記のようなエラーを全て克服したサイト内検索です。
- あれ、検索結果が表示されないよ?
- あれ、検索結果に1つしか表示されないよ?
そのままコピペで使えるので、ぜひ活用してください。
wordpressのサイト内検索に必要なファイル

サイト内検索を実装するために必要なファイルが下記の3つです。
1.検索フォームの出力画面
<?php get_search_form(); ?>
2.検索フォーム画面
searchform.php
3.検索結果画面
search.php
それぞれ見ていきます。
実際にサイト内検索を作ってみる

ステップ1〜3までの順番で説明していきます。
1.検索フォームの出力画面
検索フォームの出力画面は、phpファイルであればどこでも可能です。
表示させたいphpファイルに入力してください。
<?php get_search_form(); ?>
注意としては、固定ページや投稿ページに上記コードを入力しても検索フォーム画面(search.php)は出力されません。
2.検索フォーム画面
検索フォーム画面は「search.php」を使用します。
【ファイル】
search.php
【設置場所】
https://〇〇.com/wp-content/uploads/themes/テーマ名/search.php
search.phpに記述するコードは下記の通りです。
<form id="form" method="get" action="<?php echo home_url('/'); ?>" >
<input name="s" type="text" class="searchInput" placeholder="気になるキーワードを入力">
</form>
「placeholder」の「きになるキーワードを入力」という文字を変えると、検索フォームの初期に表示される文字を変えることができます。
3.検索結果画面
検索結果画面は「searchform.php」を使用します。
【ファイル】
searchform.php
【設置場所】
https://〇〇.com/wp-content/uploads/themes/テーマ名/search.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@よりご登録頂き、チャットで簡単な自己紹介をお願いいたします。
使用言語等は指定はありませんので、お気軽にご登録ください。
人気の記事一覧