メインコンテンツへ移動

WP Table Manager：一般的な使用方法

WP Table Manager の主なアイデアは、プラグインビューを備えながらも、エディターからすべてのテーブルを管理できることです。WP WP Table Manager 、フロントエンドとバックエンドの両方で、すべてのWordPress WYSIWYGエディターで動作します。例えば、カスタムWordPressモジュールで使用できます。.
 

1. 記事からテーブルを管理する

 

テーブルマネージャーボタン

 

WP Table Manager がインストールされると、エディターにエディターボタンが表示されます。これをクリックすると、 WP Table Manager メインビューが開きます。.

投稿/ページから開いたライトボックス内のテーブル マネージャーでは、タイトルを押すとテーブル/グラフの内容が表示されます。または、横のスペースをクリックしていずれかを選択し、[ このテーブルを挿入] ボタン 

 

挿入テーブル

 

すると、灰色の領域とそれに対応したアイコンのような Excel/チャートが表として具体化されます。.

 

テーブルインポスト

 

その領域をクリックしてからもう一度 WP Table Manager ボタンをクリックすると、以前に追加したテーブルが読み込まれます。.

 

編集-物語-投稿

 

しかし、WordPressのデフォルトのエディタはGutenbergなので、 7. Gutenbergのブロックを

2. テーブルとカテゴリを管理する

テーブルはカテゴリごとに分類されます。カテゴリ内には、必要な数のテーブルを作成できます。.

テーブルカテゴリを作成するには、 「新規作成」 >> 「カテゴリ」 ボタン 。新しいテーブルを作成するには、「 新規作成」>>「テーブル」ボタンをクリックします。

 

テーブルカテゴリ

 

注: プラグインのインストール時にデフォルトのカテゴリとテーブルがすでに作成されています。

 

左側のパネルでは、マウスをカテゴリの上に置くことでカテゴリを管理でき、カテゴリを右クリックして名前を編集したり削除したりできます。.

 

カテゴリ名の変更

 

カテゴリを並べ替えるには、ドラッグ アンド ドロップ機能を使用できます。.

 

移動カテゴリ

 

右側のメインパネルでは、テーブルの編集、複製、名前変更、削除ができます。テーブルをクリックするとダッシュボード上部にアイコンが表示されます。また、テーブルを右クリックするとアイコンが表示されます。.

 

編集-コピー-テーブル-ボタン

 

3. テーブル版

表にデータを追加するには、スプレッドシートを操作するのと同じように操作する必要があります。セルをダブルクリックすると内容を更新でき、シングルクリックすると1つまたは複数のセルを選択できます（例えば、スタイルを適用することもできます）。.

 

セル版

 

行や列を追加するには、右クリックします。すると、左または右に行や列を挿入できます。.

 

行と列を追加

 

セルをコピーするには、CTRL+C / CTRL+V (または同じ機能を持つ Apple の J キー) を使用するか、マウスをセルの右下隅に置いて、目的の方向に移動することもできます。.

 

細胞コピー

 

作業はすべて自動的に保存され、右上にメッセージが表示されます。

変更を保存

 

最新の変更を元に戻す/やり直すオプションがあります。.

WP Table Manager セル コンテンツの編集で行った変更のバックアップを保持し、それを復元できます。.

 

元に戻す操作

 

4. 高度なコンテンツ編集

HTMLセル

各セル内にWYSIWYGエディタを使用してHTMLコンテンツを追加できます。セルを選択し、ツールバーの < > アイコンを。

セルを編集すると、HTMLエディタが内部に表示されます。画像とHTMLが利用可能です。.

 

html テーブルセル

 

セルを結合する

セルを結合することもできます。2つ以上のセルを選択して右クリックすると、結合を実行するためのメニューが表示されます。.

 

セルの結合

 

または、 セル結合 ツールバーの

 

セル結合アイコン

 

列オプション

テーブルの列幅をカスタマイズするには、メニューの 「書式」＞「列オプション」＞「表示」タブ 、対象画面サイズ（デスクトップ、タブレット、モバイル）を選択します。
各列の希望する幅を適切な形式で入力します。パーセンテージの場合は、%記号を含めます（例：25%）。ピクセルの場合は、「px」を付けずに数値のみを入力します（例：150）。
 

列幅

 

注: パーセンテージベースの幅を使用する場合、タブや折りたたみ可能なセクションなどの非表示要素内に表を配置すると、表が正しく表示されないことがあります。このような場合は、代わりにピクセル値を使用することを検討してください。.

データタブ

列のデータ型を変更するには、メニューの 「書式」＞「列オプション」＞「データ」タブを選択します。 次に、該当する列のデータ型を選択してください。

 

列型

 

または、任意のセルを右クリックして 列設定 で データ 列の種類を選択できます。 

 

列型セル

 

