【THE THOR(ザ・トール)】AMPページのCSSをカスタマイズする方法

THE THOR ampカスタマイズWordPress
この記事は約4分で読めます。

2020年5月現在、THE THORにてAMPページのCSSをカスタマイズする機能は提供されていません。

ただし、ひと手間かければカスタマイズする方法はありますので私の備忘録のためにも残します。同じような方の参考になれば。

これらのカスタマイズはテーマの機能として提供されるカスタマイズ機能ではありませんので、あくまでも自己責任の元で実施してください。

このブログは分け合って無料テーマcocoonを使うことに決めました。こちらの記事はTHE THORを利用していた当時のカスタマイズ内容です。

スポンサーリンク

THE THORではAMP設定時にカスタマイズから設定できるCSS設定は効かない

「外観」→「カスタマイズ」→「追加CSS]でCSSを書いてもダメ。

「外観」→「テーマエディター」→(子テーマ:THE THOR CHILD)「style-user.css」に直接記述してもダメ。

なぜってそういうものだから。
これらを触ってAMPのCSSを変更できるようにする機能が実装されるものを待ちましょう。

スポンサーリンク

AMPのCSSを強引にカスタマイズするには

テーマの機能としてできなくてもブログの見栄えのためにCSSはカスタマイズしたい。

AMPは外部CSSファイルの読み込みをサポートしない

AMPの規格は外部CSSファイルの読み込みをサポートしない。なぜってそういうものだから。

サポートされる CSS
Like all web pages, AMP pages are styled with CSS, but you can't reference external stylesheets with the exception of custom fonts. Also certain styles are disa...

スタイルシートを当てたければ直接該当ページにインラインでスタイル指定すれば良い。

投稿ページのレイアウトはテンプレートで決まる

通常、投稿ページのメイン部分はsingle.phpテンプレートが利用される。CSSの読み込みとかもここで設定する。

で、カスタマイズでこのテンプレートは変更できる。各テーマが実現しているのこの切り替え機能。

WordPress のテンプレートとテンプレート階層/ Web Design Leaves
WordPress のテンプレートやテンプレート階層に関する説明等
スポンサーリンク

CSSを投稿ページに直接埋め込む手順

以下、親テーマであるwp-content/themes/the-thor配下のファイルを直接参照・修正します。
実施する場合はバックアップを取得して作業することを推奨します。

※カスタマイズを推奨するものではありません。

THE THORのAMP用テンプレートはsingle-amp.php

THE THORを適用中にAMP用URLのリクエストが来た場合はsingle-amp.phpが設定される。

  1. wp-content/themes/the-thor/functions.php が呼ばれる
  2. wp-content/themes/the-thor/inc/amp.php が呼ばれる
  3. wp-content/themes/the-thor/inc/amp/switch.php が呼ばれる
  4. wp-content/themes/the-thor/single-amp.php を設定している

だからsingle-amp.phpテンプレートにCSSを埋め込んでやればいい。

</style>締めタグを見つける

single-amp.php に元々記述されてるインラインCSS用の締めタグ</style> を見つける。

その直前にカスタマイズしたいCSSを追記すればいい。

デフォルトでは3500line前後に記述があった気がする。テキストエディタでgrepするのが早い。

通常ページ用のCSSからは修正が必要

THE THORの機能でAMP化する際に、AMP規格にのっとってタグを最適化しているケースがある。CSSのセレクタでそのタグを要素指定しているともちろん設定は効かない。

分かりやすいのは<img>タグから<amp-img>への変換とか。imgと指定しているセレクタがあればamp-imgに修正する。

スポンサーリンク

テーマ更新の度に親テーマの修正が必要

WordPressのテーマ更新機能でテーマの更新を実施すると今回修正したコードは消えますので再度修正が必要です。

やっぱり管理画面からカスタマイズできる機能が欲しい。
FITさん、機能追加をお待ちしております。

コメント

タイトルとURLをコピーしました