※2017/03/01 ハンバーガーメニュー実装しました。
AMPが徐々に広がってきており、Gunosyやスマートニュースといったキュレーションアプリや、はてなブックマークなどでもAMP対応され。
いよいよ、AMP対応が一般的になってきた感じさえあります。
弊社でもAMP対応はしないとなーー。といいながら全然やってなかったのですが、最近重い腰を上げてAMP対応いたしました。
それと同時に、案件にも導入しやすくカスタマイズしやすい社内用のAMPデフォルトデザインテーマみたいなのがあればなーと思い。
「じゃあ作ってしまおう」
ということでWordpressのAMP用のデザインテーマを作成しました。
「せっかく作ったのなら公開してしまおう」
てな訳で無料配布する運びとなりました。
今回配布するAMPデザインテーマ「AWESOME」は
※名前考えるのが面倒くさかった
- WordPressで簡単にAMP対応さられる
- SNSのシェアボタン
- メールアイコン
- 関連記事の表示
- Google Analytics対応
- 色とフォントファミリーの変更
この６つをテーマに開発されました。
「AMP対応しなきゃなー。でもデフォルトのテーマださいしなー」
ってな方や、AMPデザインテーマに興味の有る方は是非使ってみて下さい。
目次
WordPress用AMPデザインテーマ「AWESOME」
DEMO
TOP
SNS＆関連記事
ハンバーガーメニュー
DEMOサイト
配布先
▶AMPデザインテーマ「AWESOME」Githubレポジトリ
上記Githubページからテーマファイルをダウンロード可能です。
アクセスすると下記の画像の画面に移動しますので、右側の緑色のボタンからファイルをダウンロードします。
ダウンロードしたファイルを展開するとこんな感じ。
フォルダ名を「amp」に変更して準備は完了です。
※フォルダ名を変更しないと認識されないため必ず行って下さい。
機能一覧
AMPデザインテーマ「AWESOME」の主な機能です。
- 導入が簡単
- h2~h5タグ、listタグ、引用タグに対応
- SNSシェアボタン
- メールボタン（送信先はWordpressのメールアドレスです）
- アイキャッチ画像が表示される
- 関連記事の表示
- Google Analyticsが簡単に導入できる。
- AMP対応のハンバーガーメニュー ※新機能
インストール方法
Wordpess用のAMPデザインテーマ「AWESOME」の導入方法を解説していきます。
AMPプラグインをインストール
AWESOMEはWordpress用のAMPデザインテーマです。
WordpressのAMPプラグインをインストールすることでとても簡単に実装することが可能です。
お使いのWordpressに上記のプラグインをインストールして有効化するだけで準備は完了です。
フォルダに設置
AMPプラグインをインストールしたら、後はFTPソフトなどでテーマフォルダに放り込むだけ。
Wordpressを設置しているサーバーにアクセスし、wp-content>themes>お使いのテーマ
と移動し、そこに先程ダウンロードしたAWESOMEテーマを設置するだけ。
※必ずフォルダ名は「amp」に変更しておいて下さい。
設置が完了したら「ブログ記事のURL /amp」で確認し、表示されていれば設置が完了です。
WP Social Bookmarking Lightの設定
もしあなたがWP Social Bookmarking Lightをインストールしてある場合、更に少し設定が必要です。
WP Social Bookmarking LightのFBの項目がAMPエラーを吐いてしまうため、設定を変更する必要があります。
プラグインの設定画面に移動し、FBの項目を表示。
versionをhtml5に変更して保存で設定はお終いです。
ここを設定していないとエラーが出てしまい、上手くインデックスされないため必ず行ないましょう。
カスタマイズ方法
Google Analytics設定
single.phpの１４行目からGoogle Analyticsの設定用スクリプトを設置しています。
ご利用される方はaccountにIDを入力してください。
アイコン表示
上記画像のようにヘッダー部分にアイコンを表示することが可能です。
ファイル内のheader-bar.phpから設定可能です。
style.phpの４行目〜１０行目付近にコメントアウトされている項目があります。
コメントアウトを外すとアイコンが表示されるようになっています。
お好みで設定して下さい。
カラー＆フォントファミリー変更
カラー及びフォントファミリーはstyle.phpから変更可能です。
９行目〜１０行目に変更可能な関数が設置されていますので、お好みの色に変更して下さい。
利用規約&ライセンス
- ライセンス：GPL
- 動作保証１００％ではございません。
- WordPress・AMPのバージョンにより動作しない場合がございます。
- ご利用前に必ずバックアップをお取り下さい。
- 当デザインテーマご利用に関するトラブルの責任は負いかねます。
- 当デザインテーマ導入にあたってのサポートは行っておりません。
- 欲しい機能やバグなどありましたらプルリクお待ちしております。
AMP対応をもっと身近に。
AMP対応が完了し、Googleにインデックスされると、上記画像のようにAMPアイコンが表示されます。
スマホなどからサイトを開く際、スピーディーに表示してくれます。
今後ますますAMP対応が必須になっていくことでしょう。
AMP対応しなきゃ！と悩んでた方は是非AMPデザインテーマ「AWESOME」を使ってみて下さいね。
