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

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

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

カスタマイズ箇所グローバルメニュー( AMP )
カスタマイズ方法PHP ・ CSS
テンプレート変更あり
コピペの可否100% 可能

多くの 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 の導入をご検討されてはいかがでしょうか。

Facebook ページにいいね!をする
Twitter でフォロワーになる

シェアする

URL をコピーする

コメント

  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)が発生します。

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

    • Akira より:

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

      上手くいかない原因は、 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[詳細]

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

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

    • Akira より:

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

      まず、この記事でカスタマイズをした内容を白紙に戻すために、子テーマに設置した 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行だとキツキツで、少し見づらかったためです。
    度々申し訳ございません。

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

    • Akira より:

      何もせずにアイコンが表示されるということは、 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様のページは色々と参考になるページが多く、非常に勉強になります。色々と質問をしてしまうことがあるかもしれませんが、今後ともご指導のほど、よろしくお願いいたします。

    • Akira より:

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

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