Cocoonでランキング表示に使える王冠と星を表示させる方法

ブログ作成

ども!あき山です。

WordPressテーマ「Cocoon(コクーン)」、とても高機能なテーマなので私も利用させてもらってます。更新頻度も高く、作者の「わいひら」さんが積極的にユーザーとやり取りをしていて、無料で使用できる今最も熱いWordpressテーマです。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

そんなCocoonには、ランキング機能というのがあります。(下の画像)

Cocoon公式 商品・サービスランキングを作成して配置する方法

こんな風にCocoonではランキングを作成することができるのですが、詳細ページへのリンク(青色のボタン)に表示させるべきページがない場合は、下部にページURLリンク(赤色のボタン)が横一面に表示されます。

また、ボタンの性質上アフィリエイトリンクを作りにくく、画像部分にアフィリエイトリンク設定した場合、1つ(例えばAmazonだけ)しか作れません。普段の商品リンクのようにAmazon、楽天、Yahooなどのボタンを配置したい場合もあります。

なので、ランキングページのような「王冠」と「星」の表示さえできれば、普通のページ構成の方が作りやすいということもあると思います。

そこで今回は、Cocoonのランキング表示でも使われている王冠と星の表示方法を利用しながら、Cocoonで王冠と星を表示させる方法を紹介します。

 

スポンサーリンク

王冠と星の表示する

1位の場合

まずは、1位の金の王冠の表示のさせ方です。

 

1位:A商品
4.5

これを表示する場合は、以下のhtmlをビジュアル入力ではなくテキスト入力でコピペします。

<div class="ranking-item-name">
<div class="ranking-item-name-crown">
<div class="g-crown">
<div class="g-crown-circle"></div>
</div>
</div>
<div class="ranking-item-name-text">1位:A商品</div>
</div>

「1位:A商品」の部分は、好きな文字を入れて下さい。

☆の表示のところは、Cocoonに用意されている以下のショートコードを直接入力すればOKです。

[star rate="4.5"]

詳しくはCocoonの公式サイトの以下のページを参照してください。星の数や横に入れる数字など、色々カスタマイズできます。

レーティングスター(評価スター)ショートコードの利用方法
レビューページなどで便利な「評価スター」ショートコードのコード入力例です。

 

2位の場合

次に、2位の銀の王冠の表示のさせ方です。

 

2位:B商品
4

これを表示する場合は、以下のhtmlをビジュアル入力ではなくテキスト入力でコピペします。

<div class="ranking-item-name">
<div class="ranking-item-name-crown">
<div class="s-crown">
<div class="s-crown-circle"></div>
</div>
</div>
<div class="ranking-item-name-text">2位:B商品</div>
</div>

「2位:B商品」の部分は、好きな文字を入れて下さい。

☆の表示のところは、Cocoonに用意されている以下のショートコードを直接入力すればOKです。

[star rate="4"]

 

3位の場合

最後は、3位の銅の王冠の表示のさせ方です。

 

3位:C商品
3.5

これを表示する場合は、以下のhtmlをビジュアル入力ではなくテキスト入力でコピペします。

<div class="ranking-item-name">
<div class="ranking-item-name-crown">
<div class="c-crown">
<div class="c-crown-circle"></div>
</div>
</div>
<div class="ranking-item-name-text">3位:C商品</div>
</div>

「3位:C商品」の部分は、好きな文字を入れて下さい。

☆の表示のところは、Cocoonに用意されている以下のショートコードを直接入力すればOKです。

[star rate="3.5"]

 

実際に表示させた例

上の方法で作成した「王冠と星」にCocoonの商品リンクを組み合わせれば、ランキング表示の記事が簡単にできます。

例えばこんな感じです。

どうでしょう?王冠と星のところ以外は自由にレイアウトを変えられるので結構便利だと思います。

 

実際に私が商品紹介で使っている記事はこちらです。

関連 【Bluetooth対応】スマホで管理できるおすすめの体重計は?【2018年秋】
関連 運動会にも使える高倍率なAPS-C用の望遠レンズを比較してみた

記事中では1位~3位までランキングを表示しつつ、コメントを入れたりしています。こんな感じで王冠と星を使うといい感じのランキングを作れるのではないでしょうか?

 

まとめ

Cocoonのランキング表示でも使われている王冠と星の表示方法を利用しながら、Cocoonで王冠と星を表示させる方法を紹介しました。

Cocoonに実装されている機能(CSSなど)を利用したので、htmlを上記のように書けば簡単に表示させることができます。

ただし、王冠表示のほうは、今後Cocoonのランキング表示の仕様が変更されたら(class名などが再構築されたら)、今回の表示方法は使えなくなるので注意が必要です。

ではまた!

タイトルとURLをコピーしました