ブログやWebサイト上に料金表や比較表のような表（テーブル）を表示させたいとき、タグを使うと色々と複雑で思ったような表ができないこともしばしば…。
でも、投稿や固定ページで表を作成するときに、テーブルタグをいちいち入力しなくても簡単・手軽に作成できる方法があるんですね。
それが「TablePress」というWordPressのプラグインです。
「TablePress」は、HTMLやCSSを知らない初心者の方でも直感的な操作で簡単に表を作ることができるとても便利なプラグインです。
そこで今回は、「TablePress」でWordPressに表を簡単に作る方法について解説していこうと思います。
プラグインのインストール手順と管理の仕方については、下記のページを参考にされてください。
Contents
「TablePress」の導入方法と使い方
「TablePress」をインストールする
まず「TablePress」をWordPressにインストールしていきます。
❶WordPress管理画面左メニューの「プラグイン」⇒「新規追加」をクリックします。
❷プラグインのインストール画面でキーワード欄に「TablePress」と入力して、出現した「TablePress」の「今すぐインストール」をクリックします。
「Table」と「Press」の間に半角または全角のスペースを入れて入力すると以下のように別のプラグインがヒットしてしまうので、間違えないよう注意が必要です。
❸「有効化」をクリックします。
❹左のメニューバーに「TablePress」が表示されるようになります。
以上でインストール作業は完了です。
「TablePress」で表（テーブル）を作成する
次に、「TablePress」で実際に表（テーブル）を作成していきます。
❶WordPress管理画面左メニューから「TablePress」⇒「新しいテーブルを追加」をクリックします。
❷以下の情報を入力してから「テーブルを追加」をクリックします。
- 「テーブルの名前」
- 「説明（省略可）」
- 「行数」・「列数」
「行数」・「列数」はテーブル作成後に変更可能ですが、事前に必要な行と列を計算して近い値を入れておくと楽ですよ。
❸次に作成した表に値を入れていきます。
❹表に値を入れ終わったら、ページ下部にあるオプション設定の「DataTablesを使用」のチェックをオフにして「変更を保存」をクリックします。
投稿・固定ページの記事に表（テーブル）を挿入する
次に、「TablePress」で作成した表を投稿・固定ページに挿入していきます。
「TablePress」で作成した表はショートコードを使って自由に投稿・固定ページに貼り付けることができます。
❶「固定ページ（または投稿）」⇒「新規追加」からページの編集画面を開きます。
❷「新規固定ページを追加」の画面に「TablePress」のアイコンが追加されています。
この「TablePressからテーブルを挿入」をクリックします。
❸すると「TablePress」で作成した表（テーブル）の一覧が表示されるので、挿入したい表の「ショートコードを挿入」をクリックします。
「TablePress」の編集画面でもショートコードが表示されているので、そちらを選択してもOKです。
❹固定ページ（投稿）の編集画面にショートコードがペーストされます。
「（変更を）プレビュー」をクリックし、表の出来具合を確認してみます。
❺表がページ内に表示されていることが確認できました。
「TablePress」の使い方について、以下でもう少し詳しく触れておきますね。
「TablePress」の使い方いろいろ
「TablePress」の主な操作方法
ここでは、「TablePress」の主な操作方法について、解説していきます。
テーブルに行を追加・削除する
❶テーブルに「行」を追加するには「テーブルの操作」というところから、「１行を追加」の「追加」をクリックします。
❷すると、以下のようにテーブルに１行追加されます。
※複数行追加したい場合は、「〇行を追加」の数字を任意のものに変更すればOKです。
❸テーブルから「行」を削除するには削除したい行にチェックをして、「選択した行」の「削除」をクリックすれば削除できます。
テーブルに列を追加・削除する
❶テーブルに「列」を追加するには「テーブルの操作」というところから、「１列を追加」の「追加」をクリックします。
❷すると、以下のようにテーブルに１列追加されます。
※複数列追加したい場合は、「〇列を追加」の数字を任意のものに変更すればOKです。
❸テーブルから「列」を削除するには削除したい列にチェックをして、「選択した列」の「削除」をクリックすれば削除できます。
※追加・削除ともに「変更を保存」をクリックしておくのを忘れないようにしましょう。
セルを伸縮させる
「TablePress」はデフォルトのままだと各セルが小さめで入力しにくいです。
なので、セルを伸縮させることで、入力しやすくする方法があります。
❶セルの右下にあるマークをクリックしたまま引っ張ります。
❷すると、以下のように上下に広げれば入力しやすくなりますのでお試しください。
「高度なエディター」から様々な編集をする
「高度なエディター」というボタンをクリックすると、セル内に対して簡単な編集画面を表示させることもできます。
❶「テーブルの操作」というところにある「高度なエディター」をクリックします。
❷そのあとにセルをクリックすると、以下のように編集画面が表示され、投稿や固定ページのように画像やタグを挿入することが可能になります。
DataTables JavaScriptライブラリの機能について
「TablePress」には「テーブルのオプション」という項目の他に、「DataTables JavaScriptライブラリの機能」という項目があります。
これは、ブログやWebサイトの訪問者さんが表を並べ変えたり、検索したりできるようにするための機能です。
|
項目
|
内容
|
|---|---|
| DataTablesを使用 | 「DataTablesを使用」 にチェックすると、以下の機能が使えるようになります。
チェックを外したときは、以下のすべての機能がキャンセルされます。 |
| 並べ替え | 「並べ替え」にチェックすると、訪問者さん自身で表の並べ替えができるようになります。 |
| 検索/フィルター | 「検索/フィルター」にチェックすると、訪問者さんが表内の検索・フィルターを使用でき、表内で検索ワードを含む行だけを表示することができるようになります。 |
| ページ送り | 「ページ送り」にチェックすると、訪問者さんが表のページ分割をできるようになります。 |
| ページ分割の行数を変更 | 「ページ分割の行数を変更」にチェックすると、ページ分割で表示する行数を訪問者さんが変更できるようになります。 |
| 情報 | 「情報」にチェックすると、行数など、現在表示されているデータに関する情報とともに表の情報表示を有効にすることができます。 |
| 水平スクロール | 「水平スクロール」にチェックすると、列数の多い表を見やすくするために、水平スクロールを有効化できます（スマホで見てもらう場合、必要となるケースが多いです）。 |
| カスタム コマンド | チェックを付けると、高度な用途で使用するカスタムコマンドを追加することができます。 |
まとめ
というわけで今回は、「TablePress」で表を簡単に作る方法について解説させていただきました。
ブログやWebサイトでは表形式でお伝えしたいことも少なからずあり、そういった場合にはいちいちテーブルタグを使うよりも「TablePress」を利用した方が手軽でキレイな表を作成できるんですね。
「TablePress」を使いこなせるようになれば非常に表の作成が楽になりますので、ぜひ活用してみてほしいなと思います。
自由と自分らしいライフスタイルの描き方
