Categories: ブログ運営

WordPressプラグインAMP for WPの使い方。多機能&デザイン重視!

新作のAMP対応プラグイン「AMP for WP」はAdsense広告枠、スライドグローバルナビ、シェアボタン、関連記事機能、新着記事、サイドバー機能(調査中)と至れり尽くせりのプラグインです。

これがあれば、企業メディアで見たあのデザインが簡単にAMPページで実現できます!

実例と画面付きで使い方をご紹介。

 






フリーランスライター。元大手SIerでSEを7年(金融、製造など企業向けソリューションの提案・設計)、大手メーカーでハードウェア開発(人工衛星)を3年。仮想通貨参入は2018年1月。IT知識を生かしたライトな解説が得意。30代後半/海外旅行/サッカー/F1/1歳児育児中。

応援はこちら(XRP)  rNBnK81H3izME5LZHkHpt8Ltjy6pefQ9Aq

プロフィール仕事実績・依頼

AMPプラグイン「AMP for WP(プラグイン名はAccelerated Mobile Pages)」

こんにちは、仮想通貨ライター(@lipton_milk999)のフェニックスA子です。

今回はWordpressプラグイン「AMP for WP」についてご紹介します。(プラグイン一覧での名称は「Accelerated Mobile Pages」と表示されています。)

こちらのプラグインは現在ベータ版(v1.0以前、私のは0.9.86.2)なので、まだ一部完全ではないところはありますが、十分に使える内容となっています。

このページのAMP版はこちら。

モバイルでこのページを見ている人は、もしかしたら既に「AMP for WP」プラグインによる表示で見ているかもしれませんね?このページのことです。

ヘッダーバーが水色じゃなければ、うちのAMPページです。

 

「AMP for WP」表示例

スマホから見た画像をスクショしたものを貼ります。

 

ロゴタイトルは、設定画面から指定可能。タイトルなどの文字は、最初の状態ではデカすぎたので、CSSで綺麗に見えるよういじっています。

AMPの場合は導入がめんどくさい追加CSSファイルも、プラグインの設定画面から書けるようになっていますよ。

そして、横にスライドできるグローバルナビ(ヘッダーのメニュー)が。これ、AMPに欲しかったやつ!
(この部分は、Adsense広告のバグにより(後述)動かないことがあります。)

画面の下には、常に表示されているシェアボタンが(取り外し可能)。

 

 

こちらは、見出し本文フォント追加CSSに書いて装飾した本文画面です。Googleフォントは、設定画面からGoogleフォントのAPIキーを入れることで使えるようになります。

(フォントの指定はCSSファイルからです。)

 

 

記事下には「新着記事」「関連記事」の2つが。これもAMPプラグインで入れてるんだと思います、多分。

 

テーマが複数用意されている【Design->Themes】

 

AMP for WPでは、あらかじめテーマが用意されています。現在は4種類のようです。

私が使っているのは「Swift」です。横にスライドするグローバルメニューがとても良い。
某、企業メディアがおんなじの使ってたので、「あのサイトと同じのタダでつかえるんや?!」ってなりました。

4種類のテーマはこちらです。

 

 

このプラグインは有料コンテンツもあるようなので、今後はもっと増えるかもしれませんね。

有料でもいいから増やして欲しいところ。

 

AMP for WPは設定画面からあらゆることができる

「AMP for WP」の良いところは、設定画面からなんでも設定できることです。

逆にいうと、普通のAMP対応したテーマに比べると、ソースコードを直接いじるのはちょっと難しいと思います。

設定画面はこのような感じです。

 

左側にずらっとメニューが並んでいます。ブラックアウトしていますが、押したらきちんと動きます。(表示バグですかね・・・)

ブログタイトルのロゴの設定もこちらからやってます。

他にも、これは!というものを紹介していきます。

 

Google Adsense広告枠(6個)【Setting->Advertivement】

 

