・WordPressでサイト内検索のフォームを作る方法は？
こんな疑問にお答えします。
WordPressのテーマ作成をするときに、サイト内検索のフォームを実装することがありますよね。
下記みたいなやつ。
これ実は簡単に実装できちゃいます。
すぐにできるよ！
ということで、この記事では「WordPressでサイト内検索フォームの作成方法」について解説していきます！
・WordPressでサイト内検索フォームの作成方法
・WordPressで検索結果ページの作成方法
目次
【解説】WordPressでサイト内検索フォームの作成方法【４手順】
サイト内検索のフォームの作成方法は、下記になります。
- 検索フォーム用ファイルを作成
- 検索フォーム用ファイルにコードを記述
- 検索フォーム用ファイルを表示
- 検索フォーム用ファイルをCSSで装飾
順に見ていきましょう！
まず検索フォーム用のテンプレートファイルを作成します。
それが「searchform.php」です。
テーマディレクトリ直下にて作成しましょう。
～～\wp-content\themes\テーマ名\searchform.php次に「searchform.php」にてコードを記述します。
通常の記述としてはこんな感じですね↓
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label>
<input type="search" placeholder="キーワードで検索" value="<?php echo get_search_query(); ?>" name="s" />
</label>
<button type="submit">検索する</button>
</form>これでユーザーがサイト内のコンテンツをキーワードで検索できるようになります。
コードの重要な点がこちら↓
- 「form」のmethod属性はgetを使用
- 「form」のaction属性にhome_url()を使用。
検索フォームが送信された際にデータを送信するURLを指定しています。 - 「input」のtype属性にsearchを使用
- 「input」のvalue属性に「get_search_query()」関数を使用
現在の検索フォームに入力されたキーワードを取得できます。 - 「input」のname属性に「s」を使用
inputタグのname属性に「s」を使用することは、WordPressがデフォルトで提供する検索機能との互換性を保つためのものであり、WordPressは検索クエリのキーワードを「s」パラメーターで受け取るために設計されています。
初見だとちょっと難しいですよね。
決められた値を入れておけばOKと思っておけばよいかと。
ちなみに「キーワードで検索」や「検索する」のテキストは、自由に変更可能です。またクラス名をつけるのも可能。
検索フォーム用ファイルを作れたので、実際に表示しましょう。
やり方は簡単で、表示したいページに対して下記を記述するだけ。
<?php get_search_form(); ?>今回はhome.phpに記述してみました。
すると下記のように表示されます。
これで検索フォーム自体の実装は完成しました！！
ただ見た目があれなので、CSSで装飾しますね。
最後に検索フォームをCSSで装飾します。
簡単にスタイルを調整してみました↓
/* テキストボックスのスタイル */
input[type="search"] {
padding: 10px 15px;
font-size: 16px;
border-radius: 4px;
border: 1px solid #ccc;
width: 300px;
max-width: 100%;
margin-right: 10px;
}
/* ボタンのスタイル */
button[type="submit"] {
font-size: 16px;
padding: 10px 20px;
border: none;
border-radius: 4px;
color: #fff;
background-color: #000066;
cursor: pointer;
transition: opacity 0.3s ease;
}これでWordPressのサイト内検索フォーム作成ができましたね。
すぐできたね！
【解説】WordPressで検索結果ページの作成方法
実は先述した検索フォームだけでは、完成とは言えません。
というのも検索した結果を表示するページがいるため。
というわけで検索結果ページの作成方法を紹介しますね。
- 検索結果ページ用のファイルを作成
- 検索結果ページ用のファイルにコードを記述
- 検索結果をカスタマイズ
順に見ていきましょう！！
まず検索フォーム用のテンプレートファイルを作成します。
それが「search.php」です。
テーマディレクトリ直下にて作成しましょう。
～～\wp-content\themes\テーマ名\search.php次に作成した検索結果ページ用のファイルに、コードを記述します。
if文やループ処理を使って、記事を取得して反映。
<?php get_header(); ?>
<main>
<?php if (have_posts()): ?>
<!-- 検索フォームが未入力の場合 -->
<?php if (!$_GET['s']) { ?>
<p class="search-attention">検索キーワードが未入力です<p>
<?php } else { ?>
<!-- 検索フォームが未入力の場合ここまで -->
<h1 class="search-title">
「<?php echo esc_html($_GET['s']); ?>」の検索結果：<?php echo $wp_query->found_posts; ?>件
</h1>
<?php while(have_posts()):the_post(); ?>
<article class="article">
<a href="<?php the_permalink(); ?>" class="article__link">
<div class="article__thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<time class="article__time" datetime="<?php echo esc_attr( get_the_date( 'Y-m-d' ) ); ?>"><?php echo esc_html( get_the_time( 'Y-m-d' ) ); ?></time>
<h2 class="article__title">
<?php the_title(); ?>
</h2>
</a>
</article>
<?php endwhile; ?>
<?php } ?>
<!-- 検索したキーワードの記事がなかった場合 -->
<?php else: ?>
<p class="search-attention">
指定されたキーワードでは記事が見つかりませんでした。<br>
別のキーワード、もしくはカテゴリーから記事をお探しください。
</p>
<?php endif; ?>
<!-- 検索したキーワードの記事がなかった場合ここまで -->
</main>
<?php get_footer(); ?>検索キーワードの記事がなかった場合や、何も記述せず検索した場合を考えてif文を使い記述します。
最後に検索の対象となるものなどをカスタマイズしていきます。
デフォルトの状態だと、投稿ページだけでなく固定ページも検索対象となってるんですよね。
そこでfunctions.phpファイルに、下記記述をすれば、投稿のみ検索対象とすることができます。
function custom_search_filter($query) {
if ($query -> is_search) {
$query -> set('post_type', 'post');
}
return $query;
}
add_filter('pre_get_posts', 'custom_search_filter');workという実績投稿も検索対象にしたいなら、配列に追加すればOK。
function custom_search_filter($query) {
if ($query->is_search() && !is_admin() && $query->is_main_query()) {
$query->set('post_type', array('post', 'work'));
}
}
add_action('pre_get_posts', 'custom_search_filter');カスタム投稿タイプのアーカイブページ別で、検索対象を分けたい場合は下記のようにif文を使えばOK。
function custom_search_filter($query) {
if (!is_admin() && $query->is_main_query()) {
if ($query->is_search()) {
if (is_post_type_archive('work')) {
$query->set('post_type', 'work');
} else {
$query->set('post_type', 'post');
}
}
}
}
add_action('pre_get_posts', 'custom_search_filter');【解説】WordPressでサイト内検索フォームの作成方法【４手順】：まとめ
- searchform.phpを作成してコード記述
- get_search_formを使って検索フォームを表示
- search.phpを作成してコード記述
- 検索対象をカスタマイズ
サイト内検索のフォームを作り方を覚えておこう！
