ワードプレステーマ「COCOON」で画像付きランキングを作る方法！スマホで表示されない理由も！

COCOONならランキングページも本格的に！

お盆休みに入ったので、今日もブログの記事更新をかけてました。
そこで、初めてランキングを表示するページを作りたくなり。

ちょっと調べてみたら、私が普段使用させていただいてるフリーのテーマ「COCOON」なら、簡単に王冠などのついたランキングページが簡単に作れるとのこと。

画像付きのページが作れるのは、かなり魅力的だったので、実際に作ってみたら、案外簡単に出来ました。

ただ、スマホで表示させようとしたら、PCではちゃんと表示されるショートコードが、スマホでは表示されない不具合を発見！

楽天商品リンク作成でも、同じようにショートコードが表示されないという不具合が出ていたので、時間のある時に調べてみたら…
あるプラグインが原因でした。

今回は、無料のワードプレステーマ「COCOON」を使ったランキングページの作り方をご紹介します！＾＾

COCOONでは、別途ランキング表示を作る必要あり！

まず、COCOONを使ったランキングページが、どんな感じに表示されるかをご紹介しますね。

こんな感じで、第3位までは王冠が表示されます。
無料のテーマなのに、ここまでできるのはすごいですよね？

では、早速作り方の詳細に入ります。

まず、COCOONのテーマを有効化していると、ダッシュボードのサイドメニューに「COCOON設定」という表示があると思います。
そちらの「ランキング作成」をクリックしましょう。

すると、一覧と新規作成が出るので、今回は新規作成をクリックします。

そうすると、こんな画面にと移動します。

ここで、まず第1位から作り始めます。
ちなみに、王冠のマークは出ますが、第1位などは自分で入力する必要があります。

必須となっているのは、商品の説明文なので、こちらは忘れずに入力してください。
そして「画像・バナータグ」の所に商品画像を入れるわけですが、まず、画像のURLを入手しないといけません。

今回は、楽天の商品を紹介したかったので、商品のページに飛び、画像の上で右クリックして「画像のURLをコピー」をクリックします。

テストで、爽健美茶の画像と商品説明などを入れてみました。
無事画像がプレビュー表示で確認できます。
もしこのプレビューで画像が表示されていないようなら、どこかで間違っているので、確認してみてください。

そして、ランキング作成では、デフォルトでは第2位までしか用意されておらず…
かつ第3位までしか、王冠はつきません。
評価の星印はどの順位でも付けることが可能です。

もし第3位以降も表示したいなら、第2位までの必須事項「説明文」を入力すると、画面の下に「追加」というボタンがあるのでクリックすると、第3位以降も作れるようになります。

一通り作り終えたら、変更を保存か上の方にある保存をクリックします。

すると、画面にショートコードが表示されます。

こちらのショートコードをコピペして、ページの任意の場所に貼り付けます。

こちらはHTMLバージョンでも、テキストモードでもOKです。
すると、こんな感じに表示されました。

これで、COCOONのランキングページが完成です！
非常に便利なので、ぜひ作り方を覚えておいてくださいね。＾＾

そして、ここから先が私が悩んだ場所なので、備忘録の意味で残しておきます。

スマホでショートコードが表示されなかった理由

さて、これは実はランキングだけではなかったんですが、ワードプレスのCOCOONのテーマで、ショートコードを使った時に、PC上では表示できるのに、スマホでは表示されない不具合が起きました。

こちらも調べてみると、あるプラグインが悪さをしている模様…

こちらのプラグインがあると、確かにスマホで表示は可能なんですが、ショートコードが上手く反映されないんですね。

試しに、こちらのプラグインを無効化すると、ちゃんとスマホでも、ランキングが表示されるようになりました。
プラグインを入れたままだと、先ほどのショートコードがそのまま文字表示されてしまうんですね。

わかってみれば、納得なんですが、もしCOCOONでランキング表示のページを作りたい時には、こちらのプラグインは入れない方が良いみたいです。

それでは、ワードプレスの無料テーマ「COCOON」でランキングページを作成する方法でした。

画像付きのランキングページが無料で作れちゃうのはすごいですよね？

記事が参考になりましたら嬉しいです！＾＾