個人的に一番推したいのがこれ!(ただし現在バグあり・・・個人的に対処済み。)

アドセンスコードを入れるだけで、所定の位置に貼れます。

6つの枠があるのですが、上から順に紹介します。

  • #1 Below the Header (SiteWide) :ヘッダー下(サイトワイド)
  • #2 Below the Footer (SiteWide) :フッター下(サイトワイド)
  • #3 Above the Post Content (Single Post):投稿上
  • #4 Below the Post Content (Single Post):投稿下
  • #5 Below The Title (Single Post):タイトル下
  • #6 Above the Related Posts (Single Post):関連記事上

 

最後の「関連記事上」には、私はAdsenseの関連コンテンツ広告を入れています。ただ、サイズの設定がいいのがないので「300×600」を選ぶといい感じでしょう。

私はソースコードを書き換えてそこを「336×600」にしてます。

後ほど紹介しますが、この「アドセンス広告設定」にバグがあって値が入らない場合があるので、ガチャガチャいじっててAMPエラーがとれなくなったり、画面が押せなくなったら(クリックできない)思い出してください。

 

Google Analytics トラッキングコード【Setting->Analytics】

 

簡単に設定できます。

 

SEOプラグイン【Setting->SEO】

 

All in One SEOを選ぶだけです。終了。他にはYoastってのがありました。

 

Social(シェアボタン)【Design->Social】

 

SNSシェアボタンを設定できます。対応している種類はかなり多く、GithubはRedditまである。

ガジェット系や仮想通貨界隈の人には嬉しいんじゃないでしょうかね。

 

その他、サイドバー機能など(調査中)

サイドバー機能があるようです。ちょっといじったんですけど普通にモバイルで見ても表示されなかったので、タブレットなどを想定してるのかもしれません。

PCでテストとしてAMPページを見ると、確かにサイドバーらしきものが表示されてました。

 

Adsense広告表示バグについて

Adsense設定枠で色々いじっていると、内部的に「width=””」と 「height=””」 の枠が空っぽになってしまう場合があります。

その場合、次のような不具合が起こります。

  • グローバルナビ(横スライド)が動かない
  • 記事中のリンクが1つも押せなくなる
  • 画面タップがまったくきかなくなる
  • AMPテストツールam-ads の width=””に不適切な値が、みたいなエラーがでる

 

現在のプラグインのバージョンは(0.9.86.2)です。

原因は、広告枠のサイズ指定(プルダウンから336×280などを選ぶところ)の部分をいじっているうちに値が空になってしまうことです。再指定で治るかもしれませんが、キャッシュが残ってたりすると治りません。

対策は、一番良いのはバージョンアップを待つことでしょう。

その場合は、残念ですがAdsenseの広告はオフにするか(広告ごとにOn/Offができる)、あるいはキャッシュをクリアしたり広告をサイド設定したりしてきちんと値が入るか努力してみてください。

私は待てなかったのでプラグインのソースを勝手に変えました。

 

プラグインのソースのいじり方(上級者向け、自己責任)

これをやって万が一失敗すると、WPごと動かなくなり、管理画面すら表示できなくなります

巻き戻しもできなくなって積むので、【FTPソフトでファイルのバックアップをとってロールバック(上書き更新)できる人しかやらないほうがいいです。】この意味がわからな人もやめたほうがいいです。

修正するファイル:template > features.php

662行目の elseifの後にelseを追加 値は適当なものに設定(よく使うレクタングル大あたり)

else {
		          	$advert_width  = '336';
					$advert_height = '280';
				}

 

elseifしかないせいだと思われます。

ついでに私は、使っていない枠の値を書き換えて336×600と入れて関連コンテンツ枠として使っています。

 

AMP for WPのCSSカスタマイズ方法【Design->Global】

 

見出しやフォントの変更など、追加CSS枠から一通りのことができます。

