WordPress TablePressプラグインで表をらくらく作る方法

WordPress

【WordPressで表作成】TablePressプラグインで表をらくらく作る方法

投稿日:2019年5月12日 更新日:

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

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

表を作るにはHTMLのtableを利用するか、プラグインで実現できます。ここでは、TablePressというプラグインを利用して表を作る方法を説明していきますね!

 


 

TablePress(テーブルプレス)とは

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

プラグインTablePressを有効化
 

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

本記事でご紹介する項目

  1. TablePressのインストール
  2. TablePressで表を作成
  3. TablePressのショートコードに貼り付ける
  4. TablePressの詳しい説明

 
 

TablePressのインストール

TablePressの作り方2 TablePressをインストールする
 

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

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

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

 

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

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

TablePressでテーブルを作成する

TablePressの作り方2 TablePressで表を作成する
 

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

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

「テーブルの名前」と「説明(省略可)」、「行数」・「列数」を入力します。
WordPress 表の名前と行・列など基本情報を入力して保存する
 

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

 

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


 

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


 

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

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

 
 

記事に表を挿入する

TablePressの作り方3 任意のページにショートコードを貼り付ける
 

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

作成した表はショートコードとして任意のページに貼り付けることができます。投稿(または固定ページ)>新規追加からページの編集画面を開きましょう。
WordPress 固定ページ(または投稿ページ)の編集画面を開く
 

TablePressのアイコンが追加されています。TablePressのアイコンをクリックしてテーブルを挿入をクリックします。
TablePressのアイコンをクリック
 

挿入する表の「ショートコードを挿入」をクリックします。
TablePressで作成した表に対するショートコードを挿入する
 

補足

TablePressの編集画面でショートコードが表示されていますので、そちらを選択しても可能です。
TablePressの作成・編集画面にもショートコードは表示されています

 

投稿画面にショートコードが貼付けられます。「プレビュー」をクリックし、表の表示を確認しましょう。
TablePressのショートコードを挿入後プレビューボタンを押下
 

表がページ内に表示されていることがわかります。
TablePressで作成した表が表示された
 

以上で、表のページへの埋め込みは完了です。
 
 

補足 TablePressの詳しい使い方

TablePressの作り方補足 TablePressの詳しい使い方説明
 

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

テーブルの主な操作

ここでは、テーブルの主要な操作方法を説明していきます。
 

テーブルに行・列を追加する

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


 

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


 

レーブルの行・列を削除する

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


 

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

セルの伸び縮み

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


 

高度なエディター

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

TablePress 高度なエディター
 


 
 

色々な設定オプション

ここでは、TablePressの色々な設定オプションについて説明していきましょう。
 

TablePress のオプション設定
 

項目内容
テーブルの見出し行「テーブルの見出し行」チェックを付けると、テーブルの最初の行をテーブル見出しにすることができます。
テーブルのフッター行「テーブルのフッター行」チェックを付けると、テーブルの最後の行をテーブルフッターにすることができます。(フッターにすることはあまりないので、使わないかもしれません。)
行の色を交互にする「行の色を交互にする」チェックを付けると、連続する行の背景色を別々の色にすることができます。(付けた方が、見やすくなります。)
カーソルのある行をハイライト表示「カーソルのある行をハイライト表示」チェックを付けると、マウス カーソルを行に合わせている間、行の背景色を変更してハイライト表示することができます。
テーブル名を表示「テーブル名を表示」チェックを付けると、テーブル名をテーブルの上下(選択できる)に表示することができます。
テーブルの説明の表示「テーブルの説明の表示」チェックを付けると、テーブルの説明をテーブルの上下(選択できる)に表示することができます。
追加のCSSクラス「追加のCSSクラス」スタイルの指定に使用する追加のCSSクラス(カスタムCSSで保存したクラス名)を、ここに入力できます。

 

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


 

項目内容
DataTablesを使用「DataTablesを使用」 このテーブルで以下のDataTables JavaScriptライブラリ機能を使用する場合にチェックを付けます。
並べ替え「並べ替え」チェックを付けると、訪問者がテーブルの並べ替えをすることができます。
検索/フィルター「検索/フィルター」チェックを付けると、訪問者がテーブルの検索、フィルターを使用でき、テーブル内で検索語を含む行だけを表示することができます。
ページ送り「ページ送り」チェックを付けると、訪問者がテーブルのページ分割をできるようになります。
ページ分割の行数を変更「ページ分割の行数を変更」チェックを付けると、ページ分割で表示する行数を訪問者が変更できます。
情報「情報」チェックを付けると、行数など、現在表示されているデータに関する情報とともにテーブル情報の表示を有効にすることができます。
水平スクロール「水平スクロール」チェックを付けると、列数の多いテーブルを見やすくするために、水平スクロールを有効にできます。(スマホで見てもらう場合、必要ですのでチェックしておきましょう。)
カスタム コマンドチェックを付けると、高度な用途で使用するカスタムコマンドを追加することができます。

 

使わない場合は、チェックをはずしましょう。
DataTablesを使用するのチェックをはずします
 

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

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

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

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

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


 

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

 

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

 
 

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

いかがでしたでしょうか。今回は、WordPressのプラグインTablePessを利用して表を作る方法をご紹介しました。
 

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

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

便利な機能ですのでぜひ活用してみてください。
 

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


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

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

詳細はこちら


 


 

おすすめ記事3選

【2019年度】WordPressブログアフィリエイトにおすすめのテーマ5選

ブログアフィリエイトを本格的に始めるなら、広告の埋め込み機能をはじめ記事装飾・デザイン機能が圧倒的に豊富なブログに特化した有料テーマがおすすめです。 当ブログで利用している「AFFINGER5」や関連サイトで利用している「賢威」をはじめ、アフィリエイトでおすすめ・実績のあるテーマを5選ご紹介していきます。

【初心者向け】WordPressを使ったアフィリエイトの始め方を徹底解説

これから初めてWordPressでアフィリエイトを始めようと思った時に、まず何から手をつけたら良いかわからないという方が多いのではないでしょうか。 本記事では、WordPressでアフィリエイトを始めたい初心者を対象にアフィリエイトの始め方をご紹介していきます。

【2019年版WordPress(ワードプレス)の使い方総まとめ】

本記事ではWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方まで、総まとめ編として説明していきます。 WordPressの使い方をしっかり勉強したい方はぜひご覧ください。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-, ,

Copyright© WEBST8 , 2019 All Rights Reserved Powered by AFFINGER5.