こんにちは、ぬいぬい(@opitech_web)です！
「WordPressで、できるだけ簡単に表を作成したい」
「WodPressで少し複雑な表を作りたいんだけど、方法が分からない…」
という方に向けて、
今回は、WordPressでTablePressプラグインを利用して、表を作成する方法をご紹介します。
ぬいぬいPHPファイルをあまりいじらずに、表を簡単に作成したいという方には
おすすめのプラグインです！
TablePressで出来ること
簡単な表はもちろん、セル結合ありの表も、手軽に作成が可能です。
| 営業時間 | ||
|---|---|---|
| ランチ | 平日 | 11：00 ~ 15：00 |
| 土日・祝 | 10：30 ~ 15：30 | |
| ディナー | 毎日 | 17：30 ~ 22：00 |
まずはインストール
まず初めに、プラグインのインストールを実行していきます。
インストール～有効化の手順は、他のプラグインのインストールと一緒の手順なので、
既に分かっている方は、読み飛ばしていだたいてOKです！
①プラグイン＞新規追加
・WordPressにログイン後、サイドバーの「プラグイン」をクリックして、
「新規追加」をクリックします。
②「TablePress」を検索して、「今すぐインストール」をクリック
検索窓で「TablePress」のキーワードを検索して、
「TablePress – Tables in WordPress made easy」のプラグインが出てきたら、
「今すぐインストール」をクリックしましょう。
③「TablePress」を「有効化」
インストールが完了したら、「有効化」というボタンに切り替わるので、
忘れずに「有効化」ボタンをクリックしておきましょう。
④サイドバーに「TablePress」が表示されたことを確認
サイドバーに画像のように「TablePress」と表示されていれば、有効化完了です。
ぬいぬいこれで準備は完了です！
では、さっそく表を作っていきましょう。
「TablePress」で表を作成する
ここからは実際に、TablePressで表を作成していきます。
※初回に、「TablePress」をクリックして文章が表示された場合
サイドバーから「TablePress」を押したときに、
初回のみ、画像の文章が表示される場合がありますが、「スキップ」を押せばOKです。
気になる方に向けて、以下が和訳した内容となります。
※もし、メール通知を受け取りたいという場合は、「許可して続ける」を押してください。
セキュリティと機能のアップデート、教育コンテンツ、不定期オファーのお知らせ、および WordPress の基本的な環境情報の共有のためにメール通知を受け取るには、許可して続けるをクリックしてください。また、WordPress の基本的な環境に関する情報を共有することもできます。これにより、プラグインがあなたのサイトとより互換性を持ち、より優れた機能を発揮できるようになります。
①「新しいテーブルを追加」する
サイドバーから「TablePress」をクリックして、
「新規追加」タブから、新しいテーブルを追加していきます。
必要な項目を入力していきましょう。
入力した内容は後から変更も可能なので、大体の数値でもOK！
- テーブルの名前
- 説明（省略してもOK）
- テーブルの行数
- テーブルの列数
入力したら、「テーブルを追加」をクリック！表のアウトラインの作成完了です。
②テーブルの内容を編集（行や列の追加（削除）・セル結合）
作成したテーブルの各セルに、値を入力していきましょう。
「行や列を追加（or 削除)したい」「セルを結合したい」時の手順は、以下になります。
ぬいぬい行や列の追加も簡単にできちゃいます！
・行・列を追加（削除）する場合
①追加したい行数（列数）を指定して、「追加」をクリック。
最終行（最終列）に指定した数分が追加されます。
②テーブルで行（列）を選択した状態で、「削除」をクリックすると削除されます。
他にも複製・間に追加・移動なども、可能です。
・セルを結合する場合
ぬいぬいセル結合も、一見難しそうですが手順は簡単です！
①まずは、画面下の方にある
「Offer the following functions for site visitors with this table」のチェックを外します。
和訳すると、「このテーブルで、サイト訪問者は以下の操作（フィルター機能や、並び替え操作）を可能にする」という意味ですが、
ここにチェックが入っている状態だと、エラーがでてセル結合は出来ません。
そのため、セル結合したい場合は、チェックを外すのを忘れないようにしましょう。
②次に、結合したいセルをShift＋クリックで選択していきましょう。
③セルを選択した状態で、「Combine/Merge」をクリック。
選択していたセルに、「#colspan#(または、#rowspan#)」と表示されたらOKです。
③ショートコードを取得して、表を保存
テーブルの内容が完成したら、TablePressの編集画面上部に表示されている
「ショートコード」を、どこかにメモしておきましょう！
次に、「変更を保存」で表の内容を保存しておきます。
④作成した表を、記事に表示させる
最後に、作成した表を記事に表示させていきます。
反映させたい記事の編集画面を開いて（投稿でも、固定ページでもOK）
「＋」を押してブロックを追加ボタンを表示し、「ショートコード」のブロックを選択します。
次に、先程メモしたショートコードを貼り付けます。これで記事への記入は完成です！
表示できるかは、プレビュー画面から確認可能です。
ぬいぬいショートコードの記入だけで、記事に反映がされるので嬉しい！
同様の手順を繰り返せば、同じ記事内に、何個も表を掲載することも可能です。
TablePressのオプション機能
ここでは、お好みで追加出来るオプション部分を紹介します。
TablePress編集画面の「テーブルのオプション」の項目から
簡単に、見出しをつけたり、行の色を交互に変えることが出来ます。
| 項目 | 内容 |
|---|---|
| テーブルの見出し行 | テーブルの1行目を見出し行とする |
| テーブルのフッター行 | テーブルの最終行をフッター行とする |
| 行の色を交互にする | 行の色を交互にストライプとしてくれる |
| カーソルのある行をハイライト表示 | カーソルを載せている行に、薄く色がつくようになる |
| テーブル名を表示 | 作成時に設定したテーブル名を表示させる |
| テーブルの説明の表示 | 作成時に任意で設定したテーブル説明を表示させる |
まとめ
今回は、WordPressで「TablePess」プラグインを利用して表を作る方法をご紹介しました。
筆者は案件で、表を作成することになり、WordPressでの表の作成方法を探す中で、
「TablePress」プラグインに出会いました。
ブロックエディタで表を作成すると、セル結合が手間でしたが、
「TablePress」では簡単・手間いらず かつ、CSSでのカスタマイズ可能な点が非常に便利なので
表作成に悩んでいる方は、是非一度お試しください。
この記事が誰かの参考になれば幸いです。