もうAMP化が騒がれて2年くらいになるのでしょうか・・・。それぞれのテーマによっては標準で対応しているものもありますね。ですが、対応していてもカエレバヨメレバのアフィリエイトコードの変換にはうまくできていないものもあります。そこでAMP化したぺージにおいて表示させる方法です。
AFFINGER4Pro WordPress カスタマイズ 備忘録
AMP化したページでカエレバ・ヨメレバ・アプリーチを表示する方法
AFFINGER4Pro WordPress カスタマイズ 備忘録
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で大丈夫だと思われます。
おすすめの記事一部広告
- 車のキーナンバー確認方法。キーレス紛失や壊れた時27
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法14
- アイドリングストップシステム異常警告灯表示対処方法7
- アルミテープチューン貼る場所で燃費向上と走行性能アップTOYOTAの特許を試してみた4
- エンジンオイル漏れ止めのおすすめはPlus91評価レ PV4
- 車のハンドルが重い時にできる対処方法4
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく4
- カーメイトのエンジンスターターでエラー15表示と対処方法3
- PITWORKエンジンリフレッシュのレ PV効果ありワコーズRECSに似ている3
- シガーライターがない車にシガーライターソケットの付け方と増設方法3
おすすめ!!
世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!
あなたにおすすめ
安否情報確認方法、熊本県熊本地方で震度7地震について
本日、(日付が変わってしまったので昨日)21:26分頃に熊本県にて震度7という大きな地震がありました。まだ、時間も経っていなくさらに夜で暗いということもあって、 正確な被害情報は全ては収集できていない…
AFFINGER4Pro WordPress カスタマイズ 伝えたいこと 備忘録
AFFINGER4で初投稿とその機能豊富さを紹介しきれない…。
ふうε=(・ρ・*) フゥ、この度、やっとこさ~の思いでテーマをAFFINGER4に変更しました。 以前のSTINGER6で結構な割り合いでカスタマイズしまくっていたので、簡単にテーマの変更がなかなか…
米FTCアマゾンを独禁法違反疑いで提訴と日立家電品正規取扱店制度
具体的には、アマゾンが主力事業のネット通販で出店している小規模事業者に対して高額な手数料を請求したほか、事業者が他の競合サイトで安く販売した場合、アマゾンのサイトでは検索しづらくしたなどと指摘していま…
20周年記念サイトの続集編
先日、 20周年記念サイトや30周年記念のBIGLOBE(前進企業から数えて)の紹介をしました。 その続きとなります。 これらの他にも未知のサイトや企業など多くあるかもしれませんが、 現在、知りうる限…
無料おすすめな画像編集オンラインソフトPixlr(ピクセラ)がすごいっ
画像編集ソフトと言えばフォトショップ(Photoshop)が超メジャーなアプリケーションかと思われます。他にもオススメとしてはGIMPや名前は今回紹介するタイトルと同じですが、ちょっと違うたしかピクセ…
よろしかったらシェアよろしくお願いします。
- X
Deprecated: Automatic conversion of false to array is deprecated in /home/variouspress/infovarious.com/public_html/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2924
Twitter - Share
Deprecated: Automatic conversion of false to array is deprecated in /home/variouspress/infovarious.com/public_html/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2924
Share - Pocket
Deprecated: Automatic conversion of false to array is deprecated in /home/variouspress/infovarious.com/public_html/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2921
Pocket - Hatena
Deprecated: Automatic conversion of false to array is deprecated in /home/variouspress/infovarious.com/public_html/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2921
Deprecated: Automatic conversion of false to array is deprecated in /home/variouspress/infovarious.com/public_html/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2921
2
[…] (2018/11/21)結局、以下のブログ記事を参考にして、functions.phpに手を加えることにしました。 AFFINGER5の場合は親テーマのfunctions-amp.phpを子テーマにコピーした上で、そのコピーに追加記 […]