ローディング中

【無料】WordPress用AMPデザインテーマ「AWESOME」配布開始しました。

※2017/03/01 ハンバーガーメニュー実装しました。

AMPが徐々に広がってきており、Gunosyやスマートニュースといったキュレーションアプリや、はてなブックマークなどでもAMP対応され。
いよいよ、AMP対応が一般的になってきた感じさえあります。

弊社でもAMP対応はしないとなーー。といいながら全然やってなかったのですが、最近重い腰を上げてAMP対応いたしました。
それと同時に、案件にも導入しやすくカスタマイズしやすい社内用のAMPデフォルトデザインテーマみたいなのがあればなーと思い。

「じゃあ作ってしまおう」

ということでWordpressのAMP用のデザインテーマを作成しました。

「せっかく作ったのなら公開してしまおう」

てな訳で無料配布する運びとなりました。

今回配布するAMPデザインテーマ「AWESOME」は
※名前考えるのが面倒くさかった

  • WordPressで簡単にAMP対応さられる
  • SNSのシェアボタン
  • メールアイコン
  • 関連記事の表示
  • Google Analytics対応
  • 色とフォントファミリーの変更

この6つをテーマに開発されました。

「AMP対応しなきゃなー。でもデフォルトのテーマださいしなー」

ってな方や、AMPデザインテーマに興味の有る方は是非使ってみて下さい。

WordPress用AMPデザインテーマ「AWESOME」

DEMO

TOP

スクリーンショット 2017 03 01 午後6 26 15

SNS&関連記事

1010ce0a9b3d83aeb722548314699178

ハンバーガーメニュー

スクリーンショット 2017 03 01 午後6 26 28

DEMOサイト

▶DEMOサイト

配布先

▶AMPデザインテーマ「AWESOME」Githubレポジトリ

上記Githubページからテーマファイルをダウンロード可能です。
アクセスすると下記の画像の画面に移動しますので、右側の緑色のボタンからファイルをダウンロードします。

スクリーンショット 2017 02 28 午後7 18 08

ダウンロードしたファイルを展開するとこんな感じ。

スクリーンショット 2017 02 28 午後8 26 35

フォルダ名を「amp」に変更して準備は完了です。
※フォルダ名を変更しないと認識されないため必ず行って下さい。

機能一覧

AMPデザインテーマ「AWESOME」の主な機能です。

  • 導入が簡単
  • h2~h5タグ、listタグ、引用タグに対応
  • SNSシェアボタン
  • メールボタン(送信先はWordpressのメールアドレスです)
  • アイキャッチ画像が表示される
  • 関連記事の表示
  • Google Analyticsが簡単に導入できる。
  • AMP対応のハンバーガーメニュー ※新機能

インストール方法

Wordpess用のAMPデザインテーマ「AWESOME」の導入方法を解説していきます。

AMPプラグインをインストール

AWESOMEはWordpress用のAMPデザインテーマです。
WordpressのAMPプラグインをインストールすることでとても簡単に実装することが可能です。

スクリーンショット 2017 02 28 午後7 52 22
▶AMP

お使いのWordpressに上記のプラグインをインストールして有効化するだけで準備は完了です。

フォルダに設置

AMPプラグインをインストールしたら、後はFTPソフトなどでテーマフォルダに放り込むだけ。
Wordpressを設置しているサーバーにアクセスし、wp-content>themes>お使いのテーマ

スクリーンショット 2017 02 28 午後8 32 31

と移動し、そこに先程ダウンロードしたAWESOMEテーマを設置するだけ。
※必ずフォルダ名は「amp」に変更しておいて下さい。

設置が完了したら「ブログ記事のURL /amp」で確認し、表示されていれば設置が完了です。

WP Social Bookmarking Lightの設定

もしあなたがWP Social Bookmarking Lightをインストールしてある場合、更に少し設定が必要です。
WP Social Bookmarking LightのFBの項目がAMPエラーを吐いてしまうため、設定を変更する必要があります。

スクリーンショット 2017 02 28 午後8 00 36

プラグインの設定画面に移動し、FBの項目を表示。
versionをhtml5に変更して保存で設定はお終いです。

ここを設定していないとエラーが出てしまい、上手くインデックスされないため必ず行ないましょう。

カスタマイズ方法

Google Analytics設定

スクリーンショット 2017 02 28 午後8 49 52

single.phpの14行目からGoogle Analyticsの設定用スクリプトを設置しています。
ご利用される方はaccountにIDを入力してください。

アイコン表示

スクリーンショット 2017 02 28 午後7 19 58

上記画像のようにヘッダー部分にアイコンを表示することが可能です。
ファイル内のheader-bar.phpから設定可能です。

スクリーンショット 2017 02 28 午後8 44 13

style.phpの4行目〜10行目付近にコメントアウトされている項目があります。
コメントアウトを外すとアイコンが表示されるようになっています。
お好みで設定して下さい。

カラー&フォントファミリー変更

スクリーンショット 2017 02 28 午後7 21 42

カラー及びフォントファミリーはstyle.phpから変更可能です。
9行目〜10行目に変更可能な関数が設置されていますので、お好みの色に変更して下さい。

利用規約&ライセンス

  • ライセンス:GPL
  • 動作保証100%ではございません。
  • WordPress・AMPのバージョンにより動作しない場合がございます。
  • ご利用前に必ずバックアップをお取り下さい。
  • 当デザインテーマご利用に関するトラブルの責任は負いかねます。
  • 当デザインテーマ導入にあたってのサポートは行っておりません。
  • 欲しい機能やバグなどありましたらプルリクお待ちしております。

AMP対応をもっと身近に。

スクリーンショット 2017 02 28 午前0 24 26

AMP対応が完了し、Googleにインデックスされると、上記画像のようにAMPアイコンが表示されます。
スマホなどからサイトを開く際、スピーディーに表示してくれます。
今後ますますAMP対応が必須になっていくことでしょう。
AMP対応しなきゃ!と悩んでた方は是非AMPデザインテーマ「AWESOME」を使ってみて下さいね。

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.