WordPress3.8に追加されたwp_star_rating関数で星評価

WordPress3.8から、ダッシュボードのアイコンやレーティングの表示に使われる星マークとしてDashiconsによるアイコンフォントが使われるようになり、レーティングの表示はwp_star_rating関数として用意されました。

wp_star_rating関数の概要はCodexのwp_star_ratingの項目を参照してください。

この関数は、星マーク5つに対して0.5刻みか、パーセンテージでの評価ができます。例えば2.5の評価だとこうなります:

スクリプトの読み込み

wp_star_rating()と記述しただけでは動作しません。Dashiconsとwp-admin/includes/template.phpの読み込みが必要で、更に出力されるHTMLに対応するCSSを追加します。

Dashiconsの読み込み

フォントを読み込むCSSです。下記はminifyされたDashiconsのCSSを読み込む例です。この場合はwp_star_rating関数で使わない、ダッシュボード用のスタイルが含まれます。

function YOURSITE_scripts() {
    wp_enqueue_style( 'dashicons', site_url('/')."/wp-includes/css/dashicons.min.css" );
}
add_action( 'wp_enqueue_scripts', 'YOURSITE_scripts' );

wp-admin/includes/template.phpの読み込み

wp_star_rating関数を含むPHPファイルです。

require_once(ABSPATH . 'wp-admin/includes/template.php');

CSS

wp_star_rating関数で出力するタグ用のCSSです。

.star-rating .star-full:before {
    content: "\f155";
}

.star-rating .star-half:before {
    content: "\f459";
}

.star-rating .star-empty:before {
    content: "\f154";
}

.star-rating .star {
    color: #0074A2 !important;
    display: inline-block;
    font-family: dashicons;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    height: 20px;
    line-height: 1;
    text-align: center;
    text-decoration: inherit;
    vertical-align: top;
    width: 20px;
}

引用元: http://codex.wordpress.org/Function_Reference/wp_star_rating

パラメータ

wp_star_rating関数には3つの引数が設定されています。レーティングは0.5刻みとなっていますが、この関数内では厳密に判定はしていません。中身のある星は、レーティングの値から小数点以下を切り捨て。星半分は、レーティングから中身のある星の値を引いて切り上げ。つまり小数点以下があると星半分が付きます。

なお、5以上のレーティングをした場合、星は表示されますが、3.9α現在の仕様ではエラーが出ます。星無しのstr_repeatの繰り返しがマイナスになるためです。

パラメータに変数などで動的に値を渡せば、簡単に自動でレーティングを表示するシステムが出来上がります。

<?php $args = array(
   'rating' => 3.5, // 0.5刻みで0から5まで
   'type' => 'rating', // パーセンテージの場合'percent'
   'number' => 1234 // 評価の総数
);
wp_star_rating( $args ); ?>

今まで各々で作っていたレーティングの仕組みが公式に用意されたことで、カスタムフィールドを使った評価や、プラグインの製作が面白くなりそうです。

in Note