WordPressでtableをうまく活用する – WP as CMS

はい、ごめんなさい、めちゃくちゃ間隔が空いてしまいました、TRANSのあらたです。今回はWordPressでtableをどのように使えるかを書いてみます。

プラグインやハードコーディング

WordPressをCMS的に使うときにどうしても必要になるけども、扱いにくいのが表の存在です。HTMLでいうtableですね。

WordPressのビジュアルエディタにはtableを挿入できるようなものがないので(ですよね?)、まず考えられるのはHTMLでハードコーディングすること。ただ、運用担当者がHTMLをあまり知らない場合はプラグインで解決するという方法もあります。使ったことはないですが、例えば、WP-Tableなどはできそうですね。

でも、最近個人的に気に入っているのがカスタムフィールドを使う方法です。ただし、この方法は採用情報などフォーマットが一定の場合にしか使えません。

カスタムフィールド

コードでいうと、あらかじめ次のようなコードが書かれた独自のテンプレートを作っておきます。

<table class="recruit">
<tbody>
<tr>
	<th>勤務時間</th>
	<td><?php echo post_custom('勤務時間'); ?></td>
</tr>
<tr>
	<th>休日</th>
	<td><?php echo post_custom('休日'); ?></td>
</tr>
<tr>
	<th>給与</th>
	<td><?php echo post_custom('給与'); ?></td>
</tr>
<tr>
	<th>備考</th>
	<td><?php the_content(); ?></td>
</tr>
</tbody>
</table>

とこんな感じであらかじめ独自のテンプレを作っておいて、あとは運用担当者にカスタムフィールドを使って値を入れてもらえれば表が生成されるという方法です。これなら運用担当者がHTMLを知らなくても表を作成することができます。

ちなみに、このときの投稿の本文は「備考欄」を別に作っておき、そこに収納されるような形にしています。

もちろん、オーサリングツールなどで表を作ってもらい、コードを貼り付けてもらうことも可能なのですが、こういう方法があることを知っていると表現の幅が広がりそうな気がします。

コメント / トラックバック 5 件

この記事へのコメント・トラックバックを追いかけることができます。(RSS 2.0

  1. mamooru より:

    FCKEditor for WordPressっていうやつで表を挿入することができますよ!
    この前クライアントで表を使うページがあったので導入してみましたが、複雑な表組になると編集はやっぱり難しいかなと思いました。

    http://tekapo.com/st/2007/01/13/deans-fckeditor-for-wordpress-plugin/

  2. コバヤシ より:

    「WordPress 標準のエディタにテーブル編集ボタンを追加する方法」というのを最近知りまして、その手順をブログにまとめています。
    手前味噌みたいで恐縮ですが、もしよろしければご覧ください。
    (ちょっとでも複雑な組み方には対応できないので、まったく解決にはなってないんですが)
    表の構造まで変えられるようにするには、こういう方法しかないのが現状です……。

    http://blog.btmup.com/wordpress/wordpress-editor-table-edit.html

  3. aratakojima より:

    >mamooruさん
    コメントありがとうございます。あ、それ、実は使ったことあるんです。ただ、なんだったけかな、その吐き出すコードがあんまり好きになれなくて、最近は手書きものをそのままコピペしちゃったりすることも。

    >コバヤシさん
    コメントありがとうございます。おー、すごい!こういう方法こそ自分が探していたものです。今度やってみます。

    にしても、もし今後WPがよりCMS的な方向性を目指すのであれば、tableとかは必須だと思うんですけどねー。

  4. コバヤシ より:

    >あらたさん
    ちょっと古い話題ですが、念のためご報告を。
    あれから色々試してみたのですが、どうやらプラグインの「TinyMCE Advanced」が現状では最善の方法のような気がします。
    テーブルの追加・設定だけでなく、行や列の追加・削除も簡単にできてしまいます。まさに MS Office 感覚。
    あと、編集画面に表示するボタンを簡単に設定できるので、機能を最小限に抑えることが出来るのもポイントかと。
    試しに導入したサイトでも今のところ不具合のようなものはないですし、入れておいて損はないと思います。
    逆に、お客さんでもいろいろ出来てしまうので、ソースがグチャグチャになるという問題点は相変わらずありますが……。
    ご参考までに。

    プラグインダウンロードページ
    http://wordpress.org/extend/plugins/tinymce-advanced/

    日本語版も配布されています。
    http://lovelog.eternal-tears.com/wordpress/wp-plugin/tinymce-advanced32-ja/

    ※WordPress 2.7.x には最新版で大丈夫ですが、2.6.x 以前の場合は下位バージョンをインストールしてください。

コメントをどうぞ

トラックバック URL

トラックバック

  1. […] WordPressでtableをうまく活用する – WP as CMS-Re:Creator’s Kansai (リクリ) (tags: wordpress) […]