WordPressの「Simplicity」テーマ内にAMPデザインテンプレートの「Simp」を導入してみた

AMP記事テスト – Sho-Yamane.info

以前、モバイル端末でのウェブページの表示を高速化する「AMP」をご紹介いたしました。

モバイルの表示が爆速になるAMP(Accelerated Mobile Pages)
去年Googleが提唱したAMP(Accelerated Mobile Pages) が、最近また活発になってきたようです。 というわけで...

WordPressのプラグインで気軽にAMP HTML化はできるのですが、デザインがパっとしないのが悩みでした。

そんな時、AMPデザインテンプレートの「Simp」の存在を知り、導入することにしました。

今回はAMPデザインテンプレートの「Simp」の導入と、当サイトで利用している「Simplicity」テーマに沿った、ちょっとしたカスタマイズ方法をご紹介いたします。

「Simp」とは

WordPressのAMPデザインテンプレート「Simp」を無料配布

「Simp」はGPLライセンスで無料配布されるWordPressのAMPデザインテンプレートで、現在京都に在住されているフリーランスのヤマネショウさんが作成されています。

特徴など

  • FTPソフトを使って簡単に導入できる。
  • シンプルでみやすいデザイン。
  • 各種タグに対応。
  • アイキャッチ画像が表示される。
  • AMPページにシェアボタンが表示される。
  • 関連記事が表示される。
  • ページ下部にトップページへ遷移するボタンがある。
  • 「style.php」でスタイルを別管理している。
  • AMPページは「single.php」で記事(詳細)ページに対応。

現在対応しているタグ

  • h2、h3
  • img(キャプションあり)、img(キャプションなし)
  • ul、ol、li
  • blockquote(引用タグ)

動作

  • WordPress:ver4.5.2
  • AMPプラグイン:ver0.3.2

「Simp」を導入する

WordPressの「AMP」プラグインをインストールする

「Simp」を動作させるためには、「AMP」プラグインが必要なのでプラグインをWordPressにインストールします。

WordPress管理画面のプラグインの新規追加ページにあるテキストフィールドに「AMP」と入力します。

WordPress管理画面のプラグインの新規追加ページにあるテキストフィールドに「AMP」と入力
「AMP」と入力する

検索結果の一覧に、「AMP」プラグインが表示されるのでインストールします。

「AMP」プラグインを選択してインストール
「AMP」プラグインをインストールする

AMPのページはWordPressの場合、「http://xxxx/xxxx/amp/」で表示されます。記事URLの末尾に「/amp/」と入力して「AMP」プラグインが適用されていることを確認します。

記事URLの末尾に「/amp/」と入力して「AMP」プラグインが適用されていることを確認
「AMP」プラグインの適用を確認

「Simp」をダウンロードする

次に「WordPressのAMPデザインテンプレート「Simp」を無料配布」から「Simp」をダウンロードします。

「Simp」をダウンロード
「Simp」をダウンロード

「Simp」を解凍すると「amp」フォルダ内に「single.php」と「style.php」という二つのファイルが入っています。

「single.php」は記事ページ、「style.php」でスタイルを管理しています。

テーマ内にアップロードする

「Simp」をサイトで利用しているWordPressのテーマ内にアップロードします。この時フォルダ名は変更せず「amp」のままアップロードします。

WordPressのテーマの設置場所は、wp-content > themes > テーマ名となっているはずなので、テーマの中に「amp」フォルダをアップロードします。

テーマの中に「amp」フォルダをアップロード
テーマのフォルダ内に「amp」フォルダをアップロードする

当サイトは「Simplicity」のver2を利用しているので、「Simplicity2」のフォルダ内に「amp」フォルダをアップロードしました。

「Simp」テンプレートの適用を確認する

「Simp」をアップロードした後、テンプレートが適用されていること確認します。

確認はAMPのページと同様、記事URLの末尾に「/amp/」を入力します。

記事URLの末尾に「/amp/」と入力して「Simp」テンプレートが適用されていることを確認
「Simp」テンプレートの適用を確認

以上でAMPデザインテンプレートの「Simp」の導入ができました。

「Simp」のデザインを「Simplicity」テーマに近づけてみよう

個人的には「Simp」のデザインのままでもまったく問題ないと思いますが、AMPページでも出来るだけ「Simplicity」テーマの見た目にしたい、といった方もいると思います。

少しですが、「Simplicity」テーマに近づける方法をご紹介いたします。

見出し(h2要素)

「Simp」はスタイルを「style.php」にまとめていますので、「style.php」を開きます。

「style.php」は下記のソースのように「footer」で終わっていますので、その下にスタイルを書いて上書き、または追加をしていきます。

「Simplicity」でのh2要素のスタイルは、ブラウザのデベロッパー・ツールで調べるか、「simplicity2/style.css」内にあるh2のスタイルを探してコピー&ペーストします。

