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化)な

関連記事一部広告

スポンサーリンク

+ クリックで展開します

おすすめ!!

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

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

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

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

関連記事

WordPress不具合

WordPress 不具合

WordPress4.4ビジュアルエディタで見出しタグ挿入不具合

WordPressにおいて、 ビジュアルエディタとテキストエディタの切り替え時に、 勝手に改行されるなどの不具合はあったということは調べてわかっていました。 ですが、 ちょっとしたプラグインにて対応可・・・続きを読む

ポケモンGOスクリーンショット

Android iPhone SNS インターネット スマホ セキュリティ ポケモンGO 伝えたいこと 備忘録 時事ネタ

ポケモンGO攻略どころではないむしろ注意が必須!!危ないと思う…。

昨日(2016年7月22日)日本時間の午前10時にポケモンGOが日本においても配信されました。 そんな人気?急上昇中?なスマホアプリこと「ポケモンGO」ですが、 子供のみならず大人でも注意が必要かと思・・・続きを読む

東京オリンピックパラリンピック

伝えたいこと 備忘録

東京オリンピック・パラリンピック開催!?しちゃうしかないの?しちゃって良いの?するしかないの?

もう以前に記事にしてから早いもので来年の夏には東京オリンピック・パラリンピックが開催予定となっています。 東京オリンピック開催日まであと何日?リオ五輪の開催日までと共に (アイキャッチ画像出典元毎日新・・・続きを読む

除草剤除草王

伝えたいこと 備忘録 時事ネタ

除草剤使い方とおすすめは除草王かラウンドアップもしくはネコソギ

除草剤の安全な使い方をご存知ですか?除草剤はとても便利ですが、除草剤の効果には続く日数や、ネコソギ取れるタイプがあります。 日差しが強いこの季節、ご自宅にお庭や畑がある方は、止めどなく生えてくる生命力・・・続きを読む

目次に戻る

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



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

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

言えないことはTwitterで!!



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

izumi

プロフィールページ詳細

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

Follow Me !

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