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のショートコードに貼り付ける(ブロックエディター版/クラシックエディター版の2つで解説)
  4. TablePressの詳しい説明

 
 

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

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

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

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

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

 

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

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

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

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

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

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

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

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

 

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


 

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


 

ショートコードをメモしておきましょう

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

 

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

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

 
 

【STEP3-A】記事に表を挿入する(ブロックエディター版)

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

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

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

ウィジェット>ショートコードを選択します。
ブロックエディター >ウィジェット>ショートコード
 

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

TablePressの表設定画面からショートコードは確認できます

TablePressの編集画面でショートコードが表示されていますので、わからない方は再度確認してみてください。
TablePressの作成・編集画面にもショートコードは表示されています

 

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

【STEP3-B】記事に表を挿入する(クラシックエディター版)

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

エディターを開くと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のサンプルがたくさん掲載されていますので、それらを参考にされると良いと思います。
 

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

 

そのほかにもおすすめプラグインを、「目的別WordPressのおすすめプラグインを徹底解説!」でまとめてご紹介していますので、次のステップとしてぜひご参考にしてみてください。

【2020年版】目的別WordPressのおすすめプラグインを徹底解説!


 

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

合わせて読みたい記事

WordPressの使い方を「【2020年版WordPress(ワードプレス)の使い方総まとめ】」に詳しく説明していますので、WordPressの使い方を一通り勉強したい方は合わせてご参照いただければ幸いです。

 


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

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

詳細はこちら


 

【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト

検索して記事を見つけたい方はこちら

検索して記事を見つけたい方はこちらにキーワードを入力してお探しください。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

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

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

-WordPress
-, ,

© 2020 WEBST8のブログ Powered by AFFINGER5