WordPress

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

この記事は 6 分48秒くらいで読めます。

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

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

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

がある表を設定します。

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

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

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

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

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

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

品名金額割引後
りんご10080
いちご5030
ばなな6010
[WordPress]並び替え・横スクロールができる表の作り方
上の画像のように、行ごとに色を変えることはもちろん、項目を押すと並び替えることや検索ボックスを作成することもできるよ

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

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

『TablePress』の機能説明

列や行の入れ替え

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

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

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

ハイライトとは?
選択中のセルの行や列を強調すること
[WordPress]並び替え・横スクロールができる表の作り方
[WordPress]並び替え・横スクロールができる表の作り方

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

並べ替え

並び替えとは?
その項目を基準とした降順(値が小さくなっていく順番)、昇順(値が大きくなっていく順番)に並び替えることが可能です
[WordPress]並び替え・横スクロールができる表の作り方
[WordPress]並び替え・横スクロールができる表の作り方

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

検索/フィルター

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

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

水平スクロール

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

ライブラリの機能の水平スクロールにチェックすることで、スクロールボタンが下部に表示されるようになります。
よっぽどのことがない限りチェックオンが推奨です。
水平スクロールとは?

まとめ

WordPressの初期状態でつくれるテーブルも勿論使いやすいですが、並び替えや検索など機能を増やしたい場合はTablepressはおすすめのプラグインです。

なお、Tablepressで作成した表は、WordPress外観のウィジェットにも使用することができます。(WordPress初期状態のテーブル作成ではウィジェットに反映されません)

比較サイトを作っている方は高機能な表を作って、他のサイトと差別化をはかりましょう!

[WordPress]並び替え・横スクロールができる表の作り方
WordPressのプラグインやカスタマイズ、SEO設定のまとめWordPressのおすすめプラグイン WordPressの便利なプラグインをご紹介していきますが、「全部いれろ!」とは言いません。あ...