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

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

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

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

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

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

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という関数でしていますが、上手くいかない場合は下記記事で紹介している方法を試してみてください。

検索フォームの読み込み

上記のテンプレートファイルを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;
}

カスタマイズ後

カスタマイズ後の画面がこちら。

▼タイトルの右側に検索アイコン

 

▼検索アイコンをタッチすると、検索フォームが表示され、他の部分は暗くなります。

 

もちろん、そのまま文字を入力して検索すると検索結果が表示されます。

is_ssl関数とは?

今回のコードで何度も登場しているis_ssl関数ですが、これは、httpから始まるサイトか、httpsから始まるサイトかを判別してくれる便利な関数です。

当サイトで使っているWordPressテーマ「4536」は、僕が自作して配布しているもので、当初は「SSL化してないサイトだとエラーになっちゃうからなぁ…」と、AMPページへの検索フォーム実装を見送っていたんですが、この関数のおかげで実装することができました。

WordPressテーマを自作している方はもちろんのこと、

  • httpのページとhttpsのページを共存させている(リダイレクトなし)
  • SSL証明書の更新を忘れる可能性がある

なんて場合にも使える方法だと思うので、何かあった時のためにも削除しない方がいいかもしれません。

まとめ

「丸々コピペでOK!」というわけにはいきませんが、ほぼコピペでAMP対応の検索フォームを実装できると思います。

通常ページでも検索フォームを使っている方は、回遊率アップのためにも、ぜひカスタマイズしてみてはいかがでしょうか?

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!