AFFINGER5には、記事などで宣伝したい商品を比較する時などに便利な「ランキング機能」が備わっています。
でも、AFFINGER5はカスタマイズ性に非常に優れたテーマ。細かい所まで自分で設定できるところがたくさんあります。
そのため、アフィンガーを買ってはみたもののどこを操作していいか分からず、困っているワードプレス初心者の方も多いのではないでしょうか。
ここでは、AFFINGER5のランキングコンテンツを設定する方法を見ていきます。
目次
ランキング作成に必要なもの
AFFINGER5のランキングを作成する際に、設定された項目を埋める必要があります。
必要なものとしては、
- 扱う商材のアフィリエイトコード（バナー用＆テキスト用）
- ブログ内で商材の詳細記事を書いてるなら、その記事のURL
になります。
バナーとは、簡単に言えば「リンク先を貼り付けた画像」のこと。
各ASPの広告リンク作成ページで取得できるバナー付き広告の、「<a href="~」で始まるアフィリエイトコードを、コピー＆ペーストできるよう用意しておきましょう。
ちなみに、画像サイズは「300px以上」が推奨されています。筆者が利用してる上のアフィリエイトコード例では縦が250pxになってますが、問題なく表示されました。
さらに、テキストのみで構成された広告コードも同様に準備します。
バナー広告が無い場合
商材によっては、バナー付きの広告が無い場合もあります。
そういう場合は、自分で画像を拾ってアフィリエイトコードを作成します。
例えば、アフィンガーであれば公式サイトにアフィリエイト用のバナー画像が用意されてるので、保存しておきます。
バナー用画像をWordPressにアップロード
まず、WordPressのダッシュボード（管理画面）から、「メディア」→「新規追加」をクリック。
「メディアのアップロード」という画面を開きます。
「ファイルを選択」をクリックし、保存しておいたバナー用画像を選択してアップロードします。
バナー用画像のURLをコピー
「ライブラリ」をクリックするとアップロードされた画像があるので、クリックして選択します。
「添付ファイルの詳細」という画面になるので、「リンクをコピー」という部分のURLをコピーします。
アフィリエイトコードにURLを挿入
バナー用アフィリエイトコードは、リンクとURLを以下の様式にあてはめて作成します。
<a href="商品へのリンク"><img src="画像のURL" ></a>
先ほどコピーしたバナー用画像のURLを、上記の「画像のURL」にペースト（貼り付け）します。
「商品へのリンク」には、ASPの広告リンク作成ページにある「<a href="~">」という箇所の該当部分をペースト。
これで、バナー用のアフィリエイトコードが完成です。
ランキング作成手順
ではここから、実際にランキングを作成していきます。
基本設定
WordPressのダッシュボードから、「ランキング管理」へ進み、ランキング管理画面に入ります。
「基本設定」タブをクリック。
各設定項目を埋めていきます。
【１】ランキングの大見出し（任意）
【２】オリジナルページへのリンクボタンに表示するテキスト
自分で書いたオリジナルの紹介ページなどに飛べるボタンのテキスト。
デフォルトで、「詳細ページへ」と入ってます。
【３】ランキング全体の説明
【４】ランキングの表示
トップページや投稿ページ、サイドバーなど、ランキングを表示させたい場所を選んでチェック。
【５】バナーサイズ
【６】演出
ボタンがキラッと光るように設定したい場合はチェック。
ここまで設定し終わったら、一番下の「保存」ボタンをクリックして設定を保存します。
ランキング１位～３位まで設定
次に、ランキング１位のタブをクリック。
各設定項目を埋めていきます。
【１】タイトル（入力がないと表示されません）
【２】スター（任意）
【３】アフィリエイトコード（バナー）
上の「ランキング作成に必要なもの」で用意しておいたアフィリエイトコード（バナー）を入力。
【４】アフィリエイトコード（テキスト）
【５】説明
【６】詳細ページへのリンクURL
オリジナルの紹介記事があれば、そのURLを入力。
詳細ページに「nofollow」を設定できるチェックボックスがありますが、通常必要ではないのでデフォルトのままでOKです。
ここまで設定できたら「保存」をクリック。
同じように、ランキング２位＆３位のタブをクリックして設定します。
ショートコードで簡単に設置可能
以上で、AFFINGER5のランキングセットは完成です。
なお、先ほどのランキング１位～３位の設定画面のそれぞれ最下部には、「ショートコード」が記載されています。
ショートコードとは、あらかじめ作ったコンテンツを呼び出せる機能のこと。
これを記事内やウィジェットなど任意の場所に記述することで、簡単にランキングを表示できます。
また、「１位だけ」とか「２位と３位だけ」など、任意の順位のみ表示するといったことも可能です。
アイコンや色などもカスタマイズ可能
アイコンのカスタマイズ
「ランキング管理画面」で「アイコン」タブをクリックすると、アイコンのカスタマイズができます。
デフォルトでは「王冠」になってますが、アイコンを使用せず非表示にすることもできます。
色のカスタマイズ
また「css」タブをクリックすると、ランキングセットのそれぞれの箇所の色をカスタマイズできます。
通常版では３位までの一種類しか作れない
AFFINGER5の通常版では、１位～３位までの一種類のランキングセットしか作成できません。
しかし有料プラグインの『AFFINGERタグ管理マネージャー３』(税込21,800円)、もしくは『STINGERタグ管理プラグイン３』(税込4,980円)を使用することで、10位まで、しかも複数のランキングを作ることが可能です。
また、2020年８月現在『STINGERタグ管理プラグイン３』は無料配布キャンペーン中。通常版のAFFINGER5を購入すると、ファイルが同梱されています。
無料配布キャンペーンの期限は未定ですが、まだAFFINGER5を購入してなくて現在検討中という方は、この機会に購入するとお得かと思います。
まとめ
以上、AFFINGER5でランキングを作成する方法について紹介してきました。
特にランキング機能を使わなくとも、見出しに商品名を入れたりしてランキング記事を作ることもできますが・・。一度作ってしまえばショートコードで呼び出すことによって、サイトの色んな場所に簡単に表示できてかなり便利です。
ランキング機能を使いこなしていけば、より収益に結び付くのは間違いないと思うし、ぜひ活用していきたいですね。
-
-
アフィンガーの評判・口コミをレビュー！購入して損した理由とは？
アフィンガー（AFFINGER5）はSEOにも強く高速、カスタマイズ性も高く、多くのブロガーやアフィリエイターに人気のWordPressテーマです。ここではどんなテーマなのか紹介しつつ、個人的に感じるイマイチな点を書いてみたいと思います。
続きを見る