【無料】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

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

SNS&関連記事

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

ハンバーガーメニュー

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

DEMOサイト

▶DEMOサイト

配布先

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

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

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

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

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

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

機能一覧

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

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

インストール方法

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

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

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

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

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

フォルダに設置

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

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

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

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

WP Social Bookmarking Lightの設定

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

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

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

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

カスタマイズ方法

Google Analytics設定

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

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

アイコン表示

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

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

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

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

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

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

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

利用規約&ライセンス

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

AMP対応をもっと身近に。

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

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

Instagram Feed

Load More

Instagram

WEB DIRECTOR

マンノカズミチ

バンドマンを経て、台湾で日本語教師をしてましたが、2016年より株式会社AWESOMEにてWEB開発とコンテンツ制作を担当しております。SEO対策と記事執筆が得意分野です。こっそり台湾と日本のハーフです。

他の投稿を見る →