メインコンテンツまで移動する

WordPress の AMP ページに検索フォームを設置する方法

  • 公開日
  • 更新日

Akira Web デザイナー

SSL 化が必須

WordPress の AMP ページに、検索フォームを設置する方法の紹介です。

ただし、AMP に検索フォームを設置できるのは、SSL に対応したサイトのみです。

コンポーネントの読み込み

AMP で検索フォームを設置するには、amp-form を使用します。

まずは、<head> 内に <script> タグを追加し、amp-form を使えるようにします。

<script
  async
  custom-element="amp-form"
  src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

テンプレートの作成

次に、検索フォームのテンプレートを作成します。

WordPress の検索フォームは、searchform.php で作るのが一般的です。searchform.php に、このようなコードを追加します（HTML は一例です）。

<form method="get"
  action="<?php echo home_url( '/' ); ?>"
  target="_top">
  <label>
    <input type="search"
      title="サイト内を検索"
      placeholder="サイト内を検索"
      value="<?php the_search_query(); ?>"
      name="s" />
  </label>
  <input type="submit"
    value="検索" />
</form>

AMP 用の検索フォームで特徴的なのが、3 行目の target="_top" が必須であること。それ以外は、通常ページの検索フォームと変わりません。

searchform.php だけで通常ページと AMP ページの検索フォームを用意する場合は、条件分岐を使えばいいはずです。

<form method="get"
  action="<?php echo home_url( '/' ); ?>"
  <?php if ( is_amp() ) {
    echo 'target="_top"';
  } ?>
  >
  <label>
    <input type="search"
      title="サイト内を検索"
      placeholder="サイト内を検索"
      value="<?php the_search_query(); ?>"
      name="s" />
  </label>
  <input type="submit"
    value="検索" />
</form>

AMP ページの判定には、is_amp() を使っています。この条件分岐タグは、サイトで使っている条件分岐タグへの変更が必要です。

これで、AMP ページへの検索フォームの設置は完了です。

Google 検索の「特定のサイトを検索する」

Google 検索の手法の 1 つに「特定のサイトを検索する」があります。Google の検索ページで、サイト URL またはドメインの前に site: を付ける方法です。

このブログであれば、site:https://firstlayout.net/、または site:firstlayout.net と Google で検索します。すると、Google の検索結果に表示されるのは、このブログのコンテンツのみです。

また、site:firstlayout.net AMP と検索すれば、このブログ内の AMP に関係のあるコンテンツが表示されます。

この「特定のサイトを検索する」は、サイトに設置する検索フォームに仕込めます。

実装するコードの一例は、下記のとおりです。実装後は、サイト内の検索フォームに語句を入力し検索すると Google 検索に移動します。target="_top" を削除すれば、通常ページでも実装できます。

<form method="get"
  action="//www.google.com/search"
  target="_top">
  <input type="search"
    title="サイト内を検索"
    placeholder="サイト内を検索"
    name="q" />
  <input name="as_sitesearch"
    value="<?php echo home_url( '/' ); ?>"
    type="hidden" />
  <input type="submit"
    value="検索" />
</form>

2 行目の action で、Google 検索の URL を指定します。この指定で、サイト内の検索フォームから Google 検索に移動できます。

また、7 行目の name には、q を指定します。

さらに、8 行目の name="as_sitesearch" の指定により、「特定のサイトを検索する」が使えるようになります。

9 行目の value は、特定のサイトの指定です。サイトの URL、またはドメインを指定します（上記コードでは、サイト URL を指定しています）。

メリット・デメリット

「特定のサイトを検索する」のメリットとデメリットをいくつか挙げてみます。

メリットは、このようなものです。

  • Google 検索は優秀
  • ユーザーは使い慣れている Google 検索を使える
  • 通常ページにも AMP ページにも導入できる
  • インデックスされていればコメント欄も検索対象になる

一方、デメリットは、このようなものです。

  • インデックスされたコンテンツしか検索結果に表示されない
  • 検索結果ページはカスタマイズができない
  • 一旦サイトの外に出るため、ユーザーはそのまま帰ってこないかもしれない
  • 通常の Google の検索結果内に検索ボックスが表示されている場合は、検索ボックスでサイト独自のサイト内検索システムが使えない

デメリットが気になる場合は、Custom Search JSON API の使用を検討してもいいかもしれません。PHP 用のライブラリとして、Google APIs Client Library for PHP があります。

フォローする