【AFFINGER6】ランキング機能がスゴイ！簡単にテンプレートを作る方法プラスおまけ

AFFINGER6には、「ランキング管理」で作成したタグ一つ貼るだけで、簡単にデザイン性の高いランキング表示ができる機能があります。

こんにちは。WordPress研究家SHINです。

このようなテンプレートがタグ1つで簡単に表示できます。（タイトル上に見出しを付けることも可能）

ランキングは「基本設定」で基本テンプレートの型を設定し、一方でランキング1位～3位までそれぞれのテンプレートを設定して複合表示する機能で、サイト内メインとなる商品やサービスを、個別記事や固定場所で紹介する場合に非常に便利な機能です♪

もちろんスマホからでも綺麗に表示できる「レスポンシブ対応」ですのでご安心を。

では早速作っていきましょう。

ランキング管理「基本設定」

まずランキング表示の基本になる設定を作成しましょう。

ここで設定できるのは「ランキング大見出し」「詳細ページボタンのテキスト」「ランキング固定表示場所」の3つです。

商品画像（バナー）と右の説明テキストは、個別に1位～3位のランキングで作成した方がいいので、ここでは基本の3点のみ設定しましょう。

このテンプレートの固定表示は、以下5つの場所で表示が可能です。

固定表示なので、永続的に紹介する商品を選んでおくといいですね。

step
1WordPressダッシュボードメニューから「ランキング管理」に進み、「基本設定」を表示します。

step
2ランキング表示する基本項目を、それぞれ設定していきましょう。

SHIN

1）では、商品名テキストの上に表示する「大見出しテキスト」を設定できます。

また2）では、画像にある詳細ページへと書かれた「青いリンクボタンのテキスト」を設定できます。

step
3その下の設定では「固定表示場所」「バナーサイズ」「リンクボタン演出」をそれぞれ設定します。

SHIN

特に固定表示したくなければノーチェックでOK。バナーサイズはチェックを入れるとPC、スマホともにバナーが300px表示になります。

リンクボタン演出は、AFFINGER6特有のキラリボタンにするしないを選択できます。

ランキング管理「ランキング1位～3位設定」

続いて1位～3位までの3つのランキングテンプレートを作成していきます。

ここでは3種類のランキングを作成できます。ちなみに、順位によって王冠アイコンやテンプレートが異なることはないので、順不同で作成しても大丈夫です。

step
1WordPressダッシュボードの「ランキング管理」から「ランキング1位（2位、3位）」作成したい順位をクリックして進みます。

step
2まずa）には「タイトル（商品名）」を入力し、その下は表示する☆の数を選択、b）にはASP広告の「画像URL」「テキストコード」の入ったURLを入力、e）はASP広告の「テキストコード」をコピペし、テキスト部分はリンクボタンテキストになるので、任意で変更しましょう。

b）のアフィリエイトコード（バナー）は、バナーコードをそのままコピペしてしまうとスマホではバナーが表示されません。

あらかじめ300px × 250pxでバナーをWordPressの「メディア」にダウンロードしておき、リンクURLは「テキストコード」を入力します。

 

この太字部分を任意で入力して、b）へ貼り付けましょう。

c）には、商品の説明テキストを入力。通常の投稿フォームと変わらないので、文字装飾も可能です。その下のテキスト欄は、b）c）とd）e）の間に入れるテキスト文になります。必要であれば入力しましょう。

d）は、あらかじめ「詳細ページへ」と入力されていた青いリンクボタンのURLを入力します。

商品紹介ページまたは口コミページなどあれば、そのURLを入力しましょう。未入力の場合は、自動的にe）のテキストコードリンクのボタンが横長になります。

最後にショートコード：[rank〇]（〇部分はランキング1位～3位の数字）を、記事に貼るだけでランキング表示されます。

ランキング「アイコン＆カラー設定」

ランキングアイコンを変更

ランキングアイコンを、任意の画像に変更することが可能です。

step
1WordPressダッシュボードより「ランキング管理」＞「アイコン」に進みます。

step
2アイコンにしたい画像ファイルを「アップロード」し、決定したURLを指定場所へ貼り付ければアイコンを簡単に変更できます。

ランキングアイコンは「WINGユーザー専用マニュアル」内にも、以下のようなアイコンをフリーでダウンロードできます。

ぜひ活用してみてくださいね。

ランキング各種カラーを変更

ランキングテンプレートの「見出し」「リンクボタン」「トップ以外のランキングカラー」を自由に変更できます。

step
1WordPressダッシュボードより「ランキング管理」＞「CSS」に進みます。

step
2各カテゴリーに分かれてカラーを変更できます。保存⇔プレビューページで、リアルタイムでチェックしながらカラーを変更していきましょう。

その他ランキング機能

人気ランキングリンクボタン

人気ランキング

SHIN

キラリボタンで「人気ランキング」のリンクボタンを簡単に呼び出せます♪

ランキングアイコンのある見出し

SHIN

王冠マークのアイコンが入ったランキング見出しも、タグ一つで呼び出しOK！

まとめ

これまで紹介したAFFINGER6のランキング機能は、全てデフォルトで実装しています・・恐るべし！です（笑）

他にも、お客様の声や複合による吹き出しなどもタグ一つで呼び出せる装飾があるので、ランキングテンプレートもより「記事映え！？」するわけです。

ぜひ活用してくださいね(●´∀`)φ