Murayama Kenichi's Blog

日常の生活に関する話題やブログに関する話題を書いています

【WordPress】表を簡単に作成できるプラグイン「TablePress」

表(テーブル)

WordPressの記事に表(テーブル)を掲載したい場合、WordPressのエディター(編集画面)では、表を作成することができません。

そのため、WordPressの記事にテーブルを掲載したい場合は次のような対応が必要になります。

  • プラグインでエディター(編集画面)にテーブルを作成する機能を追加する
  • テーブルを作成するためのプラグインをインストールする
  • HTMLタグでテーブルを作成する

 

テーブルを作成するためのプラグイン「TablePress」

今回は、簡単にテーブルを作成することができるプラグイン「TablePress」を紹介します。

TablePressのメリット

  • テーブルの作成・編集が簡単
  • 作ったテーブルを複数の記事で使いまわすことが可能
  • 一つのテーブルを複数の記事に貼り付けている場合、テーブルの内容を編集したら、それが全ての記事のテーブルに反映される

 

「TablePress」の使い方

インストール

f:id:kmurayama_com:20181211190405p:plain

WordPressの管理画面から、「プラグイン」→「新規追加」をクリックします。

 

f:id:kmurayama_com:20181211190333p:plain

右上の検索ボックスに「TablePress」と入力します。

 

f:id:kmurayama_com:20181211190535p:plain

検索結果の中から、「TablePress」をインストールし、有効化します。

 

f:id:kmurayama_com:20181211190742p:plain

「TablePress」のインストールが完了すると、WordPressの管理画面の、左側のメニューに「TablePress」の項目が追加されます。

 

テーブル(表)の作成

f:id:kmurayama_com:20181211191633j:plain

WordPressの管理画面にある、左側のメニューから「TablePress」→「新しいテーブルを追加」。

もしくは、TablePress上部のメニューから「新規追加」をクリックします。

 

f:id:kmurayama_com:20181211191500j:plain

「テーブルの名前」と「行数」「列数」を入力して、「テーブルを追加」をクリックします。

ちなみに、説明は省略することが可能です。

 

テーブルの編集

テーブルの内容を編集

f:id:kmurayama_com:20181211191518j:plain

テーブルの内容を入力します。

 

テーブルのオプション

f:id:kmurayama_com:20181211191421j:plain

先頭の行を見出しにする、連続する行の背景色を別々の色にする、(背景が全て真っ白ではなく、背景の色が濃い行・薄い行が互い違いになることにより、斜めに読んでしまうことを防ぐ)と言った、表の見た目を設定します。


DataTables JavaScriptライブラリの編集

f:id:kmurayama_com:20181211191436j:plain

閲覧者がテーブルの行の並べ替えを行えるようにする、フィルター(検索機能)を使用できるようにする、複数ページに分けると言った、テーブルの機能を設定します。

 

f:id:kmurayama_com:20181211191927p:plain

テーブルの内容の入力、および、設定が完了したら「変更を保存」をクリックします。

 

作成したテーブルを記事に貼り付け

1つ目の方法

f:id:kmurayama_com:20181211192023p:plain

テーブルに割り当てられたショートコードをコピーします。

 

f:id:kmurayama_com:20181211191802j:plain

コピーしたショートコードを、記事の編集画面に貼り付けます。

 

2つ目の方法

f:id:kmurayama_com:20181211192358p:plain

記事の編集画面にある「TablePress」のアイコンをクリックします。

 

f:id:kmurayama_com:20181211192514j:plain

TablePressで作成したテーブルの一覧が表示されますので、記事に貼り付けたいテーブルの行の「ショートコードを挿入」をクリックします。

そうすることで、編集中の記事に、テーブルのショートコードが入力されます。

 

テーブルが表示されるか確認

f:id:kmurayama_com:20181211192129p:plain

TablePressのショートコードを貼り付けた記事をプレビューするか、実際に開き、作成した表が問題なく表示されているかを確認します。