Lognote

整体師によるお役立ち情報ブログ

custom-field-ranking-thumbnail

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

2017-04-19

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

アフィリエイトならAFFINGER(アフィンガー)

AFFINGER4で特に便利な機能といえば「ランキング表示機能」ですよね。

こちらがAFFINGER4のランキング表示です。

custom-field-ranking-01

HTMLとCSSで直接書けば再現はすぐにできるのですが、記事がコードだらけで汚くなるし編集するにも大変です。

そこで今回は、カスタムフィールドを使ってのランキング表示機能を実装してみましたので、そのカスタマイズ方法を紹介します。

最終完成イメージ

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

ボタンをさらにボタンっぽく沈み込むものにしています。

HealerHealer

Healer

「Healer」は整体院・治療院・サロンサイト運営に特化したWordPress(ワードプレス)テーマです。スマホ表示完全対応!ホームページ制作のWeb知識がない方でも安心して使っていただける簡単カスタマイズ機能を標準搭載。SEO対策済み。

STINGER8STINGER8

STINGER8

Lognoteで使用中のSTINGER8です。 特別な機能はありませんが、カスタマイズ性重視の方やこれからWordPressを勉強したい方には最も適したテーマです。

AFFINGER4AFFINGER4

AFFINGER4

アフィリエイトするならAFFIGER4。 アフィリエイトタグ管理やランキングなど稼ぐための機能が盛りだくさん! SEOにも強く、本気でブログマネタイズしたい方にオススメです。 こちらから購入すると500円安くなります。

このランキングは直接コードを書いているわけではなく、カスタムフィールドに入力した値を下記のようなショートコードで呼び出しています。

[myphp file='cf-ranking']

カスタマイズの手順

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

  • 子テーマにcf-ranking.phpを作成する
  • テンプレートファイルをショートコードで呼び出せるようにする
  • デザイン用CSSを追加する
  • カスタムフィールドに値を入れる
  • 記事内にカスタムフィールドを呼び出す

子テーマにcf-ranking.phpを作成する

子テーマにcf-ranking.phpというテンプレートファイルを新しく作り、以下のコードをそのままコピペしてください。

ファイル名は自由ですが、カスタムフィールド専用のファイルとわかるように頭にcf-とつけています。

論理演算子をうまく使えばもう少しコンパクトにできそうですが、あとで見て修正しやすいように3つに分けた書き方にしました。

<?php $cfrank01 = get_post_meta($post->ID, 'rank01_name', true);?>
<?php if(empty($cfrank01)):?>
<?php else:?>
<div class="rankst-box">
<h4 class="rankh4"><span class="oukan"><img src="https://lognote.biz/wp-content/themes/stinger8-child/images/image_icon_rank01.png" alt="<?php echo get_post_meta($post->ID , 'rank01_name' ,true); ?>" width="50"/></span><?php echo get_post_meta($post->ID , 'rank01_name' ,true); ?></h4>
  
    <div class="clearfix rankst">
    <div class="rankst-l"><img src="<?php echo get_post_meta($post->ID , 'rank01_image' ,true); ?>" alt="<?php echo get_post_meta($post->ID , 'rank01_name' ,true); ?>" /></div>
    
    <div class="rankst-r"><div class="rankst-cont">
    <p><?php echo get_post_meta($post->ID , 'rank01_text' ,true); ?></p>
  </div></div>
  
  <div class="clearfix rankst">
        <?php if(post_custom('rank01_detail_url')): ?>
            <div class="rankstlink-l"><p><a href="<?php echo get_post_meta($post->ID , 'rank01_detail_url' ,true); ?>" target="_new">詳細ページへ</a></p></div>
        <?php endif; ?>
        <?php if(post_custom('rank01_buy_url')): ?>
            <div class="rankstlink-r"><p><a href="<?php echo get_post_meta($post->ID , 'rank01_buy_url' ,true); ?>" target="_new"><?php echo get_post_meta($post->ID , 'rank01_name' ,true); ?>を入手</a></p></div>
        <?php endif; ?>
        <?php if(post_custom('rank01_sales_url')): ?>
            <div class="rankstlink-c"><p><a href="<?php echo get_post_meta($post->ID , 'rank01_sales_url' ,true); ?>" target="_new">詳細はこちら</a></p></div>
        <?php endif; ?>
  </div>
