4 ステップで WordPress の AMP ページに検索フォームを設置

AMPに検索フォームを設置するカスタマイズ

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

多くの制限がある AMP 。

しかし、様々な AMP スクリプトが用意されており、すでにほとんどのことが実現可能です。

検索フォームも amp-form を使うことで、比較的簡単に AMP ページに実装できます。

そこで WordPress の AMP ページに、 4 ステップで検索フォームを設置する方法をご紹介します。

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

http サイトには、どうやっても実装できません。 amp-form に関係なく SSL 化していないことはデメリットしかないため、急ぎでの対応をおすすめします。

ステップ 1: amp-form スクリプトを読み込む

AMP ページに検索フォームを設置するには、 <head> 内で以下の amp-form スクリプトの読み込みが必要です。

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

Simplicity の場合

WordPress テーマ Simplicity をお使いの場合には、まずは親テーマの amp-header.php を子テーマ直下にコピペをします。

子テーマに設置した amp-header.php から、下記のコードを探します。

echo '<link rel="stylesheet" href="https://max'.'cdn.boot'.'strapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">'.PHP_EOL;

上記のコードの上に下記のコードを追加すると、 amp-form スクリプトを読み込めます。

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

Simplicity は、この周辺で amp スクリプトや Font Awesome のスタイルシートを読み込んでいます。記述場所をまとめておくと、メンテナンスが楽になるはずです。

ステップ 2:検索フォームのテンプレートを作成

次にAMP ページ専用の検索フォームテンプレートを作成します。

使用している WordPress テーマの子テーマ直下にファイルを作成し、ファイル名を self-made-amp-searchform.php とします。

作成した self-made-amp-searchform.php に、下記のコードを追加します。

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

Simplicity の場合

Simplicity の場合には、下記のコードを self-made-amp-searchform.php に追加します。

<form method="get" id="searchform" action="<?php echo home_url( '/' ); ?>" target="_top">
    <input type="search" placeholder="<?php echo get_theme_text_search_placeholder(); ?>" name="s" id="s">
    <input type="submit" id="searchsubmit" value="">
</form>

テーマ設定の「テーマ内テキスト」にある「検索ボックスのプレースホルダー」に入力した定型文が、検索フォームに表示されます。

ステップ 3:検索フォームテンプレートを設置

ステップ 2で作成した self-made-amp-searchform.php を、AMP ページを生成しているテンプレートの任意の場所に設置します。

設置するためのコードは下記のとおりです。

<div class="amp-search">
    <?php get_template_part( 'self-made-amp-searchform' ); ?>
</div>

<div class="amp-search"></div> で囲むかは、サイトに合わせます。

どこに設置するかは、以下の 2 つを考慮します。

  • 通常ページの検索フォームと同じ場所に設置する
  • 多くのアプリに合わせてサイト上部(特にサイトタイトル周辺)に設置する

サイトに合わせて設置場所をご選択ください。

Simplicity の場合

Simplicity の場合には、 amp-header.php か amp-content.php 、あるいは single-amp.php のいずれかに設置します。

例えば、 amp-header.php のサイトタイトル部分に設置する場合には、前後のコードは下記のとおりです。

<div class="alignleft top-title-catchphrase">
    <?php get_template_part_amp( 'header-logo' );?>
</div>

<div class="amp-search">
    <?php get_template_part( 'self-made-amp-searchform' ); ?>
</div>

<div class="alignright top-sns-follows">
</div>

ヘッダー内にある #h-top の子要素として設置しています。

ステップ 4: CSS でスタイルを調整

あとは CSS でスタイルを指定します。

CSS の一例は下記のとおり。Simplicity であれば、子テーマの amp.css に追加します。

#searchform {
  margin: 16px 0;
  max-width: 400px;
  position: relative;
}

#searchform:before {
  content: '\f002';
  font: 24px/1 FontAwesome;
  position: absolute;
  top: 4px;
  right: 20px;
}

#s {
  border: 1px solid #bdbdbd;
  border-right: none;
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset;
  font-size: 15px;
  height: 32px;
  line-height: 1.42857;
  padding: 0 8px 0 16px;
  width: calc(100% - 64px);
}

#searchsubmit {
  background: rgba(248, 248, 248, .46);
  border: 1px solid #bdbdbd;
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
  cursor: pointer;
  height: 32px;
  position: absolute;
  transition: .3s cubic-bezier(.4, 0, .2, 1);
  width: 64px;
}

#searchsubmit:hover {
  background: rgba(224, 224, 224, .6);
}

Font Awesome で検索アイコンを表示しています。

AMP ページに Font Awesome を読み込んでいない場合には、 <head> 内に下記のコードを追加します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Simplicity の場合には、すでに Font Awesome が読み込まれています。

CSS は、ご自由にご指定ください。


amp-form での検索フォームの設置は、 https であることが必須です。

もはや https に対応していないことは、デメリットしかありません。

まだ http で運営されている場合には、サイト利用者に危険なサイトだと思われているかもしれません。 Chrome は、 http サイトで検索フォームやコメントフォーム、お問い合わせフォームに入力すると「保護されていません」と警告を出しています。