整体師がWordPressテーマ作りました

Healerは、スマホ&タブレット対応・SEO対策済みの整体院・サロン専用テーマです。

お客様の声やWeb予約カレンダー表示機能など便利機能が搭載されています。

公式サイト

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

none-plugin-custom-field-amazon-thumbnail

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

custom-field-affiliate-banner-thumbnail
今回はWordPressのカスタムフィールドを活用して記事下の広告エリアをカスタマイズする方法を紹介します。 カスタマイズの経緯 私はこ

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

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

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

最終完成イメージ

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

none-plugin-custom-field-amazon-01

アドセンスは300×250サイズを横並びで配置。

右の広告のみカスタムフィールドで好きなものに変更できます。アフィリエイトバナーも配置可能ですし、自社製品のバナーを作って配置するのもいいですね。

Amazonアソシエイトはカエレバ・ヨメレバを使用。アプリ紹介記事の場合はポチレバでiTunesアフィリエイトも可能です。

参考商品紹介ブログパーツ カエレバ

カスタマイズの手順

カスタマイズは以下の手順でおこないます。

  1. 子テーマにcf-amazon.phpを作成する
  2. single.phpでcf-amazon.phpを呼び出す
  3. PC閲覧時のアドセンスを横並びにする
  4. カエレバ・ヨメレバをCSSで整える
  5. ポチレバをCSSで整える
  6. カスタムフィールドに値を入れる

子テーマに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で整える

このCSSデザインを使う場合は、カエレバのデザインはamazlet風-2を選択してください。

ポチレバをCSSで整える

この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デフォルトのカスタムフィールドを使うので管理も楽ですが、表示位置は固定されてしまいます。

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

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

custom-field-affiliate-banner-thumbnail
今回はWordPressのカスタムフィールドを活用して記事下の広告エリアをカスタマイズする方法を紹介します。 カスタマイズの経緯 私はこ
none-plugin-custom-field-amazon-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

Gravatarに登録すると、お好きな画像をアバターに設定できます。