WordPressやSymfonyのTipsを中心にアニメや日常の出来事について語ります。
メニュー

検索や並び替えの高機能なテーブルを手軽に作れるプラグイン「TablePress」

この記事は約4分36秒で読めます

TablePress
ゆっきー
ども、カフェブロガーの悠木です。 お気に入りのカフェはドトールコーヒーです。 14時からの限定スイーツ「シューシャポー」が大好きです。

WordPressで表を作りたいとき。あなたはをどう作っていますか?

私は簡単なものは手でテーブルタグを書いてます。

手でタグ打ちしたテーブル

見出し1 見出し2
データ1 データ2
フッター1 フッター2

実際のソースコード

ちょっとした表を作りたい時でもこんなにタグを書かないとダメなんです。(theadなどは省略できますが)

テーブルが大きくなるにつれてどんどんテーブルタグが増えていき、ブログを書くときにテーブルタグで埋まって見難くなります。

ということでテーブルは「TablePress」プラグインを使って管理したほうが分かりやすくてオススメです!

「TablePress」プラグインのインストール

「プラグイン」→「新規追加」→「TablePress」で検索してインストールして有効化します。

または公式サイトからダウンロードします。

TablePress|WordPress.org

「TablePress」で作成したテーブル

曲名歌手歌詞サイト備考
天体観測BUMP OF CHICKENUta-NetBUMP OF CHICKENのシングル作品では、
現時点で最大のヒット作
愛唄GreeeenUta-Netあっ、ども。はじめまして
Good-bye daysYUIUta-Net「タイヨウのうた」主題歌
Starry Heavensday after tomorrowUta-Netテイルズオブシンフォニアのオープニングテーマ
RPGSEKAI NO OWARIUta-Net「クレヨンしんちゃん バカうまっ!B級グルメサバイバル!!」
主題歌

上のテーブルは実際に「TablePress」プラグインで作成したテーブルです。

「TablePress」の使い方

新しく追加

TablePress 新しく追加

TablePress 新しく追加

  • テーブルの名前
  • 説明(省略可)
  • 行数
  • 列数

タイトルや説明は検索しやすいキーワードを設定しておくと多くなったときに探しやすいです。
タイトルや説明はテーブルオプションでテーブルの上または下に表示することもできます。
行数や列数は後から追加したり、削除できるので決まってなければ適当でいいです。

次に作成されたテーブルの解説をします。

テーブル情報

TablePress テーブル情報

  • テーブルID
  • ショートコード
  • テーブルの名前
  • テーブルの説明
  • 最終更新日

テーブルのIDは変更可能なので、関連のあるグループであれば100から番号を付けるなどすると便利です。
指定がなければ連番で採番されていきます。

テーブル内容

TablePress テーブル内容

ここにテーブルデータを書きます。

テーブル操作

TablePress テーブル操作

  • リンクの挿入
  • 画像の挿入
  • 高度なエディター
  • セルの結合
  • 選択行の表示、非表示、コピー、挿入、削除
  • 選択列の表示、非表示、コピー、挿入、削除
  • 1行の追加、1列の追加

上記の操作が簡単に行うことができます。
ちょっと1列追加したくなったときなど融通が利きます。

欲を言えば、切り取って貼付けする機能が欲しいところです。

セルの結合をすると「DataTables JavaScriptライブラリ」が使用できなくなるので注意です。

テーブルオプション

TablePress テーブルオプション

  • 最初の行を見出しにする
  • 最後の行をフッターにする
  • 連続する行の背景色を別々の色にする
  • マウスカーソルを行に合わせている間、行の背景色を変更してハイライト表示する
  • テーブル名をテーブルの上または下に表示
  • テーブルの説明をテーブルの上または下に表示

テーブル名とテーブルの説明を表示することもできます。
行の色を交互に変えたり、カーソルが乗っている行をハイライトにすると見やすいです。

