ブログ

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

どうも、みーまです。

将来的にブログをAMP化したほうが良いのでは?という記事を時々見かけますが、このブログは既にAMP対応を済ませています。

(参考)AMP化したページはこちら

テーマにJINを使ったままAMP対応化させましたので、AMP対応したい人は参考にしてください。

  1. この記事ではテーマエディタからWordPressテーマのファイルの中身を修正しますので、事前にバックアップを取りましょう!
  2. 必要なCSSをJINのテーマファイルの中から移植することになります。大変です!まとまった時間を用意してやりましょう!

AMP対応するまでの流れ

  1. JINの「子テーマ」にしていない場合は入れて、有効化する
  2. AMP対応プラグインをインストールする
  3. テーマエディターで子テーマのfunctions.phpを変更

1.JINの子テーマを使ってない人は導入する

  1. JIN公式サイトからJIN子テーマをダウンロードする。
  2. WordPress管理画面の「外観」「テーマ」「テーマの追加」「テーマのアップロード」から、ダウンロードしたファイルをアップロードする。
  3. 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を移植します。

  1. テーマエディタからJINのstyle.scssを開くと、どの機能をどこから参照しているかが分かるので、調べる。
  2. 該当するscssの中身をコピーする。
  3. SassMeisterで、scssからcssに変換する。
    • 変換エラーが出たら次の注意事項を見て命令を削除する。
  4. 次の注意事項にある命令を削除してエラーが無いことを確認する。

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が公開できないのでもやっとした結果になってますが、「頑張ってみる!」という方はチャレンジしてみる価値ありです。

【PR】動画編集技術をまとめて教えます。動画編集者教材のMovieHacks

今YouTubeやTikTokなどでは、動画編集は外注したいという人が増えています!MovieHacksで動画編集技術を学んで、あなたも動画編集者になりませんか?

MovieHacksの詳細を見たい!