TablePressの使い方ーWordPressプラグイン【初心者向け】

サイト上に料金の比較表などテーブルを表示させたいときに便利なプラグイン、TablePressの使い方について解説していきます。投稿や固定ページで表を作成する際にtableタグをいちいち入力しなくても簡単に作成できるでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

WordPressのプラグインの使い方について解説する記事です。

今回は、サイト上に料金の比較表などテーブルを表示させたいときに便利なプラグイン、TablePressの使い方について解説していきます。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

大石ゆかり

田島メンター!!記事中に表を表示したいんですけど、できるんですか?HTMLのテーブルタグみたいな感じです。

田島悠介

それなら「TablePress」っていうプラグインを使うとできるよ。ちょっとやってみようか?

大石ゆかり

はい、お願いします♪

 

TablePressとは

WordPressの「TablePress」プラグインを使うと、様々な機能の付いたテーブルをタグなどを使わずに簡単に作成することができます。

投稿や固定ページで表を作成する際にtableタグをいちいち入力しなくても簡単に作成できるでしょう。

 

インストールとテーブルの作成

このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。

インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。

 

有効化し、管理画面左メニューから「TablePress」「新しいテーブルを追加」を選択します。

tabp_p_1

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

・これらの項目は全て作成後に変更できます。
・「テーブルの名前」と「説明」は省略可能です。

tabp_p_2

テーブルの編集画面です。IDとショートコードは自動で生成されますが、任意の数値を入れることもできます。
「テーブルの内容」に各項目を入力します。

tabp_p_3

編集したい行(横の並び)にチェックを入れると「テーブルの操作」から行の挿入や削除・表示/非表示の切り替えなどを行うことができます。

tabp_p_4r

同様に、列(縦の並び)にチェックを入れるとその列を編集することが可能です。

tabp_p_5r

各セルの右下部分をドラッグすることで大きさを変更することができます。

tabp_p_6

「プレビュー」をクリックすると表の状態を確認することができます。(実際に記事に表示されるものとは大きさなどが多少異なります)
「変更を保存」をクリックするとテーブルが保存されます。

tabp_p_7

 

[PR] WordPressで挫折しない学習方法を動画で公開中

記事にテーブルを追加

保存したテーブルを記事内に埋め込みます。
記事作成画面のビジュアルエディタに「TablePressからテーブルを挿入」のアイコンが追加されているのでそれをクリックします。

tabp_p_8

作成した表の一覧が表示されます。

記事に追加したいテーブルの「ショートコードを挿入」ボタンをクリックします。

tabp_p_9

記事内にコードが追加されました。

tabp_p_10

記事を保存・公開するとテーブルがサイト上で表示されます。

tabp_p_11

 

便利な機能

「DataTables JavaScriptライブラリの機能」から各種オプションを使用することが可能です。

「テーブルのページ分割(一度に表示する行数の指定)を訪問者が使用できるようにする」にチェックを入れると、一度に表示される行の数を設定することができます。(表示しきれていない分の行は右下の「次」をクリックすることで表示されます)

tabp_p_12

「訪問者がテーブルの検索またはフィルターを使用できるようにする。テーブル内で検索語を含む行だけが表示されます。」にチェックを入れると、閲覧者がサイト上で表の中の項目を検索することができるようになります。

・検索機能を使うと、そのワードを含む行だけが表示されます。
・見出しの行(一番上の行)は検索の対象になりません。

tabp_p_13

「訪問者がテーブルの並べ替えを選択できるようにする」にチェックを入れると、閲覧時に見出し項目をクリックすることで並び替えができるようになります。

一回目のクリックでは昇順(小さい値から順番)になります。

tabp_p_14

二回目のクリックでは降順(大きい値から順番)になります。
並び替えをリセットする時は、一番左上のセルをクリックすることで最初の状態に戻すことができます。

tabp_p_15

 

以上、TablePressの使い方を紹介しました。

便利な機能の多いプラグインですので、ぜひ活用してみてください。

 

大石ゆかり

簡単にきれいな表が書けるんですね♪

田島悠介

そうだね。データの表示数なんかも指定できるからいいよね♪

大石ゆかり

はい!

 

ぜひ、WordPressの使い方を覚えましょう!

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。