Chromeのデベロッパー・ツールで調べる

F12キーでデベロッパー・ツールを起動し、調べたい要素にカーソルを当て、スタイルを表示させます。

画像を押下すると動画が表示されます。
デベロッパー・ツールで調べる

YouTube版

スタイルを追加する

要素を調べた後、「style.php」にある「footer」スタイルの下に、「Simplicityスタイル」といったような形でいったん区切り、記述していきます。

h2タグは「style.php」では「.content h2」と指定されているので、「.content h2」内に「Simplicity」でのh2スタイルを記述します。

「style.php」のスタイルを削除してまっさらな状態にしてから行うのも手ですが、「Simp」のデザインに戻したい時などの場合を考慮して、上記のような形にしました。

h3やh4などの他の見出しの上書きや、「Simp」に元々存在しないテーブル要素のスタイルなどの追加も、同じ手順で行えます。

上書きする前と後の表示は下記のようになります。

simp h2デザイン
上書き前のh2(Simp)
simplicity h2デザイン
上書き後のh2(Simplicity)

フッター(サイトリンクとコピーライト)

当然ですが、「Simp」には「Simplicity」のフッターにあるようなサイトリンクがなく、コピーライトなどのクレジット表記も少し違います。

そこで「single.php」のソースを少し変更して、フッターを「Simplicity」に近づけます。

ソースの確認とコードの追加

「single.php」を開き、「<footer>」部分のソースを確認します。

上記の「<footer>」内のソースを下記のように変更します。

「simplicity2/footer.php」のフッターにあるソースから、必要そうな部分を選択して貼りつけました。

スタイルを追加する

スタイルは見出しと同じように、「style.php」に「simplicity2/style.css」内にあるフッターのスタイルを探してコピー&ペーストします。

見出しの時と同じように「style.php」に上記スタイルを追加しました。

上書きする前と後の表示は下記のようになります。

Simp フッターデザイン
上書き前のフッター(Simp)
Simplicity フッターデザイン
上書き後のフッター(Simplicity)

スタイルの上書きは、以上のような手順を繰り返すことになります。

JSを挿入して「AMP」ページのアクセスを「Google Analytics」で解析する

よい機会なので、「AMP」ページのアクセスを「Google Analytics」で解析する方法もご紹介いたします。

「amp-analytics」jsを挿入する

「<head>」内に下記のスクリプトを挿入します。

挿入する位置は下記のようになります。

「amp-analytics」タグを挿入する

「<body>」内にスクリプトが記述されたタグを挿入します。私は「</body>」の直前に挿入しました。

「UA-XXXXX-Y」は「Google Analytics」のトラッキングIDに差し替えてください。トラッキング IDは「アナリティクス設定」>「プロパティ設定」にある「基本設定」から確認できます。

トラッキングコードは「アナリティクス設定」>「プロパティ設定」の「基本設定」から確認

  1. 「アナリティクス設定」を押下。
  2. 「プロパティ設定」を押下。
  3. 「基本設定」にトラッキングIDが表示。

トラッキングでページのアクセスを確認する

「http://xxxx/xxxx/amp」といったように、「AMP」ページにアクセスした後、「Google Analytics」の「リアルタイム」>「サマリー」からアクセス解析を確認します。

「Google Analytics」で「AMP」ページのアクセスを確認
「AMP」ページのアクセスを確認

記事urlの後ろに「/amp/」が表示された状態で、ページがアクティブになっていれば成功です。

まとめ

  • 「Simp」はGPLライセンスで無料配布されるWordPressのAMPデザインテンプレート。
  • 現在京都に在住されている、フリーランスのヤマネショウさんが作成されている。
  • 「Simp」の動作には「AMP」プラグインが必要。
  • 導入はFTPソフトを使ってテーマにアップロードするだけ。
  • 「single.php」で記事表示、「style.php」でスタイルを管理している。
  • 「AMP」ページのアクセスを「Google Analytics」で解析するには、amp用のjsとタグを挿入する必要がある。

「Simp」は「AMP」プラグインがインストールされ有効化されていれば、FTPでテーマ内にアップロードするだけで適用されるので、気軽に導入できます。

また、スタイルが「style.php」ファイルで別管理されているので、複数人で作業する際にとても都合がよいなど、WordPressで「AMP」を導入する時に参考になる作りになっています。

余談ですが、「Simp」の名称の由来は「Simple」と「AMP」を組み合わせたとのことです。偶然にも「Simplicity」テーマと「Simp」テンプレートの名称が似ていますが、みなさんシンプルが好きなようです。

WordPressで「AMP」プラグインを導入されている方で、「AMP」ページのデザインを変えたいと思っている方は、導入を検討してみてはいかがでしょうか。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

WordPressの「Simplicity」テーマ内にAMPデザインテンプレートの「Simp」を導入してみた
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!