amp-sidebar で WordPress の AMP にスライドメニューを設置

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

多くの WordPress テーマが採用しているのが、モバイル時のスライドメニュー。左側や右側からスライドで出てくるメニューです。

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

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

amp-sidebar の使用で、AMP ページにスライドメニューを実装できます。

この amp-sidebar を WordPress に実装する方法の紹介です。

完成図

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

ハンバーガーアイコンが表示される
メニューが左から出てきて開いた状態

一般的なスライドメニューと同じく、ハンバーガーアイコンのクリックでメニューが開きます。

尚、完成図に検索フォームがありますが、AMP での検索フォームの実装は下記のページで解説しています。

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

スクリプトの読み込み

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

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

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

また、今回はバージョン 4 の Font Awesome を使用します。AMP ページに Font Awesome を読み込んでいない場合は、以下のコードも <head> 内に追加します。

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

Font Awesome を読み込む際は、https://maxcdn.bootstrapcdn.com または https://use.fontawesome.com から始まる URL を href 属性に指定します。それ以外の URL は、AMP エラーを引き起こします。

テンプレートの作成

次にすることは、AMP ページに設置するスライドメニューのテンプレートの作成です。

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

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

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

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

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

コード解説

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

<button class="amp-sidebar-close" on="tap:amp-sidebar-navi.close">
  <i class="fa fa-times" aria-hidden="true"></i>
</button>

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

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

テンプレートを設置

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

AMP ページの <body> タグの子要素として、以下のコードを追加します。<body> タグの子要素であれば、位置はどこでも構いません。

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

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

開くボタンを設置

スライドメニューを開くためのボタンを設置します。

AMP ページを生成するテンプレートの任意の場所(サイトタイトル周辺など)に、下記の HTML を追加します。

<div class="amp-sidebar-open">
  <button on="tap:amp-sidebar-navi.toggle">
    <i class="fa fa-bars" aria-hidden="true"></i>
  </button>
</div>

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

あとは、CSS でスタイリングをすれば終わりです。テーマによって、また開くボタンの設置場所によって指定内容が異なるため、CSS は省略します。

注意事項

amp-sidebar は、「左から右に」または「右から左に」スライドメニューが現れます。

これはマテリアルデザインの「Modal drawer」と同じ動作です。

参考サイトModal drawer

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

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

amp-sidebar を実装する前に、通常ページのスライドメニューを「Modal drawer」と同じ動作にすることを強くおすすめします。

その他の機能

今回は紹介していませんが、amp-sidebar には非常に便利な toolbar 属性が用意されています。

toolbar 属性は、nav タグを複製し、その複製した nav タグを任意の場所に表示する際に使います。

スライドメニューを使うのは、小さな画面のモバイルではメニューを表示するエリアがないことが理由のはずです。しかし、大きな画面の PC は、常にメニューを表示するエリアが十分にあります。

この「常に表示する PC 向けのメニュー」の設置に便利なのが、toolbar 属性。

別途、PC 向けのメニューのテンプレートを作成する必要はありません。amp-sidebar タグで囲んだ nav タグを複製すればいいだけです。

便利な toolbar 属性の説明は、公式サイトをご参考ください。

参考サイトToolbar

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

今回はメニューの表示のために amp-sidebar を使いましたが、ブログなどで見かけるサイドバー用に使ってもいいかもしれません。2 つの amp-sidebar の設置は可能なため、1 つは左から出てくるスライドメニューとして、もう 1 つは右から出てくるサイドバーとしての使用も可能です。

Simplicity の場合

WordPress テーマ「Simplicity」をお使いであれば、コピペで amp-sidebar を設置できます。

その設置方法の要約です。

ステップ 1

FTP ソフトやサーバーのファイルマネージャー機能を使い、親テーマの 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-sidebar スクリプトを読み込むコードです。

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

ステップ 2

子テーマに my-amp-sidebar-navi.php ファイルを作成し、下記のコードを追加します。

<amp-sidebar id="amp-sidebar-navi" layout="nodisplay" side="left">
  <button class="amp-sidebar-close" on="tap:amp-sidebar-navi.close">
    <i class="fa fa-times" aria-hidden="true"></i>
  </button>
  <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>