注意: 列のデータ型を変更すると、現在の列の古いデータが失われる可能性があります。

 

フロントエンドで列を非表示にする

フロントエンドでテーブルの列を非表示にするには、セルまたは列ヘッダーを右クリックし、 列設定 オプションを選択して、 表示 タブ フロントエンドで列を非表示にする オプションを有効にします。

 

フロントエンドの列を非表示にする

 

5. Excelとスプレッドシートのエクスポート

スプレッドシートをエクスポートできます WP Table Manager 、専用ツールを使用して メニューの「テーブル」→「テーブルのエクスポート」を選択し、 を選択してください 「データ＋スタイル」または「データのみ」をクリックします「Excelをエクスポート」 ボタン

 

エクスポートテーブル

 

エクスポートはExcel 2003または2007形式で行えます。プラグインの 設定は「設定」＞「メイン設定」で確認できます。

 

エクスポート形式

 

 

6. ショートコード

表のショートコード

ダッシュボードでは、各テーブルのショートコードを確認できます。ショートコードの横にコピーボタンがあり、これを使ってテーブルを簡単に共有できます。例：[wptm id=8]

 

ショートコード

セルショートコード

ショートコードを使用すると、表全体ではなく複数の行と列を挿入できます。まず、挿入したいセルを選択します。次に、そのセルを右クリックし、 「セル挿入ショートコード」 コンテキストメニューから

 

セル挿入ショートコード

 

ポップアップでオプションを選択したら、 「コピー」 アイコンをクリックします。その後、ショートコードを投稿/ページに貼り付けることができます。

例: [wptm id=258 download="1" align="none" range="B1-D8"]

 

チャートショートコード

チャートを作成したら、右側のパネルにチャートのショートコードが表示されるので、 コピーし て投稿/ページに貼り付けることができます。

例: [wptm id-chart=42]

 

チャートショートコード

 

7. Gutenbergエディタのブロック

Gutenbergエディターを使えば、サイトに表やグラフを表示できるようになりました。これらの WP Table Manager ブロックは、 WP Table Manager と WP Table Manager Chart。

Gutenbergエディターでテーブルを追加するには、 WP Table Manager ブロックを検索してクリックします。見つかったら、そのフィールドをクリックすると、作成したテーブルの一覧が表示されます。そこから、フロントエンドに表示したいテーブルを選択します。テーブルを選択すると、すぐにプレビューが表示されます。

 

テーブルブロックの追加

 

テーブルを追加するのと似たような手順で、 WP Table Manager Chart」 ブロックを検索してクリックします。次に、ドロップダウンリストからグラフを選択します。

 

チャートブロックを追加

 

8. フロントエンド編集

テーブルエディタで、 [テーブル] > [フロントエンド編集]。 

 

フロントエンド編集

 

以下の機能が含まれています: 

  • 新しい行の作成： ログインしていないユーザー、またはログインしているユーザーグループのみに、フロントエンドで新しい行を作成する権限を与えます。スタイルは列ごとに適用され、背景は表全体の交互色に設定されることに注意してください。
  • 行の編集: ログインしていないユーザー、またはログインしているユーザーのみがフロントエンドで行を編集する権限を持つようにします。
  • ユーザーID列: ユーザー識別子として使用する列の値を選択します。WordPressユーザーテーブル (wp_users) のIDを参照します。MySQL側で整数として定義する必要があります。
  • 編集ボタンを表示: トグルボタンを使用して有効/無効にします。

 

編集テーブルフロントエンド

 

フロントエンドで新しい行を作成したり、行を選択して編集したりできます。.

 

編集-作成-行-フロントエンド

 

注意: データベース テーブルの場合、フロントエンドに新しい行を作成することはできません。.

 

場合 フロントエンドでテーブルを編集する が表示されます 編集」 列設定に 「列設定」 オプションを選択してください。

列設定ポップアップには 3 つのタブがあります。

 

    列設定

     

    表示タブ

    • 列ラベル: 列の名前。
    • フロントエンドで列を非表示にする: トグル ボタンを使用して列を非表示/表示します。

     

    表示タブ

     

    データタブ

    • 列タイプ: 列のタイプを選択します: Text、Varchar、Integer、Float、Date、Datetime。

     

    データタブ

     

    編集タブ

    • 編集の有効化: トグル ボタンを使用して有効化/無効化します。
    • 必須データ: トグル ボタンを使用して有効/無効にします。
    • データ入力タイプ: データの種類を選択: 
      • 基本エディター
      • HTMLエディター
      • 選択ボックス
      • 日付
    • 列のデフォルト値: 列のデフォルト値を設定します。
    • 値リスト: この列に入力可能な値をこのリストに入力し、Enterキーを押して区切ります。入力した値は、列のエディターで使用されます。

     

    編集タブの列設定