JIN（WordPressテーマ）を使用したブログをAMP対応させた話

2019年11月12日2019年11月25日

URLをコピーしました！

こんにちは、みーまです。

将来的にブログをAMP化したほうが良いのでは？という記事を時々見かけますが、このブログは既に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は丸ごと削除
- 残したいレイアウトは{}の中身だけ残す