none-plugin-custom-field-amazon-thumbnail

WordPressのカスタムフィールドを使ったAmazon商品紹介エリア作成方法

公開日:2017-04-17
最終更新日:

Pocket

以前、カスタムフィールドテンプレートというプラグインを使った、記事下のAmazon商品の貼り替え方法を紹介しました。

テーマファイルをいじる必要がないため安全にカスタムフィールドのカスタマイズができるの非常に便利に使えました。

ただ、毎回記事内にショートコード入れないといけないことや記事編集画面の下に通常のカスタムフィールドとカスタムフィールドテンプレートのオプションが2つ表示されるのがなんか雑多で嫌だなーと思っていました。

そこで今回は、前回プラグインありでおこなった「カスタムフィールドからAmazon商品紹介エリアを作る方法」をプラグイン無しで表示できるようにしたので紹介したいと思います。

最終完成イメージ

カスタマイズ完成イメージです。

none-plugin-custom-field-amazon-01

アドセンスは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で生成してください。違いは値段表記があるかないかです。

none-plugin-custom-field-amazon-02

そうするとこのように表示されます。

Minecraft: Pocket Edition

840円
(2017.04.01時点)
posted with ポチレバ

カスタムフィールドに値を入れる

表示用ファイルとCSSの準備はできたので最後にカスタムフィールドに値を入れます。

記事編集画面上にある表示オプションからカスタムフィールドの表示にチェックを入れます。

none-plugin-custom-field-amazon-03

今回はAmazonとAffiliateという名前を使用したのでこのようなカスタムフィールドを作ります。

none-plugin-custom-field-amazon-04

カスタムフィールドの新規追加は「カスタムフィールドを追加」でできます。

Amazonには商品コードを

none-plugin-custom-field-amazon-05

Affiliateには300×250のアドセンスコードか同サイズのアフィリエイト広告バナーコードを入力してください。

none-plugin-custom-field-amazon-06

まとめ

「カスタムフィールドテンプレート」はショートコードを書かないと表示されないデメリットもありますが、好きなところに表示できるというメリットもあります。

今回のカスタマイズだとショートコードの書き忘れはなくなりますし、WordPressデフォルトのカスタムフィールドを使うので管理も楽ですが、表示位置は固定されてしまいます。

各々メリット・デメリットあるので好きな方を使ってみてください。

ショートコードでカスタムフィールド表示する方法は前回の記事をご覧ください。

以上、「WordPressのカスタムフィールドを使ったAmazon商品紹介エリア作成方法」という記事をお届けしました。

それでは、また。

オススメ商品はこちら!

-WordPress
-,

ヤマカワ (@lognotebiz) の一言
カスタムフィールドの使い方がわかるとさらにブログカスタマイズが捗りそうです。プラグインも一つ減らすことができたのでよかった!
この記事のタイトルとURLをコピーする
WordPressのカスタムフィールドを使ったAmazon商品紹介エリア作成方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

advanced-code-editor-thumbnail

テーマ編集で行数を表示するWordPressプラグイン「Advanced Code Editor」

WordPress内でテーマを編集するとき行数表示がなくて不便だなと感じることはないでしょうか。今日はそんな悩 …

cannot-modify-header-information-thumbnail

WordPressで”Cannot modify header information”の警告が出たときの解決方法

WordPressで"Cannot modify header information"の警告が出たときの解決方法を紹介します。

custom-field-ranking-thumbnail

WordPressのカスタムフィールドを使って商品ランキングを表示する方法

アフィリエイターの間では言わずと知れた人気WordPressテーマ「AFFINGER4」 AFFINGER4で …

mouse-cursor-zoom-thumbnail

Lightboxで拡大可能な画像とわかるようにマウスホバー時のカーソルを変更する方法

ふわっと画像を拡大させるエフェクトが実装できるLightbox。今回は、拡大可能な画像とわかるように、マ...

child-theme-copy-thumbnail

WordPressの親テーマのファイルを子テーマにコピーする方法

サーバー上のファイルにアクセスするFTPソフト「FFFTP」の設定方法と使い方を解説します。WordPressはサ...


コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士

にほんブログ村 ブログブログ ブログノウハウへ

ヤマカワ
2017/8/16
子テーマのコピー方法はカスタマイズの基本ですので省略してしまいました。 新しく別ページで解説記事を...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい
ヤマカワ
2017/7/25
キャッシュの削除は試されましたでしょうか。 それでも反映されないようでしたら、!important...
haruboshi
2017/7/24
全く反映されません。