AddThis Social Bookmark Button

Light Formatter -WordPressプラグイン

Light Formatterは、PukiWikiっぽいタグを導入できるWordPress用のプラグインです。

とはいってもまだ目次出力/テーブルタグ/改行/行頭インデントしか実装されていません :-)

WordPressデフォルトのTinyMCEでテーブルを作ろうとするとプラグインをインストールしないといけないし、プラグインを入れてもテーブルを書くのが面倒だ!とか、Wikiスタイルを実現するプラグインを使いたいのにWiki本体をインストールするの面倒なんですけど・・・という方におすすめです。

 

<ダウンロード>

Light Formatter 0.2をダウンロードする(ver0.2)

 

<インストール>

  1. アーカイブをダウンロードして解凍し、Wordpressインストールディレクトリ内のwp-content/plugins以下へアップロードしてください。
  2. 管理画面にてプラグインを有効化してください。

 

<使い方>

(1)テーブルタグ

  • 先頭と末尾、項目の間に「|」をつけると、テーブルタグに変換します。
  • 「|~」のようにチルダをつけると、そのセルはthタグとして出力されます。
  • テーブル記述の先頭に「|##{オプション[, オプション…]}|」を書くことで、出力されるテーブルにスタイルを設定することができます。複数オプションを指定したい場合にはカンマ区切りで記述してください。オプションの書き方は次の通りです。
    • table_style={tableタグ用のCSS記述}
    • tr_style={trタグ用のCSS記述}
    • th_style={thタグ用のCSS記述}
    • td_style={tdタグ用のCSS記述}
  • セルごとにスタイルを指定したい場合には、「|##{オプション}##」のように指定します。
    • style={指定セル用のCSS記述}
    • id={指定セル用のid指定}
    • class={指定セル用のclass指定}

 

[テーブル記述例(1)]
 
    |~ラベル1|~ラベル2|~ラベル3|
    |カラム1|カラム2|カラム3|
    |カラム1|カラム2|カラム3|
    |カラム1|カラム2|カラム3|


↓ 実際の表示内容はこちら
 

ラベル1 ラベル2 ラベル3
カラム1 カラム2 カラム3
カラム1 カラム2 カラム3
カラム1 カラム2 カラム3

 

[テーブル記述例(2) スタイルを色々指定]
 
    |##id=table_id1,class=table_class1,table_style=border-collapse:collapse;, th_style=border:3px solid #9f9;, td_style=border:3px solid #9f9;padding:5px;|
     |~##style=color:#99f;,id=th_id1##ラベル1|~ラベル2|~ラベル3|
    |##id=td_id1##カラム1|カラム2|カラム3|
    |カラム1|カラム2|カラム3|
    |カラム1|カラム2|カラム3|


↓ 実際の表示内容はこちら
 

ラベル1 ラベル2 ラベル3
カラム1 カラム2 カラム3
カラム1 カラム2 カラム3
カラム1 カラム2 カラム3

 

 

[テーブル記述例(3) tablesorterを使用]
 
    |##class=tablesorter|
    |~商品名|~産地|~値段|
    |こんぶ|北海道|580円|
    |わかめ|岩手|298円|
    |大根|埼玉|230円|
 
headタグ(header.php)の中に↓を書いておく。
<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">
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>



↓ 実際の表示内容はこちら
 

商品名 産地 値段
こんぶ 北海道 580円
わかめ 岩手 298円
大根 埼玉 230円



 

(2)改行

  • 行末に「~」をつけると改行を行います。WordPressに勝手に改行を削除されるときなどにお使いください。
  • 「~~~」などと複数並べるとその数分改行します。

(3)行頭インデント

  • 行頭に「^」をつけると半角スペース2個分のインデントを行います。WordPressに勝手にスペースを削除されるときなどにお使いください。
  • 「^^^」などと複数並べるとその数分インデントを行います。

(4)目次出力

  • 投稿内容やページ内容の最初のほうに、「#contents」とだけ書いてみてください(#の前にスペースなどがあるとうまく動きません)。ページ内の<h1>~<h6>を探して、目次を作ってくれます。

