問題 × 解決策

WordPressのサイト内検索の構築例

問題

Wordpressのサイト内検索を構築するには?

解決策

フォームと、検索結果ページのテンプレートファイル「search.php」を作成する。

 

サイト内検索フォーム

まず、Wordpressのサイト内検索フォームの作成を行います。
記述例は以下になります。

<form role="search" method="get" class="searchform" action="自サイトのトップページ">
	<input type="text" name="s" class="s" placeholder="サイト内検索"  value="<?php if(!empty($_GET['s'])): echo $_GET['s']; endif; ?>" />
	<input type="image" class="searchsubmit" src="<?php echo $module_path ;?>images/common/anchor-search.png" alt="検索" width="30" height="30" />
</form>
  • 「method=”get” action=”自サイトのトップページ”」に設定したフォームを用意し、検索入力フィールドのname属性に「s」を指定します。

サイト内検索結果ページ

そしてサイト内検索結果ページの作成を行います。
テンプレートファイル「search.php」を作成し、その中に記述していきます。

検索結果の情報を取得

検索結果の情報を事前に変数に格納しておきます。

global $wp_query;
$total_results = $wp_query->found_posts;
$search_query = get_search_query();
found_posts 「$wp_query->found_posts」で、記事の総数を取得します。
get_search_query() サイト内検索を行ったときのクエリ文字列を取得します。

サイト内検索の検索キーワード「$_GET[‘s’]」を元に処理を振り分ける。

以下のパターンに応じて処理を振り分けます。

  • 検索条件が入力されていない場合
  • 検索条件に該当する記事がない場合
  • 検索条件に該当する記事がある場合
<?php if (isset($_GET['s']) && empty($_GET['s'])) :?>
<p>検索条件が入力されていません。</p>
<?php elseif($total_results == 0 ): ?>
<p>「<?php echo $search_query; ?>」 に一致する情報は見つかりませんでした。</p>
<?php 
else:
// 検索条件に該当する記事がある場合の処理
endif;
?>

検索条件に該当する記事を出力する。

ループ処理のパラメータ設定で「’s’ => $s,」を設定し、出力処理を行います。

<?php 
$s = $_GET['s'];
$args = array(
	'posts_per_page' => -1,
	's' => $s,
	'paged' => $paged
);
$my_query = new WP_Query($args);
if($my_query->have_posts()):
?>
<h3>「<?php echo $search_query; ?>」の検索結果<span>(<?php echo $my_query->found_posts; ?>件)</span></h3>
<?php
while ( $my_query->have_posts() ) : $my_query->the_post();
// ループ内処理(ここに検索ワードに該当する記事が順に出力されます)
?>
...
<?php
endwhile;
endif;
wp_reset_postdata();

記述例

実際にサイト内検索結果ページの記述例は以下になります。

テンプレートファイル「search.php」

<?php
global $wp_query;
$total_results = $wp_query->found_posts;
$search_query = get_search_query();
?>
<section class="section">
<?php if (isset($_GET['s']) && empty($_GET['s'])) :?>
<p>検索条件が入力されていません。</p>
<?php elseif($total_results == 0 ): ?>
<p>「<?php echo $search_query; ?>」 に一致する情報は見つかりませんでした。</p>
<?php 
else:
$s = $_GET['s'];
$args = array(
	'posts_per_page' => -1,
	's' => $s,
	'paged' => $paged
);
$my_query = new WP_Query($args);
if($my_query->have_posts()):
?>
<h3>「<?php echo $search_query; ?>」の検索結果<span>(<?php echo $my_query->found_posts; ?>件)</span></h3>
<?php
while ( $my_query->have_posts() ) : $my_query->the_post();
// ループ内処理(ここに検索ワードに該当する記事が順に出力されます)
?>
...
<?php
endwhile;
endif;
wp_reset_postdata();
endif;
?>
</section>

参照

以下のサイトが、より詳しく解説してくれています。

【WordPress サイト内検索機能の実装方法 – by Takumi Hirashima】
https://hirashimatakumi.com/blog/3109.html

【関数リファレンス/WP Query – WordPress Codex 日本語版】
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/WP_Query

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

seventeen − eight =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