[WordPress]並び替え・横スクロールができる表の作り方

2020 8/28

2019年11月20日 2020年8月28日

WordPressの初期機能のテーブル作成は、とても簡単に表を作ることができます。
しかし、項目ごとのソート機能や横スクロール機能などがありません。
アフィリエイトサイトでは、金額や期限など、項目ごとに並び替えたいこともありますよね。

そこで今回は、プラグイン「TablePress」を使って

項目ごとのソート
横スクロール

がある表を設定します。

プラグンが便利だからといってあれこれインストールしてはいませんか？
プラグインの入れすぎはサイトの接続遅延の原因となります。
使う予定もないのに「便利そうだから」と、不要なプラグインをインストールするのはやめましょう。

この記事を読んで欲しい人

WordPressで並び替えができる表を作りたい
スマフォでも見やすい表を作りたい
画面からはみ出てしまう表をなんとかしたい
表の中を検索できるボックスが欲しい

ちょっと宣伝：
脱・執筆嫌い！国語が苦手だった私が筆まめになった5冊の本
の記事を書きあげました。
国語が苦手だったわたしが、読んで実践するだけで「変われた」本。
ブロガーとして文章力をアップするチャンス！
文章を書くのが苦手
目を引くタイトルをつけたい
もっと言葉の引き出しを増やしたい
（タイトル決めに利用しまくってるので、ほんとは内緒にしたい）
一部の本は今ならkindleUnlimitedの無料体験利用で、タダで読めます

『TablePress』を使って作成できる表のサンプル

~~当サイトではTablePressを利用していませんが、私が作っている年賀状比較サイトで表を利用しています。~~

[blogcard url=”https://gonchoco.com/saitobetu-osusume”]

当サイトでも導入しましたので、サンプルを表示します。

品名	金額	割引後
りんご	100	80
いちご	50	30
ばなな	60	10

上の画像のように、行ごとに色を変えることはもちろん、項目を押すと並び替えることや検索ボックスを作成することもできるよ

『TablePress』の使い方と設定方法

WordPress『TablePress』使い方

STEP1
インストールする
「プラグイン」→「新規追加」より『TablePress』をインストールし、有効化する
STEP2
新しいテーブルを作る
WordPressメニューに「Tablepress」が追加されているので、そこから「新しいテーブルを追加」を選択
STEP3
テーブルの情報を入れる
ショートコード：これを記事内にコピーすると表示される
テーブルの名称：分かりやすい名前をつけておく
説明：必要であれば記載
STEP4
表を作成していく
セル・列・行を選択した状態でテーブルの操作を行うと削除や結合が可能
完成
記事に挿入
表のショートコードを記事に挿入すれば完成

『TablePress』の機能説明

列や行の入れ替え

[su_row][su_column size=”1/3″ center=”no” class=””] [WordPress]並び替え・横スクロールができる表の作り方 [/su_column] [su_column size=”1/3″ center=”no” class=””][/su_column][su_column size=”1/3″ center=”no” class=””][/su_column][/su_row]

列や行をドラックすると、簡単に入れ替えることが可能

カーソルのある行をハイライト表示

[su_spoiler title=”ハイライトとは？” style=”fancy” icon=”plus-circle” anchor=”highlight”]選択中のセルの行や列を強調すること
[WordPress]並び替え・横スクロールができる表の作り方 [/su_spoiler]

[WordPress]並び替え・横スクロールができる表の作り方

テーブルオプションの「カーソルのある行をハイライト表示」にチェックをすれば、自分が見ているセルの行と列に背景色がつき、わかりやすくなります。
（ハイライトとは？）

並べ替え

[su_spoiler title=”並び替えとは？” style=”fancy” icon=”plus-circle” anchor=”narabikae”]その項目を基準とした降順（値が小さくなっていく順番）、昇順（値が大きくなっていく順番）に並び替えることが可能です
[WordPress]並び替え・横スクロールができる表の作り方 [/su_spoiler]

[WordPress]並び替え・横スクロールができる表の作り方

ライブラリの機能の並べ替えにチェックをすると、表の項目をクリックすることで、その項目を基準として並び替えます。クリックするごとに降順・昇順に切り替わります。
（並び替え（降順・昇順）とは？）

検索/フィルター

[su_spoiler title=”検索/フィルターとは？” style=”fancy” icon=”plus-circle” anchor=”kensaku”]検索ボックスに指定したい文字を入れることで、表にその言葉が含まれているものだけが表示されます。
[WordPress]並び替え・横スクロールができる表の作り方
[/su_spoiler]

[WordPress]並び替え・横スクロールができる表の作り方

ライブラリの機能の検索/フィルターにチェックすることで、検索ボックスが表示されるようになります。
（検索/フィルターとは？）

水平スクロール

[su_spoiler title=”水平スクロールとは？” style=”fancy” icon=”plus-circle” anchor=”scroll”]スマフォなど画面範囲が小さいもので表を見たときに、表の横方向が途中で終わってしまう場合があります。その際に下にあるスクロールを移動すると、表を移動して全てを見ることが可能です。
[WordPress]並び替え・横スクロールができる表の作り方 [/su_spoiler]