「アフィリエイト広告を利用しています」

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

テクニック

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ここで、ポイントなのですが、COCOONで画像入りのランキングページを作るには
画像のURLを貼り付けるだけではできません。

<img src=”画像URLをコピペ” alt=”画像の説明を日本語で入力”>

このコードをそのままコピペし「画像URLをコピペ」の所に先ほどの画像URLを貼り付けましょう。

後は、商品画像の説明を日本語で入力します。
これはALTタグと呼ばれるもので、画像が表示できない環境でも何の画像か知らせるものです。

ページの表示をしても、どこに書いてあるかはわかりませんが、必須事項なので埋めてください。

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

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

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

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

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

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

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

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

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

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

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

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

そのプラグインとは、WPTouch MobilePluginでした。

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

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

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

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

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

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

関連記事

特集記事

コメント

この記事へのトラックバックはありません。

「アフィリエイト広告を利用しています」

Count per Day

  • 984現在の記事:
  • 586361総閲覧数:
  • 159今日の閲覧数:
  • 519昨日の閲覧数:
  • 81今日の訪問者数:
  • 287昨日の訪問者数:
  • 327一日あたりの訪問者数:
  • 3現在オンライン中の人数:
  • 2018年10月13日カウント開始日:
TOP