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のカスタムフィールドを使って商品ランキングを表示する方法」という記事をお届けしました。

-WordPress
-,

この記事のタイトルとURLをコピーする

オススメ商品はこちら!

WordPressのカスタムフィールドを使って商品ランキングを表示する方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

salon-for-wordpress-theme-healer-thumbnail

整体院・サロン専用WordPressテーマ「Healer」をリリースしました

スマホ対応。SEO対策とウェブ集客便利機能標準装備。整体院・サロン経営に特化した専用WordPressテーマ...

wordpress-comment-voice-thumbnail

動画も可!WordPressのコメント機能を使った口コミ掲載方法

整体院サイトをリニューアルする中で、「お客様の声」を掲載するための専用ページをどのようにするか迷...

CSSでオリジナルのFeedly購読ボタンを作成する方法

皆さんはブログにFeedlyボタンは設置していますか?リピーターを増やすには必須のサービスですが、公式...

another-ad-category-thumbnail

カテゴリーごとに自動で入れ替わるAmazon商品ランキングをWordPressの記事下に設置する

ブログで収益を受け取る方法の一つとして、Amazonアソシエイトの紹介料をいただくというのがあります。 Ama …

none-plugin-custom-field-amazon-thumbnail

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

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

コメントを入力

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

トラックバックURL

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


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい