amp-sidebar で WordPress の AMP ページにスライドモバイルメニューを設置

WordPressのAMPにスライドモバイルメニューを設置

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

多くの WordPress テーマが採用しているのが、モバイル時のスライドメニュー。

ただ、スライドメニューの多くが javaScript で実装されているため、 AMP ページでスライドメニューが表示されないテーマもあります。

Simplicity もスライドメニューが用意されていますが、 AMP ページでは表示されません。

そこで使用したいのが amp-sidebar

amp-sidebar を利用することで、簡単に AMP ページにスライドメニューを実装できます。

実装後の完成図は以下のとおりです。

スライドメニューを設置しモバイルメニューアイコンが表示された完成図モバイルメニューアイコンが表示される

スライドメニューを設置しメニューを開いた状態の完成図メニューが左から出てきて開いた状態

amp-sidebar を利用し、 AMP ページにスライドメニューを実装する方法をご紹介します。

AMP ページに検索フォームを設置する場合には、「4 ステップで WordPress の AMP ページに検索フォームを設置」をご覧ください。

amp-sidebar スクリプトを読み込み

AMP でスライドメニューを実装するためには、まず amp-sidebar スクリプトの読み込みが必要です。

AMP ページの <head> 内に、以下のコードを追加します。

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

また、 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 の場合

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;

上記のコードの上の行に、下記のコードを追加します。

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

テンプレートを作成

次に AMP ページに設置するスライドメニューのテンプレートを作成します。

FTP ソフトなどを使用し、子テーマフォルダの直下に 1つファイルを作成。

ファイル名を self-made-amp-sidebar-navi.php とし、以下のコードを追加します。

<amp-sidebar id="amp-sidebar-navi" layout="nodisplay" side="left">
    <div class="amp-sidebar-close" on="tap:amp-sidebar-navi.close" role="button" tabindex="0">
        <span class="fa fa-times" aria-hidden="true"></span>
    </div>
    <nav>
        <?php wp_nav_menu(); ?>
    </nav>
</amp-sidebar>

上記コードのうち下記の部分は、ご使用中のテーマのナビ部分と同じにするといいでしょう。

<nav>
    <?php wp_nav_menu(); ?>
</nav>

Simplicity の場合

Simplicity であれば、以下のコードを self-made-amp-sidebar-navi.php に追加します。

<amp-sidebar id="amp-sidebar-navi" layout="nodisplay" side="left">
    <div class="amp-sidebar-close" on="tap:amp-sidebar-navi.close" role="button" tabindex="0">
        <span class="fa fa-times" aria-hidden="true"></span>
    </div>
    <nav itemscope itemtype="http://schema.org/SiteNavigationElement">
        <div id="navi">
  	        <div id="navi-in">
                <?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?>
            </div>
        </div>
    </nav>
</amp-sidebar>

コード解説

上記コードのうち下記の部分は、スライドメニューが開いている際に表示される「閉じる」ボタンです。

<div class="amp-sidebar-close" on="tap:amp-sidebar-navi.close" role="button" tabindex="0">
    <span class="fa fa-times" aria-hidden="true"></span>
</div>

このうち on="tap:amp-sidebar-navi.close"amp-sidebar-navi は、 <amp-sidebar> タグの id を用います。

また、 <amp-sidebar> タグの side="left"side="right" にすると、スライドメニューが右から左に出てきます。

作成したテンプレートを設置

作成した self-made-amp-sidebar-navi.php を、 AMP ページを生成するテンプレートに設置します。

AMP ページの <body> タグの子要素として、以下のコードを追加。

<?php get_template_part( 'self-made-amp-sidebar-navi' ); ?>

<amp-sidebar> の親要素が <body> でなければ、 AMP エラーが出ます。

Simplicity の場合

Simplicity の場合には、すでに子テーマに設置した amp-header.php から下記の HTML を探します。

<div id="container">

上記 HTML の上の行に、 self-made-amp-sidebar-navi.php を設置します。

開くためのボタンを設置

スライドメニューを開くための、トリガーとなるボタンを設置します。

AMP ページを生成するテンプレートの任意の場所に、下記の HTML を追加。

<div class="amp-sidebar-open">
    <button on="tap:amp-sidebar-navi.toggle" class="ampstart-btn caps m2">
        <span class="fa fa-bars" aria-hidden="true"></span>
    </button>
</div>

通常はサイトタイトルの周辺に設置します。

<button on="tap:amp-sidebar-navi.toggle"> のうち amp-sidebar-navi は、 <amp-sidebar> タグの id です。

Simplicity の場合

Simplicity であれば、すでに子テーマに設置した amp-header.php から下記の HTML を探します。

<div id="h-top">

上記 HTML の下の行に、トリガーとなるボタンを設置します。

CSS でスタイリング

あとは CSS で見た目を整えます。

Simplicity であれば、下記の CSS を子テーマの amp.css に追加します。

.amp-sidebar-open {
  position: absolute;
  top: 5px;
}

.amp-sidebar-open > button {
  background: #fff;
  border: none;
  padding: 0;
}

.amp-sidebar-open .fa-bars {
  font-size: 24px;
}

#header .alignleft {
  margin-left: 56px;
}

.amp-sidebar-close {
  height: 40px;
  position: relative;
  top: 8px
}

.amp-sidebar-close > .fa-times {
  cursor: pointer;
  font-size: 24px;
  left: 16px;
  position: relative;
  top: 8px;
}

#amp-sidebar-navi {
  background: #fff;
}

#navi {
  max-width: 80vw;
  min-width: 300px;
}

.menu {
  list-style: none;
  padding: 0;
}

.sub-menu {
  list-style: none;
  padding-left: 24px
}

.menu-item > a {
  color: #333;
  display: block;
  height: 48px;
  line-height: 48px;
  padding-left: 16px;
  text-decoration: none;
}

.menu-item > a:hover {
  background: #eee;
}

これで完成です。

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

注意事項

amp-sidebar は、「左から右に」または「右から左に」スライドメニューが出てくる動作です。

これはマテリアルデザインのナビゲーションドロワーとまったく同じ動作。

通常ページのスライドメニューが異なる動作をする場合には、amp-sidebar の導入には注意が必要です。

AMP ページと通常ページでスライドメニューの動作が異なれば、間違いなくサイト訪問者は混乱します。

amp-sidebar を実装する前に、通常ページのスライドメニューをマテリアルデザインと同じ動作にすることを強くおすすめします。


amp-sidebar は、 amp-accordionamp-imgamp-social-share などをサポートしています。

また、便利な toolbar 属性も用意されています。

ものすごく使い勝手がいい amp-sidebar 。

AMP ページからのサイト回遊率を高めるために、 amp-sidebar の導入をご検討されてはいかがでしょうか。