コピペで簡単。賢威で商品ランキングを簡単に設置するカスタマイズ

アフィリエイトサイトの定番といえば「ランキング」です。賢威7で簡単に設置するカスタマイズを紹介します。

賢威7で商品ランキングを設置してみよう

アフィリエイトサイトでは、商品のランキングが欠かせません。

SiriusやAffingerなど物販アフィリエイトに特化したテンプレートでは標準機能としてついてきます。

でも、賢威でそれをしようとするとなかなか大変です。

最新の賢威7での商品ランキングを簡単に設置する方法を紹介します。

コピペで一発設置完了

2016y11m06d_215301328

今回作るのは、こんな感じのランキングです。この画像は1位だけですが、今回は3位まで作る方法を紹介します。

といっても、コピペするだけです。

※ランキングの順位のところについている王冠の画像は、テンプレートによってちょっと違います。(ここで紹介したのは、賢威7のプリティ版です。)

投稿画面のテキストモードで、以下のコードを貼り付けてください。


<hr>




<ol class="ranking-list ranking-list01">


<ol class="ranking-list ranking-list01">


<li class="rank01">


<h4 class="rank-title">商品名</h4>




<div class="rank-thumb">商品画像挿入(サムネイル150*150)</div>




商品説明

</li>


</ol>


</ol>




<table class="rank-table">


<tbody>


<tr>


<th>価格</th>




<td>{##価格##}円</td>


</tr>




<tr>


<th>特徴</th>




<td>{##備考##}</td>


</tr>


</tbody>


</table>




<hr>




<ol class="ranking-list ranking-list01">


<ol class="ranking-list ranking-list01">


<li class="rank02">


<h4 class="rank-title">商品名</h4>




<div class="rank-thumb">商品画像挿入(サムネイル150*150)</div>




商品説明

</li>


</ol>


</ol>




<table class="rank-table">


<tbody>


<tr>


<th>価格</th>




<td>{##価格##}円</td>


</tr>




<tr>


<th>特徴</th>




<td>{##備考##}</td>


</tr>


</tbody>


</table>




<hr>




<ol class="ranking-list ranking-list01">


<ol class="ranking-list ranking-list01">


<li class="rank03">


<h4 class="rank-title">商品名</h4>




<div class="rank-thumb">商品画像挿入(サムネイル150*150)</div>




商品説明

</li>


</ol>


</ol>




<table class="rank-table">


<tbody>


<tr>


<th>価格</th>




<td>{##価格##}円</td>


</tr>




<tr>


<th>特徴</th>




<td>{##備考##}</td>


</tr>


</tbody>


</table>


貼り付けたら、以下のように項目を入力します。(2位、3位も同じ)

ranking-setusmei

画像の部分は、通常の画像挿入方法と同じでメディアを追加で行います。

2016y11m06d_214912390

画像の大きさはお好みですが、サムネイルの150×150または200×200くらいがちょうどいいです。

わかりやすいように、実際に入力した画面も紹介します。

ranknyuryoku

もっと間単に使うには

貼り付けるだけなので、簡単ですがこのコードを毎回コピペする手間さえも省くためにAdd Quicktagに登録しておくと便利です。

WordPressプラグインAddQuicktagのインストールと使い方 photo by John Fischer 記事を書くときにタグやテキストをワンクリックで簡単に挿入で

add quick tagの開始タグのところに上記のタグをコピペします。今回はボタンの名前は商品ランキングとしました。

addquicktag

1位から3位まで並べるとこのようになります。

rank3

4位以降も作りたい場合

ranktuika

もっと順位を増やしたい場合は、<hr>からtableの部分をコピーして下に加えてください。

rank01の01の部分を変えることで順位が変わります。4位だと04、5位だと05にしてください。

一度設定しておくと便利ですのでぜひお試しください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です