Lognote

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

custom-field-ranking-thumbnail

WordPressにAFFINGER4のような商品ランキング機能を実装する方法

2017-04-19

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

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

custom-field-ranking-01

有料の拡張プラグインを販売するくらいですから、おそらく制作者側もこのランキング機能を一番の売りにしているのではないでしょうか。

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

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

最終完成イメージ

完成イメージはこのような感じになります。

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

HealerHealer

Healer

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

STINGER8STINGER8

STINGER8

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

AFFINGER4AFFINGER4

AFFINGER4

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

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

custom-field-ranking-02

カスタマイズの手順

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

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

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

子テーマにcf-ranking.phpというテンプレートファイルを新しく作ります。

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

ちょっと長いですが、同じくくりを3つ書いているだけですので複雑ではありません。論理演算子をうまく使えばもっとコンパクトにできそうですが、あとで見てすぐわかるように3つに分けた書き方にしました。

<!-- ランキング1位の表示 -->
<?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="一位の王冠マークの画像パス" 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">
        <div class="rankstlink-l"><p><a href="<?php echo get_post_meta($post->ID , 'rank01_detail_url' ,true); ?>" target="_new">詳細ページへ</a></p></div>
        <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>
  </div>
</div>
<?php endif;?>

<!-- ランキング2位の表示 -->
<?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="二位の王冠マークの画像パス" 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">
        <div class="rankstlink-l"><p><a href="<?php echo get_post_meta($post->ID , 'rank02_detail_url' ,true); ?>" target="_new">詳細ページへ</a></p></div>
        <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>
  </div>
</div>
<?php endif;?>

<!-- ランキング3位の表示 -->
<?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="三位の王冠マークの画像パス" 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">
        <div class="rankstlink-l"><p><a href="<?php echo get_post_meta($post->ID , 'rank03_detail_url' ,true); ?>" target="_new">詳細ページへ</a></p></div>
        <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>
  </div>
</div>
<?php endif;?>

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

2行目でcfrank(01~03)(商品の名前のカスタムフィールドの値)の中身があるかないか判断し、空の場合は2行目と3行目の間の処理をおこないます。

以降、ハイライトのついた行で画像・商品の説明・詳細ページURL・販売ページURLを処理しています。

今回は3位までの表示にしています。4位、5位と増やしたい場合はくくりをコピペして増やして数字を書き替えるだけなので、勘のいい方ならすぐできると思います。

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

functions.phpにテンプレートファイルをショートコードで呼び出すコードを記述する

次に今作成したcf-ranking.phpをショートコードで呼び出すためのコードをfunctions.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-l 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 {
	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 {
	-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-cont {
		margin-left: 165px;
	}

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

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

	.rankst-l {
		position:relative;
		z-index:2;
		float: left;
		width: 150px;
	}

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

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

	/*-- ここまで --*/
}

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

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

カスタムフィールドを新規で追加する方法はこちらの記事を参考にしてください。

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

名前
rank01_name 商品名
rank01_image 画像URL(300×250推奨)
rank01_detail_url 詳細ページURL
rank01_buy_url 販売ページURL
rank01_text 文章

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

記事にショートコードを記述してカスタムフィールドを呼び出す

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

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

custom-field-ranking-03

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

オススメ商品はこちら!

-WordPress
-,

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

関連記事

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

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

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

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

Web予約カレンダーを設置するプラグイン「MTS Simple Booking-C」にフェイタルエラーが出てし …

404-top-redirect-thumbnail

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

ブログをある程度長くやっていると、どうしても納得がいかなかったり、いろんな理由で記事を削除してしまったという経 …

thumbnail-blur-improvement-thumbnail

SIMPLESTER Ver6の記事一覧のぼやけたサムネイルをはっきり表示させる方法

SIMPLESTER Ver6で、記事一覧の右に表示されるサムネイルが、ぼやけて表示される方はいませんでしょう …

comment-form-display-thumbnail

SIMPLESTER Ver6の記事下にコメントフォームを表示する方法【WordPress】

SIMPLESTER Ver6はデフォルトだとコメントフォームが表示されていません。 以下のコードを記述するこ …


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

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

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