こんにちは。
こびとです（＠kobito.mini）
今回から自分の備忘録がてらWordPressでの使い方やプラグインのことを書いていきます。
私のように全くの知識ゼロ。
初心者ブロガーさんのためにもなればと思います。
今回は、以前からブログ内に表を作りたかったけどやり方が分からなかった。
そんな私がたどり着いたWordPressのプラグイン。
TablePress(テーブルプレス）についてです。
これがすごく便利だったので、
ablePressを使って表を作成する方法を紹介します！
TablePress（テーブルプレス）とは？
ワードプレスのプラグインの1つで、HTMLやCSSをよく理解していないような私でも直感的に操作可能！
しかもあっという間に憧れの表を作ることができます。
色々と表を装飾もできるようですが、それにはCSSが必要になってくるようなので…。
今回は初心者向けにベーシックな作り方をお伝えしていきます！
TablePress（テーブルプレス）導入
それでは自身のWordPressへ
TablePressを導入する流れです↓
- TablePress（テーブルプレス）をインストールする。
- TablePress（テーブルプレス）で表を作成する。
- TablePress（テーブルプレス）で作った表のショートコードを記事に貼り付ける。
全体の流れとしては上記の通りです。
A8.net
TablePressインストール
上記の流れをもう少し詳しく解説していきます。
▶まず①のTablePress（テーブルプレス）をインストールについてです。
WordPressのダッシュボードから
「プラグイン」→「新規追加」→右側の検索に「TablePress」と入力。
▶このアイコンが目印です。
「今すぐインストール」をクリックします。
次に、赤く囲ったところを「有効化」してください。
▶WordPressのダッシュボード左側メニューバーにTablePressが表示されるようになります。
ここまででTablePressのインストール作業は完了となります！
実際に表を作ってみよう
②の表を作っていきましょう。
▶WordPressのダッシュボードにTablePressが表示されるようになっていることを確認後、
「TablePress」→「新しいテーブルを追加」をクリック。
▶上部の「新規追加」をクリック。
「テーブルの名前」には自分で何の表なのか分かりやすい名前を付けます。
今回は適当に《欲しいものリスト》にしました。
次の段の「説明」は書かなくてもOKです。
さらに次の段の「行数」と「列数」は後からも変更できるので、おおよその数を入力してください。
ここまで入力したら下段の「テーブルを追加」をクリックします。
▶上記で作成したテーブルに文字や数字を入れる作業に入ります。
「テーブルの内容」にお好みで入力。
今回は行数・列数を5と入力していましたが余りました。
▶余った行数と列数は削除可能です。
不要な列にチェックを入れます。（画像であればD/Eにチェックが入っています）
チェック後、「テーブルの操作」にある「選択した列」から削除を選択すると消えます。
逆に列や行が足りないときは、上記同様にチェックを入れて挿入をクリックすることで増やすことが出来ます。
TablePress（テーブルプレス）設定
上記まで表の入力作業が終わったら、次は表の表示の仕方を設定していきます。
▶上記と同じ画面の下段に「テーブルのオプション」という項目があります。
ここはデフォルトで以下のように3箇所にチェックが入っているので、このままでOKです！
ここで表示されている各項目については以下の通りです↓
| テーブルの見出し行 | 「テーブルの見出し行」チェックを付けると、テーブルの最初の行をテーブル見出しにすることができます。 |
| テーブルのフッター行 | 「テーブルのフッター行」チェックを付けると、テーブルの最後の行をテーブルフッターにすることができます。（フッターにすることはあまりないので、使わないかもしれません。） |
| 行の色を交互にする | 「行の色を交互にする」チェックを付けると、連続する行の背景色を別々の色にすることができます。（付けた方が、見やすくなります。） |
| カーソルのある行をハイライト表示 | 「カーソルのある行をハイライト表示」チェックを付けると、マウス カーソルを行に合わせている間、行の背景色を変更してハイライト表示することができます。 |
| テーブル名を表示 | 「テーブル名を表示」チェックを付けると、テーブル名をテーブルの上下（選択できる）に表示することができます。 |
| テーブルの説明の表示 | 「テーブルの説明の表示」チェックを付けると、テーブルの説明をテーブルの上下（選択できる）に表示することができます。 |
| 追加のCSSクラス | 「追加のCSSクラス」スタイルの指定に使用する追加のCSSクラス（カスタムCSSで保存したクラス名）を、ここに入力できます。 |
▶さらに下段にある「DataTables Javascriptライブラリ機能」を設定していきます。
この機能はサイト訪問者が、表を分かりやすく並べ変えたり、検索したりできるよう設定する項目です。
基本的に「DataTables Javascriptを使用」はデフォルトでチェックが入っているので、チェックは外しておきます。
各項目については以下の通りです↓
| DataTablesを使用 | 「DataTablesを使用」 このテーブルで以下のDataTables JavaScriptライブラリ機能を使用する場合にチェックを付けます。 |
| 並べ替え | 「並べ替え」チェックを付けると、訪問者がテーブルの並べ替えをすることができます。 |
| 検索/フィルター | 「検索/フィルター」チェックを付けると、訪問者がテーブルの検索、フィルターを使用でき、テーブル内で検索語を含む行だけを表示することができます。 |
| ページ送り | 「ページ送り」チェックを付けると、訪問者がテーブルのページ分割をできるようになります。 |
| ページ分割の行数を変更 | 「ページ分割の行数を変更」チェックを付けると、ページ分割で表示する行数を訪問者が変更できます。 |
| 情報 | 「情報」チェックを付けると、行数など、現在表示されているデータに関する情報とともにテーブル情報の表示を有効にすることができます。 |
| 水平スクロール | 「水平スクロール」チェックを付けると、列数の多いテーブルを見やすくするために、水平スクロールを有効にできます。（スマホで見てもらう場合、必要ですのでチェックしておきましょう。） |
| カスタム コマンド | チェックを付けると、高度な用途で使用するカスタムコマンドを追加することができます。 |
これで表は完成！
記事へ表を挿入する方法
作成した表はショートコードとして記事ページに貼り付けて使います。
2パターンやり方があるので紹介します。
▶①投稿(または固定ページ)＞新規追加からページの編集画面を開きます。
ビジュアルエディタ上部にTablePressのアイコンが追加されていますので、TablePressのアイコンをクリックします。
先ほど作った表の「ショートコードを挿入」をクリックします。
すると右側にショートコードが表示されているのでコピーします。
あとは記事に張り付けるだけです。
編集画面ではコードのみ表示されますが、プレビューで確認するときちんと表が挿入されています。
▶②もう1つの挿入方法は、TablePressプラグインで表を作成した際にすでに表の編集画面にショートコードが表示されているのでそこでコピーしておく形になります。
先にコピーしておけば、記事編集画面からTablePressへいかずにすぐ貼り付けられるので時短になります。
私の場合は②で表を挿入することが多いですね。
以上が初心者向けのWordPressへ表を作成する方法になります。
表があることで訪問者が見やすくなり、伝えたいことも分かりやすく伝えることができます！
TablePress（テーブルプレス）プラグインは本当に便利で楽なのでおすすめです。
投稿者プロフィール
コメント