WordPress:authorページを一括リダイレクト
AMPの公式イメージ利用方法とガイドライン【画像ダウンロード】
【MAC】スクリーンショットの保存フォルダを変更・JPGファイルにする
MAMPでMySQLが起動しない時の解決方法
AMP化と一緒にHTTPSにすることにした:設定方法
@ 2016 fwary

WordPressにAMP対応スマホ用サイドバーメニューを設置する

モバイル向けに、タップするとサイドバーが出てくるというのを設置しました。googleのAMPを使っているので、とても簡単に設置できます。サイト全体がAMP化していなくても利用できます。WordPressの関数をつかえば、カテゴリやタグ、最新ページ一覧などをメニューに表示することもできます。
 
AMPの公式ドキュメントサンプルを参考にしています。
 
AMPは、javascriptが使えないのですが、googleが用意しているコンポーネントを利用することができます。今回は、このコンポーネントが便利なので利用してしまおう。という話です。「横からスライドして出てくるサイドバー」をサイトで利用するためスクリプトを呼び出し、必要な場所にボタンを設置します。

suponserd link


AMP-sidebarスクリプトの呼び出し

AMP-sidebarスクリプトを呼び出しします。</head>の前に、以下を追加します。

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

 

ボタンの設置

あとは、呼び出したい場所にボタンを設置します。以下の内容をamp-sidebar.phpとして保存し、次でテンプレートで呼び出します。

<button on="tap:sidebar.toggle" class="ampstart-btn">ボタン</button>

<amp-sidebar id="sidebar" layout="nodisplay" side="left">

  <button on="tap:sidebar.close">閉じる</button>
  <!-- Navigation -->
  <ul>
    <li><a href="/">Home</a></li>
    <li> Nav item 1</li>
    <li> Nav item 2</li>
    <li> Nav item 3</li>
  </ul>
    <!-- /Navigation -->

</amp-sidebar>

説明すると、サイドバーはnodisplayになっているので最初は、上のボタンのみが表示されます。
on="tap:sidebar.toggle"のところでタップするとid=sidebarが現れます。buttonの部分は、公式だとimgになっていたのですが、タップできればいいのかなと思い、トリガーにしたい要素にon="tap:sidebar.toggle"をつけました。toggleにすると開閉両方できます。leftなら左サイドから出るメニュー、rightなら右サイドからメニューウィンドウが出てきます。
 

get templateする

amp-sidebar.phpをindex.phpと同じ場所に置きます。header.phpのnavigationメニューあたりにテンプレートファイルを追加します。

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

これで、ボタンが表示されればjavascriptが自動でサイドバーを開閉してくれます。リストの部分にはWordPressの関数でヘッダーメニューを呼び出すことができます。外観->メニュー->新規メニューを作成してカテゴリーなど好きなメニューを作り、amp-sidebar.phpの中でwp_nav_menuを使えば良いと思います。functions.phpでもカスタムメニューを作ることができます。


//functions.phpで、
add_theme_support( 'menus' );
register_nav_menu( 'header-navi', 'ヘッダーのナビゲーション' );

外観->メニューを見ると「header-navi」メニューができているのでカテゴリーなど好きなメニューを追加します。
amp-sidebar.phpのulとliの部分を以下に変更します。

<?php wp_nav_menu( array('theme_location' => 'header-navi') ); ?>

このような感じで、WordPress関数を使えば色々呼び出しできます。
 
これならテーマフォルダにjsファイルを置くこともないし、CDNで非同期で読み込まれるので高速に表示されます。しかもとても簡単に。AMP化は先の話だと思っているサイトでも簡単に導入できるのでおすすめです。

sharing is caring