DataTables JavaScriptライブラリの機能

「TablePress」は高機能なDataTablesライブラリが用意されています。

  • 訪問者がテーブルの並べ替えを選択できるようにする
  • 訪問者がテーブルの検索またはフィルターを使用できるようにする
  • テーブルのページ分割(一度に表示する行数の指定)を訪問者が使用できるようにする
  • ページ分割で表示する行数を訪問者が変更できるようにする
  • 行数など、現在表示されているデータに関する情報とともにテーブル情報の表示を有効にする
  • 列数の多いテーブルを見やすくするために、水平スクロールを有効にする

デフォルトでは10行までしか表示されません。
ページ分割のチェックボックスは外したほうがいいでしょう。

作成したテーブルはコピーして作ることができるので同じ構成のテーブルを作りたいときに便利です。

すべてのテーブル

TablePress すべてのテーブル

TablePress すべてのテーブル

ここで「TablePress」に追加したすべてのテーブルを管理できます。
テーブルの名前などで検索できるのでとても便利です。

インポート

TablePress インポート

TablePress インポート

インポートのソース

  • ファイルのアップロード
  • URL
  • サーバー上のファイル
  • 手動入力

ローカルでも、サーバーでも、ウェブ上のファイルでも取り込むことができます。

インポート形式

  • CSV – 文字区切り
  • HTML – ハイパーテキストマークアップランゲージ
  • JSON – JavaScipt Object Notation
  • XLS – Microsoft Excel 97-2003(試用段階)
  • XLSX – Microsoft Excel 2007-2013(試用段階)

上記のファイル形式からインポートで「TablePress」にデータを取り込むことができます。
XLSとXLSX形式は試用段階ということなので使用しないでおきましょう。

CSV、HTML形式でのインポートをよく使っています。

ZIPファイルにまとめてインポートすることも可能です。

HTMLファイルの例

CSVファイルの例

文字化けする場合

※インポートで取り込んだデータが文字化けする場合は
ファイルがUTF-8の文字コードで保存されているか確認しましょう。

エクスポート

TablePress エクスポート

TablePress エクスポート

  • CSV – 文字区切り
  • HTML – ハイパーテキストマークアップランゲージ
  • JSON – JavaScipt Object Notation

エクセルで開きたい場合はCSV形式でエクスポートしましょう。
エクセルで開いた時に文字化けする場合はShift-JISに変換してから開きましょう。

複数のテーブルをエクスポートしたいときはZIP形式でまとめてエクスポートすると便利です。

JSON形式でエクスポートすると最終更新日などの細かい情報もエクスポートすることができます。

サイトを移行する際などはJSON形式でエクスポートするとよいでしょう。

プラグインのオプション

TablePress プラグインのオプション

オプションではカスタムCSSとメニュー位置、プラグインの言語設定が行えます。

カスタムCSS

TablePress カスタムCSS

手打ちでテーブルを作ったり、プラグインでテーブルを作ったりするとデザインが大きく異なってしまいます。

「TablePress」のデフォルトのデザインはハッキリ言ってださいです。
統一感もなくなるので、元々のテーマに合わせてCSSを変更します。

私の場合はこんな感じでカスタムCSSを設定しています。

さいごに

少し長くなりましたが、「TablePress」はとても高機能なプラグインです。
デフォルトのテーブルのデザインが元テーマと合わないこともあるので、少し手を加えたほうが見栄えが良くなります。

また、個別のテーブルや行や列に対してスタイルを適用できるので、とても柔軟に動けるプラグインです。

ぜひ使ってみてください!

関連記事

  1. ライオン 親 子
  2. WordPress Crayon Syntax Highlighter
  3. 記事タイトルで指定した文字を超えた場合「・・・」と表示する(改行タグ制限)
  4. snap_error
  5. 灰色のボケ
  6. ワードプレスプラグイン Browser Shots

コメントをお待ちしております

PR

カテゴリー