モバイルでの表示高速化のためにこのサイトにAMP for WP（Accelerated Mobile Pages）を導入してみました。
このプラグインのいいところはAMPサイトにアドセンスを簡単に設定できるところ！
とっても嬉しいプラグインですが設定画面が英語なので導入にハードルが高い方も多いと思いますので早生まれ母が設定した内容をご紹介したいと思います。また、一部AMPサイトの日本語化も行っています。
Setting -> General
先頭にでるサイトロゴ部分をロゴ画像にすることができます。ロゴ画像を設定しなくても良い方は飛ばします。
推奨サイズは１９０×３６。
LogoのUploadからロゴ画像をアップロード後、Resizeにチェックを入れて画面下にある「Save Changes」で保存します。
Setting -> Advertisement
お待ちかね、アドセンスの設定画面です。
AD1～AD6までの枠が設定されていて、AD1とAD2はTOPページと投稿ページ両方に、AD3～6は投稿ページのみに表示されます。表示位置は以下の通り。
設置したい場所が決まったらその番号の所にアドセンスコードを記入していきます。例えばAD3の位置に入れたいと思ったら「AD #3」のチェックを入れて表示される項目を入力していきます。
私はレスポンシブ広告を作成して登録しましたが「Responsive Ad unit」にもチェックを入れておきました。
入力が終わったら画面下にある「Save Changes」で保存します。
Setting -> Analytics
Google Analyticsの設定です。
「Google Analytics」にチェックを入れて表示された「Tracking ID」にトラッキングコードを入力して画面下にある「Save Changes」で保存します。
Setting -> Translation Panel
AMPサイトを日本語化するために使います。
このプラグインでは殆どが英語で表示されてしまうので一般的には「次へ」と表示するような所でも「next」と表示されます。
見る人に優しくないので最低限の所を日本語化しました。
| 項目名 | 設定内容 |
| Breadcrumbs Homepage Title | HOME |
| Show more Posts | 次の記事一覧を見る |
| Show precious Posts | 前の記事一覧を見る |
| Related Post | 関連記事 |
| Recent Posts | 最新の記事 |
| Next | 次の記事 |
| Previous | 前の記事 |
| Page | ページ |
| ago | 前 |
Design -> Global
このプラグインで表示されるサイトは普段使っているWordpressテーマのCSSは読み込まれないため、こちらのプラグインでもCSSを設定する必要があります。
特に見出し等でCSSを使っている方は必ず設定しましょう。
AdvancedのCustom CssにCSSを記入して画面下にある「Save Changes」で保存します。
Color SchemeのGlobal Color Schemeは投稿記事のタイトルの色になっています。デフォルトは真っ青な青なので気になる方はここで色を変更しましょう。
ナビゲーションメニュー＆サイドメニューの設定
このプラグインではヘッダー部分のナビゲーションメニュー、サイドメニュー、フッターメニューを表示させることが出来ます。
これらはプラグインの設定ではなく、Wordpressno「外観」⇒「メニュー」から設定します。
メニューの位置の所に
- AMP Menu
- AMP Footer Menu
が追加されています。「AMP Menu」に追加するとヘッダーとサイドメニューに表示されます。「AMP Footer Menu」に追加するとフッターメニューに表示されます。
プロフィールの設定
投稿ページの下の方にプロフィールが表示されています。これはプラグインの設定ではなく、Wordpressの「ユーザー」⇒「あなたのプロフィール」画面内の「プロフィール情報」と「プロフィール写真」が表示されます。
とりあえずここまで設定すればアドセンスも設定出来て最低限の見栄えにはなっていると思います！
まだまだ設定したいところがあるので随時加筆していきます。
コメントを残す