商品をランキング順にオシャレに紹介したい！AFFINGER6(アフィンガー6)のランキングってどうやって作るんだろう？
AFFINGER6なら「テンプレート」に沿って入力するだけでランキングが作れるよ！今回はその方法を紹介するね。
AFFINGER6(アフィンガー6)は、デフォルトの機能でランキング形式のカスタマイズ機能が備わっています。プラグインを使う必要もありません。
ランキングは商品の比較ページでも使いやすいので、積極的に活用していきましょう。
本記事の内容
- AFFINGER6(アフィンガー6)でランキングを作成する方法
- 作成したランキングを設置する方法
- 複数のランキングを作る方法
複数ランキング作成について
※なお、AFFINGERで作れるランキングは1つのみです。複数のランキングを作りたいときは公式プラグイン「タグ管理マネージャー4」を使うとできます。詳しくは当記事の後半でも紹介します。
＼当ブログ限定特典付き！／
【特大！全44ページ】AffiliateRun〜なぜ売れないか？がもらえる
AFFINGER6(アフィンガー6)で作れるランキング完成イメージ
実際にランキングを作った完成型が下のイメージです。
WordPressテーマおすすめランキング
『商品画像、スター数、説明文、リンクボタン(色、テキスト)』を自由に変更することができるよ。
では、早速ランキングを作るための手順を解説していきたいと思います。
AFFINGER6(アフィンガー6)でランキングを作成する方法
AFFINGER6(アフィンガー6)でランキングを作成する手順は次のとおり。
- ランキングに必要な素材を揃える
- テンプレートでランキングを作成する
それでは、順を追って説明していきますね。
AFFINGER6でランキングを作成する方法ランキングに必要なものを揃える
ランキングを作成するためには次の3つの準備を済ませておきましょう。
- ASPの登録
- 商品リンク
- 紹介したいバナー画像
まずはASPに登録して紹介したい商品を探しましょう。ASPによって見つかる商品に差があるので複数ASPに登録しておくのがおすすめです。
審査がある商品もあるので、とりあえず早めにASPに登録しておくといいですよ。おすすめのASPは以下の記事にまとめているので参考にしてみてください。
商品が決まったらバナー画像を用意しよう。画像作成にはフリーソフトの『Canva(キャンバ)』を使うと便利だよ。
AFFINGER6でランキングを作成する方法テンプレートでランキングを作成する
AFFINGERには下の画像のようなランキングを作るためのテンプレートがあります。
入力方法が微妙にわかりにくいから画像を使いながらわかりやすく解説していきます。
ランキング作成画面に進む
まずランキングの設定画面に移動します。
ランキングに必要な情報を記載する
作りたいランキング順位を選んで以下の項目を入力していきましょう。
| タイトル | 商品名を入力 |
|---|---|
| スター | 商品の評価数をスター表示する |
| アフィリエイトコード(バナー) | ASPで取得したバナーコードを貼り付け |
| アフィリエイトコード(テキスト) | ASPで取得したテキストコードを貼り付け |
| 説明 | 商品の説明文を入力 ※入力項目が2つに分かれていますが、上だけ入力すればOKです |
| 詳細ページへのリンクURL | 商品レビュー記事などのURLを記載 →ボタンリンクが作成される ※nofollowにする場合はチェックをつけておく |
ランキング表示をカスタマイズする
ランキングの装飾をカスタマイズするにはランキング管理画面で次の3箇所を設定していきます。
それぞれでカスタマイズできる内容を表にまとめておきます。
| 基本設定 | ・ランキングの大見出し ・リンクボタンのテキスト ・ボタンの光る演出 |
| アイコン | ・ランキングの画像変更 ※67px×38pxにしてアップロード |
| CSS | ・各所カラー設定 |
以上でランキングを表示する準備は完了。
作成したランキングを設置する方法3パターン
作ったランキングを好きなところに設置していきましょう。設置方法は次の表を参考にどうぞ！
| 【パターン1】 記事下・サイドバーに設置 | 基本設定でチェックをつける ※細かい設定はできない |
|---|---|
| 【パターン2】 記事内に設置する | ショートコードを使う |
| 【パターン3】 ウジェットで設置する | ショートコードを使う |
それぞれの設定方法を詳しく解説していきますね。
ランキングの設置パターン1記事下やサイドバーに設置する
まずは一番簡単な方法。「記事下やサイドバーの決まった位置」に設置する方法です。
「ランキング管理」→「基本設定」メニューから設定できます。
画面のように「ランキングの表示」という項目があるので、ランキング表示したい場所にチェックを入れましょう。
ここの設定はテーマ側で決められた場所に設置されるよ。設置場所を細かく調整したいときは「パターン3」のウジェットで設置しよう！
ランキングの設置パターン2投稿記事内に設置する
投稿記事の途中にランキングを表示したい場合はショートコードを使います。
とはいうものの、AFFINGER6なら以下のショートコードを書くだけでOK。かなり簡単にランキングが表示できますよ。
[rank1]
[rank2]
[rank3]
上記はランキング1〜3位を表示する場合です。
ランキングの設置パターン3ウジェットで設置する
ランキングの表示場所を細かく調整したい場合はウジェットを使いましょう。
ウジェットはWordPress管理画面から「外観」→「ウジェット」で移動できます。
設置したい場所に「00_AFFINGERカスタムHTML」のウジェットをドラッグします。ドラッグしたウジェットに以下のショートコードを記載すれば設置完了です。
[rank1]
[rank2]
[rank3]
上記はランキング1〜3位を表示する場合です。
作成したランキングを一括リセットする方法
場面としては少ないかもしれませんが、作ったランキングはボタン一つでリセットできます。
WordPress管理画面の「ランキング管理」→「ランキングリセット」から完全リセットが可能です。
「リセットする」にチェックを入れて「保存」を押しましょう。
リセットすると復元できないので注意しましょう。
AFFINGER6のランキングを複数作る方法
ランキングは3位までしか表示できないの？違うランキングも作りたいんだけど・・・
デフォルトのランキング機能を拡張するには「AFFINGERタグ管理マネージャー(有料)」が必要だよ。
AFFINGERには『タグ管理マネージャー4』というアクセス解析用の優秀な公式プラグインが用意されています。
このプラグインを使うことで、ランキング複数作ったり、4位以降のランキング表示ができるようになります。
タグ管理マネージャーは元々アクセス解析用のプラグインで、ランキング表示と組み合わせるとユーザーのクリック数を記録することも可能です。
ただし、有料版なので、使うかどうかコスパも考えつつ購入を検討してみてください。
まとめ：ランキングを作って比較レビューなどに活用しよう！
AFFINGER6でランキングを作成・設置する方法はこれで以上です。
ランキングで表現すると複数の商品が紹介されている記事で読者が商品比較しやすく、購買意欲に繋がります。
「〇〇 ランキング」で検索したときに、まずはランキング1位をみたくなりまますよね。
複数の商品を紹介されていると、まず「一番いいものが知りたい」という心理が働きます。推したい商品があるときに、ランキングで順位づけされているとユーザーも判断がしやすくなります。
結果的に、購入までのハードルも下がり成約率アップにも繋げやすくなりますよ。
ランキングを複数作りたい人は・・・
タグ管理マネージャーを導入しましょう。
タグ管理マネージャーを使えば、ランキングを何パターンでも作ることができます。そして、ランキング経由で広告クリックされた回数の計測もできるようにもなります。
有料ではあるものの、「AffiliateRun〜なぜ売れないのか」という44ページの特大情報特典も無料でついてくるので、かなりお得なプラグインですよ。
＼当ブログ限定特典付き！／
【特大！全44ページ】AffiliateRun〜なぜ売れないか？がもらえる
AFFINGER6を検討中の方
AFFINGER6の導入を検討中の方は「AFFINGER6を4年使用した感想・レビュー」も読んでみてください。
実際にAFFINGERを4年利用した経験をもとに、本音でレビューしました。メリット・デメリットを包み隠さず感想を書きましたので、きっと役に立つと思います。