自前の検索フォームでGoogleカスタム検索の結果を表示

 Googleカスタム検索の検索フォームの表示の崩れを修正するのが難しくてうまくいかない。

 さらにモバイルでカスタム検索を使いたくなかった。

 ということで、WordPressデフォルトの検索フォームを使い、検索結果はパソコンとモバイルで表示を分けることにした。




モバイルでGoogleカスタム検索を使いたくなかった理由

 モバイルでGoogleカスタム検索を使うと、ページ送りが小さくなるそうで、あまり小さいと、タップがしにくいだろうと思った。

 フォントサイズも調整できないし。

 ついでに、タイトル以下の省略があるので、検索した人が内容が分かりにくいだろうなあ。

 と思った。

 なので、何とか、モバイルは通常の検索結果表示にしたかったわけ。

Googleカスタム検索でコードを準備する

1.Googleカスタム検索にアクセス。

2.「デザイン」をクリックし、「レイアウト」タブで、「検索結果のみ」をクリックして選択。

「デザイン」をクリックし、「レイアウト」タブで、「検索結果のみ」をクリックして選択-カスタム検索の検索結果のみのコードを取得

[「デザイン」をクリックし、「レイアウト」タブで、「検索結果のみ」をクリックして選択-カスタム検索の検索結果のみのコードを取得]

3.〔保存してコードを取得〕を押す。

4.表示されたコードをコピーしておく。

Googleアドセンスのカスタム検索エンジンの「検索結果」を〔自社のウェブサイト〕を選択し、取得した〔検索結果〕のコードも同じものが出力される。

WordPress側の設定

 WordPress側の設定としては

1.〔search.php〕を用意(もともとテーマの中にあるようなら必要ない)し、〔search.php(検索結果の表示ページのテンプレート)〕の中にカスタム検索のコードと条件分岐を書き込む。

2.検索結果を表示する固定ページを作る。

3.〔searchform.php〕をカスタマイズする。

4.スタイルシートの調整。

 という手順。

〔search.php〕を用意する

1.WordPressのデフォルトテンプレート「Twenty Fifteen」などから〔search.php〕をダウンロードし、そのまま使っているテンプレートの子テーマにアップロードする。

2.〔search.php〕の中をすべて削除。

3.〔search.php〕の中に以下の記述を張り付ける。

<?php
/*
Template Name: 検索結果
*/
?>
<?php get_header(); ?>
<?php if ( !wp_is_mobile() ) ://モバイル以外の検索結果のページで表示される ?>
ここにカスタム検索のコードを張り付ける
<?php endif;//終了 ?>
<?php if ( wp_is_mobile() ) ://モバイルの検索結果のページで表示される ?>
<?php get_template_part('list') ?>
<?php endif;//終了 ?>
<?php get_footer(); ?>

 <?php get_template_part('list') ?>の〔list〕はsimplicity2の場合。

 他のテーマだと、indexでたぶん大丈夫。

WordPressは基本的に〔search.php〕がなければ、〔index.php〕を読み込む。

 試していないけど、<?php get_template_part('list') ?>を指定せず下の記述でもOKかもしれない。

<?php
/*
Template Name: 検索結果
*/
?>
<?php get_header(); ?>
<?php if ( !wp_is_mobile() ) ://モバイル以外の検索結果のページで表示される ?>
ここにカスタム検索のコードを張り付ける
<?php endif;//終了 ?>
<?php get_footer(); ?>

4.保存する

検索結果を表示する固定ページを作る

1.〔固定ページ〕⇒〔新規追加〕をクリックし、適当なタイトルを付ける。

2.「固定ページの属性」の中を以下の設定にする。

2-1)「テンプレート」を〔検索結果〕にする。

「固定ページの属性」の中の「テンプレート」を〔検索結果〕にする-検索結果を表示する固定ページを作る-WordPress

[「固定ページの属性」の中の「テンプレート」を〔検索結果〕にする-検索結果を表示する固定ページを作る-WordPress]

2-2)「順序」を〔99999999〕などのできるだけ大きな数字にする。

「固定ページの属性」の中の「順序」をできるだけ大きな数字にする-検索結果を表示する固定ページを作る-WordPress

[「固定ページの属性」の中の「順序」をできるだけ大きな数字にする-検索結果を表示する固定ページを作る-WordPress]

3.〔更新〕をクリック。

〔searchform.php〕をカスタマイズする

1.〔searchform.php〕の記述を以下のようにする。

<!-- HTML5検索フォーム -->
<?php if ( wp_is_mobile() ) ://モバイルで表示される ?>
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<span class="screen-reader-text"><?php echo _x( 'サイト内を検索:', 'label' ) ?></span></br>
<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'キーワードを入れてください', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</label>
<input type="submit" class="search-submit" value="GO" />
</form>
<!-- Googleカスタム検索PCのみ表示HTML5検索フォーム -->
<?php else://モバイル表示ではないとき ?>
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/検索結果を表示する固定ページのパーマリンク/' ); ?>">
<label>
<span class="screen-reader-text"><?php echo _x( 'サイト内を検索:', 'label' ) ?></span></br>
<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'キーワードを入れてください', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="q" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</label>
<input type="submit" class="search-submit" value="GO" />
</form>
<?php endif; ?>
home_url( '/検索結果を表示する固定ページのパーマリンク/' )はうちのサイトで表示すると〔https://freesoft.0hs.org/〇〇/〕になる。
〔name="q〕の「q」はGoogleカスタム検索のパラメーター。
ちなみに、WordPress本来のパラメーターは「s」。

スタイルシートの調整

 最後にスタイルシートの調整をする。

 うちのサイトの場合は、特に調整なし。

 パラメーターにスタイルシートが適応されている場合は、調整しないといけないかも。