だれでも簡単にテーブル作成!WordPressの表組みプラグイン「TablePress」を使ってみました。

  WordPress, WordPressプラグイン 

wordpressでのサイト制作時、お客さん用に、マークアップやcssの設定が不要で簡単に表組み(以下テーブル)を挿入できる機能が必要ってこと、結構ありますよね。

TablePressってプラグインが高機能かつ使いやすそうなので試してみました。

TablePressってどんなプラグイン?

テーブルのフォーマットを設定して、記事作成画面でショートコードによって任意のフォーマットのテーブルを挿入出来るようにするプラグインです。テーブルデータの並び替えや検索機能までデフォルトで用意されてます。すごい!

簡単な表を挿入してみる。

新規テーブルを設定する

プラグインを有効化するとメニューに「TablePress」が追加されます。「設定」メニューではないので注意してください。

スクリーンショット(2014-01-04 14.27.27)

サンプル用のテーブルを設定してみます。 「新しいテーブルを追加」をクリックして基本の設定をします。

スクリーンショット(2014-01-04 14.28.05)

テキストやナビゲーションが日本語化されているので操作しやすいですね。必要項目に入力して「テーブルを追加」ボタンをクリック。テーブルが追加されて詳細設定画面に移動します。

detail

設定項目はたくさんあるのですが、とりあえず「テーブルの内容」エリアにデータを入力して、「テーブルの操作」エリアで簡単な調整をするだけで利用することができます。

スクリーンショット(2014-01-04 14.33.00)

スクリーンショット(2014-01-04 14.33.07)

「テーブルの操作」エリアでは各セルにリンクや画像を設定したり、行の削除や追加もできます。
設定が終わったら「変更を保存」ボタンを押して保存します。

投稿に挿入する

ビジュアルエディタ内のボタンスクリーンショット(2014-01-04 14.45.51)から表を挿入します。

スクリーンショット(2014-01-04 14.46.46)

「ショートコードを挿入」ボタンでショートコードが挿入され、記事に反映されます。
今回設定したテーブルはこちら↓

テストデータ1100200600800
テストデータ2200290300400
テストデータ3500400200300
テストデータ41234
テストデータ5テストテストテストテスト

いい感じ!

セルを結合する

セルの結合がちょっとややこしいというか、癖があったので解説します。
「テーブルの操作」エリアで「同じ行内(colspan)」をクリック。
画面にアラートが出ます。これまた日本語で親切!

セルの結合を行うと並び替え機能などは使えないようです。

スクリーンショット(2014-01-04 14.53.36)

okを押すと操作方法が表示されます。

スクリーンショット(2014-01-04 14.53.44)

ほうほう・・・。今回はB1のセルとC1のセルを結合したいのでC1をクリックします。

スクリーンショット(2014-01-04-15.01

#colspan#というテキストが表示されます。これで結合の設定はOKです。「変更を保存」ボタンを押して保存します。

スクリーンショット(2014-01-04-15.01

設定したテーブルはこちら↓

テストデータ1100600800
テストデータ2200290300400
テストデータ3500400200300
テストデータ41234
テストデータ5テストテストテストテスト

ソースを見てみると、セルが結合されてるのがわかります。

スクリーンショット(2014-01-04 15.12.17)

最後に

他にもカスタムcssでテーブルの見た目を変更したり、javascriptで管理している機能の細かな設定ができたりと、高性能かつ痒いところに手が届くプラグインだな〜という印象です。
設定したテーブルデータのインポート・エクスポートにも対応しているので、汎用性のあるテーブルフォーマットを幾つか作っておけば、複数の案件で使い回しが簡単にできるのも嬉しいですね。

コレ聴きながら書きました!

年末のガキ使で流れた「やさしくなりたい」の替え歌に心打たれました。いい人だなぁ・・・

ブログの更新情報はこちらで配信しています。

   

follow us in feedly

ad

wpx

  • JavaScript 第6版

    定番のO'Reilly本でJavaScriptを深く学びましょう!気になる箇所をざっと読むだけでも、とても参考になります。ざっと読みを繰り返すのがオススメ。超良書です!
  • サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル

    WordPressプラグインの開発から運用までカバーする、プラグイン開発のまさに「バイブル」です。

    セキュリティやマネタイズにも触れられていて参考になるところ多すぎです。
  • wordpressに慣れてくると、今度は痒いところに手が届く細やかなカスタマイズをしたいですよね。phpを利用したカスタマイズからデータベースに直接アクセスする方法がとにかく丁寧に解説されています。個人的には第5章、「プラグインの自作」が物凄く役に立ちました!
  • WordPressのテーマ制作やテンプレートについての概念など、実際にサイトを制作しながらWordPressを知ることができます。
    制作するだけでなく、ユーザビリティからSEO、さらにはパフォーマンス改善にも触れているという充実ぶり。
    オリジナルテーマ制作のお供にどうぞ!
  • サンプルが大充実!定番のjQuery入門書です。
    本の内容に沿って制作を進めるだけで、即実戦投入できる程の機能ができ上がります。
    解説が丁寧且つチートシートも付いているのでjQueryについての理解がぐんと深まりますよ!
PAGE TOP ↑