なるほど情報.com

なるほど!と思わず唸るような情報をそっと配信しています。

*

これは簡単!記事内にランキング一覧のテーブル表示方法

どうもオガパッチョ(@happy_tasu)です。

こちらの記事をコピペすれば以下のテーブル作成が簡単にメンテナンス出来るようになります。

サンプル例

No列1列2
列1-1列2-1
列1-2列2-2
列1-3列2-3

『なるほど情報.com』では2つのランキングを公開しています。

実際に使っている記事

人気キャラランキング


モンスト人気キャラベスト50をランキング形式で一挙公開 | なるほど情報.com

随時更新中のモンストの人気キャラをランキング形式で紹介しています。

運極人気キャラランキング


【モンスト】運極人気キャラをランキング形式で一挙公開 | なるほど情報.com

随時更新中のモンストの運極人気キャラをランキング形式で紹介しています。

これらのランキングテーブルは随時ある更新しています。

順位の入れ替わりでランキングのnoを書き換えるのってとっても大変なんですよね(”;)

そこで、今回ご紹介する簡単にランキングをメンテナンスして記事内に表示する方法をご紹介致します。

SPONSERD LINK

前提条件

 WordPressで管理されている。

 TablePressをプラグインをインストールしている。

TablePressはテーブルを簡単に作成することができ、さらに外部ファイルからデータをインポートすることができるためオススメです( ・`д・´)

では、早速ランキング表を作り始めましょう。

SPONSERD LINK

CSVファイルを作成

ランキングは外部ファイルのCSVファイルで管理します。

テーブルのランキング番号を表示する列に以下のコードでファイル作成しよう!

No,列1,列2
<SCRIPT LANGUAGE="JavaScript">document.write(cnt); cnt--;</SCRIPT>,列1-1,列2-1
<SCRIPT LANGUAGE="JavaScript">document.write(cnt); cnt--;</SCRIPT>,列1-2,列2-2
<SCRIPT LANGUAGE="JavaScript">document.write(cnt); cnt--;</SCRIPT>,列1-3,列2-3

上記を記載したCSVファイルをTablePressでインポートします。

インポート形式は勿論「csvファイル」にて取り込むようにしてください。

私の場合は、テーブルの順番やソートされるとおかしなことになるので、TablePressでのテーブル作成時にはそれらの機能を一切無効化しております。

記事内に初期値を設定

新規作成されたテーブルIDを記事に張り付ければ良いのですか、それでは、順番が表示されません。

そこで、記事内の表示したい箇所に更に工夫を施します。

<script type="text/javascript">// <![CDATA[
//カウンタの初期値を設定
 var cnt = 3;
// ]]></script>
【table id=○○ column_widths="10%|30%|60%" /】//【】は実際は半角のカッコです。

上記により、ランキングが降順で自動表示されます!

No列1列2
列1-1列2-1
列1-2列2-2
列1-3列2-3

もし、昇順で表示したい場合は、CSVファイルの「cnt–;」を「cnt++;」に変更してください。

ご紹介した方法であればCSVファイルの内容を差し替えたり、順番を入れ替えてインポートすることで、順番は自動で割り当ててくれます!

順番の入れ替えが激しいランキング等で有効です

おわりに

今回はTablePressを使ってランキング表示をしましたが、素のhtmlとjavascriptを使用すれば簡単に出来ます。

ただし、htmlファイルをその都度変更しなければいけません。

WordPressのプラグイン「TablePress」であればテーブルデータをインポートするだけなので、とってもお手軽です。

同じ一覧(テーブルIDが同一)を使っている異なる記事でも、

1つのテーブルに対してインポートするだけで、複数の記事内の一覧表が更新されるのでとっても便利です。

是非、ランキングの記事を書こうと思っている方がおりましたら、使ってみてください。

それではまた~(^o^)/

 - WordPress ,

この記事がよかったら
いいね!お願いします
ヽ(=´▽`=)ノ

なるほど情報.comの最新情報を
お届けします

Twitterでオガパッチョをフォローしよう!

Message

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

  関連記事

ウェブマスターツール構造化『hentry』のエラー増加について
ウェブマスターツールの構造化データ『hentry』でのエラー解決方法

ウェブマスターツールの構造化データ『hentry』でのエラー解決方法 ウェブマス …

browser-shotで見栄えの良いリンクを作成する
【WordPress】Browser Shotsプラグインで見栄えの良いリンクを作成する

パパっと読むための目次1 【WordPress】Browser Shotsプラグ …

huemanのテーマ
WordPress Popular PostsをHuemanテーマへ設定する方法

Huemanテーマでの「Wordpress Popular Posts」を導入す …

huemanのテーマ
WordPressのHuemanテーマの表示速度高速化のチューニング

WordPressのHuemanテーマの表示速度高速化のチューニング 突然ですが …

ブログデザイン変更完了
スッキリ系!「hueman」から「SIMPLESTER」にデザイン変更した理由

どうもオガパッチョ(@happy_tasu)です。 週末は「なるほど情報.com …

PicMonkeyでバナー作成
PicMonkeyで簡単にブログのバナーや画像編集をしよう

PicMonkeyで簡単にブログのバナーやロゴを作成しよう ブログのバナー作成や …

wordpress
BloggerからWordPressに移行しました!

WordPressデビュー! 2014年3月より運営していたブログ「Life i …

検索結果の顔写真終了
好評だったGoogle検索結果の顔写真表示終了のお知らせ

好評だったGoogle検索結果の顔写真表示が終了のお知らせ ちょうど私がBlog …

GoogleAnalytics
WordPressで各種カスタマイズしてみました。

WordPressやPHPなど使ったことがない初心者の私ですが、やっぱりスタイリ …

wordpressカスタマイズ
【WordPress】ブログカスタマイズPart2

【WordPress】ブログカスタマイズPart2 WordPress関連記事 …