TablePressは、簡単にテーブルの表組みを管理できるWordPressプラグインです。
HTMLを直接編集する必要がありません。
WordPress管理画面でテーブルを作成・編集して、ショートコードを利用して記事にテーブルを挿入できます。テーブルの並び替えや検索機能もあります。
ブログの記事の中で比較表などの表組みを利用する場合は、このプラグインを活用すると役に立ちます。
目次[閉じる]
広告
はじめに
このプラグインが優れていること
- HTMLを直接編集しなくてもテーブルの表組みを簡単に作れる。
- テーブルは管理画面で追加・編集できる。
- テーブルの表示位置はショートコードで指定できる。
- 並び替え機能があるテーブルも作成できる。
- 表のセルを結合する「colspan」「rowspan」も利用できる。
- 作成したテーブルのエクスポート・インポートに対応している。
- 管理画面が日本語化されているのでわかりやすい。
動作見本
プラグインの公式サイト（英語）に実際に稼働するデモが公開されています。
信頼性
プラグインが定期的にアップデートされており、安定的に保守が行われています。
サポートフォーラムでも開発者が質問に回答しています。
プラグインの保守は適切に行われているようです。
確認日：2023.04.27
確認できた内容
- 定期的なアップデートの実績
- サポートフォーラムの評判
- プラグインの評価
- プラグインの利用者数
インストール方法
管理画面から検索してインストールしてください。
もしくは「wordpress.org」からダウンロードし、アップロードしてインストールしてください。
- WordPress管理画面 ＞ プラグイン ＞ 新規追加 ＞「TablePress」で検索
- 「wordpress.org」からダウンロード
TablePress – Tables in WordPress made easy
コードを書かなくても、美しく、アクセスしやすく、インタラクティブなテーブルを WordPress サイトの投稿やページに埋め込むことができます !
WordPress.org 日本語広告
管理画面の使い方
このプラグインの管理画面は日本語化されています。日本語でも問題なく運用できます。
管理画面の場所
プラグインの管理画面は下記の場所にあります。
WordPress管理画面 ＞ TablePress
すべてのテーブル
作成済みのテーブルが一覧表示されます。
プラグインのオプション
プラグインの設定は初期設定のままでも運用できます。必要に応じて設定を変更してください。
管理メニュー項目
初期設定では、TablePressのメニューが1階層目に表示されます。
邪魔に感じる場合は、メニューの表示位置を変更することもできます。
新しいテーブルの追加
テーブルを作成する際に、テーブルの名前や説明文を登録します。
テーブルの詳細設定
テーブルを編集する際は、基本的には文字や数字を入力してテーブルを作成します。
HTMLタグを利用してリンクやCSSを記述することもできます。
ショートコードの使い方
TablePressを利用してテーブルを表示するには、専用のショートコードに「テーブルID」の数字を記述します。テーブルの編集は管理画面で行います。
広告
まとめ
TablePressは、HTMLを直接編集しなくても簡単にテーブル（表組み）を管理できるWordPressプラグインです。
このプラグインはHTMLを編集することなく、簡単にテーブルの管理ができます。比較表などを作る際に利用すると便利です。
このプラグインはアフィリエイトサイトなどで利用されているのをたまに見かけます。もし、あなたのブログで表組みを多用する場合、このプラグインを活用してみましょう。
コメント Comments
コメント一覧
名無しさん がコメント
2014-01-23 12:34
こんにちは。
HP作成、WP初心者です。
とうプラグインでテーブル作成できましたが、記事への挿入ができません。
コードを書き込んでも、固定ページなどの本文ごと消えてしまいます。
対処法などご存知でしたら教えていただけないでしょうか。
宜しくお願い致します。
ネタワン管理人 がコメント
2014-01-24 07:32
ハッキリとした原因は分かりませんが、本文ごと消えるということは、恐らく、サーバー環境の問題で何らかのエラーが発生しているのではないでしょうか。レンタルサーバーによっては、プラグインが正常に動作しない場合があります。
例えば、格安レンタルサーバーのロリポップなどでもエラーが発生する場合もあります。何が原因でエラーが発生しているかは分かりません。詳しい状況が分からないので、推測ではこれぐらいしか分かりません。
iphone5 がコメント
2014-02-08 01:24
はじめまして、ちょうどtable pressを使っている者です。
ご紹介いただいている記事のようにtable pressにてテーブルを作成してwordpressの固定ページに挿入できたのですが、表の」左下に「編集」のボタンが表示されてしまいます。このボタンを押すと、wordpressのtablepress編集画面に遷移します。編集ボタンは不要ですので消したいのですが、どこかで設定などがあったのでしょうか。
対応した経験がございましたら、ご教授ください。よろしくお願いします。
ネタワン管理人 がコメント
2014-02-08 02:56
左下に表示される編集ボタンは、管理者ユーザーでログインした状態でのみ表示されます。管理者権限のない一般の閲覧者にはボタンは表示されませんので気にする必要はありません。
WordPress管理画面からログアウトした状態で記事を閲覧すると、ボタンが表示されていませんので、一般のユーザーでどのように見えるかを確認してみてください。
iphone5 がコメント
2014-02-08 08:09
たしかに一般ユーザからは編集できるはずないですよね！ちょっとこちらでも表示のされ方を確認してみます！ありがとうございました！
名無しさん がコメント
2014-04-26 13:12
こちらを作って記事に投稿する方法を教えてください。
お願いします。
ネタワン管理人 がコメント
2014-04-26 14:46
このプラグインを利用してテーブルを作成すると、テーブル編集画面とテーブル一覧画面に専用のショートコードが表示されます。そのショートコードをコピーして、記事本文に貼り付けると作成したテーブルが記事に表示されます。
名無しさん がコメント
2014-04-27 12:30
ありがとうございました。
出来ました。
名無しさん がコメント
2014-09-15 09:48
はじめまして
テーブルプレスを使い始めた者です。
テーブルプレスの枠の大きさを固定したいのですが
なかなか難しくてできません。
どのようにすればうまくいきますでしょうか。
よろしくお願いいたします
ネタワン管理人 がコメント
2014-09-16 15:54
TABLEの「外枠の幅」の指定方法についてですよね？
TablePressの管理画面では表示幅は指定できません。
HTMLとCSSで手動で対応するしかないです。
記事をテキストモードで記述する必要がありますが、
表示幅を指定したDIVの中にTablePressのショートコードを記述すれば幅指定は可能です。
下記のようにすれば、TABLEごとに幅を指定できます。
下記は横幅300ピクセルに指定した例です。
＜div style=”width:300px;”＞
TablePressのショートコード
＜/div＞
※上記のコードは、コメント欄に記述するために括弧を全角で記述しています。使用する際は半角で記述してください。
がコメント
2021-02-09 08:00
初めまして。記事が少々古いのでここで質問するのが正しいか判りませんが…。
TablePressでソートできるように指定した時、タイトル部分の右横にソートボタンが表示されますが、タイトル部分は縦書きにしてソートボタンも真上か真下に表示して横幅を1文字程度にしたいのです。が、どうしても自動的に右にソートボタンが挿入されて横幅を取ってしまいます。カスタムCSSで罫線の幅を1文字程度（10pxl）の横幅にしても強制的にソートボタンの幅を確保されてしまいます…恐らく仕様なのでしょう。
どうしてもボタンを横にして幅を取りたくない場合はどのような設定をすれば良いでしょうか？（可能であれば、ソートボタンも真上か真下に表示するようにしたいです）物凄くニッチで他に似たようなテーブルを作りたいと言う人が居なさそうですが、宜しくお願い致します。
ねたわん編集部 がコメント
2021-02-09 09:06
コメントありがとうございます。
これはCSSの問題だと思います。
CSSで表示内容を調整しましょう。
CSSはそれほど得意ではないので、合っているかわかりませんが、
上下の矢印はCSSの疑似要素「after」で表示していると思います。
それをCSSで非表示にするか、
または、CSSで表示位置を調整する必要があります。
非表示にするのが簡単だと思います。
↓非表示にする場合
.tablepress .sorting:after { display:none; }
.tablepress .sorting_asc:after { display:none; }
.tablepress .sorting_desc:after { display:none; }
参考記事
ttps://saruwakakun.com/html-css/basic/before-after