やっぱまだ工事中……(つД`)

デフォルトのWordPressでは投稿(エントリ)でテーブルタグが使えなくて、導入したプラグイン『Light Formatter』です。
同時に、ゲームデータ用にソート可能なテーブルも作りたかったので、『tablesorter』も導入しました。

Light Formatter配布先
tablesorter配布先(英語サイト)

現在、ウチで導入している『Light Formatter』のバージョンでは、以下の機能を備えています。
 1,テーブルタグ
 2,改行
 3,行頭インデント
 4,目次出力

当サイトでは、テーブルタグ機能・改行・行頭インデントの機能を使用しています。
※目次出力は『Table of Contents Generator』を使用しているので。

簡単な説明は配布先で確認できると思うので、ウチでの導入に際して備忘録的なメモ。

テーブルが作れるのはありがたいんですが、
やっぱりCSSでスタイルを管理した方が楽なので、テーマファイルのCSSに以下を追記しました。

table#id01{
	background-color: #FFCCCC;
	border: 1px solid #FFCCCC;
	margin:10px 0pt 15px;
	font-size: 12pt;
	width: 100%;
	text-align: left;
}
table#id01 th {
	background-color: #FFCCCC;
	border: 1px solid #FFF;
	font-size: 12pt;
	padding: 4px;
}
table#id01 td {
	background-color: #FFFFFF;
	border: 0; /*ボーダー二重表示抑止*/
	padding: 4px;
	font-size: 12pt;
	text-align: left;
}

これで、以下のようにエントリに記述すると、

 |##id=id01|
 |~キャラクタ名|~一般的(?)なかっこよさ|~個人的なかっこよさ|
 |テリー|イケメン|雷鳴の剣引換券|
 |ハッサン|ガチムチパイナップル|イケメン上限突破|

以下のようなテーブルが表示されます。

キャラクタ名 一般的(?)な評価 個人的な評価
テリー イケメン 雷鳴の剣引換券
ハッサン ガチムチパイナップル イケメン上限突破




そんで、データ型のテーブルを扱う場合は、やっぱりソーター機能をつけたいので、『tablesorter』を使用しています。
tablesorterの導入方法ですが、サイトからDLしたファイルを解凍し、適当な場所にアップロードします。
(以下は、Light Formatterと併用する場合の導入方法です)

WordPressの使用しているテーマファイルheader.phpを開き、
ヘッダタグ内に以下のように追記します。

※仮に「http://www.hoge.com/」がWordPressのインストール先だとし、
※上記の「適当な場所」のパスが「http://www.hoge.com/tabletablesorter/」とした場合、

<link rel="stylesheet" href="/tabletablesorter/themes/blue/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="/tabletablesorter/jquery.tablesorter.js"></script>
<script type="text/javascript">
jQuery(function(){
    var $sorttables = jQuery("table.tablesorter");
    var $sorttables_tr = $sorttables.find("tr");
    jQuery($sorttables_tr).parent("tbody").replaceWith($sorttables_tr);
    $sorttables.find("tr:gt(0)").wrapAll("<tbody></tbody>");
    $sorttables.find("tr:eq(0)").wrap("<thead></thead>");
    $sorttables.tablesorter();
});
</script>

と記述します。

Light Formatterの配布先では、

<link rel="stylesheet" href="/script/jquery/plugins/tablesorter/themes/blue/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="/script/jquery/plugins/tablesorter/jquery.tablesorter.js"></script>
<script type="text/javascript">
<!--以下省略-->

とありますが、「/script/jquery/plugins/」の部分は、サイトによって変わると思いますので、念のため。

これで、エントリ内に

 |##class=tablesorter|
 |~No,|~名前|~消費MP|~効果|~覚えるLv|
 |1|メラ|2|敵一体を小さな火球で攻撃|1|
 |2|ヒャド|3|敵1体に氷柱で攻撃|3|

を記述すると、以下のテーブルが表示されます。

No, 名前 消費MP 効果 覚えるLv
1 メラ 2 敵一体を小さな火球で攻撃 1
2 ヒャド 3 敵1体に氷柱で攻撃 3

なお、このテーブルのスタイルは「tablesorter/themes/blue/style.css」を改変することで変更できます。



注意点として、このソート可能なテーブルは1ページにつき、1つしか設置できません。
1ページ内に複数設置したい場合は、ヘッダ追記部を下記のように変更します。

<link rel="stylesheet" href="/tabletablesorter/themes/blue/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="/tabletablesorter/jquery.tablesorter.js"></script>
<script type="text/javascript">
jQuery(function(){
    var $sorttables = jQuery("table.tablesorter");
    var $sorttables_tr = $sorttables.find("tr");
    jQuery($sorttables_tr).parent("tbody").replaceWith($sorttables_tr);
    $sorttables.find("tr:gt(0)").wrapAll("<tbody></tbody>");
    $sorttables.find("tr:eq(0)").wrap("<thead></thead>");
    $sorttables.tablesorter();
});
</script>
<!--ここまでは通常通り、これ以下を追記-->
<script type="text/javascript">
jQuery(function(){
    var $sorttables = jQuery("table.tablesorter2");
    var $sorttables_tr = $sorttables.find("tr");
    jQuery($sorttables_tr).parent("tbody").replaceWith($sorttables_tr);
    $sorttables.find("tr:gt(0)").wrapAll("<tbody></tbody>");
    $sorttables.find("tr:eq(0)").wrap("<thead></thead>");
    $sorttables.tablesorter();
});
</script>

16行目(ハイライト行)を見ての通り、table.tablesorter2を作成するわけです。

また、これに対応したCSSも作成する必要があります。
「tablesorter/themes/blue/style.css」を全部コピーして、それ以下にペースト。
んで、追記ペーストした「tablesorter」ってなっている部分を「tablesorter2」に変更しましょう。

この追記したtable.tablesorter2を呼び出すには、エントリで

 |##class=tablesorter2|
 |~No,|~名前|~消費MP|~効果|~覚えるLv|
 |1|ホイミ|3|味方一人のHP小回復|1|
 |2|ニフラム|2|弱い敵&アンデットモンスターを消し去る敵グループ|2|

のように、呼び出せばOK。
以下のようになります。

No, 名前 消費MP 効果 覚えるLv
1 ホイミ 3 味方一人のHP小回復 1
2 ニフラム 2 弱い敵&アンデットモンスターを消し去る敵グループ 2




呼び出したいテーブルをさらに増やしたい場合、
同じように追記していけば、何個でも同一ページにソート可能なテーブルを作成できます。

記事と関連してそうなモノ

コメントを残す

【必須】required