注意
ちなみに、ソースコードはブログ自体を右クリック禁止にしていてコピペできないようになってます。 コピペしたい場合は、この章の最後にまとめている「カスタマイズ例(Github)」の右下の「view raw」を押すと、別ウィンドウにソースコードが表示されるので、そちらから持って行ってください。

 

本文フォントの変更

/* 本文フォント */
/* SettingからGoogleフォント設定必要 */
body {
	font-family: 'Titillium Web', sans-serif;
}

Googleフォントを使用したい場合は、先にSettingから設定する必要があります。

font-familyの ‘Titillium Web’, sans-serif のとこには、好きなフォントを入れてください。

AMPでは@importは使えません。

見出し

/* 見出し */
.cntn-wrp h2 {
    padding: 1em 0.5em 1em 1em;/*文字周りの余白*/
    color: #010101;/*文字色*/
    background: #eaf3ff;/*背景色*/
    border-bottom: solid 3px #516ab6;/*下線*/   
    margin-bottom: 1em;/*下のスペース*/ 
}

.cntn-wrp h3 {
    padding: 0.5em 0.5em 0.5em 0.5em;/*文字周りの余白*/
    color: #010101;/*文字色*/
    background: #ffffff;/*背景色*/
    border-left: solid 5px #516ab6;/*左ライン*/ 
    margin-bottom: 1em;/*下のスペース*/ 
}

タイトル文字

/* タイトル */
.cntr h1 {
font-size:20px;
color: #395285;
line-height: 1.4; /*1行の高さ*/
}

タイトルがめちゃめちゃ大きくて行間もあったので、小さくして行間を狭くし、色をつけました。

本文文字

/* 本文文字 */
.cntn-wrp p {
    font-size:16px;
}

引用枠などblockquate要素の文字サイズ

/* 引用本文文字 */
blockquote p{
    padding: 1em;
    background: #eeeeee;
    font-size: 15px;
    font-weight: normal;
    font-style: italic;
}

目次などのリスト

/* リスト(目次など) */
li {
    font-size:15px;
}

記事下の関連記事、新着記事

/* Related Post(AMPプラグイン表示) */
.rlp-cnt div {
    font-size:16px ;/* 効いてない */
}

/* Recent Post(AMPプラグイン表示) */
.fsp-cnt h2 {
    font-size:16px ;
}

すいません、関連記事の文字サイズ指定はなぜか効いてません。

カスタマイズ例

実際に使っているファイルです。動かないものもコメントつけて入ってたりします・・・。

注意
ちなみに、ソースコードはブログ自体を右クリック禁止にしていてコピペできないようになってます。 コピペしたい場合は、以下のソースコードの右下の「view raw」を押すと、別ウィンドウにソースコードが表示されるので、そちらから持って行ってください。

 

 

まとめ

期待のAMPプラグイン「AMP for WP」についてご紹介しました。

こちらのプラグインは、この他にも有料機能がいろいろとあるようです。今後のバージョンアップが待ち遠しいですね、

よかったらシェアお願いします。

フェニックスA子

フリーランスライター。元大手SIerでSEを7年(金融、製造など企業向けソリューションの提案・設計)、大手メーカーでハードウェア開発(人工衛星)を3年。仮想通貨参入は2018年1月。IT知識を生かしたライトな解説が得意。30代後半/海外旅行/サッカー/F1/1歳児育児中。 応援はこちら(XRP)  rNBnK81H3izME5LZHkHpt8Ltjy6pefQ9Aq プロフィール仕事実績・依頼

Recent Posts

フェニックスA子の長文箇条書きプロフィール(ブロガー用)

「常に死ぬ1年前」みたいな人、フェニック…

3週間 ago

Web制作を学ぶための計画と書籍あつめ【38からのWebエンジニア②】

38歳からのWebエンジニア、準備中のフ…

4週間 ago

【38からのWebエンジニア①】Webライター中断して、Web制作を学ぼうと思う

フェニックスA子です。唐突ですが、38歳…

1か月 ago