WordPress:authorページを一括リダイレクト
AMPの公式イメージ利用方法とガイドライン【画像ダウンロード】
【MAC】スクリーンショットの保存フォルダを変更・JPGファイルにする
MAMPでMySQLが起動しない時の解決方法
AMP化と一緒にHTTPSにすることにした:設定方法
@ 2016 fwary

AMPでCSSをファイルにして管理する方法:子テーマCSSも追加

サイトのAMP化のためにはCSSはheadに直接書くことになっています。とても視認性が悪いのでstyle.cssのままで読み込む方法がないかなと思い、色々試しました。完成したのでメモします。
 
とても簡単にWordPress関数を使います。
 
head内で、


< ?php get_template_part('style.php');?>

phpにするだけ。ちゃんと読み込んでくれました。
バリデターチェック。
そして、AMPの方でもエラーが出ていません。
スタイルシートの冒頭のコメント部分やUTF8の宣言などは削除しないとエラーになります。

 
head内には、
<style amp-custom>
<?php
get_template_part(‘style’);
get_template_part(‘child-style’);
?>
</style>
 
のように書いています。phpのテンプレートを呼び出すWordPress関数を使っています。style.phpの中はphpファイル扱いなので、submiletextなどのテキストエディタではシンタックスハイライトされずに見にくいかもしれません。なので、わたしは修正する時のために、ファイルの最初に<style >と書いておき、使うときだけコメントアウトを外しています。保存するときは、コメントアウトします。ほかにも色々考えたのですが、面倒が少ないこの方法で落ち着いています。cssファイルはちょこちょこ修正するのでミニファイもしていないです。

style.cssは50kbまでなので、参考サイトなどを使ってミニファイ(圧縮)しておけば結構小さくなります。

 

suponserd link


子テーマでもstyle amp-customを使いたい。

header.phpの中で、
 
get_template_part(‘style’);
の次に、
get_template_part(‘child-style’);
 
と書きます。
 
次に、子テーマのスタイルシートをchild-style.phpという名前にして子テーマの直下にアップロードします。WordPressの性質上、自動で子テーマ利用の時だけchild-style.phpを呼び出してくれます。今見てもらっているページは、子テーマのCSSが反映されています。fwary.tokyoの方は、親テーマのCSSだけです。

 
今の所、これでエラー無しでうまくいっています。
エラーチェックは、「#development=1」をページのURLの後ろにつけます。リロードすればエラーチェック画面でエラーが見られます。
 
AMPにするとCSS直書きなのかと心配していましたが、関数をあれこれ試したり、試行錯誤して自力でこの形にしました。

sharing is caring