</div>
<?php endif;?>

<?php $cfrank02 = get_post_meta($post->ID, 'rank02_name', true);?>
<?php if(empty($cfrank02)):?>
<?php else:?>
<div class="rankst-box">
<h4 class="rankh4"><span class="oukan"><img src="https://lognote.biz/wp-content/themes/stinger8-child/images/image_icon_rank02.png" alt="<?php echo get_post_meta($post->ID , 'rank02_name' ,true); ?>" width="50"/></span><?php echo get_post_meta($post->ID , 'rank02_name' ,true); ?></h4>
  
    <div class="clearfix rankst">
    <div class="rankst-l"><img src="<?php echo get_post_meta($post->ID , 'rank02_image' ,true); ?>" alt="<?php echo get_post_meta($post->ID , 'rank02_name' ,true); ?>" /></div>

    <div class="rankst-r"><div class="rankst-cont">
    <p><?php echo get_post_meta($post->ID , 'rank02_text' ,true); ?></p>
  </div></div>
  
  <div class="clearfix rankst">
        <?php if(post_custom('rank02_detail_url')): ?>
            <div class="rankstlink-l"><p><a href="<?php echo get_post_meta($post->ID , 'rank02_detail_url' ,true); ?>" target="_new">詳細ページへ</a></p></div>
        <?php endif; ?>
        <?php if(post_custom('rank02_buy_url')): ?>
            <div class="rankstlink-r"><p><a href="<?php echo get_post_meta($post->ID , 'rank02_buy_url' ,true); ?>" target="_new"><?php echo get_post_meta($post->ID , 'rank02_name' ,true); ?>を入手</a></p></div>
        <?php endif; ?>
        <?php if(post_custom('rank02_sales_url')): ?>
            <div class="rankstlink-c"><p><a href="<?php echo get_post_meta($post->ID , 'rank02_sales_url' ,true); ?>" target="_new">詳細はこちら</a></p></div>
        <?php endif; ?>
  </div>
</div>
<?php endif;?>

<?php $cfrank03 = get_post_meta($post->ID, 'rank03_name', true);?>
<?php if(empty($cfrank03)):?>
<?php else:?>
<div class="rankst-box">
<h4 class="rankh4"><span class="oukan"><img src="https://lognote.biz/wp-content/themes/stinger8-child/images/image_icon_rank03.png" alt="<?php echo get_post_meta($post->ID , 'rank03_name' ,true); ?>" width="50"/></span><?php echo get_post_meta($post->ID , 'rank03_name' ,true); ?></h4>
  
    <div class="clearfix rankst">
    <div class="rankst-l"><img src="<?php echo get_post_meta($post->ID , 'rank03_image' ,true); ?>" alt="<?php echo get_post_meta($post->ID , 'rank03_name' ,true); ?>" /></div>
    
    <div class="rankst-r"><div class="rankst-cont">
    <p><?php echo get_post_meta($post->ID , 'rank03_text' ,true); ?></p>
  </div></div>
  
  <div class="clearfix rankst">
        <?php if(post_custom('rank03_detail_url')): ?>
            <div class="rankstlink-l"><p><a href="<?php echo get_post_meta($post->ID , 'rank03_detail_url' ,true); ?>" target="_new">詳細ページへ</a></p></div>
        <?php endif; ?>
        <?php if(post_custom('rank03_detail_url')): ?>
            <div class="rankstlink-r"><p><a href="<?php echo get_post_meta($post->ID , 'rank03_buy_url' ,true); ?>" target="_new"><?php echo get_post_meta($post->ID , 'rank03_name' ,true); ?>を入手</a></p></div>
        <?php endif; ?>
        <?php if(post_custom('rank03_sales_url')): ?>
            <div class="rankstlink-c"><p><a href="<?php echo get_post_meta($post->ID , 'rank03_sales_url' ,true); ?>" target="_new">詳細はこちら</a></p></div>
        <?php endif; ?>
  </div>
</div>
<?php endif;?>

1行目で商品名のカスタムフィールドのメタデータをcfrankに保存します。

2行目でcfrankの中身があるかないか判断し、空の場合は表示させない処理をします。

ランキングを記事に表示するかどうかはcfrank01cfrank02cfrank03の中身(商品名)がフラグになっているので、商品名に値が入っていない場合はランキングは表示されません。

