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

実際に使用した商品をレビューしています。アフィリエイト広告リンクを含みます。
A8メディア オブ ザ イヤーってそもそも何だ?
初心者

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

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

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

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

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

カスタマイズの一例

  1. 表示するメッセージを変更する
  2. 検索フォームを表示する
  3. 問い合わせページ、FAQページへの導線を設置する
この記事を書いた人
  • 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つは用意しましょう↓

  • FTPアカウント
  • ファイルマネージャー

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

Code Snippetsを使う場合

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

  • phpMyAdmin
かんた

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

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

SWELLでサイト内検索ボックスを設定

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

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

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

かんた

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

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

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

まずは全体の流れです↓

全体の流れ

  1. ブログパーツでパーツを作る
  2. フックの追加
かんた

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

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' );

以上で作業終了です。

かんた

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

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

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

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

パーツ

  1. メッセージ(必須)
  2. 検索フォーム(必須)
  3. カテゴリーアーカイブページへの導線
  4. キラーページへの導線
  5. 問い合わせ・FAQページへの導線
かんた

それぞれ解説します。

メッセージ(必須)

スクロールできます
ブログ企業サイト
必要性 5.0 / 5.0 5.0 / 5.0

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

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

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

検索フォーム(必須)

スクロールできます
ブログ企業サイト
必要性 5.0 / 5.0 5.0 / 5.0

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

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

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

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

スクロールできます
ブログ企業サイト
必要性 4.0 / 5.0 3.0 / 5.0

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

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

キラーページへの導線

スクロールできます
ブログ企業サイト
必要性 2.5 / 5.0 3.5 / 5.0

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

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

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

スクロールできます
ブログ企業サイト
必要性 3.0 / 5.0 5.0 / 5.0

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

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

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

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

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

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

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

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

かんた

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

STEP
左下の「歯車」のアイコンをクリック
STEP
「ビューの設定」をクリック
STEP
サイト内検索のトラッキングを「オン」にする
STEP
クエリパラメータに「s」を入力
STEP
「保存」をクリック

検証時の注意点

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

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

かんた

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

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

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

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

Googleアナリティクス:サイト内検索キーワードデータ

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

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

検索ブロックの「検索」ボタンの色とテキストの色を変更したい。該当のCSSコードを知りたい。

検索ボタンのセレクタは.wp-block-search__buttonです。

検索結果に該当する記事がないページのbody_wrapにはsearch-no-resultsのクラスが追加されます。

CSSの対象を限定的にするには次のような書き方をします。

コード

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

独自に追加したカスタムフィールドの値が、サイト内検索でヒットしない

WordPressの標準仕様で、サイト検索にカスタムフィールドは含まれません。

サイト内検索の結果から固定ページを除外して、投稿ページだけを対象にしたい

フックで検索対象を指定できます。

コード

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

カスタマイズの概要

  1. ブログパーツで表示させるパーツを作る
  2. フックでブログパーツを表示する

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

かんた

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

よかったらシェアしてね!
  • URLをコピーしました!
目次