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

2017年4月19日 2023年2月1日
WordPress ,
custom-field-ranking-thumbnail

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

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

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

custom-field-ranking-01

参考アフィリエイトならAFFINGER（アフィンガー）

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

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

カスタムフィールドを使うことで、あらかじめデザインを設定したファイルに値を挿入するだけなので、編集がとても楽になります。

最終完成イメージ

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

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

[myphp file='cf-ranking']

カスタマイズの手順

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

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

子テーマに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の中身があるかないか判断し、空の場合は表示させない処理をします。

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

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

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

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

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

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

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

今回は3位まで表示するコードを紹介しています。

4位、5位と増やしたい場合はくくりをコピペして数字を書き替えてください。

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

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

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

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

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

デザイン用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']

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

山川 達也
Feedlyで更新情報を受け取る

コメントを残す

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

承認制のため反映にお時間をいただきます。