【Cocoonカスタマイズ】サイト内検索をGoogleカスタム検索に変更する方法

当サイトは、Wordpressのテーマは「Cocoon」を使用しております。

https://wp-cocoon.com/

wp-cocoon.com

テーマのカスタマイズをするにあたって、サイト内の検索処理に関してはWordpressデフォルトよりもGoogleカスタム検索のほうが使いやすいと思い、先日カスタム検索に置き換える処理を施しました。

なので今回は、

についてまとめました。

なお、検索フォームそのもののレイアウトは、「Cocoon」標準のものを採用し、検索結果のみをGoogleカスタム検索に置き換えています。

Googleカスタム検索のレイアウトが好きじゃない人でも気軽に実装できるようにしました。

また、検索結果画面も別タブで開いたりすることなく、ブログ内で表示されるようにして、あくまでブログの機能として動かせるようにしています。

実際の動きは、サイドメニューの検索からお試しください。「ワードプレス」などと打ってもらえれば結果が出ます。
もしくは、この↓フォームから直接検索してみてください。

Googleカスタム検索に変更するメリット

「そもそも、面倒なことをしてまでGoogleカスタム検索に置き換える必要ある？」と思われるかもしれませんが、Googleの機能を使っているだけあって、様々な恩恵があります。

表記揺れした場合でも検索結果に表示される

Googleカスタム検索を使用する最大のメリット。

Googleで検索する時、ちょっと打ち間違えた場合でも「もしかして：〇〇」のように、元々検索しようとしていた結果が表示されることがありますよね？

あれは、Googleのロボットは検索者の意図を理解して、処理してくれるからです。

しかし、Wordpressの検索機能ではそこまで気を利かせてくれません。
ちゃんと文字が完全に一致した記事タイトルや記事本文がないと、そもそも検索結果にすら表示されないのです。

例えば、当ブログで「Wordperss」で検索した場合。
※正しい表記は「Wordpress」で、打ち間違いを想定しています。

WordPressデフォルトの検索機能を使用した場合は、結果は表示されません。

打ち間違いにユーザーが気付かなかった場合は、そこでユーザーの回遊が途絶え、PVを失う可能性もあります。

しかしGoogleカスタム検索を使用した場合は、誤字がある場合でも理解して検索結果を表示してくれます。

この他にも、カタカナ表記をひらがなで検索してしまった場合や、英語表記を日本語で検索した場合などでも、柔軟に表示してくれます。

Googleカスタム検索を実装することで、よりユーザーに優しい検索仕様に出来る、ということですね。

記事タイトルや記事本文以外の部分も拾ってくれる

Googleカスタム検索は、そのページ単位のキーワードを拾ってくれるので、記事タイトルや記事本文にない文字、例えば「コメント欄」などで投稿されたの文字もキーワードを拾って検索結果に表示してくれる場合があります。

WordPress検索は「記事タイトル」「記事本文」など、検索対象となる箇所がある程度決まっているので、Googleカスタム検索のほうが幅広く取得できます。

「bbpress」などのプラグインで掲示板機能を作っている場合は、掲示板のコメントも検索対象にできますね。

重要度の高いページを自動的に上位表示してくれる

カスタム検索はGoogleのアルゴリズムを使用しているため、Googleで検索したケースを想定して順位が付いています。

そのため、ユーザーの検索意図を理解して、最もユーザーが求めているページが上位に来る可能性が高いのです。
ページ数が肥大化したブログほど、恩恵があると思います。

WordPressのデフォルトの検索は、第一に「タイトルと一致した記事の新着順」、次に「本文と一致した記事の新着順」と機械的な表示にしか対応していないのが残念です。

Googleカスタム検索に変更するデメリット

念のためデメリットについてもまとめておきます。

デメリットよりもメリットが上回っていると判断した場合は実装を検討してみてください。

Googleカスタム検索の標準レイアウトがカッコよくない※今回のカスタマイズでは無関係

Googleカスタム検索の標準レイアウトはこれ。

