【SWELL】サイト検索で条件にマッチする記事がない場合の表示をカスタマイズする方法

初心者

「記事が見つかりませんでした。」の文章を替えたい…
メッセージの下に検索フォームを表示したい…
テンプレートファイルを変更しないでカスタマイズしたい…

そんな悩みを解決します。

SWELLのサイト内検索ページは、該当する記事がない場合に「記事が見つかりませんでした。」だけしか表示されません↓

検索フォームでも表示されれば、別のキーワードで検索してくれそうなもんですが、このままではサイトを離脱されてしまいます。

この記事では、「サイト内検索で該当する記事がない場合に表示されるページ」のカスタマイズ方法を紹介します。

カスタマイズの一例

この記事を書いた人

• IT業界24年のベテラン エンジニア
• WordPressで企業サイトの構築しています
• 取り扱いWordPressテーマは300個オーバー

SWELLマニアの かんた です

検索結果ページのカスタマイズ方法

検索結果ページで、該当する記事がないページのカスタマイズ方法についてです。

事前準備

あった方が良いもの

今回のカスタマイズはフックを追加します。子テーマのfunctions.phpもしくは、Code Snippetsプラグインを使いコードを追加します。

初心者

子テーマのfunctions.phpって何？

そんな人は、Code Snippetsプラグインを使いましょう。

かんた

Code Snippetsは無料で使える定番プラグインです。

作業ミスに備える

WordPressのカスタマイズは誤作業により、サイトが表示されなくなるリスクがあります。

いざという時に備えて対処できる環境を整えましょう。

子テーマのfunctions.phpにコードを追加する場合

Code Snippetsを使わず、functions.phpにコードを追加する場合はfunctions.phpをバックアップしておきます。

リカバリー作業用にFTPやファイルマネージャーツールなど、サーバーのファイルにアクセスできるツールを用意しましょう。

かんた

どちらか1つは用意しましょう↓

ファイルマネージャーツールはレンタルサーバー会社が提供しているWebベースのツールです。レンタルサーバー会社により、ツールの名称が異なる場合があります。

Code Snippetsを使う場合

functions.phpではなく、Code Snippets経由でカスタマイズする場合はphpMyAdminにアクセスできる準備をしておきましょう。

かんた

phpMyAdminはレンタルサーバーのコントロールパネルからアクセスできます。

サイト内検索フォームの設置

サイト内検索フォームを設置済みであれば、このステップは不要です。

サイト内検索フォームを設置するステップです。

「外観」→「ウィジェット」と進み、「検索」ウィジェットを任意の位置に設置しましょう。

かんた

設置場所は、「共通サイドバー」「追尾サイドバー」などがおすすめです。

検索結果ページのカスタマイズ

ここからはカスタマイズを行っていきます。

まずは全体の流れです↓

全体の流れ

かんた

それぞれのステップを詳しく解説します。

STEP

ブログパーツでパーツを作る

検索条件に該当する記事がない時に表示するページの中身を作るステップです。

「ブログパーツ」→「新規追加」と進み、表示したいパーツを自由に作成しましょう。

最小の構成

1. 段落ブロック
2. 検索ブロック

「該当する記事がない」と伝わるテキストと、検索フォームを設置しましょう。

検索フォームはブロック一覧の中にある「検索ブロック」を使います↓

表示するパーツを作成したら、「公開」をクリックし設定を保存します。

STEP

フックの追加

ブログパーツを表示させるフックを追加するステップです。

検索条件にマッチする記事がないページのカスタマイズフックswell_post_list_404_textを使います。

swell_post_list_404_textフックはSWELLオリジナルのフックです。SWELのその他フックは、フック一覧ページで解説しています。

子テーマのfunctions.php、もしくはCode Snippetsに次のコードを追加します↓

コード

function kanta_search_result(){
	$kanta_form = do_shortcode( '呼び出しコード' );
	return $kanta_form;
}

add_filter( 'swell_post_list_404_text', 'kanta_search_result' );

サンプルコード内の「呼び出しコード」は、ブログパーツの呼び出しコードです↓

かんた

呼び出しコードは作成したブログパーツごとに異なりますの。
フックのコードは環境に合わせて書き換えてください。

ブログパーツ以外にも、テンプレートタグやPHPで作成した値を出力することもできます。以下、そういったケース用のコードです↓

コード

function kanta_search_result(){
	$kanta_form = do_shortcode( '呼び出しコード' );
	$html .= '検索条件にマッチする記事が見つかりませんでした。';
	$html .= $kanta_form;
	return $html;
}

