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

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

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

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

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

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

Design One

Design Two

Design Three

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

Design Three標準

カスタマイズ後

AMPでの配色

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

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

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

AMP->Design->Global

AMP->Design->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;
}

カスタマイズ

ここからは、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ファイルのみにしてみました。

Monappy: MBDQ39VHypMQwfyR8SshuHvfPNUz321F6B

モナゲ(tipmona)ってなに？
そもそもMonacoinってなに？