WordPressでAMPページに検索フォームを実装する方法。

優先順位的に後回しにしていたAMPページへの検索フォーム実装。

通常ページでは、ヘッダーに検索アイコンを表示し、それをタッチすると検索フォームが現れる…というギミックになっているので、「制約の多いAMPでは無理かな」と思っていたんですが、簡単に実装できました。

（こういったギミックを使わず、検索フォームをそのまま表示する場合はもっと簡単に実装できます）

AMPかどうかの条件分岐を使うこと前提ですが、その手順をご紹介するので、ぜひ参考にしていただければと思います。

ちなみに、AMPページに検索フォームを実装できるのはSSL化したサイト（URLがhttpsから始まるサイト）だけです。

1
searchform.phpの修正
2
検索フォームの読み込み
3
検索フォームを表示するスイッチ
4
スクリプトの読み込み
5
スタイルの調整
6
カスタマイズ後
7
is_ssl関数とは？
8
まとめ

searchform.phpの修正

AMP用の検索フォームを1から作成してもいいですが、変更箇所が少ないので、条件分岐を使ってAMPに対応させます。

下記がサンプルコードです。似たようなコードであれば、searchform.phpの元のコードとすべて入れ替えてもいいでしょう。

<?php
$slug = null;
$query = 's';
$target = null;
if( is_amp() && is_ssl() ) $target = 'target="_top"'; ?>
<div id="search">
<div class="inner">
<form role="search" method="get" id="searchform" action="<?php echo home_url().'/'.$slug; ?>" <?php echo $target; ?>>
 <label class="hidden" for="<?php echo $query;?>">
 <?php _e('', 'kubrick'); ?>
 </label>
 <input type="search" value="<?php the_search_query(); ?>" name="<?php echo $query;?>" id="<?php echo $query;?>" placeholder="検索ワードを入力" />
 <button type="submit" id="searchsubmit" value="<?php _e('Search', 'kubrick'); ?>">
 <i class="fa fa-search" aria-hidden="true"></i>
 </button>
</form>
</div>
</div>

常に検索フォームを表示する場合は、layout="nodisplay"の部分を削除すればOKです。

AMPページかどうかの条件分岐はis_ampという関数でしていますが、上手くいかない場合は下記記事で紹介している方法を試してみてください。

PHP（WordPress）でAMP対応ページかどうか判別する方法。 Fantastech!! もっと見る

検索フォームの読み込み

上記のテンプレートファイルをAMPページを生成するファイルで読み込みます。

非表示→表示を切り替えるのであれば</footer>の後ろに、常に表示するのであれば表示したい場所に下記のコードを追加しましょう。

<?php if (is_ssl()) { ?>
<amp-lightbox id="layer" layout="nodisplay" on="tap:layer,amp-search.close" role="button"
 tabindex="0"><p class="layer-text">閉じる</p></amp-lightbox>
<amp-lightbox id="amp-search" layout="nodisplay" role="button" tabindex="0">
 <?php get_search_form(); ?>
</amp-lightbox>
<?php } ?>

スライドメニューと違い、デフォルトでは背景を暗くするレイヤーが表示されないので、通常ページでも使っている自作のレイヤーを表示しています。

このレイヤーがクローズボタンにもなっているので、削除する場合は、新しくクローズボタンを用意しましょう。

また、常に検索フォームを表示する場合は、クローズボタンが必要ないので、レイヤー部分は削除してもOKです。

検索フォームを表示するスイッチ

非表示→表示になる検索フォームを実装する場合、通常のページと同じく「スイッチ」を用意しなければいけません。（常に検索フォームを表示する場合は必要ありません）

これは、文字でも、画像でも、アイコンフォントでもなんでもいいです。当サイトではFont Awesomeの検索アイコンを使っています。

下記がサンプルコード。

<?php if(is_ssl()) { ?>
<div class="header-r">
 <button on="tap:amp-search,layer" id="search-button" role="button" tabindex="0" class="ampstart-btn caps m2">
 <i class="fa fa-search" aria-hidden="true"></i>
</button>
</div>
<?php } ?>

※通常のページとは違い、<button>タグで囲むので、CSSで上手く調整しましょう。

スクリプトの読み込み

下記のコードをAMPページを生成するファイルの<head>タグ内に追加します。

<?php if(is_ssl()) echo '<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>'; ?>

スタイルの調整

最後はスタイルの調整です。通常ページのCSSを<style amp-custom>タグ内にコピペするなど、上手く調整してみてください。（検索フォーム自体のCSSは省略）

非表示→表示をamp用のスクリプトで切り替えているので、display:noneで非表示にしている場合は、削除するか、display:blockで上書きすることを忘れずに。

下記がサンプルコードです。

#layer {
 position: fixed;
 top: 0;
 z-index: 998;
 width: 100%;
 height: 100%;
 background-color: #000;
 opacity: .8;
 visibility: visible;
 overflow: hidden;
}
.layer-text {
 position: absolute;
 top: 50%;
 right: 5%;
 color: #fff;
 margin-left: 10px;
 writing-mode: vertical-lr;
 -ms-writing-mode: tb-lr;
 -webkit-writing-mode: vertical-lr;
}
input {
 line-height: 1;
 position: relative;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 border-radius: 1px;
 padding: 0.5rem;
 border: 3px solid #ddd;
 background-color: #fff;
 color: #555;
 width: 100%;
}
/* search */
#search,#layer {
 display: block;
 position: relative;
 top: 0;
}
#amp-search {
 height: 0;
}
#amp-search #search {
 height: 0;
}
#amp-search #search .inner {
 left: 0;
 right: 0;
 top: 120px;
}
#slide-button,#search-button {
 color: #fff;
 font-size: 20px;
 line-height: 20px;
 border: none;
}