<更新履歴>

  • 2008/2/16:Ver 0.1を公開。
  • 2008/5/25:Ver 0.2を公開。目次出力(#contents)機能の追加と、テーブル出力機能の機能拡張。

<コメント>

コメント(30)

  1. WordPressでテーブルタグを使いたい – Light Formatterを作ってみました…

    WordPressで投稿やページにテーブルタグを使おうとすると意外に大変なんですね。
    WordPressのプラグインサイトで探してみても、ちょうどいいのが見つからない。。

    WP-Table
    →テーブルタ…

  2. こんにちわ さん:

    wordpress2.5でもこのプラグインは使えますか??

    2.5に使ってみたんですが、入力した文字列がそのまま表示されてしまうのでうまく動作できない状態です。。。

  3. まだ2.5を入れてなかったので、ちょっと試してみますね。

  4. […] Light Formatter 詳しい使い方はhttp://hello.lumiere-couleur.com/2008/02/16/light_formatter/ […]

  5. […] Light Formatter -WordPressプラグイン こちらは、PukiWiki風に入力ができるプラグインで、2.5+visual editorであっさり動いた。おまけに、テーブルとかも簡単に記述できるようになるので、お勧めではないだろうか?なにせ、wordpressでは、テーブルを投稿するのに、かなり無理がある、。もちろん、”~”を行末に入力するというのは、特殊処理だが、そのあたりを説得できるかどうかがポイントとなる。 […]

  6. こんにちわ。
    これめちゃ便利で使わせてもらってるんですが
    オプションでstyleと同じようにClassとIDを指定できたら最高です。。

  7. noriさん、こんにちは。コメントありがとうございます。
    ご要望のclassとid指定を作ってみました。

    ついでに#contentsで目次をつける機能も加えてVer 0.2としましたので、よかったらお試しください。

  8. はじめてコメントさせていただきます。
    便利なプラグインですね。

    行頭インデントなのですが、投稿フォームにて改行していない一行分の文字データについて^の効果が続いてくれると使いやすいと感じました。

    ^●見出し・・・・・・・・・・・・・・・見出し最後尾
    ^^○小見出し

    ●見出し・・・・・・・・・・・・・・・・・・・
    見出し最後尾文字
     ○小見出し

    こうなってしまうので。

  9. 今日やっとWordPress 2.3.3からWordPress 2.5.1にバージョンアップしました。
    Light Formatterプラグインも正常に動いてくれています。

    akiさん、コメントと機能のご提案をどうもありがとうございます。
    確かにインライン要素の場合に複数行になるとインデントされなくなるので、見た目が悪いですね。
    インライン要素をブロック要素で囲むよう、修正してみます。
    ブロック要素で囲まれるとまずいケースもあるはずなので、使い分けできるように工夫してみます。

  10. はじめまして、今日このプラグインをインストールさせていただきました
    大変重宝しております。と言うわけで早速こちらのBlogもLDR行きとなりました(^-^)

    ちょくちょく遊びに来させていただきます!

  11. 遅くなりました。。

    ありがとうございます!
    classとID重宝してます

  12. はじめまして。プラグインを試しているのですが、cssをWordPressのテーマのほうで一括管理したいのですが、どうもうまく働きません。
    何か方法がありますでしょうか?
    またテーブル全体をdivなどで囲んでも出力では消えていますが、有効にする方法はありますでしょうか?

    よろしくお願いいたします。

  13. >mosさん
    こんにちは!

    ・cssをWordPressのテーマのほうで一括管理
    Light Formatter自身はインラインcssしか出力していませんので、「table.lftable { … }」のようにWordPressのテーマ側のcssで記述すれば問題ないはずですよ。

    ・テーブル全体をdivなどで囲むと出力では消える
    divとかpは、WordPressが勝手に消したりしてよく分からないですよね。
    このページのサンプルtableも、前後にdivがありますが、table以外の要素も含まれているためか、消されずに残っています。
    mosさんも、何か別の要素を足してみたりしてお試しください。

    <div>
    hoge hoge
    |xxx|xxx|xxx|
    |xxx|xxx|xxx|
    huga huga
    </div>

  14. 素晴らしいプラグインをありがとうございます。

    ずっと、WPで複数行改行したいと思っていたので、
    とても助かりました。

  15. よくよく考えてみると、複数行改行するのって、普通の文章を書いていれば普通にありうるはずなんですけどね・・・

    コメントありがとうございます!

  16. […]   どぉ~なんでしょうかね?     プラグインに brBrbr と、 Light Fomatter を追加してみました 改行がうまくいくのでしょうか? […]

  17. […] や Light Formatter […]

  18. […] Light Formatter […]

  19. […] Light Formatter […]

  20. こんにちわ。今日から使ってます。
    質問なのですが、jQueryの「Tablesorter」と併用する場合、以下の様にテーブルを作りたいのですが、何か提案頂けたら嬉しいです。

    THタグをtheadタグで囲み、TDをtbodyタグで囲みたいのです。
    例:(を-で置き換えてます)
    -table id=xxxx-
    -thead-
    -tr-
    -th–/th–th–/th–th–/th-
    -/tr-
    -/thead-
    -tbody-
    -tr-
    -td–/td–td–/td–td–/td-
    -/tr-
    -/tbody-
    -/table-

  21. >Takaさん
    こんにちは~。Tablesorterは使ったこと無かったのですが、使いやすくていいですね。

    Tablesorterを使ったサンプルを加えてみましたので、参考にしてみてください。

  22. 返信ありがとうございますっ。そして、対応ありがとうございます。非常に嬉しいです。Tablesorter、便利ですよね。まだjQueryは初心者なので、わからない事だらけですが、頑張ります。(笑)

  23. […] で管理したりとちょっと大げさなのがおおくていまいちしっくりくるのがなかったので、Light Formatterというのをつかってたんだけど、colspanとかが使えなくて…使えないのはHPの説明不足も […]

  24. […] ■Light Formatter  ・[Luc プログラム&デザイン] Light Formatter -WordPressプラグイン […]

  25. […] Light Formatter -WordPressプラグイン ¦ Luc プログラム&デザイン […]

  26. […] Light Formatter -WordPressプラグイン ¦ Luc プログラム&デザイン よりダウンロードしてwp-content/plugins/ディレクトリにアップします。 […]

  27. […] Light Formatter WordPress プラグイン […]

  28. […] そこで簡単に表の挿入ができる「Light Formatter 」の出番です。 […]

  29. Light Formatter -WordPressプラグイン ¦ Luc プログラム&デザイン

このページについてコメントする