TablePress の設定と使い方

  • LINEで送る

簡単にテーブルを設置する方法

WordPress のプラグインである TablePress は、簡単に美しいテーブルを作ることができます。また、コーディングの必要なしに、ショートコードだけで投稿や固定ページまたはウィジェットにテーブルを設置することができます。

  1. TablePress をインストールする方法
  2. TablePress の設定

以上、2つの設定についての解説です。

1.TablePress をインストールする方法

まず、プラグインをインストールする必要があります。 Wordpress の管理画面にアクセスします。

*公式サイトからダウンロードしてインストールする方法は、WordPress からプラグインをインストールする方法をご覧ください。

管理画面にアクセスできたら、左メニューの 「  プラグイン」 > 「新規追加」 をクリックします。 そして、「プラグインを追加」の画面が現れたら検索欄にプラグイン名を入力します。

入力途中でも希望のプラグインが現れたら、それを選択します。 上の画面が 「TablePress 」が表示されている画面です。

そして、「今すぐインストール」をクリックします。 直ぐに、インストールが始まり完了するので、「今すぐインストール」から 「有効化」 に表示が変わります。

それが上の画面です。「有効化」 をクリックすれば、プラグインを追加されます。

プラグインが有効化されると、左メニューに 「  TablePress」 が追加されています。

これで、プラグインのインストールは終了です。 次は、テーブルの設定方法です。

2.TablePress の設定

管理画面の左メニューの「  TablePress」にカーソルがhover(ホバー)した時に、下の画面のようなサブメニューがあります。

  • すべてのテーブル
  • 新しいテーブルを追加
  • テーブルをインポート
  • テーブルをエクスポート
  • プラグインのオプション
  • TablePress について

以上の項目があります。

「TablePress について」 をクリックすると、「プラグインの目的」「使い方」「詳細情報とドキュメント」等の項目があります。内容については、適宜、理解しておいて下さい。

2-1.「新しいテーブルの追加」の方法

「すべてのテーブル」には、まだテーブルが設定されていません。テーブルを設定するには、「新しいテーブルの追加」が必要になります。まず、「新しく追加」をクリックします。

すると、上の画面が現れます。

「テーブルの名前」: テーブル名を入力します。

「説明」     : 説明文を入力します。(省略しても可)

「行数」     : 行数(縦軸の数)を入力します。

「列数」     : 列数(横軸の数)を入力します。

最後に  をクリックします。

それでは、テーブル名を「New Table」と入力して「テーブルを追加」をクリックしてみます。

2-1-1.テーブル情報

すると、「テーブル情報」の画面が現れて、

  • テーブルID         :  14
  • ショートコード     : Table ID= 14/
  • テーブルの名前 :  test table – 1
  • テーブルの内容 :  5 行と 5 列のテーブルが表示されました。(もちろん、任意の数字を入力します)

「テーブルID 」の 「14 」は14番目のテーブルですから、新しく追加されていくたび、この数字は大きくなっていきます。

「ショートコード」の数字も「テーブルID」の数字に連動しています。

「テーブルの名前」は任意の文字列を入力します。

「テーブルの内容」が「テーブルの操作」の内容を設定する事です。

実際に、テーブルを作成してみます。

A : 名前  B : 年齢  C : 役職  D : 年収  E : 備考欄

2 行目以降に任意のデータを入力します。

これが、実際にデータを記入したテーブルになります。そして、上部の右側のショートコードが表示されています。それを、コピーして、投稿の編集画面に貼り付けます。下の画面がコピーしたショートコードをペーストした状態です。

名前年齢役職年収備考欄
安倍 歳三68社長3.800万
橋本 健51社外取締役3.500万
小池 とし子61営業部長1.740万
北山 景子27営業2億4000万家を売る女

そして、これが実際のテーブルです。

このほかにも、「テーブル操作」「テーブルのオプション」「Data Tables JavaScript ライブラリの機能」があります。それでは、個別に見て行きましょう。

2-1-2.テーブルの操作

まず、

「リンクを挿入」: リンクを挿入するには、挿入したい「セル」をクリックします。そして、リンクするURLを入力します。今回は、北山景子さんの備考欄にリンクを挿入しました。

「画像を挿入」: これも、「リンクを挿入」と同じ要領です。画像のURLを入力します。

「高度なエディター」: これは、上級者向けです。

セルを結合: 隣接する複数の列を結合したい場合は(rowspan)、隣接する複数の行を結合したい場合は(colspan)といい、列を結合したい内容をキーワードとして「#rowspan#」を追加します。行を結合したい内容を「#colspan#」を追加します。

例)

下の画面が実際に表示されたテーブルです。

項目海外IP国内IP
ディスク容量300MB
FTPアカウント1つ
基本ドメイン1つ

その他の操作「表示」「非表示」や「追加」等はそのままの操作ですので、試しながら設定してください。

2-1-3.テーブルのオプション

テーブルのオプションの各項目には、チェックの有無だけで選択が可能です。

2-1-4.Data Tables JavaScript ライブラリの機能

Data Tables JavaScript ライブラリの機能も各項目の表示を確認しながら、設定してください。

*尚、「テーブルの操作」での行・列の結合には、Data Tables JavaScript ライブラリの機能での、機能は使えません。

[ ま と め ]

以上で、TablePress のインストールと設定の方法です。いろいろなオプションを試しながら、最大の効果がでるようなテーブルを設定してください。

SNSでもご購読できます。