AMP for WPプラグインでAMP対応(カスタマイズ有り)

サイトをAMP for WPプラグインの設定とカスタマイズでAMP対応してみました。

もうね、設定を弄ったり、カスタマイズする毎にLiteSpeedのキャッシュをパージしまくってキャッシュの意味がない状態が続いてましたが、これで落ち着くと思います。

AMP for WP 無料の範囲で使っているための制限

SANGOテーマはモバイル表示も早いのでAMPにしなくても良いのですが、前に使っていたSimplicityテーマがAMP対応していたため、無料での対応範囲としました。

主な非AMP部分
  • 問い合わせページ
    contact formとの連携は有償となります。
  • カスタム投稿関連ページ
    カスタム投稿対応は有償となります。
  • コメントの投稿
    コメントは表示されますが、投稿時には非AMPページに遷移します。

AMP for WPのテーマは標準で3種類あります。

Design One

Design One

Design Two

Design Two

Design Three

Design Three

全体的に Design Three が気に入ったのですが、記事表示のページネーションが次へのみであるため、Design Oneと同じように前/次のページネーションを表示するようにカスタマイズしています。

Design Three

Design Three標準

Customize

カスタマイズ後

注意
設定はDesign Threeを想定しています。また、カスタマイズは直接プラグインのソースファイルを修正しているため、お勧めはしません。でも前/次のページネーション欲しいんですよね。

AMPでの配色

SANGOテーマは、配色例から緑ベースに設定していますので、AMP側も緑ベースの配色にしています。

参考

色の設定をしようSANGO

AMP for WPの設定画面からの設定

以下のような配色にしています。

AMP->Design->Global
Global

AMP->Design->Header
Header

Awesome Fontを使うための設定

AMP->settings->Advance Settings->Enter HTML in Head

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

CSSで設定している内容

AMP->Designe->Global->Custom CSS

見出しのh2、h3、h4、h5、h6もSANGOで指定しているのと合わせています。またTOS+とコード表示はバックグラウンドカラーを指定し、フッターのリンクは既読でも白にしています。
見出しについては、SANGOで指定した.entry-contentを.amp-wp-article-contentに変更する事でAMP記事本文のみへの適用となりますが、-moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);はエラーになりますので除いています。

.amp-wp-article-content h2{
border-bottom: double 5px #40ce9a;
}

.amp-wp-article-content h3{
border-bottom: solid 3px #40ce9a;
}

.amp-wp-article-content h4{
border-bottom: dashed 2px #40ce9a;
}

.amp-wp-article-content h5{
position: relative;
padding-left: 1.2em;
line-height: 1.4;
color: #7b6459;
}

.amp-wp-article-content h5:before{
font-family: FontAwesome;
content: "\f1b0";
position: absolute;
font-size: 1em;
left: 0;
top: 0;
color: #40ce9a;
}

.amp-wp-article-content h6{
position: relative;
padding-left: 30px;
color:#153c6e;
}

.amp-wp-article-content h6:before{
position: absolute;
font-family: FontAwesome;
content: "\f121";
background: #d9f7de;
color: #153c6e;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
top: 50%;
transform: translateY(-50%);
}

#toc_container{
 background-color: #f9f9f9; /* SANGOのTOCと同じ色 */
}

pre {
background-color: #f3f6fc; /* SANGOのコードと同じ色 */
}

#footer {
background-color: #40ce9a; /* SANGOのメインカラー */
color: #ffffff;
}

#footer p {
color: #ffffff;
}

#footer a:link {
color: #ffffff;
}

#footer a:visited {
color: #ffffff;
}
MEMO
AMPでは、データサイズが重要になりますので、CSSのコメントは消した方が良いです。

カスタマイズ

ここからは、AMP for WPのファイルを直接弄ります。

ファイル:/wp-content/plugins/accelerated-mobile-pages/templates/design-manager/design-1/elements/content.php

Design Oneからページネーション部分をまるっとコピーします。

    <!--Post Next-Previous Links-->

        〜〜 省略 〜〜

    <!--Post Next-Previous Links End here-->

Design Threeのファイルをバックアップします。ここ重要です。修正する場合は元に戻せるように必ずバックアップはしてください。

ファイル:/wp-content/plugins/accelerated-mobile-pages/templates/design-manager/design-3/elements/content.php

以下の部分をコピーした内容でまるっと変更します。

    <!--Post Next-Previous Links-->

        〜〜 この範囲をコピーしたコードでまるっと変更してしまいます 〜〜

    <!--Post Next-Previous Links End here-->

このままだと、次へが左寄りになってしまいますので、上記のCSSの下に追加します。

.amp-wp-content .next {
 text-align: right;
}

これで、いい感じでページネーションが表示されます。

他にもカスタマイズしたい部分もありますが、AMP for WPのアップデートがあると再度カスタマイズする必要があるため、一番優先度が高いと思っている部分の1ファイルのみにしてみました。

MEMO
別のカスタマイズ方法があるようでしたら教えていただけると有難いです。

Monappy: MBDQ39VHypMQwfyR8SshuHvfPNUz321F6B

Monacoinを投げる
モナゲ(tipmona)ってなに?
そもそもMonacoinってなに?

コメントを残す

必須項目は設定していません。また、メールアドレスは公開されませんのでご安心ください。