【AFFINGER4】商品ランキングの作成方法をまとめてみた！

ひつじくん

AFFINGER4といえばランキング機能だね。これはすごく使いやすいからオススメだよ！

AFFINGER4の独自機能といえば「誰でも簡単に商品ランキングが作れること」です。HTML/CSSをほとんど知らなくてもちゃんとランキング作成ができるようになっています。

例えば↓こんな感じですね。10分もあればこれくらい綺麗なランキングがサクッと作れてしまうんです。実際の商品ランキングはこちらのテストサイトに作っていますのでこちらも参考にしてみてください。

おおかみくん

すげーー！！これ俺でも作れんの！？

ではAFFINGER4でランキングを作る方法をこれからご紹介していきたいと思います。

AFFINGER4でランキングを作る！

まずは「WordPressの管理画面」>「ランキング管理」という順に進んでください。そうするとランキングの作成に移れます。

ランキング管理

AFFINGER4のランキング管理に移ると「基本設定」がまず最初に目に入ってきますが、ここはすっ飛ばしても大丈夫です。少し下にスクロールしていって「ランキング管理」という場所を見つけましょう。

ここからランキング1位を手始めに作成してみます。

タイトルとスターを決める

ひつじくん

まずは商品タイトルとスターを設定しよう。

おおかみくん

スターって？

ひつじくん

スターは商品の上に表示される星の数のことだよ。オススメなら5星にしといたらいいと思う！

まずは商品タイトルとスターを設定していきます。

ここでは商品タイトルを「AFFINGER4」として、スターは「5」に設定しておきました。

アフィリエイトコードを入力

ひつじくん

次にアフィリエイトコードを入力しよう。バナーリンクとテキストリンクをASPからとってきてね！

ASPにいって、バナー用/テキスト用のアフィリエイトコードをそれぞれもらってきましょう。それをこちらに貼り付けるようにすればオッケーです。

バナーは少し大きめでもちゃんとサイズ調整をしてくれますので、300px以上の大きめのものを用意するようにしておきましょう。

おおかみくん

よっしゃ！アフィリエイトコードを用意できたぞ！

商品の説明を書く

ひつじくん

ここで商品説明を書いていってね。

pタグの間に、商品の説明をザッと書いていきましょう。文字数は↑に書いているくらいあれば十分かと思います。

詳細ページへのリンク

ひつじくん

最後に詳細ページを指定しておけば完了だよ！

あとは詳細ページのリンクを指定しておけば設定完了です！

「save」のボタンを押してランキングを保存しましょう。このランキングは[rank1]というショートコードを記事内で入力すれば反映され得るように設定されています。

おおかみくん

これだけでいいのか！ランキング作成めちゃくちゃ簡単じゃん

2位以降のランキングを作りたい場合も、同様の手順で入力していけばオッケーですよ！

実際にランキングを貼り付けよう！

ひつじくん

あとはショートコードを貼り付けるだけでランキングを表示できるよ！

ランキングを表示するには[rank1][rank2]というショートコードを貼り付けるだけです。

さらに見出しをつけたい場合は、AFFINGER4の記事作成画面内に「ランキング大見出し」というタブがあるので、こちらからランキング用見出しを作成するようにしましょう。

おおかみくん

できた！ランキング完成〜！

場所を指定して貼り付ける

ひつじくん

ちなみに、最初から場所を指定してランキングを貼り付けることもできるんだよ！

AFFINGER4の「基本設定」の下部に「ランキングの表示」という項目があります。

ここでランキングを表示させる位置をあらかじめ指定することができるのです。

この中から好きなものにチェックを入れておけば、トップページ、サイドバー、記事下など好きな場所にランキングを配置できるようになるので非常に便利ですよ！

まとめ

AFFINGER4でランキングを作成する方法のまとめでした！

とっても簡単だったのではないでしょうか？

このように簡単にランキング作成ができるのがAFFINGER4の魅力です。ランキングがあると商品の売り上げも大きくアップしますので、これは是非取り入れるようにしましょうね！

X