以降、画像・商品の説明・詳細ページURL・販売ページURLの読み込みと表示処理をしています。

ボタンは1つと2つで自由に変更可能

詳細ページURLと販売ページURLは値がない場合はボタンが表示されません。

左右のボタンは横並び固定となっているため、片方だけボタンが表示されるとバランスが悪くなってしまいます。

もし、ボタンを1つだけにしたい場合は、rank01_buy_urlrank01_detail_urlには値を入れず、rank01_sales_urlにだけ値を追加してください。

すると、以下のように横幅90%のボタンが1つだけ表示されます。

今回は3位まで表示するコードを紹介しています。4位、5位と増やしたい場合はくくりをコピペして数字を書き替えてください。

テンプレートファイルをショートコードで呼び出せるようにする

次に、今作成したcf-ranking.phpをショートコードで呼び出せるようにします。

以下のコードをfunctions.phpに追加してください。

//テンプレートファイルをショートコードで呼ぶ
function Include_my_php($params = array()) {
    extract(shortcode_atts(array(
        'file' => 'default'
    ), $params));
 
    ob_start();
    get_template_part($file);
    return ob_get_clean();
} 
add_shortcode('myphp', 'Include_my_php');

これで、記事内の好きな位置にランキングを表示することが可能となります。

デザイン用CSSを追加する

.clearfix {
  clear: both;
}

.rankst-box h4.rankh4 {
    border-bottom: dotted 1px #333;
    background: none !important;
    font-size: 20px;
}

.rankst-box h4.rankh4 span {
    margin-right: 10px;
}

.rankst {
    margin-bottom: 0px;
}

.rankst-box {
    margin-bottom:0px;
  width: 100%;
}

.rankst p {
    margin-bottom: 10px;
}

.rankst-l {
    text-align:center;
    padding:5px 0 20px;
}

.rankst-r {
    text-align:left;
    margin: 0;
    padding:5px 0 20px;
}

.rankst-cont p {
    margin: 0;
    padding:0;
    font-size: 15px;
}

.rankstlink-l {
    width: 100%;
    text-align: center;
}

.rankstlink-r {
    float: right;
    width: 100%;
}

.rankstlink-c {
    width: 100%;
    text-align: center;
}

/*詳細ページへのリンクボタン*/
.rankstlink-l p a,
.rankstlink-c p a {
    display: block;
    width: 100%;
    box-sizing:border-box;
    text-align: center;
    padding: 10px;
    background: #3498db;
    color: #fff;
    text-decoration: none;
    margin-right: auto;
    margin-left: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    font-weight:bold;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    box-shadow: 0 5px 0 #01709b;
}

.rankstlink-l p,
.rankstlink-c p {
    width: 90%;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-weight:bold;
    position:relative;
}

.rankstlink-l p a:hover,
.rankstlink-c p a:hover {
    -webkit-transform: translate3d(0px, 5px, 1px);
    -moz-transform: translate3d(0px, 5px, 1px);
    transform: translate3d(0px, 5px, 1px);
    box-shadow: none;
}

.rankstlink-r p a {
    display: block;
    width: 100%;
    box-sizing:border-box;
    text-align: center;
    padding: 10px;
    background: #FA5858;
    color: #fff;
    text-decoration: none;
    margin-right: auto;
    margin-left: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    font-weight:bold;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    box-shadow: 0 5px 0 #c0392b;
}

.rankstlink-r p {
    width: 90%;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-weight:bold;
    position:relative;
}

.rankstlink-r p a:hover {
    -webkit-transform: translate3d(0px, 5px, 1px);
    -moz-transform: translate3d(0px, 5px, 1px);
    transform: translate3d(0px, 5px, 1px);
    box-shadow: none;
}

/*media Queries PCサイズ(780px)以上で適応したいCSS - PCのみ
----------------------------------------------------------*/
@media only screen and (min-width: 780px) {

    /*--------------------------------
    記事内ランキング表示
    ---------------------------------*/
    .rankst {
        margin-bottom:15px;
        width: 100%;
    }

    .rankst-cont {
        margin-left: 165px;
    }

    .rankstlink-l {
        float: left;
        width: 50%;
    }

    .rankstlink-r {
        float: right;
        width: 50%;
    }

    .rankstlink-c {
        width: 100%;
    }

    .rankst-l {
        position:relative;
        z-index:2;
        float: left;
        width: 150px;
    }
  
    .rankst-r {
        position:relative;
        z-index:1;
        float: right;
        width: 100%;
        margin: 0 0 0 -150px;
    }

    /*----------------------------------
    ランク-1カラム
    -----------------------------------*/
    .rankst-r {
        float: right;
        width: 100%;
        margin: 0 0 0 -320px;
    }

    .rankst-l {
        float: left;
        max-width: 300px;
    }
}

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

