ブログ構築

「TablePress」でWordPressに表(テーブル)を簡単に作成する方法を解説します

こんにちは、風早です!
僕の詳しいプロフィール

さて、今回のお題はこちらです!

「TablePress」で表を簡単に作る方法

ブログやWebサイト上に料金表や比較表のような表(テーブル)を表示させたいとき、タグを使うと色々と複雑で思ったような表ができないこともしばしば…。

でも、投稿や固定ページで表を作成するときに、テーブルタグをいちいち入力しなくても簡単・手軽に作成できる方法があるんですね。

それが「TablePress」というWordPressのプラグインです。

「TablePress」は、HTMLやCSSを知らない初心者の方でも直感的な操作で簡単に表を作ることができるとても便利なプラグインです。

そこで今回は、「TablePress」でWordPressに表を簡単に作る方法について解説していこうと思います。

プラグインのインストール手順と管理の仕方については、下記のページを参考にされてください。

WordPressプラグインのインストール手順と管理の方法を解説します WordPressにはたくさんのメリットがありますが、中でもピカイチな機能が「プラグイン」です。 プラグインはスマ...

「TablePress」の導入方法と使い方

「TablePress」をインストールする

まず「TablePress」をWordPressにインストールしていきます。

WordPress管理画面左メニューの「プラグイン」⇒「新規追加」をクリックします。


プラグインのインストール画面でキーワード欄に「TablePress」と入力して、出現した「TablePress」の「今すぐインストール」をクリックします。


「Table」と「Press」の間に半角または全角のスペースを入れて入力すると以下のように別のプラグインがヒットしてしまうので、間違えないよう注意が必要です。



「有効化」をクリックします。


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



以上でインストール作業は完了です。

「TablePress」で表(テーブル)を作成する

次に、「TablePress」で実際に表(テーブル)を作成していきます。

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


以下の情報を入力してから「テーブルを追加」をクリックします。

  • 「テーブルの名前」
  • 「説明(省略可)」
  • 「行数」・「列数」

「行数」・「列数」はテーブル作成後に変更可能ですが、事前に必要な行と列を計算して近い値を入れておくと楽ですよ。

次に作成した表に値を入れていきます。


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


投稿・固定ページの記事に表(テーブル)を挿入する

次に、「TablePress」で作成した表を投稿・固定ページに挿入していきます。

「TablePress」で作成した表はショートコードを使って自由に投稿・固定ページに貼り付けることができます。

「固定ページ(または投稿)」⇒「新規追加」からページの編集画面を開きます。


「新規固定ページを追加」の画面に「TablePress」のアイコンが追加されています。

この「TablePressからテーブルを挿入」をクリックします。


すると「TablePress」で作成した表(テーブル)の一覧が表示されるので、挿入したい表の「ショートコードを挿入」をクリックします。


補足

「TablePress」の編集画面でもショートコードが表示されているので、そちらを選択してもOKです。


固定ページ(投稿)の編集画面にショートコードがペーストされます。

「(変更を)プレビュー」をクリックし、表の出来具合を確認してみます。


表がページ内に表示されていることが確認できました。


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

「TablePress」の使い方について、以下でもう少し詳しく触れておきますね。

「TablePress」の使い方いろいろ

「TablePress」の主な操作方法

ここでは、「TablePress」の主な操作方法について、解説していきます。

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

テーブルに「行」を追加するには「テーブルの操作」というところから、「1行を追加」の「追加」をクリックします。


すると、以下のようにテーブルに1行追加されます。


※複数行追加したい場合は、「〇行を追加」の数字を任意のものに変更すればOKです。

テーブルから「行」を削除するには削除したい行にチェックをして、「選択した行」の「削除」をクリックすれば削除できます。


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

テーブルに「列」を追加するには「テーブルの操作」というところから、「1列を追加」の「追加」をクリックします。


すると、以下のようにテーブルに1列追加されます。


※複数列追加したい場合は、「〇列を追加」の数字を任意のものに変更すればOKです。


テーブルから「列」を削除するには削除したい列にチェックをして、「選択した列」の「削除」をクリックすれば削除できます。


※追加・削除ともに「変更を保存」をクリックしておくのを忘れないようにしましょう。


