ワードプレスのブログをAMP対応にする方法とアドセンス広告の設定

WordPressでブログを運営していてAMPに対応させるために王道プラグイン「AMP」を使っている人向けの記事。

AMPはカスタマイズから少しデザインを変更できるけど、全体の色くらいのざっくりしたとこしかいじれない。

だからCSSでデザイン編集したかったりPHPファイルいじりたかったりしたいよね?

【広告】

AMPのデザインをCSSで編集するために

まずはFTPソフトでプラグイン「AMP」のフォルダを覗くと「templates」というフォルダがある。

そのフォルダを丸ごとコピーしてフォルダ名を「amp」にして、それを使用中のテーマ(子テーマがベター)フォルダ直下に置く。

それだけでAMPのデザインが自由にいじれるようになる。ちなみにAMPのスタイルシートは「style.php」。

AMP対応ブログににアドセンス広告を設置

コピぺして名前を「amp」に変えておいたフォルダには「single.php」というのが入っている。

これが個別記事だからここをいじればアドセンス広告を置いたり文末に関連記事を表示させたり好きにできる。

アドセンスはAMP用の記述が必要。

<amp-ad width="300" height="250"
type="adsense"
data-ad-client="ca-pub-●●●●●●●●●"
data-ad-slot="●●●●●●●●●">
</amp-ad>

●●●●●●●●●を自分のアドセンス広告の数字に変更。

iPhoneで横スクロールしちゃう

レクタングル大336pxだとiPhoneのときにはみ出たりする。だからwidthは300にしておくのがいい。

というかAMPはスマホやタブレット向けのものだから別にレクタングル大でもレクタングル中でも大差ないと思う。

それよりスマホサイトで横スクロールするとイラッとするからそこだけ気をつけるのがいいんじゃないかな\(^o^)/

AMPのCSSやPHP変更が反映されない

AMPのPHPファイルとかCSSスタイルシートに変更を加えたのに、画面をリロードしても反映されない。そんなときは。

スーパーリロード「Shift + F5」でキャッシュ削除すればすぐに反映される。

一瞬「AMPはグーグルにキャッシュが残るからそれを削除しないとデザイン変更も反映されないのかな?」とか思ったけど、そんなことはなかった。

AMP対応

AMP対応はやっぱりしておいた方がいいと思う。

ブログで扱っている話にもよるのかもしれないけど、どんな内容であれスマホで検索しているときは0.01秒でも早く表示される方がいい。

しかも検索結果に「AMP対応」とか書いてるし。

今はまだ浸透してないから「AMP?なにそれ?」状態だけど、そのうちこれが認知されるようになってくると「1位のやつよりAMP対応の2位を見よう」ってなると個人的には思う。

グーグルさんは「AMP対応だからって検索結果で上位表示されるワケではない」って言ってるけど、「ただAMPに対応していることによってユーザーのアクセスが集まった結果順位に影響することはある」とも言ってる。

色々面倒だけど早いうちからAMP対応させとくのがベストだろう。

   
コメント (0)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です