素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

投稿日: 2018年12月18日
最終更新日:

【AMP For WordPress】WordPressのAMPプラグインで出力されるページのレイアウトやデザインをcssでカスタマイズしよう【templatesファイル】

YouTubeも見てね♪

ねこじゃすり

created by Rinker
PEPPY(ペピイ)
¥3,850 (2024/04/03 21:33:13時点 Amazon調べ-詳細)

猫を魅了する魔法の装備品!

ペヤング ソースやきそば 120g×18個

created by Rinker
ペヤング
¥2,600 (2024/04/03 21:42:16時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし!

レッドブル エナジードリンク 250ml×24本

created by Rinker
Red Bull(レッドブル)
¥4,000 (2024/04/03 21:42:12時点 Amazon調べ-詳細)

翼を授けよう!

ドラゴンクエスト メタリックモンスターズギャラリー メタルキング

created by Rinker
スクウェア・エニックス(SQUARE ENIX)
¥3,250 (2024/04/03 21:42:09時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう!

Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK

created by Rinker
Bauhutte(バウヒュッテ)
¥14,935 (2024/04/03 21:42:10時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック!

BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール

created by Rinker
BANDAI SPIRITS(バンダイ スピリッツ)
¥7,500 (2024/04/03 21:42:14時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ!!

MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド

created by Rinker
MOFT
¥2,880 (2024/04/03 21:42:18時点 Amazon調べ-詳細)

Amazon一番人気のスマホスタンド!カード類も収納出来てかさ張らないのでオススメです!

AMPページのレイアウト調整

残るはデザイン調整

連日のAMP記事祭りもこれで区切りになると思います。

今回は、AMPプラグインで出力された記事の不要な出力の除去と、デザインをAMP専用のCSSを用意してカスタマイズしてみようと思います。

プラグインを入れるだけでOKとは言っているものの、細部までこだわるには結構な作業量が必要だということが分かっただけでも収穫です♪

デフォルトのページはシンプルイズベストの極み

さて、AMP For WordPressプラグインで出力されたAMPページを見てみましょう。

無駄な要素を取っ払ったレイアウトになっています。
また、AMPページ専用のテンプレートファイルに則って表示されているので、使用しているテーマやカスタムCSSの内容は一切反映されないページになっています。

AMPページのCSSは最大50KB

これは、AMPページの「CSSの記述量は最大50KBまで」というルールに準拠するために、プラグイン独自の軽量なCSSを適用しているためです。

ただ、せっかくならAMPページでも通常ページのデザインに合わせた形式にしたいですよね。orz

カスタム可能

しかし、AMP For WordPressプラグインはその辺もとてもよく考えられたプラグインとなっています。

基本的にはwp-content/plugins/amp/templatesディレクトリの中にある専用のテンプレートファイルを利用してAMPページが生成されます。

ですので、カスタマイズをせずにこのプラグインで生成しているAMPページはどのサイトも同じ見た目になります。

AMPページを独自カスタマイズするには、使用しているテーマディレクトリにampフォルダを作成し、カスタマイズしたいファイルを同一名称で配置することで、plugin側のテンプレートを無視してtheme側のファイルを使用するようになります。

今回はサンプルとして、style.phpsingle.phpをカスタマイズしてみようと思います。

手順

カスタムファイルの作成

まずはFTPなりコマンドなりでテーマディレクトリ内にampフォルダとstyle.phpsingle.phpとAMP用のstyle.cssを作成しましょう。

気をつけるべきは、このamp/style.cssAMPページのみに適用されます。
また、間違えてテーマ直下のstyle.css修正しないように注意してください。

amp/style.phpの記述

まずは、amp/style.phpにCSSの記述を行っていきます。

今回は以下を考慮した記述を行います。

Point
  • 子テーマ用CSSの読み込み
  • plugin用CSSの読み込み
  • AMPCSSの読み込み
  • minify処理

ここで親テーマのCSSも読み込んでしまうと、テーマによっては膨大な記述量になってしまうので、50KBを超えてAMPページが無効になってしまう場合があるので、今回は子テーマのみの読み込みにして、親テーマの内の必要最小限の定義をAMP用のCSSに個別に記述して読み込んでいます。

また、minifyというのは改行や空白を除去して、ファイルのデータ量を抑える事を指します。
AMPのCSS容量を50KB以下に抑えるには、この作業は必要不可欠と言えるでしょう。

ファイル圧縮(Minify)は、「データ容量の削減」のためのテクニックです。 HTML、CSS、JavaScriptには、何も対処をしていない場合、ブラウザ描画には必要のない改行や空白、コメントが含まれています。 これらを取り除きファイルサイズを削減するのがファイル圧縮(Minify)です。
[試] サイト表示速度を高速化する方法 | ファイル圧縮(Minify)による表示速度改善 | 試行錯誤ライフハック

WordPressであればminify用のプラグインもありそうですが、今回は取り急ぎ自前で行います。

※使用しているプラグインによって適宜読み込みファイルを変えてみてください。

また、amp/style.cssもご自身のサイトに合わせて記述をすることになるので、割愛します。

amp/single.phpの修正

次にamp/single.phpを修正します。

今回は執筆者情報と投稿日時を消したいので、読み込んでいる部分を除去します。

single.phpに限らず、見栄えを変えたい場合はHTMLを調整すればそのまま吐き出されるようになります。

今回削除したのは、
><?php $this->load_parts( apply_filters( 'amp_post_article_header_meta', array( 'meta-author', 'meta-time' ) ) ); ?>
です。

meta-author.phpmeta-time.phpのテンプレートファイルを読み込まないようにしてみました。

確認

では、実際にAMPページを確認してみましょう。

だいぶ見た目が通常ページに近づきましたね。

これで、AMPページのカスタムに必要なtemplateファイルの用意は出来たので、あとはamp/style.cssに微調整を加えながら50KBを超えないようにCSSをいじってみてください。

無事にAMPツール上でも有効判定されましたね♪

終わりに

以上のように、思っていたより簡単にAMPページのデザインを変えることが出来ました。

この対応をせずにデフォルトのデザインのままにしておくと、スマホでサイトを訪れた方は全てシンプルなデザインのAMPページが表示されてしない、再訪してくれる確率が下がってしまいます

ですので、AMP For WordPressプラグインを導入した際は最優先で忘れずにAMPページのデザイン調整をしてみてください♪

CATEGORIES & TAGS

副業