【TablePressの使い方】WordPress表作成プラグイン

今回は、WordPressのプラグイン TablePress(テーブルプレス）プラグインを利用して表を作成する方法を紹介します。

TablePressを利用すると、標準的な表に加えて並べ替えやフィルタリングなど便利な機能を表に追加することもできます。

ワードプレスで料金表をページの中に作りたいんですが、表ってどうやったら作れるんでしょうか？

表を作るにはテーブルブロックを使うか、プラグインで実現できます。今回はTablePressで表を作る方法を説明していきます！

【はじめに】TablePressは表作成のプラグイン

TablePress(テーブルプレス)は、表を作ることができるプラグインです。標準的な表に加えて並べ替えやフィルタリングなど便利な機能を表に追加することもできます。

ここでは以下の4つの章立てにしてTablePressの使い方を説明していきたいと思います。

TablePressで表・テーブルを作成する方法

【STEP1】TablePressをインストール・有効化する

まずプラグイン「TablePress」をインストールしましょう。プラグイン＞新規追加を選択します。

プラグインのインストール画面で、検索窓に「TablePress」と入力して、ヒットした「TablePress」を「今すぐインストール」をクリックします。

「Table」と「Press」の間にスペースを入れて検索すると「Table Press by Supsystic」など別のプラグインが出てきますので、間違えないよう注意してください。

「TablePress」が表示されましたら、インストールが完了しましたら、「有効化」をクリックしてください。

左のメニューバーにTablePressが表示されるようになりました。

「プラグインや機能アップデートに関するメールを受信するか？」といった画面が表示された場合は、「スキップ」としておきましょう。以上でインストール作業は完了です。

【STEP2】TablePressでテーブルを作成する

次に、TablePressで表を作成していきます。

管理画面左側のメニューバーから「TablePress」＞「新しいテーブルを追加」をクリックします。

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

テーブル作成後に名前や行・列など変更は可能です。行・列などある程度計算して近い値を入れておくと楽です。

作成した表に値を入れていきましょう。

表に値を入れ終わったら、ページ下部にある「Enable Visitor Features(※後半で補足)」のチェックをオフにして、変更を保存ボタンを押下します。

■TablePress表を入力後に変更を保存

TablePressの編集画面でショートコードが表示されています。

見たところ、たくさんの設定項目があるんですね！

そうですね、TablePressには色々なオプションが付いています。詳細は後ほど説明しますので、ここでは一旦先に進めていきますね。

【STEP3】記事に表を挿入する

最後に、TablePressで作成した表をページに挿入していきます。

投稿(または固定ページ)＞新規追加からページの編集画面を開きましょう。「+」ボタンを押してブロックを追加します。

検索欄に「TablePress table」と入力してTablePress tableブロックを利用します。

ブロックを追加すると右側のブロック設定画面から埋め込みたいテーブルを選択できるので、こちらで先ほど作成したテーブルを選択すればOKです。

プレビューで表示画面を確認してTablePressで作成した表が表示されていることを確認して完了です。

(補足)クラシックエディター版で表を挿入する方法

旧エディター(クラシックエディター)をご利用している場合は、下記の方法で表を挿入できます。

エディターを開くとTablePressのアイコンが追加されています。TablePressのアイコンをクリックしてテーブルを挿入をクリックします。

挿入する表の「ショートコードを挿入」をクリックします。

TablePressの詳しい使い方

最後に、ここでは、TablePressでできる使い方の詳細や、色々な設定項目・オプションについて説明していきます。

あとからテーブルに行・列を追加する

テーブルに行を追加するには、「1」行を追加の「追加」ボタンを押下します。

テーブルに列を追加するには、「1」列を追加の「追加」ボタンを押下します。

あとからテーブルの行・列を削除する

行や列を減らす場合は、削除したい行や列を選択し、「テーブル操作」からそれぞれ「選択した行」、「選択した列」の「削除」をクリックします。

削除されたら、「変更を保存」をクリックすれば、完了です。

セルを結合する

横や縦に並んだセルを結合したい場合は、Shiftを押しながら結合したいセルをクリックすることで複数選択し「Combine/Merge」をクリックします。

そうすると​、横方向に連結した際は右側のセルに「#colspan#」、縦方向に連結した際は下側のセルに「#rowspan#」といったタグが入力され、セルが結合されます。

編集上のセルを伸び縮みさせる

表内の各セルが狭くて書きにくい場合は、A、B、C・・と書かれた列見出しの間、あるいは1、2、3・・・と書かれた行見出しの間にカーソルを合わせてクリックしながらドラッグすることで伸縮することができます。

高度なエディターを利用する

高度なエディターボタンを押して、セル内に対して太字や画像挿入など簡単なエディターを利用することもできます。

テーブルのオプションを利用する

テーブルの基本オプションを利用すると、見出しやフッター行、表示色など簡単な編集ができます。

サイト訪問者向けのテーブル機能で並べ替え・フィルタ機能を設定する

「Table Features for Site Visitors」を利用すると、訪問者が、表を並べ変えたり、検索したりできるようにできます。

表の列数や行数が多い場合、並べ替えたりフィルタリングができるので便利です。

使わない場合は、チェックをはずしましょう。

テーブルを複製・エクスポートする

一度作成したテーブルは複製して再利用したり、エクスポートすることができます。

■テーブルを複製(コピー)して再利用する

■テーブルのエクスポート(CSV形式)

テーブルをインポートする

TablePress＞インポートからCSV形式やHTML形式で作成した情報をテーブルとしてインポートすることができます。データ量が多い場合に、便利です。

(補足)「カスタムCSS」で表のスタイルを調整する

CSSが使える方は、カスタムCSSで表のスタイルを調整することができます。

プラグインのオプションを開き、下記のボックスの中にCSSを入力して見た目を変えることができます。

表ごとに個別にCSSを適用したい場合、カスタムCSSでクラスを追加することで実現できます。

表の見た目をいろいろ変えてみたいけど、CSSを覚えないといけないわね。。。

CSSを覚えると、自分好みのスタイルを実現できるので、頑張って覚えましょう！

以下の記事ではCSSの勉強を始めた初心者の方向けに、CSSの基本や書き方、よく使うプロパティ一覧を解説しているので、興味がある方はこちらもご覧ください。

【まとめ】テーブルプレスをうまく作って表を作ろう

まとめです。今回は、WordPressのプラグインTablePessを利用して表を作る方法をご紹介しました。

ホームページを作る際は色々な表などを作りたい場合も多いと思います。そういう場合「TablePress」は非常に役に立つプラグインです。

「カスタムCSS」のところは、CSSの知識が少し必要ですが、ネットにはCSSのサンプルがたくさん掲載されていますので、それらを参考にされると良いと思います。

今回は以上になります。最後までご覧いただきありがとうございました。

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室