入力フォームとボタンの高さが合っていないことと、中に「カスタム検索」と表示されてしまっているのが個人的ダサポイント。

また、元々のサイトのデザインにそぐわない場合もあります。

今回実装するフォームは、Cocoonの検索フォームのデザインレイアウトそのままを使用するためご安心ください。

CSSで任意にデザインの調整もできます。

検索結果の前に広告が表示されてしまう

Googleカスタム検索では、検索結果の前にそのキーワードにあった広告が表示される場合があります。
消すことはGoogleが認めた特殊なサイト（非営利団体、認定教育機関、政府機関）などでない限り不可。

「サイト内検索」であることを考えると、別サイトに飛ばされる広告は、多くの人にとっては邪魔な存在です。
キーワードによっては出なかったり短かったりしますが、多くの広告が出稿されているキーワード、例えば「プログラミング」などはかなり縦に長くなります。

ただし、アドセンスアカウントを持っている方は、ここの広告部分を紐づけることで収益化が出来ます。

インデックスされたページしか検索対象にならない

カスタム検索はGoogleのデータベースから拾っているため、もちろん元々Googleで検索に引っかからない（＝インデックスされていない）ページはカスタム検索でも引っかかりません。

インデックスされることが著しく遅い、もしくはされないWordpressブログには向いていないかもしれません。

Cocoonの検索機能をGoogleカスタム検索に置き換える方法

メリット・デメリットを確認した上で、実装すべきと判断された方は実装してみましょう。

Googleカスタム検索に登録する

Googleアカウントを使用して、「Googleカスタム検索」に事前に登録をしておく必要があります。

https://cse.google.com/cse/create/newにアクセスして、「追加」を押してください。

次に、検索したいサイトの入力を求められます。

検索するサイトには、自身のブログのドメインを入力してください。

言語は「日本語」を選択してください。

検索エンジンの名前は、この管理画面で表示される名前になるので、任意でつけてください。

「作成」を押したら、次は左のメニューから「デザイン」を選択してください。

デザインは、「結果のみ」を選択し、「保存してコードを取得」でコードを保存してください。

取得したコードは後に使用するのでコピーしておいてください。（後からいつでも表示できますけど）

ここで、「検索結果の詳細」というボタンから、クエリパラメータを設定できる入力がありますが、デフォルトの「q」から変更しないでください。

また、アドセンスを使用した検索エンジンの収益化を行う場合は、左メニューの「設定」から、「広告」タブに切り替えた画面からON／OFFの設定ができます。
カスタム検索を登録したアカウントとアドセンスのアカウントが一致している必要があるのでご注意ください。

WordPressのウィジェットに検索フォームを登録する

一旦操作をWordpressに移ります。

管理画面の「外観」→「ウィジェット」で、「検索」をサイドメニューに追加してください。

追加した検索フォームがサイドメニューに表示されていればOKです。
※この時点ではまだカスタム検索にはなっておらず、Wordpressの機能を使用した検索となっています。

固定ページに検索結果用ページを追加する

WordPressの固定ページを追加し、検索時にカスタム検索の結果を表示させるページを作ります。

ダッシュボードの「固定ページ」→「新規追加」を選択し、固定ページを作成しましょう。

URLを定義するパーマリンク部分の「kinocolog.com/〇〇〇/」の部分は、のちに使用するので覚えておいてください。

当ブログでは「kinocolog.com/search-result/」が検索結果ページになります。

そして、内容は下記のように記述をお願い致します。

[searchform]

ここに「保存してコードを取得」したソースを貼る

[searchform]は、のちにショートコードとして使用するので、現時点ではただの文字列です。

スクリプトの部分は、カスタム検索登録時に「保存してコードを取得」した内容をそのまま貼り付けてください。（内容を置き換えてください）

また、検索結果ページはGoogleにインデックスされてもしょうがないので、インデックスされないようチェックしておいたほうが良さそうです。

