【WordPress】サイト作者独自のランキングコンテンツ(いわゆるなんちゃってランキング)を実装する方法

最近いろいろなWordpressのテーマで実装されてきているランキング表示。こんな感じのやつです。

Wordpressで作ってる?作ってない?に関わらず、また、サイトを作ってる?作ってない?に関わらず、目にしたことのある方も多いのではないでしょうか??

この表現があるサイトの種類としては

  1. 何かのお悩みを解消するようなサイト
  2. サプリメントなどを販売するサイト
  3. 行楽地の案内や旅行の案内をするサイト

が多いですね。私ランキングというと例えばアクセス数とか販売数とか・・・何かを元にしたランキングなんだろうとすっかり信用していたのですが、どうもそうではないようですね。

勝手ではありますが、これを私は「なんちゃってランキング」って呼んでます。だって何も根拠がないんですから・・・。

まあまあ表現の自由というか何というか、見た人の役に立つといえばそれまでだし、ランキングの根拠も「独自調べ」みたいに表示すれば問題はないわけで・・・批判するのはこの位にしておきます。1つ言えるのは「なんちゃってランキング」の画像やタイトルなどからのリンクがAmazonなんかのアフィリエイトサイトだったらまず間違いなく「なんちゃってランキング」なんでしょう・・。

WordPressでこれを実装する場合の話に戻します。こうしたことを表現するにはやっぱり実装されているテーマに変えるしかないのかなぁ・・・プラグインで何とかならないのかなぁ・・・とプラグインをこよなく愛する私としてはどこかにあるんじゃないか?と探してみましたが、野良プラグインで結構な価格で売られているものしかなかったので、似た表現ができればいいでしょ!ということで作ってみました。


コピペして内容を変えるだけで、こんな感じのランキングが作成できます(画像の幅が小さいのは縮小表示してるからで、今回紹介する方法で実装すると本文の幅いっぱいになります)。

定型HTMLタグや定型文をボタン1つで挿入できる、Wordpressプラグイン「Add quick tag」は昔からある定番のプラグインですが、本当に便利でどんどんボタンを増やしたくなってしまうほどシンプルかつ高機能な無料追加プラグインなので、あえてご紹介

などを使ってボタン化しておくとどこでも「なんちゃってランキング」が挿入できて楽だと思います。

偉そうに書いてますけどhtmlとCSSが少し分かる方なら誰でも作れますよ!!それでは解説をば。

スポンサーリンク



WordPressサイトの本文内に独自のランキング「なんちゃってランキング」を挿入する方法

ランキング用の画像を用意する

タイトル横に表示している王冠画像は自身で用意する必要があります。こうした画像はわざわざ作らなくても、「ランキング 素材 フリー」などでググれば無料で提供してくださってるサイトはたくさんありますから、気に入ったものを入手してメディアへアップロードしておきましょう。

本文内に挿入するコード

投稿編集画面を開き、以下のコードを挿入します

<div class="nrank-box">
<h4 class="ranktag"><span class="oukan">ランキング画像</span>商品名などタイトル</h4>
<div class="rankimg">
画像
</div>
<div class="rankst-cont">
説明
</div>
<div class="ranklink">
<a href="詳細ページのURL" target="_new">>>詳細ページを見る<<</a>
</div></div>

※そのままコピペするとコードの改行がおかしくなってたりする場合がありますので、一度エディタなどへコピーして確認してから挿入するようにしてください

これが1つのブロックになります。1位とか2位とか関係なく必要な分だけこれを追加するわけです。

