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

公開日:2018年7月23日 使い方など
Knowledge Base パソコン

最近いろいろなWordpressのテーマで実装されてきているランキング表示。こんな感じのやつです。
【WordPress】サイト作者独自のランキングコンテンツ(いわゆるなんちゃってランキング)を実装する方法
Wordpressで作ってる?作ってない?に関わらず、また、サイトを作ってる?作ってない?に関わらず、目にしたことのある方も多いのではないでしょうか??

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

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

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

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

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

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

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

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

偉そうに書いてますけど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. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

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

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

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

    <h4 class="ranktag">商品名などタイトル</h4>
    【注意】コードをコピーして使用する前に必ずお読みください

    この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

    使用については自己責任でお願いします

    コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

    万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

    コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

    コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

    その場合には以下の方法で修正を行ってみてください

    1. コードの中に全角の記号が入っていませんか?
    2. 半角にすることで解消できます
    3. コードの中に全角の空白(スペース)がありませんか?
    4. 半角にすることで解決できます
    5. コードは合っているはずなのに更新できないときは
    6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
    7. 「何かが間違っています...」と表示され、更新できないときは
    8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
      ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
    これらのエラー対処については以下のページが参考になるかも知れません

    コードを転載する場合には

    ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

    とすればいいでしょう。

  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ここまで ***********************/
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

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


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

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

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

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

Wordpressの本

Amazonの人気商品楽天市場の人気商品
いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

1,738 円 (税込)
基本情報ジャンル建築・理工フォーマット本出版社インプレス発売日2019年07月ISBN9784295006664発売国日本サイズ・ページ280p 21×19cm関連キーワード 9784295006664 出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
WordPressセキュリティ大全 [ 吉田哲也 ]

WordPressセキュリティ大全 [ 吉田哲也 ]

2,420 円 (税込) 送料込
吉田哲也 秀和システムワードプレスセキュリティタイゼン ヨシダテツヤ 発行年月:2019年10月18日 予約締切日:2019年06月19日 ページ数:224p サイズ:単行本 ISBN:9784798058900 吉田哲也(ヨシダテツヤ) 有限会社TY Planning代表取締役。webコンサルタント・上級ウェ..
楽天ウェブサービスセンター CS Shop
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報