ステップ 3

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

<div id="container">

上記 HTML の上の行に、下記コードを追加します。ステップ 2 で作成したテンプレートの設置コードです。

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

ステップ 4

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

<div id="h-top">

上記 HTML の下の行に、下記 HTML を追加します。開くボタンを設置しています。

<div class="amp-sidebar-open">
  <button on="tap:amp-sidebar-navi.toggle">
    <i class="fa fa-bars" aria-hidden="true"></i>
  </button>
</div>

ステップ 5

子テーマの amp.css に、下記の 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;
  left: 16px;
  position: relative;
  top: 8px
}

.amp-sidebar-close > .fa-times {
  cursor: pointer;
  font-size: 24px;
}

#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;
}

コメント

  1. Simplicityのテーマを利用しているものですが、当方の勉強不足により本ページの内容が理解できず、うまくいきませんでした。
    もし可能でしたらご教示いただけますでしょうか。

    具体的には、「作成したテンプレートを設置」の部分で、

    「作成したスライドメニューのテンプレート self-made-amp-sidebar-navi.php を、 AMP ページを生成するテンプレートに設置します。」

    がよくわかりませんでした。

    これは、Simplicityを利用している場合は、新たに作成した「 self-made-amp-sidebar-navi.php」をSimplicityの子テーマ直下に配置すれば良いということでしょうか。

    また、そのあとの文章で

    「Simplicity の場合には、子テーマに設置した amp-header.php から、 162行目(ここまでカスタマイズしていれば 163行目)の を探します。その上に設置すれば OK 。」

    とあります。
    これを実際にやろうとすると、以下のようになるかと思います。(齟齬がございましたら、ご指摘ください。)

    161行目
    162行目 <?php //AMP用Analyticsトラッキングコードを設定しておらず通常ステージ用の場合//
    163行目
    164行目 }
    165行目 }//AMP Analytics終了 ?>
    166行目

    ただ、この場合、163行目でsyntax error(163.3)が発生します。

    コピペの場所が異なる等、対処方法をご教示いただけますと幸いです。
    お忙しい中恐れ入りますが、何卒宜しくお願い致します。

    • ご指摘ありがとうございます。

      上手くいかない原因は、 Simplicity のアップデートで amp-header.php が変更され、執筆時点とは行数が変わってしまったためです。細かく行数を書いてしまうとアップデートに対応できないため、記事を書き換えました。大変申し訳ないです。

      ご質問の部分ですが、 self-made-amp-sidebar-navi.php を設置するのは、子テーマに設置した amp-header.php です。 Simplicity 2.6.7 のデフォルト(カスタマイズ前)では 164 行目にある <div id="container"> の上の行に設置します。前後の行を含めると、カスタマイズ後は下記の状態になります。

        <?php //AMP用Analyticsトラッキングコードを設定しておらず通常ステージ用の場合
        }
      }//AMP Analytics終了 ?>
      
      <?php get_template_part( 'self-made-amp-sidebar-navi' ); ?>
      
        <div id="container">

      それと、 amp-sidebar スクリプトを追加する行数も、最新版では変わってしまいました。 48 行目に追加すると書いていましたが、 Simplicity 2.6.7 のデフォルトでは 50 行目に追加します。記事を書き換えたのですが、下記のコードの上の行に amp-sidebar スクリプトを追加します。

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

      行数を書くのは、今後は絶対に止めようと思いました。余計なお手間を取らせてしまい、申し訳ありません。

  2. Akira様

    早速のご確認および記事の修正ありがとうございました。私でも理解しやすい内容で、無事にAMPのページにメニューを表示させることができました。

    ただ、私が勘違いしていたのですが、メニューとして表示されるのはAMPページのトップページ部分のみで、追従する形ではないことがわかりました。

    誠に不躾ながら、Akira様の「firstlayout」のサイトのようにAMPページでも常に画面下に3つのメニュー(ホーム・カスタマイズ・便利ツール)を表示するための方法(もしくはそれを紹介したページ)をご教示いただくことは可能でしょうか。

    ちなみに、今回の事象とは関係ないかもしれませんが、本ページのカスタマイズを実施して、Simplicityのサイト管理者機能でAMPページを確認したところ、開発者ツールのコンソール画面には以下の警告(?)が表示されました。

    ソースマップエラー: request failed with status 404
    リソース URL: https://cdn.ampproject.org/v0/validator.js
    ソースマップ URL: validator_minified.js.sourcemap[詳細]

    これは既知の事象であり、今回のカスタマイズとは関係なく、必ず表示されるものでしょうか。
    あわせてご教示いただけますと幸いです。

    お忙しい中申し訳ございません。何卒宜しくお願い致します。

    • このサイトと同じようなメニューにするのは、もっと簡単です。

      まず、この記事でカスタマイズをした内容を白紙に戻すために、子テーマに設置した amp-header.php を削除します。そして、再度親テーマから amp-header.php を子テーマにコピペをします。

      次に、子テーマに設置し直した amp-header.php を開き、 181 行目( Simplicity 2.6.7 のデフォルトの場合)にある下記の HTML を探します。

      </header>

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

      <?php if( is_navi_visible() ) : // ナビゲーションが表示のとき
          get_template_part( 'navi' ); // グローバルナビのためのテンプレート
      endif; ?>

      カスタマイズ後は、こうなります。

      </header>
          
      <?php if( is_navi_visible() ) : // ナビゲーションが表示のとき
          get_template_part( 'navi' ); // グローバルナビのためのテンプレート
      endif; ?>
          
      <!-- 本体部分 -->
      <div id="body">

      あとは、子テーマの amp.css に、下記の CSS を追加すれば終わりです。

      #navi ul {
        box-sizing: border-box;
        display: flex;
        margin: 0;
        padding: 0;
        position: relative;
      }
      
      #navi ul li {
        list-style: none;
        position: relative;
      }
      
      #navi ul li a {
        color: #111;
        display: block;
        font-size: 14px;
        text-decoration: none;
      }
      
      #navi ul li a:hover {
        background-color: #ddd;
      }
      
      @media screen and (min-width: 1110px) {
        #navi ul {
          background-color: #f7f7f7;
          border: 1px solid #ddd;
          border-radius: 3px;
          width: 100%;
        }
        #navi ul li a {
          padding: .3em .7em;
          z-index: 99;
        }
      }
      
      @media screen and (max-width: 1110px) {
        #navi {
          bottom: 0;
          box-shadow: 0 -4px 8px -4px rgba(0, 0, 0, .2);
          max-width: 740px;
          position: fixed;
          width: 100%;
          z-index: 199999;
        }
        #navi ul {
          background: #fff;
        }
        #navi ul li {
          flex: 0 1 33.333333%;
          height: 56px;
          line-height: 56px;
          text-align: center;
        }
        #body {
          margin-bottom: 86px;
        }
      }

      このサイトの CSS をそのまま移植するのは難しいので、テスト環境で作り直しました。 Simplicity デフォルトでも、おそらく変な表示にはならないと思います(たぶん…)。ただ、アイコンをどうされるか分からなかったので、アイコンは表示されません。また、パソコンで AMPページ は検索結果には出ませんが、パソコンで表示される時は Simplicity デフォルトのメニューのスタイルで表示されます。

      もし、メニューの数が 3 つ以外の場合には、下記の CSS を探し 33.333333% をメニューの数で 100 を割った値に変更します。 4 つなら 25% です。

      #navi ul li {
        flex: 0 1 33.333333%;
        height: 56px;
        line-height: 56px;
        text-align: center;
      }

      もう 1 つのエラーのご質問ですが、こちらでは分かりませんでした。この記事に書いている通りにテスト環境で試したのですが、デベロッパーツールでコンソールエラーが出ませんでした。一応 AMP 検証も行ったのですが、 AMP エラーも出ず。普通はそのエラーは出ないのですが、原因が分かりません。デベロッパーツールの一時的なエラーである気がするような、しないような。

  3. Akira様

    早速のご教示ありがとうございました。無事AMPページで常にメニューを表示させることができるようになりました。

    アイコンはパソコンでもAwesomeフォントを表示させていたため、それがそのまま表示されました。ありがとうございます。

    ちなみに、アイコンとメニュー名の間に改行を入れて、2行にすることは可能なのでしょうか。1行だとキツキツで、少し見づらかったためです。
    度々申し訳ございません。

    なお、開発者ツールでのエラーは一時的なエラーでなく、常に出てしまっています。また、今回の対処を実施した結果、エラーの数が増えました。
    が、ここは少し自分で解消できないか、検討してみます。

    • 何もせずにアイコンが表示されるということは、 Font Awesome 4 Menus プラグインをご使用中と予想。

      もし、プラグインをお使いであれば、 CSS を下記のものに全て書き換えると 2 行にできます。ご自身でアイコンを i タグで追加されている場合でも、上手くいくはずです。

      #navi ul {
        box-sizing: border-box;
        clear: both;
        display: flex;
        margin: 0;
        padding: 0;
        position: relative;
      }
      
      #navi ul li {
        list-style: none;
        position: relative;
      }
      
      #navi ul li a {
        color: #111;
        display: block;
        font-size: 14px;
        text-decoration: none;
      }
      
      #navi ul li a:hover {
        background-color: #ddd;
      }
      
      @media screen and (min-width: 1110px) {
        #navi ul {
          background-color: #f7f7f7;
          border: 1px solid #ddd;
          border-radius: 3px;
          width: 100%;
        }
        #navi ul li a {
          padding: .3em .7em;
          z-index: 99;
        }
      }
      
      @media screen and (max-width: 1110px) {
        #navi {
          bottom: 0;
          box-shadow: 0 -4px 8px -4px rgba(0, 0, 0, .2);
          max-width: 740px;
          position: fixed;
          width: 100%;
          z-index: 199999;
        }
        #navi ul {
          background: #fff;
        }
        #navi ul li {
          flex: 0 1 33.333333%;
          height: 56px;
          text-align: center;
        }
        #navi ul li a {
          padding: 10px 0;
        }
        #navi ul li a i {
          display: block;
          margin-bottom: 2px;
        }
        #body {
          margin-bottom: 86px;
        }
      }

      デベロッパーツールのエラーは、ブラウザのキャッシュや Cookie などを削除しても消えないでしょうか。

      もしくは、 「 ChromeでjQueryの「ソースマップ」読み込みがエラーを起こしていた件」の方法で消えるかもしれません。

      エラーの内容を見る限り、 validator_minified.js の縮小前のソースが書かれている .sourcemap が読み込めないという内容のはず。 validator_minified.js は、名前からしてデベロッパーツールが読み込んでいる JavaScript だと思うんですけどね…。違うのかな…。ただ、コウタロウさんのサイトには何も実害はないはずなので、あまり気にされる必要はないかもしれません。

      エラーが消えない場合には、サイト URL をご提示頂けると、こちらで確認します。私のブラウザでもエラーが出るのなら、コウタロウさんのサイト特有のエラーだと分かります。

  4. Akira様

    返信が遅くなり失礼いたしました。
    回答内容、完璧です。ありがとうございます。

    まずご推察の通り、Font Awesome 4 Menusを使用しています。そして、提示いただいたcssを用いて、無事に2行で表示することができました。

    次にソースマップ読み込みエラーの件についてもご指摘の通りでした。使用しているブラウザはfirefoxでしたが、firefoxでも同様の機能が実装されていたようで、開発者ツールからソースマップを有効化のチェックを外すと、エラーが表示されなくなりました。ありがとうございます。

    大変勉強になりましたし、丁寧なご説明ありがとうございました。

    Akira様のページは色々と参考になるページが多く、非常に勉強になります。色々と質問をしてしまうことがあるかもしれませんが、今後ともご指導のほど、よろしくお願いいたします。

    • エラーが消えてよかったです。

      カスタマイズが上手くいかない時は、ご指摘いただけると幸いです。こちらこそ、よろしくお願いいたします。

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。