また、検索結果ページにSNSボタンや日付などは不要だと思うので、下記のCSSを入れておくといいかもです。

.date-tags, #content .sns-share, .article-footer, .breadcrumb{
    display: none;
}

固定ページの編集画面の下にあるカスタムCSSに上記のcssを適用することで、不要な情報を削除できます。

Cocoonの子テーマのPHPファイルを修正・追加する

Googleカスタム検索をCocoonのレイアウトのまま行うに当たって、いくつかファイルの修正が必要になります。

下記の手順に沿って操作を行ってください。

「cocoon-master」の「searchform.php」を「cocoon-child-master」にコピーする

親テーマに存在する「cocoon-master/searchform.php」の「searchform.php」を、子テーマの「cocoon-child-master/」に追加してください。

親テーマの「searchform.php」は消さないように注意してください。

子テーマにコピーした「searchform.php」を修正する

コピーした子テーマの「searchform.php」の記述を、以下のソースコードに置き換えてください。

<?php //検索フォーム
/**
 * Cocoon WordPress Theme
 * @author: yhira
 * @link: https://wp-cocoon.com/
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 */
if ( !defined( 'ABSPATH' ) ) exit;

if (!is_amp() || !is_ssl()): ?>
<form class="search-box input-box" method="get" action="<?php echo home_url('/'); ?>">
<?php else: ?>
<form class="amp-form search-box" method="get" action="<?php echo home_url('/'); ?>" target="_top">
<?php endif ?>
  <!-- 追加 ※value部分 -->
  <input type="text" placeholder="<?php _e( 'サイト内を検索', THEME_NAME ) ?>" name="s" class="search-edit" aria-label="input" value="<?php echo (isset($_GET['q'])) ? htmlspecialchars($_GET['q'], ENT_QUOTES, 'UTF-8') : '' ?>">
  <!-- 追加 -->
  <input type="hidden" name="google-flg" value="1">
  <button type="submit" class="search-submit" aria-label="button"><span class="fa fa-search" aria-hidden="true"></span></button>
</form>

「追加」と書いてある部分が今回追記した部分になります。

子テーマのfunctions.phpに追記する

「cocoon-child-master/functions.php」に、下記のソースを追記してください。

if(isset($_GET['google-flg'])){
  /*search-resultの部分は、固定ページで設定したパーマリンクに置き換えてください*/
  header('Location:'.home_url('/').'search-result/?q='.$_GET['s']);
  exit;
}

function searchFormGetSC(){
  ob_start();
  get_template_part('searchform');
  $content = ob_get_clean();
  return $content;
}
add_shortcode('searchform', 'searchFormGetSC');

isset()の部分は、検索フォームから送信されたテキストを、作成した固定ページに転送する処理です。

searchFormGetSC()は、検索フォームを呼び出すショートコードを追加する処理です。

動作確認をしてみよう

とりあえずここまで設定を行いましたら、ウィジェットの検索フォームがカスタム検索に置き換わっていると思います。

スマホのモバイルメニューからの検索も、ちゃんと「searchform.php」を書き換えていれば、固定ページに検索結果ページに遷移してくれます。

ただし、Cocoonのcssを吸収してしまっているせいか、空白のテーブルが表示されてしまうエリアが出てきます。

ここを非表示にしたい場合は、「cocoon-child-master/style.css」に下記を追記してください。

.gsc-above-wrapper-area, .gsc-resultsHeader{
    display: none;
}

実は同様に広告エリアも非表示にできるのですが、表示されるべき広告を無理やり非表示してしまうとGoogleから警告及び利用の停止を食らう可能性が考えられますので、広告は非表示にしないほうが良いと思われます。

---

Cocoonの綺麗なデザインはそのままに、処理だけカスタム検索に置き換える、ということを目的に実装してみました。

カスタム検索は、Wordpressデフォルトの検索機能よりもキーワードの理解が良いので、ユーザーに優しい仕様と言えます。

以上、サイト内検索をGoogleカスタム検索に変更する方法、でした。