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

公開日：2018(平成30)年7月23日／最終更新日： 2018(平成30)年7月30日

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

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

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

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

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

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

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

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

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

定型タグや定型文をボタン１つで挿入できるプラグイン「AddQuicktag」

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

偉そうに書いてますけど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>

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

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

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

商品名などのタイトル

画像

サイトの仕様にもよりますが、一応CSSで画像の幅を調整しているのでサイズは何でもOKです（中サイズ辺りを選択するといいでしょう）

説明

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

詳細ページのURL

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

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

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

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

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

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

/***** タイトルタグ（ｈ４） *****/
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を編集して・・・という感じで調整してくださいね。

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

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