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

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

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

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

 

 

TablePressとは

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

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

 

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

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

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

 

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

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

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

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

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

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

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

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

 

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

記事にテーブルを追加

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

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

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

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

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

 

便利な機能

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

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

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

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

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

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

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

 

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

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

 

 

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

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