記事編集画面でカスタムフィールドに値を追加していきます。

まず、記事編集画面の上部にある表示オプションの[カスタムフィールド]にチェックが入っているか確認してください。

custom-field-ranking-02

チェックが入っていれば、記事編集画面の下部にカスタムフィールドの欄が表示されます。

custom-field-ranking-03

初めて追加する場合は[新規追加]から直接名前を入力してください。

2回目以降はすでに名前が入っているので、ドロップダウンリストから名前を選択して値を追加します。

今回の記述例ですと、以下のようになります。

名前
rank01_name 商品名
rank01_image 画像URL(300×250推奨)
rank01_text 文章
rank01_detail_url 詳細ページURL(左50%)
rank01_buy_url 販売ページURL(右50%)
rank01_sales_url 詳細ページURL(ボタンを一つにしたいときに使用)

2位、3位と表示したい場合はrankのあとの数字を変更するだけです。

実際にカスタムフィールドを追加すると以下のようになります。

custom-field-ranking-04

値を変更したい場合は名前の下の更新をクリックするだけです。記事を更新する必要はありません。

記事内にカスタムフィールドを呼び出す

最後に値を入れたカスタムフィールドを記事で呼び出します。

呼び出すには冒頭で紹介した下記ショートコードを記事内に記述します。

[myphp file='cf-ranking']

これで、カスタムフィールドに記入した分のランキングがすべて表示されます。

オススメ商品はこちら!

-WordPress, アフィリエイト
-,

ヤマカワ (@lognotebiz) のヒトコト
アフィリエイト商品だけじゃなくてAmazon商品ベスト3とかでも使えそう!詳細ページは公式ホームページ、販売ページはアソシエイトとか入れるといいかも!
この記事のタイトルとURLをコピーする
WordPressのカスタムフィールドを使って商品ランキングを表示する方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

custom-post-category-thumbnail

WordPressで通常の投稿かカスタム投稿か判断してカテゴリー名を表示する方法

普段使い慣れないカスタム投稿タイプを使ったところ、普通のカスタマイズと勝手が違い四苦八苦しております。 今回はそのなかでもだいぶはまった「カスタム投稿でのカスタ …

404-top-redirect-thumbnail

404エラーページへのアクセスを処理する最も簡単な方法

ブログをある程度長くやっていると、どうしても納得がいかなかったり、いろんな理由で記事を削除してしまったという経験は誰しもあるかと思います。 しかし、ネット上には …

letter-spacing-thumbnail

ブログ記事右端にできる不自然な空白をCSSで修正する

ブログ記事を作成して公開した文章をチェックすると、まれにテキストの右端が不自然なところで改行されていることはないでしょうか。 例えばこんな感じ。 1行目はまだ目 …

mts-simple-booking-c-fatal-error-thumbnail

「MTS Simple Booking-C」のフェイタルエラー解決方法

Web予約カレンダーを設置するプラグイン「MTS Simple Booking-C」にフェイタルエラーが出てしまいました。 まず、このように管理画面の一番上に一 …

affinger4-hukidashi-thumbnail

WordPressでショートコードから会話風ふきだしを呼び出して表示させる方法

昨年12月、AFFINGER4に会話風ふきだし機能が追加されました。 これ、使い勝手良さそう! ただ、ふきだしのためだけにAFFINGER4に移行するのはリスク …


コメントをどうぞ

lognote
2017/5/09
コメントありがとうございます。 本当にそうですよね。 通販サイトは、相手の顔が見えない分信頼第一で成り立っているので、Amazonにはマーケットプレイスの管理をしっかりやっていただきたいで...
匿名探偵
2017/5/09
ここ最近のamazonはちょっとヤバいですね。 4,5000円が相場で微小の変動しかしていなかった市場に、今年度に入って急に1000円切った値で断続的に出品するなど、異常な出品者が様々な商品に出没し...

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