AMP化したページでカエレバ・ヨメレバ・アプリーチを表示する方法

投稿日:


本日の人気記事BEST10

所要時間目安: 約 5

AMP画像

AFFINGER4Pro WordPress カスタマイズ 備忘録

もうAMP化が騒がれて2年くらいになるのでしょうか・・・。それぞれのテーマによっては標準で対応しているものもありますね。ですが、対応していてもカエレバヨメレバのアフィリエイトコードの変換にはうまくできていないものもあります。そこでAMP化したぺージにおいて表示させる方法です。



スポンサーリンク

目次に戻る

AMP化したページでカエレバヨメレバを表示させる具体的な方法です。

注意)

functions.phpをいじるので必ずバックアップしてからにしてください。

結論から記述します。

以下のコードをAMP用のfunctions.phpが別にある場合はその子テーマに追加で記述します。

function convert_content_for_amp($amp_the_content){
if ( is_single() ) {//投稿ページ

//カエレバ・ヨメレバのAmazon商品画像にwidthとhightを追加する
$amp_the_content = preg_replace('/ src="(http:)?\/\/ecx.images-amazon.com/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="http://ecx.images-amazon.com', $amp_the_content);
//カエレバ・ヨメレバのAmazon商品画像にwidthとhightを追加する(SSL用)
$amp_the_content = preg_replace('/ src="(https:)?\/\/images-fe.ssl-images-amazon.com/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="https://images-fe.ssl-images-amazon.com', $amp_the_content);
// //カエレバ・ヨメレバの楽天商品画像にwidthとhightを追加する
$amp_the_content = preg_replace('/ src="(http:)?\/\/thumbnail.image.rakuten.co.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="http://thumbnail.image.rakuten.co.jp', $amp_the_content);
// //カエレバ・ヨメレバのYahoo!ショッピング商品画像にwidthとhightを追加する
$amp_the_content = preg_replace('/ src="(http:)?\/\/item.shopping.c.yimg.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="http://item.shopping.c.yimg.jp', $amp_the_content);

//アプリーチの画像対応
$amp_the_content = preg_replace('/<img([^>]+?src="[^"]+?(mzstatic\.com|phobos\.apple\.com|googleusercontent\.com|ggpht\.com)[^"]+?[^>\/]+)\/?>/is', '<amp-img$1 width="75" height="75" sizes="(max-width: 75px) 100vw, 75px"></amp-img>', $amp_the_content);
$amp_the_content = preg_replace('/<img([^>]+?src="[^"]+?nabettu\.github\.io[^"]+?[^>\/]+)\/?>/is', '<amp-img$1 width="120" height="36" sizes="(max-width: 120px) 100vw, 120px"></amp-img>', $amp_the_content);

}
return $amp_the_content;
}
add_filter('amp_the_content','convert_content_for_amp', 999999999);

 

以上でAMP化したページでカエレバヨメレバのアフィリエイトが表示されるようになります。

まとめです。

そのことにより、
せっかくAMP化したページがあってカエレバヨメレバのアフィリエイトができないということがなくなると思われます。

上記の変換(Convert)のみですと表示におそらく乱れが出ると思われますので、各々でCSSにおいて調整してください。

参考に私の一般的なAMP化したページにおいてカエレバヨメレバのCSSも記載しておきます。

AMP化したページでのカエレバ・ヨメレバのCSSです。

/************************************
** カエレバ・ヨメレバ
************************************/
.booklink-box,
.kaerebalink-box,
.pochireba {
  border: medium double #ccc;
  border-radius: 5px;
  font-size: small;
  margin: 20px auto;
  overflow: hidden;
  padding: 25px 25px 18px;
}

.kaerebalink-image,
.booklink-image{
  width: 85px;
  float: left;
  margin-top: 4px;
}

.kaerebalink-link1 amp-img{
  display: none;
}

.booklink-name,
.kaerebalink-name {
  font-size: 16px;
  line-height: 1.3em;
}

.kaerebalink-powered-date,
.booklink-powered-date{
  font-size: small;
}

.kaerebalink-link1 div,
.booklink-link2 div {
  background: #ffffff linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%) repeat scroll 0 0;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  float: left;
  font-size: 12px;
  font-weight: 800;
  margin: 7px auto;
  padding: 10px 1px;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 1px #dcdcdc;
  width: 100%;
}

.kaerebalink-link1 div:hover,
.booklink-link2 div:hover {
    background: #f6f6f6 linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%) repeat scroll 0 0;
}

.kaerebalink-link1 div a,
.booklink-link2 div a{
  text-decoration: none;
}

.booklink-footer {
    clear: left;
}
.shoplinkamazon a {
    color: #ff9901;
}
.shoplinkrakuten a {
    color: #c20004;
}
.shoplinkkindle a {
    color: #007dcd;
}
.shoplinkkakakucom a {
    color: #314995;
}
.shoplinkyahoo a {
    color: #7b0099;
}
.shoplinkseven a {
    color: #000;
}
.shoplinkehon a {
    color: #0086cd;
}
.shoplinkkino a {
    color: #004097;
}
.shoplinkjun a {
    color: #1c2c5e;
}
.shoplinktoshokan a {
    color: #27b5e9;
}
.shoplinkpsstore a {
    color: #003791;
}

