WordPressで記事を書いている際、表を使いたくなる事ってありますよね。
ちょっとした比較用のものから、色んな情報を一覧にしたものまで様々です。
簡単な表ならタグ打ちや TinyMCE Advancedを使う事で作れますが、複雑になってくると中々思うようにはいかないものです。
そんな時に便利なのが、「TablePress」というプラグインです。
では、インストールと使い方の説明をしましょう。
Contents
TablePressのインストール
まずは「プラグイン」→「新規追加」でTablePressを検索します。
「今すぐインストール」→「有効化」でOKです。
TablePressでの表の作り方
インストールが終わって有効化すると、WordPressの管理画面の左バーに「TablePress」の項目が追加されます。
「新しいテーブルを追加」をクリックすると下記の様な画面が現れます。
行数は上下、列数は左右です。
行数や列数は後で増やす事も出来るので、おおよそでもいいでしょう。
最後に「テーブルを追加」をクリックします。
この様な画面になります。
上から順に、まずテーブル情報。
先ほど記入した内容がここで反映されています。
ショートコードもここに表示されています。
こちらは表を作成する画面です。
下の方には「セルを結合」などの作業用ボタンが並んでいます。
下にスクロールすると更に詳細な設定が出来ます。
実際に票を作ってみる
では実際に表を作ってみましょう。
今回は5×5の価格表を作ってみます。
「tablepress」→「新しいテーブルを追加」し、表の名前と行と列の数をそれぞれ5に指定します。
下にある「テーブルを追加」をクリックし、現れた表に下記の様に文字や数値を入れて行きます。
入力後プレビューをクリックするとこんな感じで表示されます。
これで問題がなければ右上の×印をクリックして戻り、「保存」をクリックします。
次に「投稿」→「新規追加」をクリック。
このプラグインをインストール＆有効化すると、エディタ画面にtablepressで作った表を挿入する為のボタンが追加されます。
ここをクリックすると、表の一覧が出ます。
挿入したい表の「ショートコードを挿入」をクリックします。
すると↑の様に本文にコードが挿入されました。
ここではコードしか表示されませんが、プレビューすると↓の様に表が表示されます。
表に縦の罫線を入れたい場合は、Tablepress画面の右上の「プラグインのオプション」をクリックし、チェックボックスにチェックを入れて、カスタムcssの欄に下記のコードを追加してください。
.tablepress tbody td,
.tablepress tfoot th {
border: 1px solid #777777;
線の太さを変えたいなら「border: 1px」のpxの前の数字を変えて下さい（大きくなるほど太くなります）
線の色を変えたい場合は、＃後の文字6桁のカラーコードを変えて下さい。
このプラグインの凄いところは、
・項目ごとに並び変えが出来る
・項目が多い場合、表示する件数を選べる
・表の幅がブラウザに合わせて自動で変わる
・検索機能が使える
この様に設定次第で高機能な表が作れます。
WprdPressで表を作るのは初心者には結構面倒な作業ですが、このプラグインがあれば綺麗で機能性のある表を作る事が出来ます。
ショートコードを挿入するだけなので記事もごちゃごちゃしませんし、表だけ変えたいならTablepressで編集するだけで済むのでとても便利です。
ワードプレスに困っていませんか？
初心者向けのワードプレス講座開講中！
