WP Table Builder:ドラッグアンドドロップで表を作ることができる

ドラッグアンドドロップで表(テーブル)を作ることができる WordPress 用プラグインの紹介です。
それは「WP Table Builder」です。
その導入手順から日本語化・使い方と設定などを解説していきます。

WP Table Builder

WP Table Builder - WordPress.org

WP Table Builder は、ドラッグアンドドロップで表を作ることができます。
WP Table Builder の主な特徴は、以下のとおりです。

  • レスポンシブにも対応。
  • 7つの要素(テキスト・画像・リスト・ボタン・星評価・カスタムHTML・ショートコード)を配置可能。
  • テーブル編集時には「セルの結合」「セルの分割」などのセル管理モードがあり。
  • テーブルのインポート・エクスポートが可能。
  • 作成したテーブルにはタグ付けも可能。

記事を作成もしくは更新時点でのバージョン:1.3.9
マルチサイトでの利用:可

Gutenberg エディターでの動作

Gutenberg エディターに追加される機能は無いので、気にする必要は無いです。

Gutenbergでのショートコードの挿入手順

このプラグインは、ショートコードを使用します。
挿入手順については、下記の記事にて詳しく解説していますので、御覧ください。

Gutenberg でのショートコードの挿入手順 – WordPress活用術

インストール手順

WP Table Builder をインストールするには 2 種類の方法があります。
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化する。
WP Table Builder – WordPress.org

もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面からインストールできます。

ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「WP Table Builder」と入力します。

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。

プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。

WordPressプラグインのインストール手順を解説 – WordPress活用術

日本語化

WP Table Builder を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。

WordPress と関連プロジェクト(テーマ・プラグイン)用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。

※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。

日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。

WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術

有効化すると

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

専用メニュー

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

ダッシュボードの「コメント」メニューの下に追加されています。

管理画面

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

作成済みのテーブル一覧が表示されます。
各テーブルは、ショートコードで表示可能です。

使い方

新しくテーブルを作成するには「Add New」ボタンをクリックします。

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

テーブル編集画面です。

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

左側のメニュー。
設定から左ではなくて右側に表示を変更可能。

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

テーブルの行数と列数を指定するには「+」ボタンをクリックします。

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

行数と列数を指定します。
行数と列数は、後からも変更可能です。
指定したら「Generate」ボタンをクリックします。

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

作成すると上のような感じになります。
各セルには、メニューから要素をドラッグアンドドロップで配置可能。

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

セルの編集モードとバッググラウンドの設定を行えます。

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

セルの編集モード中の画面。

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

設定画面。

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

編集画面右上の各種ボタン。

インポートとエクスポート

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

テーブルのインポートを行えます・
CSV もしくは XML に対応。

「PLUGINS」タブから TablePress からのインポートも可能。

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

エクスポート画面。
CSV もしくは XML に対応。

テーブルタグ

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

WordPress 標準タグのようにタグも作成可能。

設定

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「WP Table Builder」の導入から日本語化・使い方と設定項目を解説している画像

URL

WP Table Builder – WordPress.org

本ページはアフィリエイトプログラムによる収益を得ています

テーブル・表

Posted by 管理人