【Cocoon】ワードプレス記事内にオリジナルのランキングを作成する

ワードプレスコクーンの活用WordPress

今日は、ワードプレスの記事の中に、自分でランキングを作成する方法をご紹介したいと思います。

スポンサーリンク

テーマは『Cocoon(コクーン)』を使おう

このサイトでは、無料のテーマ『Cocoon(コクーン)』を適用しています。

このテーマは、無料とは思えないくらい様々な便利機能が備わっていて、ワードプレス初心者の方でも素敵なホームページが作れるように開発されています。

また、アドセンスやアフィリエイトの広告設置も簡単にできるので、今のところわたしのイチ押しテーマです。

この後ご紹介するランキング作成も、そんな『Cocoon(コクーン)』内の機能を使って作っていきます。

同じようにやってみたい方、まずはテーマを『Cocoon(コクーン)』に設定してくださいね。

テーマの変更方法を知りたい・確認したい方はこちらの記事を参考にしてみてください。

スポンサーリンク

ランキング作成機能を使ってみよう

ランキング形式で紹介したいデータを集めたら、『Cocoon(コクーン)』に用意されているランキング作成機能を使いましょう。

ダッシュボードのメニューから「Cocoon設定」→「ランキング作成」の順に選択します。

ワードプレスでランキングを作成する(Cocoon)

ランキング作成のページに切り替わったら、「新規作成」を選択します。

ワードプレスでランキングを作成する(Cocoon)

入力画面に切り替わったら、①から順番に入力していきます。

ワードプレスでランキングを作成する(Cocoon)
各項目の設定内容

①タイトル…あとで何のランキングか分かる名前をつける
サイト上のランキングには表示されないので自分が分かればOK)

②項目名…ランキング1位の商品名、サービス名、書籍名などを入力する

③評価…★マークで評価をつけたい場合のみ設定する
(なしのままであれば★マークは非表示)

④説明文…1位の商品に関する詳しい説明を入力する

一例ですが、こんな風に入力し、終わったら「保存」を選択しましょう。

ワードプレスでランキングを作成する(Cocoon)

「保存」を選択すると画面が切り替わり、下図のように入力した内容が表示されます。

ワードプレスでランキングを作成する(Cocoon)

画面を下にスクロールすると、先ほどの1位の入力画面が表れ、その下に2位の入力画面が増えています。

1位と同じ手順で内容を入力したら、2位以降は画面左下の「追加」を選択しましょう。

ワードプレスでランキングを作成する(Cocoon)

これを繰り返して、必要な数だけランキングを作成することができます。

順位の前に王冠がついてますが、これがつくのは3位までです。

スポンサーリンク

ランキング内に画像を設定する(要HTML)

これでも十分立派なランキングが作成できましたが、やっぱり画像を表示したいなと思いますよね。

ランキングに画像を表示するには、ちょっとだけHTMLの知識が必要です。ただ、HTMLはわからない、という方でも、コピペが出来れば大丈夫ですので、頑張れそうな方は試してみてください。

アフィリエイトの商品画像を表示したい、という方は「アフィリエイトタグを貼る場合」をご覧ください。
これからご案内するのは、ただの画像を表示したい場合のやり方です。

必要な画像を準備し分かりやすい名前をつける

まず最初に、必要な画像を準備しましょう。

そして何の画像なのか、名前を見ただけで分かるように、きちんと名前を変更しておいてください。変更する名前はローマ字または英語で設定しましょう。

例えば「日本」という名前の画像だった場合、
「nihon」または「japan」と設定する。

使用する画像をメディアライブラリにアップロードする

ランキングで使いたい画像をすべて、ワードプレスのメディアライブラリにアップロードしておきます。

画像のアップロード方法を確認したい、という方は以下の記事が参考になります(まったく同じではありませんのであくまで参考程度に)。

画像のアップロードが終わったら、メモ帳ソフトに使用する画像のアップロード先情報をコピペしていきます。

こうすると、複数枚の画像を簡単にランキングに設定できるので便利です。

アップロード先情報の確認方法