/************************************
** BabyLink
************************************/
.babylink-box{
  overflow: hidden;
  font-size: small;
  zoom: 1;
  margin: 1em 0;
  text-align: left;
  border: medium double #ccc;
  border-radius: 4px;
  padding: 10px;
}
.babylink-image{
  float: left;
  margin: 0px 15px 10px 0px;
  width: 75px;
  height: 75px;
  text-align: center;
}
.babylink-image img{
  border-top: medium none;
  border-right: medium none;
  border-bottom: medium none;
  border-left: medium none;
}
.babylink-info{
  overflow: hidden;
  zoom: 1;
  line-height: 120%;
}
.babylink-title{
  margin-bottom: 2px;
  line-height: 120%;
}
.babylink-manufacturer{
  margin-bottom: 5px;
}
.babylink-description{
  margin-top: 7px;
}

参考になりましたら幸いです。

追記です。

$amp_the_content

の部分はご自分が使用しているテーマに合わせて変えてください。

一般的には、$the_contentで大丈夫だと思われます。

スポンサーリンク

表示例としましては以下のような感じになります。

AMP化したページでカエレバヨメレバ表示例1 AMP化したページでカエレバヨメレバ表示例2

画像が小さいのはご愛嬌でお願い申し上げます。

参考サイト)

先日公開させていただいた記事(:AMP化する方法プラグインなしで対応してみる)でWordPressにおいてプラグインを使用しないでなんとかAMP対応できないかなぁ。と思い試行錯誤中
今年の初め頃にGoogleがスマホやモバイルユーザーに特化したサイト表示ができるようになるAMPというものを発表しました。 その後もHTTPS everywhere(SSL化)な

-AFFINGER4Pro, WordPress, カスタマイズ, 備忘録

関連記事一部広告

スポンサーリンク

+ クリックで展開します

おすすめ!!

加圧シェイプで24時間無意識運動状態が可能!! 引き締め効果で魅力的なシルエットをサポート!! 運動している時だけでなく、仕事やプライベート就寝中にも!! 通気性がよく、体の動かしやすい伸縮性のある素材です!! 常に体が引き締まって、着心地いい!! 毎日着たい方用にセットも充実!!

女性必見のバストアップにおすすめ!!

マンガでの商品説明を販売ページに採用しています。 商品のメリットや良さが伝わりやすいです。 ★知名度と信頼度!ニュースアプリや芸能人ブログでも話題! (インスタグラム SmartNews yahoo アメーバ crooz 楽天) ●知名度が高く購入率の高い商品です。 ●ニュースサイトの紹介でも話題となり、有名タレント、モデル等にも使用して頂きブログなどでも紹介されている信頼度の高い商品です。 ●まとめ買いが多いのが特徴です。

関連記事

アイキャッチ画像自動設定

WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

アイキャッチ画像を設定し忘れないように自動で設定する方法

WordPressやFC2ブログなどで、アイキャッチ画像を設定しなければならないのは意外と手間ですよね。 以前に、アイキャッチ画像を設定し忘れた時にランダムに表示させる方法を記事として紹介しました。 ・・・続きを読む

年末年始渋滞予想

メンテナンス 伝えたいこと 備忘録 旅行 時事ネタ

年末年始の渋滞予測・渋滞予想は、名神・東名は1月2日、3日がピークで55km…。

さてさてもうそろそろ、年末年始の帰省ラッシュ時期に近づいてきました。 年に幾度となくこの帰省ラッシュという言葉が踊るのでしょうか。 まずは今回のように年末年始、そして夏のお盆時期の会社が夏休みの時期が・・・続きを読む

CSSファイル圧縮

カスタマイズ ツール 伝えたいこと 備忘録 時事ネタ

サイト表示速度を高速化とAMPの為にCSSファイルをMinify圧縮する方法

えー、ブログやホームページを運用されている方であれば、一度は気にしたことのあるはずのファイル圧縮についてです。 英語ですと、「Minify」と言います。 中でもAMP対応する場合には、CSSのファイル・・・続きを読む

Stinger6右サイドバー上に別広告

AdSense Stinger6 WordPress カスタマイズ

Stinger6右サイドバー上に別広告を表示する方法

はぁ…。 やっと、できた!! って何がという感じですが、 とても使い勝手の良いテーマStingerの最新版Stinger6を選ばせて頂いて、 四苦八苦の日々が続いていたわけですが、 目次に戻る シガー・・・続きを読む

目次に戻る

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



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!



  • この記事を書いた人
  • 最新記事

izumi

プロフィールページ詳細

はじめまして、izumiの旦那です。医療ミスにより長胸神経麻痺になってしまい若干の障害がありブログをさせていただいています。共同運営(しばらくは単独になると思います。)になりつつありますがよろしくお願いいたします。

Follow Me !

Copyright© WordPressデビュー津々浦々 , 2019 All Rights Reserved Powered by AFFINGER5.