テーマLuxeritas(ルクセリタス)でAMP化する手順を詳しくわかりやすく

使い方

Googleさんの推進する AMP(Accelerated Mobile Pages) という仕組み
なにやらモバイルでサイトのページを高速に表示する仕組みなのだとか
そんな難しいこと言われてもなぁと思いますが、先日重い腰を上げてこちらのサイトでAMP化を行いましたので、その手順をご紹介します。

サイトをAMP化する(準備編)

AMP用ロゴ画像を準備する

「Luxeritas」→「カスタマイズ」→「AMP」を開く

一番下に「AMP 用ロゴ画像の設定」があるので幅 600px 以内、高さ 60px 以内の画像を準備して設定します。
Logo image setting for AMP-01

AMP用サイドバーにウィジェットを追加する

「外観」→「ウィジェット」を開いて「AMP用サイドバー(H4タイプ)」に必要なウィジェットを追加します。
Widget
「検索」は表示されません。お好みのものを追加してください。
Sidebar Widget for AMP

ウィジェットに用意されているAMP用の表示位置(他8ヶ所)

  1. ヘッダー下ウィジェット(AMP用)
  2. 記事タイトル上ウィジェット(AMP用)
  3. 記事タイトル下ウィジェット(AMP用)
  4. 投稿内で最初に見つかったH2タグの上(AMP用)
  5. 関連記事上ウィジェット(AMP用)
  6. 関連記事下ウィジェット(AMP用)
  7. 記事下ウィジェット(AMP用)
  8. 記事下ウィジェットよりさらに下(AMP用)

上の一覧にあるような位置に、通常ページで何かウィジェットを表示させている場合は、同じものをAMP用にも追加しておきましょう。(AMP化した後でも大丈夫です)

サイトをAMP化する(実施編)

AMPの設定

「Luxeritas」→「カスタマイズ」→「AMP」を開いて □AMP (Accelerated Mobile Pages) 有効化 にチェックを入れます。
また、「AMP で有効化するプラグインの一覧」から有効化するプラグインにチェックを入れます。説明を読んで、とりあえず使用したいと思うプラグインはすべてチェックを入れればいいと思います。その後、エラーが出る可能性もありますが、その時に対応できます。
AMP settings
実はたったこれだけでルクセリタステーマで作ったサイトはAMP化されます。
ログインしている場合、記事下の「編集」の右側に「AMP」という文字が表示されているはずです。
Below the article

AMP用のスタイルを追加する

記事下に出現した「AMP」という文字をクリックしてAMPサイトを表示してみると、通常ページで設定したスタイルが適用されていないのがわかると思います。

AMP用スタイル適用前

Before style application

AMP用スタイルを入力する

「Luxeritas」→「子テーマの編集」→「AMP用スタイル」を開いて、必要なスタイルを記入します。
AMP style

AMP用スタイル適用後

After style application
ほぼ、通常ページと同じスタイルが適用できると思いますが、私がエラーの指摘を受けたのは

タグ「style amp-custom」内のテキスト(CDATA)に「CSS !important」が含まれていますが、許可されていません。

AMP error
というものでしたので、これからAMP化される方は気をつけられるといいと思います。

AMPが有効になっているか確かめる

あなたのAMPページは有効ですか?で確かめられます。
amp test
上のページで入力するのは、サイトの固定ページや投稿ページなどのページURLです。サイトURLを入力しても結果はAMPにはなりません。
すべてのページをテストしてみるのは大変ですし、多くなると、Googleの画像認証に阻まれます(笑)
気になるページでテストしてみましょう。

AMP化後の検索結果一覧

サイトURLの横に稲妻マークがついています。クリックするとほんとに一瞬でページが表示されますね。
Screenshot_amp

あとがき

AMP化後はSearch Consoleに「AMP ページのエラーを修正してください」という通知が表示されないか、気をつけて見ておく必要があります。
もしエラーが見つかったら教えてくれますので、その解決策にしたがって修正すればOKです。
長々と書きましたが、AMP化にチェックを入れ、ウィジェットを作り、専用のスタイルを記入するだけで終わりです。
また、ルクセリタスでは投稿ごとに「AMPの無効化」が可能です。
私もまだAMP初心者なので、今後問題点が見つかったらまたご報告しますね!

0
この記事を書いた人
どらみ

パソコン歴はWindows98からの元パソコンインストラクターです。以前はMS Office系のソフトウェアを主に教えていました。 今はWordPressのテーマLuxeritasにはまっています♪ 質問されると、つい親身になってしまう自称「ポジネガ人間」です。

応援する にほんブログ村 ブログブログ ブログノウハウへ