プラグイン AMP for WP の設定箇所についての備忘録

祝!再AMP化

 本日、姉妹サイト「モモモサーバー(最近はM3PRESSと表記)」ともどもAMP対応を行いました。実は「ススミカマガジン」の前身サイトではAMP対応していたのですが、メリットを今ひとつ感じられずに一旦撤退しています。今回、再度のAMP化に踏み切ったのは表示速度の観点から。
 なるべく編集と執筆ににリソースを使いたく、プラグインでAMP対応していますが、Accelerated Mobile Pages(AMP for WP)のUI、特にメニューの並びのわかりにくさにすっかり疲弊したので、備忘録的に設定箇所を記事として公開します。



Accelerated Mobile Pages(AMP for WP)の設定

 AMP for WPはWordPress純正の「AMP」とは別のプラグインです。ある程度の自由度があり、デザインもそれなりに作る込めるのですが、メニューの並びがなんかわかりにくいとか、気がつくと開発元の別プラグインを勝手にインストールするなどの行儀の悪さも持ち合わせています。
 てこと、わかりにくいUIをいったり来たりしているうちに疲れ切ってしまうので、機能別にメニューの場所をいくつか記しておきます。

ヘッダ、ボディ、フッタにHTMLを挿入

 AdsenseのAMP用コードを設定するの使用します。

  • Setting→Advance Setting

H1-H6タグのサイズ

 H1~H6タグのフォントがあまりに巨大なので調整したかったのですが、いくら指定すれど変わらず。クラスがついている場所とついていない場所があってあんまりクリーンじゃないみたいに思います。

  • Design→Single→General

にフォントサイズ指定の設定箇所があります。ただし見出しについては「.amp-post-title」をCSSで指定する必要があります。

CSSの独自設定

  • Design→Global→CustomCSS

FOOTERの版権表記等

  • Setting→Translation Panel

(C)XXXX~All right reserved みたいなやつです。これ、Setting→Advance Settingの場所で、フッターに書くのかと思ったのですが、どうやっても「All right reserved」が消去できず。なんと「Next」などの用語を翻訳するための設定エリアにデフォルトで「All right reserved」の文字だけが入っていました。結構疲れた。



いっぱい文句は書いてるけど、サイトはすごく速くなりました。

 PageSpeed Insightsで、モバイルは今までせいぜい12とかだったのが一気に90になりました。もくろみどおり、画像を圧縮するよりもAMP対応にしてしまった方が速度を稼ぐという点で効果がありました。でも、「Setting」内には「General」、「Design」内には「Global」、Desin>Globalの中にも更に「General」があって…みたいなのは本当に勘弁してほしいです…。

関連記事

Amazon