セルを伸縮させる

「TablePress」はデフォルトのままだと各セルが小さめで入力しにくいです。

なので、セルを伸縮させることで、入力しやすくする方法があります。

セルの右下にあるマークをクリックしたまま引っ張ります。


すると、以下のように上下に広げれば入力しやすくなりますのでお試しください。


「高度なエディター」から様々な編集をする

「高度なエディター」というボタンをクリックすると、セル内に対して簡単な編集画面を表示させることもできます。

「テーブルの操作」というところにある「高度なエディター」をクリックします。


そのあとにセルをクリックすると、以下のように編集画面が表示され、投稿や固定ページのように画像やタグを挿入することが可能になります。


DataTables JavaScriptライブラリの機能について

「TablePress」には「テーブルのオプション」という項目の他に、「DataTables JavaScriptライブラリの機能」という項目があります。

これは、ブログやWebサイトの訪問者さんが表を並べ変えたり、検索したりできるようにするための機能です。


項目
内容
DataTablesを使用 「DataTablesを使用」 にチェックすると、以下の機能が使えるようになります。

チェックを外したときは、以下のすべての機能がキャンセルされます。

並べ替え 「並べ替え」にチェックすると、訪問者さん自身で表の並べ替えができるようになります。
検索/フィルター 「検索/フィルター」にチェックすると、訪問者さんが表内の検索・フィルターを使用でき、表内で検索ワードを含む行だけを表示することができるようになります。
ページ送り 「ページ送り」にチェックすると、訪問者さんが表のページ分割をできるようになります。
ページ分割の行数を変更 「ページ分割の行数を変更」にチェックすると、ページ分割で表示する行数を訪問者さんが変更できるようになります。
情報 「情報」にチェックすると、行数など、現在表示されているデータに関する情報とともに表の情報表示を有効にすることができます。
水平スクロール 「水平スクロール」にチェックすると、列数の多い表を見やすくするために、水平スクロールを有効化できます(スマホで見てもらう場合、必要となるケースが多いです)。
カスタム コマンド チェックを付けると、高度な用途で使用するカスタムコマンドを追加することができます。
風早
風早
CSSが使える方は、カスタムCSSで表のスタイルを調整することができます。

まとめ

というわけで今回は、「TablePress」で表を簡単に作る方法について解説させていただきました。

ブログやWebサイトでは表形式でお伝えしたいことも少なからずあり、そういった場合にはいちいちテーブルタグを使うよりも「TablePress」を利用した方が手軽でキレイな表を作成できるんですね。

「TablePress」を使いこなせるようになれば非常に表の作成が楽になりますので、ぜひ活用してみてほしいなと思います。



自由と自分らしいライフスタイルの描き方


ABOUT ME
運営者名:風早 ノヴ
愛知県出身。

名古屋駅から車で15分くらいのところでのんびり暮らし。

気づけばビジネス歴10年超のアラフォー主夫です。

ダークブラックな企業で働くうちに人生があっという間に過ぎ去ってしまうことにとてつもない恐怖感を覚え、

「このままではヤバイ!」

的な感じで暗中模索。

同時期に自分が社会不適合者だと気づき、自分のペースで穏やかに暮らしていきたいとの思いからネットでビジネスを始めてみました。

その後、アフィリでそこそこ成果が出たのでウザかった職場とサヨナラ!
→個人事業主へ。

それからとんでもなく遠回りしたものの、今はブログ・メルマガ・SNS・コンテンツ販売で家から出ずに稼ぎつつ、1人でヒッソリと2社の法人を経営できるまでに…。

自宅から一切出なくても稼げるようになったので、念願だったひきこもりには成功中です。

最近は、

『家から出ずに完結するビジネスを作り副業から脱サラして独立した後も経営者として安定的に自立して暮らす』

をコンセプトとして、

・場所を選ばない働き方
・理想とする丁寧な暮らし

の実現を目的としたコミュニティを運営しています。

たった一度の人生なので、会社に依存せずに自由で自分らしく生きていきたい方、もっと人にやさしく生きていきたい方は、僕のコミュニティを覗いてみたら何かが変わるかもです。

【趣味】漫画・アニメ・車
【将来の夢】中古車販売店オーナー