次に、メディアライブラリにアップロードした画像の、どの情報をメモ帳にコピーするかについてご案内します。

メディアライブラリを開き、情報を確認したい画像をクリックします。

ワードプレスでランキングを作成する(Cocoon)

すると「添付ファイルの詳細」という画面に切り替わり、該当の画像が大きく表示されます。

右側の画面下にある「リンクをコピー」欄横の文字列をすべてコピーしましょう。

ワードプレスでランキングを作成する(Cocoon)

※文字列は隠れていてとても長いので、文字列の上でダブルクリックして全体を選択してからコピーすると良いです。

コピーできたら、右上の「×」でこの画面を閉じます。

そしてメモ帳を開き、コピーした文字列を貼り付けておきましょう。
これを使用する画像の数だけ繰り返します。

ランキング内に画像データを設定する

Cocoon設定」→「ランキング作成」の順に進み、ランキングの画面を表示します。

すでにランキング情報のみ作っているので、下図のように「ランキング一覧」が表示されていると思います。

ワードプレスでランキングを作成する(Cocoon)

ランキングのタイトル、または右横にある「編集」のどちらかをクリックすると、編集画面に移動します。

ワードプレスでランキングを作成する(Cocoon)

編集画面が開いたら、左下にある「画像・バナータグ」に画像を設定していきます。

先ほどコピーした文字列をそのまま貼っても適用になりません。
ここでHTMLが必要になります。

以下の文字列を、「画像・バナータグ」欄にそのままコピペしてください。

<img src="ここに画像情報をコピペ" alt="画像の説明を日本語で入力">

コピペしたら、「ここに画像情報をコピペ」部分にメモ帳から画像情報をコピペしましょう。
前後の記号が消えないように気を付けてください。

そして「画像の説明を日本語で入力」の部分には、どんな画像なのか日本語で説明を入れてください。
もしネットの不調などで画像が表示されない場合に、入力した文字が表示されます。

ワードプレスでランキングを作成する(Cocoon)

設定が終わったら「変更を保存」を選択しましょう。

ワードプレスでランキングを作成する(Cocoon)

設定した画像がきちんと表示されていればOKです。

続けて、2位以下も同じ方法で設定してみましょう。

今回は先にランキングを作成し、後から画像データを設定しましたが、同時に設定することも可能です。

その際は、先に画像の準備をしっかりおこなってから、ランキングの作成に取り掛かりましょう。

スポンサーリンク

アフィリエイトタグを貼る場合

アフィリエイトサービスに登録している場合、画像をアフィリエイトの入り口として貼る事ができます。

その場合は、該当する広告のアフィリエイトタグ(広告タグ)をこの欄に貼ればOK。

登録しているアフィリエイトサービスから、簡単に作成することが出来ます。
作成方法については、各自が登録しているアフィリエイトサービスのサイトでご確認ください。

投稿画面に作成したランキングを反映させる

最後に、作成したランキングを投稿画面に反映させる方法をご紹介します。

ランキング一覧画面を見て頂くと、自動的にショートコードが作成されています。

ワードプレスでランキングを作成する(Cocoon)

このショートコードをコピーし、投稿画面のランキングを表示したい箇所に貼り付ければ、ランキングが完成です。

貼り付けるブロックは、ショートコードブロックもありますが、段落ブロックに貼り付けても自動的にショートコードブロックに変換されます。

無事ランキングは作成出来たでしょうか。

ぜひ、オリジナルのランキングを作って、自分らしい情報発信してみてください。
それでは。

いつも「らしく」ブログをご利用いただきありがとうございます。
今後の記事作成の参考にする為、アンケートにご協力をお願いしています。

アンケートの回答に際し、個人情報の入力などは一切ありません。
「協力してもいいよ」という方は、下のリンクもしくはサイトトップのメニュー内「アンケート受付中」よりご回答ください。
アンケートに協力する♪

「らしく」ブログ管理人

WordPress
スポンサーリンク
記事の更新情報を入手する
「らしく」ブログ
タイトルとURLをコピーしました