コード中でいろいろ設定する項目は以下の通りです。

  1. ランキング画像
  2. 先ほど入手してアップロードした画像を挿入します。画像の大きさはタイトルとの兼ね合いで調整してください。

    大抵のサイトでは1位~3位までを画像表示、それ以下はタイトルに【4位】などとしているところが多いですから、4位以下は

    <h4 class="ranktag">商品名などタイトル</h4>

    とすればいいでしょう。

  3. 商品名などのタイトル
  4. 画像
  5. サイトの仕様にもよりますが、一応CSSで画像の幅を調整しているのでサイズは何でもOKです(中サイズ辺りを選択するといいでしょう)

  6. 説明
  7. 商品などの説明を入力します。画像の横よりも下まで説明がある場合には画像の下に回り込むようになっています

  8. 詳細ページのURL
  9. これは別に用意したページ(いわゆるランディングページ)でもいいですし、直接アフィリエイトページへのリンクURLを入れてもいいでしょう

これでなんちゃってランキングの大枠が出来上がります。試しにプレビューしてみると・・・ひどい状態ですねぇ・・・。これを以下で紹介するCSSで調整していきます

テーマのCSSへ追記するコード

テーマのCSSへ以下のコードをコピーします。コードが長いので、テーマカスタマイザーの追加CSSへというよりは、子テーマのCSSへ追加した方がいいかと思います(親テーマでやる場合は一番下に追加してください)

/********************* ランキング表示のCSSここから ***********************/

/***** 外枠 *****/
.nrank-box{
	border:1px solid #222;
	border-radius:5px;
	padding:10px;
	margin-bottom:5px;
}

/***** タイトルタグ(h4) *****/
h4.ranktag {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 28px;
    border-bottom: 3px dotted #111;
}

/***** 画像 *****/
.rankimg {
    float: left;
    width: 200px;
    margin-right: 10px;
    margin-bottom: 5px;
}

/***** 表の仕様 *****/
/* 外枠 */
table.sshiyou {
    width: 100%;
    border: 2px solid #388218;
}

/* 項目の幅(左側) */
td.tdshiuouk {
	border: 1px solid #388218;
	width:100px;
}

/* 項目の幅(右側) */
td.tdshiuou {
	border: 1px solid #388218;
}

/* 詳細ページへのリンク */
.ranklink {
    background-color: #000000;
    border-radius: 10px;
    font-size: 20px;
    text-align: center;
	clear:both;
}

.ranklink a {
    text-decoration: none;
    color: #ffffff;
}

/********************* ランキング表示のCSSここまで ***********************/

※そのままコピペするとコードの改行がおかしくなってたりする場合がありますので、一度エディタなどへコピーして確認してから挿入するようにしてください

CSSは環境によって調整が必要ですが、それなりな感じにはなったのでは??

コード内にどの部分の装飾なのかを書いていますから多分分からないことはないと思いますが、微調整などはデベロッパーツールを使って調べてはCSSを編集して・・・という感じで調整してくださいね。


やる気になって作ってみたら案外簡単にできました。この表現を実装しているテーマへ変更しても自身のサイトの見た目に合わせてデザインの調整などは必要でしょうから、今使っているテーマを使いつつ、表示したい場所へ必要なところだけ挿入するという今回のような方法が結局便利なんじゃないかなぁと思いますよ。

「フォーム入力にしたい」、「装飾(色など)を変更したい」、「表を下に追加したい」などカスタマイズご希望の方は

でお受けしていますのでよろしくお願いします。

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
【新品】【本】小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! オリジナルのテーマであっと..

【新品】【本】小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! オリジナルのテーマであっと..

2,138 円 (税込)
■ISBN:9784774182186★日時指定・銀行振込をお受けできない商品になりますタイトル【新品】【本】小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! オリジナルのテーマであっという間にホームページができる! 星野邦敏/著 大胡由紀/..
【中古】 WordPressで初めてでも簡単にできる自分で作れる!おしゃれなWebサイト WordPressで初めてでも簡単にできる WordPress3.5対..

【中古】 WordPressで初めてでも簡単にできる自分で作れる!おしゃれなWebサイト WordPressで初めてでも簡単にできる WordPress3.5対..

1,042 円 (税込)
評価 1
久松慎一【著】販売会社/発売会社:ソフトバンククリエイティブ/ 発売年月日:2013/01/28JAN:9784797369601
楽天ウェブサービスセンター CS Shop
トップへ戻る