GoogleとTwitterが共同開発したAMP(Accelerated Mobile Pages)ですが、現在のところGoogleの検索結果をはじめとして、Gunosyなどのキュレーションアプリやはてなブックマークなどに対応されています。また、Twitterも米国では一部AMP対応のテストをしているようです。
- Accelerated Mobile Pages Project
- Androidアプリ「はてなブックマーク」がAMPに対応しました
- TwitterがAMPのサポートを開始、まずはMomentsでシェアされたコンテンツに対して
WordPressでも簡単に「AMP」というWordPress.comを開発しているAutomattic社のプラグインを使用すれば簡単にAMP化できるのですが、日本語向けには作られておらず、デザインがイマイチというのが正直なところです。
そこで今回は「AMP」プラグインを使用した上でのAMPテンプレートを作成しましたので無料配布させていただきます。「Simp」というテーマ名で「Simple」と「AMP」を組み合わせた造語です。興味のある方は是非使って見て下さい。
「Simp」のDEMO
「Simp」の特徴
- ftpソフトを使って簡単に導入できる
- 各種タグに対応
- アイキャッチ画像が表示される
- AMPページにシェアボタンも導入できる
- 関連記事も表示され、またページ下部にはページトップへのリンクあり
対応タグ
以下、「Simp」で対応しているタグです。一般的に使われるタグは一通り対応しています。
- h2,h3
- img（キャプションあり）、img（キャプションなし）
- ul,ol,liのリストタグ
- blockquote（引用タグ）
「Simp」ダウンロード
動作確認
- WordPress：ver4.5.2
- AMPプラグイン：ver0.3.2
上記の環境で動作確認済です。
「Simp」利用方法
「AMP」プラグインをインストール
まずは、「AMP」というプラグインをWordPressにインストールして下さい。WordPressの管理画面>プラグイン>新規追加で「AMP」と検索すればインストールできます。インストール後に有効化して下さい。
ftpでテーマファイルに接続
ftpの使い方は使用しているサーバーによって異なりますので各サーバー会社のマニュアルを御覧ください。
WordPressのテーマファイルの場所は、恐らくどのようなWordPressでも同じで、トップ>wp-content>themesのフォルダの中にあるかと思います。使用しているテーマのフォルダを開きましょう。
「Simp」をテーマファイル直下に配置
テーマファイル直下に「Simp」を配置しましょう。注意して欲しいのがフォルダ名は「amp」にして下さい。
つまり、以下の様な構成になります。
テーマフォルダ
├amp
├single.php
└style.php
デザインが適用されたか確認
AMPページはWordPressだと、「http://記事url/amp」で表示されます。任意の記事URLに/ampを追加して表示を確認して見ましょう。デザインが適用されていれば完了です。
利用規約とライセンス
- ご利用に関するトラブルには一切責任を負いかねます。お守りいただける方のみ、ダウンロード下さい。
- 動作機能は100%保証するものではございません。WordPressやAMPのヴァージョンによって動作負荷の場合がございます。
- 当デザインテーマ使用による如何なる不具合やトラブル、損害の責任も負いかねます。
- 利用前には必ずバックアップをとることをおすすめします。
- ライセンスはGPLとなっています。
