WordPressのカスタムフィールドを使ったAmazon商品紹介エリア作成方法
以前、カスタムフィールドテンプレートというプラグインを使った、記事下のAmazon商品の貼り替え方法を紹介しました。
テーマファイルをいじる必要がないため安全にカスタムフィールドのカスタマイズができるの非常に便利に使えました。
ただ、毎回記事内にショートコード入れないといけないことや記事編集画面の下に通常のカスタムフィールドとカスタムフィールドテンプレートのオプションが2つ表示されるのがなんか雑多で嫌だなーと思っていました。
そこで今回は、前回プラグインありでおこなった「カスタムフィールドからAmazon商品紹介エリアを作る方法」をプラグイン無しで表示できるようにしたので紹介したいと思います。
最終完成イメージ
カスタマイズ完成イメージです。
アドセンスは300×250サイズを横並びで配置。
右の広告のみカスタムフィールドで好きなものに変更できます。アフィリエイトバナーも配置可能ですし、自社製品のバナーを作って配置するのもいいですね。
Amazonアソシエイトはカエレバ・ヨメレバを使用。アプリ紹介記事の場合はポチレバでiTunesアフィリエイトも可能です。
カスタマイズの手順
カスタマイズは以下の手順でおこないます。
- 子テーマにcf-amazon.phpを作成する
- single.phpでcf-amazon.phpを呼び出す
- PC閲覧時のアドセンスを横並びにする
- カエレバ・ヨメレバをCSSで整える
- ポチレバをCSSで整える
- カスタムフィールドに値を入れる
子テーマにcf-amazon.phpを作成する
子テーマにcf-amazon.phpというテンプレートファイルを新しく作ります。
ファイル名は自由ですが、私はカスタムフィールド専用のファイルとすぐわかるように頭にcf-とつけています。
ファイルの中身は以下の通りです。全てコピペで大丈夫です。
<?php $cfama = get_post_meta($post->ID, 'Amazon', true);?>
<?php if(empty($cfama)):?>
<?php else:?>
<?php if(st_is_mobile()) { //モバイルの場合?>
<div style="padding-top:10px; text-align:center;">
<!-- ここに300×250のアドセンスコード -->
</div>
<?php } else { //PCの場合?>
<div style="padding:20px 0px;">
<div class="adsense-kijishita">
<script>document.write('<p style="color:#666; margin:auto; width:640px; font-size: 13px; text-align: center;">スポンサードリンク<p>');</script>
<div class="adsense-left">
<!-- ここに300×250のアドセンスコード -->
</div>
<div class="adsense-right">
<?php echo get_post_meta($post->ID , 'Affiliate' ,true); ?>
</div>
</div>
<?php } ?>
<h4>オススメ商品はこちら！</h4>
<?php echo get_post_meta($post->ID , 'Amazon' ,true); ?>
<?php endif;?>
1行目でAmazon商品のカスタムフィールドのメタデータをcfamaに保存します。
2行目でcfama（Amazon商品のカスタムフィールドの値）の中身があるかないか判断し、空の場合は2行目と3行目の間の処理をおこないます。
4行目以降でモバイルとPCで分岐させています。
モバイルの場合はアドセンスを表示します。カスタムフィールドを表示したい場合は16行目と同じものを記入してください。
22行目でカエレバ・ヨメレバ・ポチレバで生成した商品情報を表示します。
カスタムフィールドを記事に表示するかどうかはcfamaの中身がフラグになっているので、Affiliateに値があってもAmazonの値が空の場合は表示されません。
single.phpでcf-amazon.phpを呼び出す
記事ページでcf-amazon.phpを呼び出します。
カスタムフィールドを表示したい場所に以下のコードを入力してください。Lognoteでは記事下のタグの上に配置しています。
<?php get_template_part( 'cf-amazon' ); //Amazon商品紹介エリア読み込み ?>
PC閲覧時のアドセンスを横並びにする
#adsense-kijishita {
margin: 0 auto 10px;
padding: 5px 0px;
overflow: visible;
}
#adsense-left {
float: left;
margin: 0 12px 0;
padding: 0;
}
#adsense-right { padding: 0 }
#adsense-kijishita:after {
content: "";
display: block;
clear: both;
}
カエレバ・ヨメレバをCSSで整える
.booklink-box,
.kaerebalink-box {
width: device-width;
margin: 1em 0 1em;
padding: 5%;
border: double #d2d7e6;
overflow: hidden;
font-size: small;
border-radius: 2px;
}
.booklink-image,
.kaerebalink-image { margin: 0 0 15px 0; }
.booklink-image img,
.kaerebalink-image img {
display: block;
margin: 0 auto;
text-align: center;
}
.booklink-info,
.kaerebalink-info {
text-align: center;
overflow: hidden;
}
.booklink-name,
.kaerebalink-name {
font-size: 16px;
margin-bottom: 14px;
}
.booklink-powered-date,
.kaerebalink-powered-date {
font-size: 8pt;
margin-top: 5px;
}
.booklink-powered-date,
.kaerebalink-detail { margin-bottom: 5px; }
.booklink-link2,
.kaerebalink-link1 { margin-top: 10px; }
.shoplinkamazon,
.shoplinkrakuten,
.shoplinkkindle,
.shoplinkyahoo,
.shoplinkkakakucom {
width: 90%;
height: 15px;
overflow: hidden;
background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
background-color: #ffffff;
border-radius: 6px;
border: 1px solid #dcdcdc;
display: inline-block;
margin: 0 auto 5px auto;
padding: 10px 0px;
text-align: center;
}
.shoplinkamazon:hover,
.shoplinkrakuten:hover,
.shoplinkkindle:hover,
.shoplinkyahoo:hover {
background: linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color: #f6f6f6;
}
.shoplinkamazon:active,
.shoplinkrakuten:active,
.shoplinkkindle:active,
.shoplinkyahoo:active {
position: relative;
top: 1px;
}
.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkyahoo a,
.shoplinkkindle a,
.shoplinkkakakucom a {
display: block;
cursor: pointer;
text-decoration: none;
font-weight: 800;
text-shadow: 1px 1px 1px #dcdcdc;
font-size: 12px;
}
.shoplinkamazon a:hover,
.shoplinkrakuten a:hover,
.shoplinkyahoo a:hover,
.shoplinkkindle a:hover,
.shoplinkkakakucom a:hover { background: none !important; }
.shoplinkamazon a { color: #FF9901; }
.shoplinkrakuten a { color: #c20004; }
.shoplinkkindle a { color: #007dcd; }
.shoplinkyahoo a { color: #7b0099; }
.booklink-footer { clear: left; }
/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
.booklink-box,
.kaerebalink-box {
width: 90%;
margin: 20px auto;
padding: 20px;
}
.booklink-image,
.kaerebalink-image {
margin: 0 15px 0 0;
float: left;
}
.booklink-info,
.kaerebalink-info {
margin: 0;
text-align: left;
}
.booklink-name,
.kaerebalink-name {
margin-bottom: 5px;
font-size: 14px;
}
.booklink-link2,
.kaerebalink-link1 { margin-top: 10px }
.shoplinkamazon,
.shoplinkrakuten,
.shoplinkkindle,
.shoplinkyahoo,
.shoplinkkakakucom {
float: left;
width: 48%;
margin: 3px 2px 0 auto;
padding: 8px 1px;
}
}
このCSSデザインを使う場合は、カエレバのデザインはamazlet風-2を選択してください。
ポチレバをCSSで整える
/*--------------------------------
ポチレバ
---------------------------------*/
.pochireba {
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 1px 1px 3px 1px #ddd;
padding: 15px !important;
margin-bottom: 20px;
}
.pochireba .pochi_img {
box-shadow: 0 0 1px 1px #ccc;
margin-right: 25px !important;
display: block;
margin: 0 auto;
text-align: center;
}
.pochireba .pochi_info {
margin-left: 5px;
}
.pochireba .pochi_name {
text-align: center;
}
.pochireba .pochi_name a {
display: block;
font-size: 18px;
text-decoration: none;
text-align: center;
margin: 0 10px 10px;
padding: 6px;
border: 1px solid #ccc;
border-radius: 8px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
line-height: 26px;
background: -moz-linear-gradient(top, #FFF 0%, #EEE);
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
}
.pochireba .pochi_seller {
margin-bottom: 5px;
}
.pochireba .pochi_name a::after {
content: 'ダウンロードページへ';
display: block;
font-size: 15px;
color: #555;
}
/*media Queries スマホ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {
/*--------------------------------
ポチレバ
---------------------------------*/
.pochireba > a {
display: block
}
.pochireba .pochi_img {
float: none !important;
margin: 0 auto 10px !important;
}
.pochireba .pochi_name {
font-size: 17px
}
このCSSデザインを使う場合は以下の設定でコード生成してください。
※デザインはスタイル1かスタイル2で生成してください。違いは値段表記があるかないかです。
そうするとこのように表示されます。
カスタムフィールドに値を入れる
表示用ファイルとCSSの準備はできたので最後にカスタムフィールドに値を入れます。
記事編集画面上にある表示オプションからカスタムフィールドの表示にチェックを入れます。
今回はAmazonとAffiliateという名前を使用したのでこのようなカスタムフィールドを作ります。
カスタムフィールドの新規追加は「カスタムフィールドを追加」でできます。
Amazonには商品コードを
Affiliateには300×250のアドセンスコードか同サイズのアフィリエイト広告バナーコードを入力してください。
「カスタムフィールドテンプレート」はショートコードを書かないと表示されないデメリットもありますが、好きなところに表示できるというメリットもあります。
今回のカスタマイズだとショートコードの書き忘れはなくなりますし、WordPressデフォルトのカスタムフィールドを使うので管理も楽ですが、表示位置は固定されてしまいます。
各々メリット・デメリットあるので好きな方を使ってみてください。
ショートコードでカスタムフィールド表示する方法は前回の記事をご覧ください。