add_filter( 'swell_post_list_404_text', 'kanta_search_result' );

以上で作業終了です。

かんた

検索フォームに、「あああああ」など検索にマッチしない適当な文字を入力し表示を確認しましょう。

検索結果ページに表示させるパーツの一例

サイト内検索してくれるユーザーはサイトに関心を持っているため、何も見つからない場合でも即離脱することなく次のアクションを起こしてくれる可能性があります。

該当の記事がなかった場合に表示させるパーツの一例を紹介します。

パーツ

かんた

それぞれ解説します。

メッセージ（必須）

「検索したけどマッチする情報が見つからなかった」

シンプルにこれが伝わるよう冒頭にメッセージを表示させましょう。ブログ運営者なら「該当の記事がありません。」などで十分です。

旅行会社などでツアーを紹介しているサイトなら「お探しの条件にマッチするツアーは見つかりませんでした。」など、コンテンツに合わせてメッセージを書き換えましょう。

検索フォーム（必須）

Google検索で探したい情報が見つからない場合、キーワードを変えて再検索しますよね？サイト内検索でも同じ仕組みを導入しましょう。

シンプルに、WordPressの検索ブロックを設置するのが最も簡単な方法です。

レビュー系ブログなどで情報を複数の条件から検索するような仕組みを導入したい場合は、絞り込み検索プラグインでも構いません。

あわせて読みたい

【2024年】WordPress絞り込み検索プラグイン｜複数条件で検索する機能をブログやサイトに簡単に実装でき… 初心者でも使える簡単なプラグインないかな…複数サイトで使えるライセンスがいいちゃんとアップデートしているプラグインがいいなぁ そんな疑問に答えます。 WordPres…

カテゴリーアーカイブページへの導線

ボックスメニューやリッチカラムを活用し、カテゴリーアーカイブページへの導線を設置しましょう。

ボックスメニューのサンプル

キラーページへの導線

キラーページはブログで言う、成約ページ。

企業サイトなら商品の販売をしているLPなどです。

問い合わせ・FAQページへの導線

企業サイトの場合、「問い合わせ」「FAQページ」への導線を設置するのは必須です。サイトを離脱され、同業他社に見込み客が流れないよう問い合わせページへのリンクをしっかり設置しましょう。

サイト内で検索で使われたキーワードを調べる方法

サイト訪問者が入力したサイト内検索キーワードは、サイト運営者にとって貴重なデータです。

キーワードからユーザーのニーズを把握できる。

サイト内検索キーワードを記録する方法

サイト内検索でユーザーが入力したキーワードはグーグルアナリティクスで確認できます。

グーグルアナリティクスでサイト内検索のキーワードを記録するには、事前設定が必要です。

かんた

アナリティクスでの設定方法を紹介します↓

STEP

左下の「歯車」のアイコンをクリック

STEP

「ビューの設定」をクリック

STEP

サイト内検索のトラッキングを「オン」にする

STEP

クエリパラメータに「s」を入力

STEP

「保存」をクリック

検証時の注意点

設定が正しく動作するか確認のため、適当なキーワードでサイト内検索しましょう。

アナリティクスの記録からWordPressログインユーザーを除外する設定をしている場合は、ログインしていない状態で検索し、データが記録されるか確認してください。

かんた

おつかれさまでした。
以上で設定終了です。

サイト内検索で利用されたキーワードの確認方法

アナリティクスのデータ反映には数時間程度かかることがあります。

サイト内検索で入力されたキーワードは、「行動」→「サイト内検索」→「サイト内検索キーワード」 から確認できます。

SWELのサイト内検索に関するFAQ

/* 検索ブロックの検索ボタン*/
.search-no-results .wp-block-search__button{
	background:var(--color_main); // ← 背景色
	color:white; // ← フォントの色
}

function kanta_exclude_page($search) {
  if(is_search()) {
    $search .= " AND post_type = 'post'";
  }
  return $search;
}
add_filter('posts_search', 'kanta_exclude_page');

まとめ

WordPressテーマSWELL検索で該当する記事が見つからなかった場合のカスタマイズテクニックを紹介しました。

SWELLではテンプレートのコードを編集せず、ブログパーツで作成したパーツを表示させることができます。

カスタマイズの概要

テンプレートを編集せずにカスタマイズ出来る点がポイントです。

かんた

ぜひ検索結果ページをアレンジしてみてください。