- 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。（詳細）
「関数リファレンス/wp star rating」の版間の差分
提供: WordPress Codex 日本語版
< 関数リファレンス
細 (各章のヘッダーを和訳して <div> タグ埋め込み。) |
細 (→関連項目: Category:wp3.8) |
||
| (他の1人の利用者による、間の1版が非表示) | |||
| 4行目: | 4行目: | ||
== 説明 == | == 説明 == | ||
</div> | </div> | ||
| − | + | 0〜5 の 0.5 単位 (例: 星 1 個、 1.5 個、 2 個等) で表示される星の評価数を HTML エレメントとして出力します。オプションとして、評価数が指定されていれば、 <tt>$number</tt> パラメーターを引き渡すことでタイトル属性に表示させることも可能です。 | |
| − | + | デフォルトでは、管理画面でのみ使えるようになっています。 | |
<div id="Usage"> | <div id="Usage"> | ||
| 16行目: | 16行目: | ||
== パラメーター == | == パラメーター == | ||
</div> | </div> | ||
| − | {{Parameter|$args|array|array | + | {{Parameter|$args|array|引数の array|optional|星 0 個}} |
<div id="Arguments"> | <div id="Arguments"> | ||
=== 引数 === | === 引数 === | ||
</div> | </div> | ||
| − | *'''rating''' - | + | *'''rating''' - 数字の評価値。 0 から 5 まで 0.5 づつの増加 (または 0 から 100 パーセントの評価)。デフォルト値は 0。 |
| − | *'''type''' - | + | *'''type''' - <tt>'percent'</tt> または <tt>'rating'</tt>。デフォルト値は <tt>'rating'</tt>。 |
| − | *'''number''' - | + | *'''number''' - 送信された評価数。 タイトル属性のテキスト上に hover で表示される。 |
<div id="Return Values"> | <div id="Return Values"> | ||
== 戻り値 == | == 戻り値 == | ||
</div> | </div> | ||
| − | {{Return||none| | + | {{Return||none|内容をそのまま戻す}} |
| − | + | 星の評価結果は以下のように表示されます: | |
[[File:star-rating.png]] | [[File:star-rating.png]] | ||
| − | = | + | <div id="Examples"> |
| + | == 例 == | ||
| + | </div> | ||
<pre><? php $args = array( | <pre><? php $args = array( | ||
'rating' => 3.5, | 'rating' => 3.5, | ||
| 43行目: | 45行目: | ||
</pre> | </pre> | ||
| − | + | 上記のコードは以下の HTML を出力します: | |
<pre><div class="star-rating" title="3.5 rating based on 1,234 ratings"><div class="star star-full"></div><div class="star star-full"></div><div class="star star-full"></div><div class="star star-half"></div><div class="star star-empty"></div></div> | <pre><div class="star-rating" title="3.5 rating based on 1,234 ratings"><div class="star star-full"></div><div class="star star-full"></div><div class="star star-full"></div><div class="star star-half"></div><div class="star star-empty"></div></div> | ||
| 51行目: | 53行目: | ||
== 注 == | == 注 == | ||
</div> | </div> | ||
| − | + | この関数をフロントエンドで使用するためには、テンプレートが <tt>wp-admin/includes/template.php</tt> ファイルを含み、適切なダッシュアイコンの CSS フォント情報が enqueue されている必要があります。 CSS の例: | |
<pre style="overflow-x: auto;"> | <pre style="overflow-x: auto;"> | ||
| 96行目: | 98行目: | ||
</pre> | </pre> | ||
| − | + | 説明を明確化するために、上記 CSS 内のフォントデータは省略されています。このデータは実働コードに含まれている必要があります。 <tt>wp-admin/css/dashicons.css</tt> を参照してください。 | |
<div id="Change Log"> | <div id="Change Log"> | ||
| 111行目: | 113行目: | ||
== 関連項目 == | == 関連項目 == | ||
</div> | </div> | ||
| − | |||
| − | {{原文|wp_star_rating|140793}}<!-- 19:31, January 26, 2014 Djkaz 版 --> | + | [http://jameskoster.co.uk/work/using-wordpress-3-8s-dashicons-theme-plugin/ Using WordPress 3.8's dashicons in your theme or plugin - James Koster] |
| + | |||
| + | {{原文|Function_Reference/wp_star_rating|140793}}<!-- 19:31, January 26, 2014 Djkaz 版 --> | ||
{{Tag Footer}} | {{Tag Footer}} | ||
| − | + | ||
| − | [[Category: | + | [[Category:wp3.8]] |
2015年5月12日 (火) 09:33時点における最新版
0〜5 の 0.5 単位 (例: 星 1 個、 1.5 個、 2 個等) で表示される星の評価数を HTML エレメントとして出力します。オプションとして、評価数が指定されていれば、 $number パラメーターを引き渡すことでタイトル属性に表示させることも可能です。
デフォルトでは、管理画面でのみ使えるようになっています。
使用法
<?php wp_star_rating( $args ); ?>
パラメーター
- $args
- （array） （optional） 引数の array
- 初期値： 星 0 個
引数
- rating - 数字の評価値。 0 から 5 まで 0.5 づつの増加 (または 0 から 100 パーセントの評価)。デフォルト値は 0。
- type - 'percent' または 'rating'。デフォルト値は 'rating'。
- number - 送信された評価数。 タイトル属性のテキスト上に hover で表示される。
戻り値
- (none)
- 内容をそのまま戻す
星の評価結果は以下のように表示されます:
例
<? php $args = array( 'rating' => 3.5, 'type' => 'rating', 'number' => 1234, ); wp_star_rating( $args ); ?>
上記のコードは以下の HTML を出力します:
<div class="star-rating" title="3.5 rating based on 1,234 ratings"><div class="star star-full"></div><div class="star star-full"></div><div class="star star-full"></div><div class="star star-half"></div><div class="star star-empty"></div></div>
注
この関数をフロントエンドで使用するためには、テンプレートが wp-admin/includes/template.php ファイルを含み、適切なダッシュアイコンの CSS フォント情報が enqueue されている必要があります。 CSS の例:
@font-face {
font-family: "dashicons";
src: url("../fonts/dashicons.eot");
}
@font-face {
font-family: "dashicons";
src: url(data:application/x-font-woff;charset=utf-8;base64,/* !! Large amount of data removed, see wp-includes/css/dashicons.css for complete data !! */) format("woff"),
url("../fonts/dashicons.ttf") format("truetype"),
url("../fonts/dashicons.svg#dashicons") format("svg");
font-weight: normal;
font-style: normal;
}
.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;
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;
}
説明を明確化するために、上記 CSS 内のフォントデータは省略されています。このデータは実働コードに含まれている必要があります。 wp-admin/css/dashicons.css を参照してください。
改訂履歴
Version 3.8 にて導入されました。
ソースファイル
wp_star_rating() は wp-admin/includes/template.php にあります。
関連項目
Using WordPress 3.8's dashicons in your theme or plugin - James Koster
最新英語版： WordPress Codex » Function_Reference/wp_star_rating （最新版との差分）
関数リファレンス、テンプレートタグ目次もご覧ください。
