Loading…

記事内にプロモーションが含まれています。

AFFINGER4Pro WordPress カスタマイズ 備忘録

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

AMP画像

所要時間目安:5

This session is using  IPv4  is established in

この記事は2018年7月20日のものです。現在は状況が異なる可能性がありますのでご注意ください。

AFFINGER4Pro WordPress カスタマイズ 備忘録

目次に行く・戻る

メルカリ招待コード:

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

アドセンス336pxPC閲覧記事下表示1つ目コード


この記事を読む方へのオススメ


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="(https:)?\/\/ecx.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);
//カエレバ・ヨメレバの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="(https:)?\/\/thumbnail.image.rakuten.co.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="//thumbnail.image.rakuten.co.jp', $amp_the_content);
// //カエレバ・ヨメレバのYahoo!ショッピング商品画像にwidthとhightを追加する
$amp_the_content = preg_replace('/ src="(https:)?\/\/item.shopping.c.yimg.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="https://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で大丈夫だと思われます。

あなたにおすすめな関連記事

ブログカード

Stinger6 Stinger7 WordPress カスタマイズ

WordPressブログカード作成方法

昨今、ShereHTMLでのリンク作成がここ数年メジャーでしたが、 WordPressやはてなブログにおいてはブログカードなるものが出てきました。 サイト内リンクや外部サイトリンクのサイトがカードみた…

もっと読む

インフィード広告アドセンス

パソコン

PC 伝えたいこと 備忘録

パソコンから異音の原因は…。ガラガラとかウィーンとかカラカラとか…。

多くの方はパソコンは長年使用すると思います。 そんな中、 カラカラとかガラガラという異音がする時があると思います。とはじめに異音の原因を解決するおすすめな方法がエアダスターによる埃の除去です。ちなみに…

もっと読む

インフィード広告アドセンス

SMAP解散

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

SMAP解散撤回してくれないかな…。SMAPロスは中居君がなくしてくれるかな…。

言わずとも知られている国民的アイドルのSMAPが今年2016年12月31日で、解散してしまう…。1世代でもなく2世代、中には3世代にも渡ってファンです。 という方々も多いのではないでしょうか?ファンで…

もっと読む

インフィード広告アドセンス

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

DAIHATSU全車販売停止。軽自動車のシェア33%国内外全ての車種が対象

以前のDENSO製の燃料ポンプのリコール情報に関しても、いまだに影響が拡大している中で今度は軽自動車の名門でもあるダイハツ工業(DAIHATSU)による実証実験不正?により全車種の国内のみならず国外へ…

もっと読む

インフィード広告アドセンス

Windows10アップグレードキャンセル方法

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

Windows10アップグレードキャンセル方法をMicrosoft正式に公開

マイクロソフト(Microsoft)によるWindows10へのアップグレード攻撃?と通知が無償アップグレード期間残すところ約2ヶ月となったところで、3月ころから勝手にWindows10になっていた(…

もっと読む

インフィード広告アドセンス

カエレバのデザイン選択画像

カスタマイズ カスタマイズ ツール 伝えたいこと

カエレバ・ヨメレバのカスタマイズCSS表示でズレないようにする方法

カエレバ・ヨメレバのサービス提供者であるかん吉さんより、正式にサービス提供方法?がAmazonから国内の市場に協力?することやAmazonのPA-APIの仕様変更?により、楽天(国内)メインに仕様変更…

もっと読む

AFFINGER4Pro, WordPress, カスタマイズ, 備忘録」同じカテゴリーの記事一覧

おすすめの記事一部広告

お小遣い稼ぎにアンケート。

Multiplex 広告

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

Total266


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる
  1. […] (2018/11/21)結局、以下のブログ記事を参考にして、functions.phpに手を加えることにしました。 AFFINGER5の場合は親テーマのfunctions-amp.phpを子テーマにコピーした上で、そのコピーに追加記 […]

comment

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください