プラグインの「TablePress」を使う理由
- 表を簡単に設置したい
- デザインを自由に編集したい
- セルの結合などで記述ミスによるデザイン崩れがない
- 作った表の使いまわしができる
実装例
| Apache | NGINX | |
|---|---|---|
| サーバー | c:/srv/Apache24 | c:/srv/nginx |
| Webファイル | c:/srv/html | |
| PHP | c:/srv/Apache24/php8.4(8.3) | c:/srv/nginx/php8.4(8.3) |
| MariaDB | c:/srv/MariaDB | |
| SSL | c:/srv/SSL | |
上記の表は実際に当サイトで使っている表で、複数のページに表示させています
主にパスの一例として載せています
この表は単発でも使えますし、複数のページで使いまわすこともできます
表示したい場所にショートコードを記述するだけなので、色々な場所で使えます
TablePressをインストール
WordPressの管理画面から「プラグイン」→「新規プラグインの追加」をクリック
右上にある「プラグインの検索」部分に「tablepress」を入力。暫くして一覧が表示されます
表示された上記のプラグインをインストールし有効化
「許可して続ける」をクリック
上部の緑色部分「Thanks！You should～～」
”ありがとうございますTablePress の確認メールが （メールアドレス） のメールボックスに届きます。メール内のボタンをクリックして、オプトインを完了してください。”
表を作成する
左メニュー欄にある「新しいテーブルを追加」をクリック
「テーブルの名前」：自身が分かりやすい名前（オプションで表示させることができます）
「説明」：オプションで表示させることができます
「テーブルの行数」「テーブルの桁数」：後から変更可能です
「テーブルを追加」をクリック
初期段階で2か所の説明がでます
You can change the default cell size for the table editor on this ”Edit” screen in the “表示オプション”
この「表示オプション」の「編集」画面で、テーブルエディタのデフォルトのセルサイズを変更できます。
Rigth-clicking the table content fields will open a context menu for quick access to common editing tools
テーブルコンテンツフィールドを右クリックすると、一般的な編集ツールにすばやくアクセスできるコンテキストメニューが開きます。
テーブル情報
テーブルID:ショートコードにも使われます
Shortcode：このショートコードを使って実際に表示させたい場所に記述します
テーブルの名称：表を作成した時に入力した名前。ここでも変更可
テーブルの内容
各セルに適当に文字や数字をいれてください
※私の環境だけなのかわかりませんが、各セルに日本語入力すると、１文字目に頭文字である小文字が最初に出ます
テーブルの操作
各セルを選択した状態で上記のボタンをクリックして、追加、削除、移動等ができます
セル単体ではなくその対象の「１行」「１列」になります
右上の「Combine/Merge」はセルの結合に使います。
テーブルのオプション
基本はこのままで大丈夫です
Table Featuers for Site Visitors
・「Enable Visitor Features」：デフォルトではONになっていますが、セルの結合を使う場合はチェックを外します
・水平スクロール：上記「Enable Visitor Features」のチェックを外すとこれも無効になります
テンプレートにCocoonを使っている場合はそちらで有効化する
編集が終わったら「変更を保存」をクリックで保存
作ったテーブルをページに表示させる
表示させたい場所に上記のショートコードを記述
複数ページに使いまわしもできす
複数のテーブルを作った場合、それぞれここのショートコードを利用します
セルを結合する
セルの結合を有効化する
WordPressの管理画面から「TablePress」→「すべてのテーブル」→（「編集したいテーブル」を選択）
表示されたページの下部にある「Table Featurs for Site Visitors」のチェックを外す
するとその下にある項目がグレーアウトされます
※水平スクロールも使えなくなるので、テーマ「Cocoon」を利用されている方はそちらで有効化します
セルの結合方法
エクセルを使ったことがある人は分かると思いますが、結合したいセルをマウスの左クリックを押したまま結合したい範囲まで移動させます
横向き「colspan」
縦向き「rowspan」
上の画像の１行目は「thead」と呼ばれる行でタイトル扱いになります
なので、横に結合はできますが１行目を含む縦方向には結合できません。
結合したいセルを選択した後、「テーブル操作」にある「Combine/Merge」をクリックする
選択した最後のセルに「#colspan#」「#rowspan#」の文字が入ります
この時点では結合の状態が分からないので、実際に表示させて確認してください
縦線をいれてみやすくする
デフォルトでは縦線は表示されません
style.cssに以下を記述
.tablepress thead th, .tablepress tbody td, .tablepress tbody th {
border: 1px solid #ccc;
}テーブル例
実際に表示される例（縦線なし）
実際に表示される例（縦線あり）
以上長くなりましたが、TablePressの設置方法でした。
次回はTabePressをデザインしていきます
コメント