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

副業

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

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

スポンサーリンク

336×280




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ツール上でも有効判定されましたね♪

オススメの参考書

WordPress AMP対応 モダンWeb制作 レッスンブック

本当によくわかるWordPressの教科書 はじめての人も、挫折した人も、本格サイトが必ず作れる

終わりに

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

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

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

336×280




336×280




CATEGORIES & TAGS

副業, , , , , , , , , ,

blogenist

Author: blogenist

お名前.comサイドバー

アーカイブ