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

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

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

サンプル例

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

実際に使っている記事

人気キャラランキング

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

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

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

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

前提条件

　WordPressで管理されている。

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

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

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

CSVファイルを作成

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

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

No,列１,列２
<SCRIPT LANGUAGE="JavaScript">document.write(cnt); cnt--;</SCRIPT>,列１－１,列２－１
<SCRIPT LANGUAGE="JavaScript">document.write(cnt); cnt--;</SCRIPT>,列１－２,列２－２
<SCRIPT LANGUAGE="JavaScript">document.write(cnt); cnt--;</SCRIPT>,列１－３,列２－３

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

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

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

記事内に初期値を設定

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

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

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

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

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

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

おわりに

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

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

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

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

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

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

それではまた～(^o^)／