こんにちは、みーまです。
将来的にブログをAMP化したほうが良いのでは?という記事を時々見かけますが、このブログは既にAMP対応を済ませています。
テーマにJINを使ったままAMP対応化させましたので、AMP対応したい人は参考にしてください。
- この記事ではテーマエディタからWordPressテーマのファイルの中身を修正しますので、事前にバックアップを取りましょう!
- 必要なCSSをJINのテーマファイルの中から移植することになります。大変です!まとまった時間を用意してやりましょう!
AMP対応するまでの流れ
- JINの「子テーマ」にしていない場合は入れて、有効化する
- AMP対応プラグインをインストールする
- テーマエディターで子テーマのfunctions.phpを変更
1.JINの子テーマを使ってない人は導入する
- JIN公式サイトからJIN子テーマをダウンロードする。
- WordPress管理画面の「外観」「テーマ」「テーマの追加」「テーマのアップロード」から、ダウンロードしたファイルをアップロードする。
- jin-childが増えるので、有効化する。
2.AMP対応化プラグインをインストールする。
AMPのプラグインをダウンロードして有効化する。
AMPの設定を添付画像の通りにする。(クリックで大きい画像が見られます)
GoogleアナリティクスのコードはAMPと別で設定を持つので、「AMP」「Analytics」から新しいコードを入れてSaveする。
{ "vars": { "account": "UA-XXXXX-Y" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } }
Typeにはgoogleanalyticsと入れる。accountの部分は自分の値を「HTMLタグ設定」広告設定で確認する。
3.子テーマのfunctions.phpを変更
「外観」「テーマエディター」で、「jin-child」が選ばれていることを確認する。違っていたら直す。
「functions.php」を選択して、以下のコードを貼り付けする。
<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } //AMP用CSS追加 add_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' ); function xyz_amp_my_additional_css_styles( $amp_template ) { // only CSS here please... ?> /* AMP用CSSここから */ /* AMP用CSSここまで */ <?php }
貼り付けたコードの/* AMP用CSSここから */ 〜 /*AMP用CSSここまで */の間に、JINのボックスデザインやアイコンデザインなどのCSSを移植します。
- テーマエディタからJINのstyle.scssを開くと、どの機能をどこから参照しているかが分かるので、調べる。
- 該当するscssの中身をコピーする。
- SassMeisterで、scssからcssに変換する。
- 変換エラーが出たら次の注意事項を見て命令を削除する。
- 次の注意事項にある命令を削除してエラーが無いことを確認する。
AMPは使えないCSS命令が沢山あるので、その命令を削除しつつ対応する必要があります。
- !important(強制実行系)=AMPでサポート外
- アスタリスク(クラス名のワイルドカード系)=AMPでサポート外
- @include grid-media(画面レイアウト分岐系)=SassMeisterサポート外
- PC、タブレット、モバイルとあるが、どれか1つに統一する。
- 具体的には、必要ないレイアウトの@includeは丸ごと削除
- 残したいレイアウトは{}の中身だけ残す
サンプル:このブログで使っているAMP用CSS
私が使っているCSSを公開したいのですが、JINの中からコピーしているので権利はひつじさんにあります。ごめんなさい。
とりあえず一部をスクリーンショットですが公開しておきます。これは一部で、全体1500行あります。大変でした。
AMPでは命令を強制的に行う「!important」や、画面サイズによって動作を変える分岐命令が使えないので、色が上書きできない、サイズが良くない部分が多くあります。
これは仕様上回避できないので、ある程度頑張ったら妥協することが必要です。
直したい場合は、Chromeの開発者ツールなどを使ってClass名を調べてから、テーマエディターの中で文字列検索して、そこを直してください。
動作確認する
普段の記事のURLに、amp/を付けると、AMP用のページになるので、動作確認をします。
AMPは元のデザインと比較して少し殺風景になりますが、元々モバイル向け高速化の仕組みなので、仕方ないでしょう。
AMP用CSSを追加しなかったら、もっと殺風景になります。全く色も何もない感じですね!
最後に
いかがでしたでしょうか。
CSSが公開できないのでもやっとした結果になってますが、「頑張ってみる!」という方はチャレンジしてみる価値ありです。