著作者：rawpixel.com／出典：Freepik
応援クリックよろしくお願いします！
ワードプレスにプラグインなしで検索機能を追加する方法です。
記事数が多くなってくるとユーザーの使い勝手を向上させるためにサイト内検索は必須ですね。
自分自身、サイト内検索をよく使います。
htmlやphpの知識が多少あれば基本的にコピペで実装可能なのでわざわざプラグインを入れる必要はないかなと思います。
目次
WordPressで検索機能を自作するために必要なファイルと作成手順
検索機能を実装するために2つのファイルを作成します。
手順①「searchform.php」を作成
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<input type="text" name="s" id="s" placeholder="SEARCH" />
<button type="submit">検索</button>
</form>検索ボタンを作るためのコードを記述するファイルです。
手順②「search.php」ファイルを作成
検索結果を表示させるためのテンプレートです。
基本的にはアーカイブページと同じですね。
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<?php echo get_the_title(); ?>
</a>
</li>
<?php endwhile; ?>
<?php else : ?>
検索されたキーワードにマッチする記事はありませんでした
<?php endif; ?>手順③get_search_form で検索フォームの設置
<?php get_search_form(); ?>get_search_formの関数を呼び出して検索フォームを設置します。
サイドバーが定番ですかね。以上で検索機能の実装完了です。
cssで見た目の調整
.search{
padding:8% 3%;
}
.search form {
position: relative;
width: 60%;
margin: 0 auto;
}
.search form input {
height: 40px;
background: #F5F5F5;
border: 1px solid #EBEBEB;
width: 100%;
}
.search form span{
position: absolute;
right: 5%;
top:50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.search form .button{
background-color: #04384c;
color: #fff;
border-radius: var(--swl-radius--4,0);
height: 100%;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
width: 40px;
}まとめ
・「searchform.php」を作成
・「search.php」ファイルを作成
・検索を設置したい場所にget_search_form を設置
簡単ですね。
あとはCSS等いじってお好みにカスタマイズしてください。
こちらの検索は、タイトルや本文の中からキーワードを探して検索します。
複数ワード検索の場合、半角スペースで区切った場合の検索しか検索できません。
全角スペースで複数のキーワードを入れると何も表示されないので注意が必要です。
応援クリックよろしくお願いします！
