今回は、WordPressのプラグイン TablePress(テーブルプレス）プラグインで表を利用して表を作成する方法を紹介します。
もくじ
【はじめに】TablePressとは有名な表作成プラグイン
TablePress(テーブルプレス)は、ワードプレスのプラグインで、HTMLやCSSを知らない初心者でも、感的な操作で簡単に表を作ることができます。（表を見やすく装飾する場合は、少しCSSが必要となります。）
ここでは以下の４つの章立てにしてTablePressの使い方を説明していきたいと思います。
本記事でご紹介する項目
- TablePressのインストール
- TablePressで表を作成
- TablePressのショートコードに貼り付ける(ブロックエディター版/クラシックエディター版の2つで解説)
- TablePressの詳しい説明
【STEP1】TablePressをインストール・有効化する
まずプラグイン「TablePress」をインストールしましょう。プラグイン＞新規追加を選択します。
プラグインのインストール画面で、検索窓に「TablePress」と入力して、ヒットした「TablePress」を「今すぐインストール」をクリックします。
「TablePress」が表示されましたら、インストールが完了しましたら、「有効化」をクリックしてください。
左のメニューバーにTablePressが表示されるようになりました。以上でインストール作業は完了です。
【STEP2】TablePressでテーブルを作成する
次に、TablePressで表を作成していきます。
管理画面左側のメニューバーから「TablePress」＞「新しいテーブルを追加」をクリックします。
「テーブルの名前」と「説明（省略可）」、「行数」・「列数」を入力します。
作成した表に値を入れていきましょう。
表に値を入れ終わったら、ページ下部にあるオプション設定「DataTablesを使用」のチェックをオフにして、変更を保存ボタンを押下します。
ショートコードをメモしておきましょう
TablePressの編集画面でショートコードが表示されています。後で利用するのでメモしておきましょう。
【STEP3-A】記事に表を挿入する(ブロックエディター版)
最後に、TablePressで作成した表をページに挿入していきます。
投稿(または固定ページ)＞新規追加からページの編集画面を開きましょう。「+」ボタンを押してブロックを追加します。
ウィジェット＞ショートコードを選択します。
先ほどメモしておいた、TablePressで作成した表のショートコードを貼り付けてプレビューで確認する
TablePressの表設定画面からショートコードは確認できます
TablePressの編集画面でショートコードが表示されていますので、わからない方は再度確認してみてください。
TablePressで作成した表が表示されていることを確認して完了
【STEP3-B】記事に表を挿入する(クラシックエディター版)
旧エディター(クラシックエディター)をご利用している場合は、下記の通りです。
エディターを開くとTablePressのアイコンが追加されています。TablePressのアイコンをクリックしてテーブルを挿入をクリックします。
挿入する表の「ショートコードを挿入」をクリックします。
補足
TablePressの編集画面でショートコードが表示されていますので、そちらを選択しても可能です。
投稿画面にショートコードが貼付けられます。「プレビュー」をクリックし、表の表示を確認しましょう。
表がページ内に表示されていることがわかります。
以上で、表のページへの埋め込みは完了です。
【補足】TablePressの詳しい使い方
最後に、ここでは、TablePressでできる使い方の詳細や、色々な設定項目・オプションについて説明していきます。
テーブルの主な操作
ここでは、テーブルの主要な操作方法を説明していきます。
テーブルに行・列を追加する
テーブルに行を追加するには、「1」行を追加の「追加」ボタンを押下します。
テーブルに列を追加するには、「1」列を追加の「追加」ボタンを押下します。
レーブルの行・列を削除する
行や列を減らす場合は、削除する行や列にチェックを付け、「テーブル操作」からそれぞれ「選択した行」、「選択した列」の「削除」をクリックします。
削除されましたら、「変更を保存」をクリックすれば、完了です。
セルの伸び縮み
表内の各セルが狭くて書きにくい場合は、セル右下の部分にカーソルを合わせて伸縮することができます。
高度なエディター
高度なエディターボタンを押して、セル内に対して簡単なエディターを利用することもできます。
色々な設定オプション
ここでは、TablePressの色々な設定オプションについて説明していきましょう。
| 項目 | 内容 |
|---|---|
| テーブルの見出し行 | 「テーブルの見出し行」チェックを付けると、テーブルの最初の行をテーブル見出しにすることができます。 |
| テーブルのフッター行 | 「テーブルのフッター行」チェックを付けると、テーブルの最後の行をテーブルフッターにすることができます。（フッターにすることはあまりないので、使わないかもしれません。） |
| 行の色を交互にする | 「行の色を交互にする」チェックを付けると、連続する行の背景色を別々の色にすることができます。（付けた方が、見やすくなります。） |
| カーソルのある行をハイライト表示 | 「カーソルのある行をハイライト表示」チェックを付けると、マウス カーソルを行に合わせている間、行の背景色を変更してハイライト表示することができます。 |
| テーブル名を表示 | 「テーブル名を表示」チェックを付けると、テーブル名をテーブルの上下（選択できる）に表示することができます。 |
| テーブルの説明の表示 | 「テーブルの説明の表示」チェックを付けると、テーブルの説明をテーブルの上下（選択できる）に表示することができます。 |
| 追加のCSSクラス | 「追加のCSSクラス」スタイルの指定に使用する追加のCSSクラス（カスタムCSSで保存したクラス名）を、ここに入力できます。 |
「DataTables Javascriptライブラリ機能」ですが、この機能は、訪問者が、表を並べ変えたり、検索したりできるようにするための機能です。
| 項目 | 内容 |
|---|---|
| DataTablesを使用 | 「DataTablesを使用」 このテーブルで以下のDataTables JavaScriptライブラリ機能を使用する場合にチェックを付けます。 |
| 並べ替え | 「並べ替え」チェックを付けると、訪問者がテーブルの並べ替えをすることができます。 |
| 検索/フィルター | 「検索/フィルター」チェックを付けると、訪問者がテーブルの検索、フィルターを使用でき、テーブル内で検索語を含む行だけを表示することができます。 |
| ページ送り | 「ページ送り」チェックを付けると、訪問者がテーブルのページ分割をできるようになります。 |
| ページ分割の行数を変更 | 「ページ分割の行数を変更」チェックを付けると、ページ分割で表示する行数を訪問者が変更できます。 |
| 情報 | 「情報」チェックを付けると、行数など、現在表示されているデータに関する情報とともにテーブル情報の表示を有効にすることができます。 |
| 水平スクロール | 「水平スクロール」チェックを付けると、列数の多いテーブルを見やすくするために、水平スクロールを有効にできます。（スマホで見てもらう場合、必要ですのでチェックしておきましょう。） |
| カスタム コマンド | チェックを付けると、高度な用途で使用するカスタムコマンドを追加することができます。 |
使わない場合は、チェックをはずしましょう。
(補足)「カスタムCSS」で表のスタイルを調整する
CSSが使える方は、カスタムCSSで表のスタイルを調整することができます。
プラグインのオプションを開き、下記のボックスの中にCSSを入力して見た目を変えることができます。
「カスタムCSS」に上記コードを書き込んで保存すれば、「TablePress」で作成したすべての表で、同じ書式で表を表示することができます。
表ごとに個別にCSSを適用したい場合、カスタムCSSでクラスを追加することで実現できます。
【まとめ】テーブルプレスをうまく作って表を作ろう
まとめです。今回は、WordPressのプラグインTablePessを利用して表を作る方法をご紹介しました。
ホームページを作る際は色々な表などを作りたい場合も多いと思います。そういう場合「TablePress」は非常に役に立つプラグインです。
「カスタムCSS」のところは、CSSの知識が少し必要ですが、ネットにはCSSのサンプルがたくさん掲載されていますので、それらを参考にされると良いと思います。
そのほかにもおすすめプラグインを、「目的別WordPressのおすすめプラグインを徹底解説！」でまとめてご紹介していますので、次のステップとしてぜひご参考にしてみてください。
今回は以上になります。最後までご覧いただきありがとうございましたs。
合わせて読みたい記事
WordPressの使い方を「【2020年版WordPress(ワードプレス)の使い方総まとめ】」に詳しく説明していますので、WordPressの使い方を一通り勉強したい方は合わせてご参照いただければ幸いです。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
