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

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

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

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

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

【はじめに】TablePressとは有名な表作成プラグイン

TablePress(テーブルプレス)は、ワードプレスのプラグインで、HTMLやCSSを知らない初心者でも、感的な操作で簡単に表を作ることができます。（表を見やすく装飾する場合は、少しCSSが必要となります。）
 

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

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

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

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

 

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

 

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

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

 

左のメニューバーにTablePressが表示されるようになりました。以上でインストール作業は完了です。

 
 

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

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

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

 

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

 

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

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

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

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

 

TablePressの編集画面でショートコードが表示されています。後で利用するのでメモしておきましょう。

 

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

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

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

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

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

「ショートコード」と入力してヒットした「ショートコードブロック」を選択します。

 

先ほどメモしておいた、TablePressで作成した表のショートコードを貼り付けてプレビューで確認します。

 

TablePressで作成した表が表示されていることを確認して完了
 
 

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

旧エディター(クラシックエディター)をご利用している場合は、下記の通りです。
 

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

 

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

 

TablePressの詳しい使い方

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

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

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

 

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

 

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

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

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

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

表内の各セルが狭くて書きにくい場合は、セル右下の部分にカーソルを合わせて伸縮することができます。

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

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

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

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

 

DataTables Javascriptライブラリ機能で並べ替え・フィルタ機能を設定する

「DataTables Javascriptライブラリ機能」を利用すると、訪問者が、表を並べ変えたり、検索したりできるようにできます。

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

 

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

 

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

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

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

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

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

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

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

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

 

「カスタムCSS」に上記コードを書き込んで保存すれば、「TablePress」で作成したすべての表で、同じ書式で表を表示することができます。
 

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

 

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

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

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

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

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

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

なお、そのほかのよく使うおすすめプラグイン一覧を「WordPressおすすめプラグインを一覧・目的別紹介」でご紹介していますので、プラグインをお探しの方はあわせてご参考いただけると幸いです。

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

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

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

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

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

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

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