【ブログ小技】WordPressで「並び替えできる表」を作る方法

WordPressで並び替えできる表を作る方法

こんにちは。うめです。

ゲーム攻略ブログなどをされてる皆様は、クリック一つで昇順や降順の並び替えができる表をサイトに入れたいと思ったことはありませんか?

本日は、プラグインを使って簡単に並び替えできる表を作る方法をご紹介します。

作れる表のサンプル

果物名値段人気評価
りんご2004
ぶどう5005
なし2503.5
さくらんぼ10003

①プラグイン「TablePress」のインストール

プラグインの新規追加で「TablePress」を検索し、「今すぐインストール」をクリック。

TablePressをインストール

しばらくすると表示される「有効化」をクリックして、有効にする。

TblePressを有効化

②表の作成

有効化すると管理画面のサイドバーに「TablePress」の項目が表示されると思います。※表示されない人は「F5」ボタンなどでページを更新してみてください。

表を追加

  1. 「TablePress」をクリック
  2. 「新しいテーブルを追加」をクリック
表の追加

テーブル作成

  1. テーブルの名前
  2. テーブルの説明(省略してもOK)
  3. テーブルの「行数」「列数」

を入力し、「テーブルを追加」ボタンをクリック。

ちなみにこの部分は後からでも変更できますよ。

テーブル(表)作成

表の内容を編集

先ほどの「テーブル追加」クリック後、テーブル内容の編集画面が表示されます。

もし、表示されない場合は、サイドメニューの「TablePress」をクリックし、画面上部に表示されているタブの「すべてのテーブル」から、編集したいテーブルを選んでください。

テーブル情報

「テーブル情報」の部分はテーブル追加時に入力した「テーブルの名前」や「テーブルの説明」を変更できます。

テーブル情報

テーブルの内容

テーブル内容」の表部分に表の内容を入力していきます。

テーブル内容入力

テーブル操作

「テーブル操作」部分では選択しているセルの列数を変更したり、画像を入れたり、セル同士を結合させたりすることができます。

テーブルの操作

例えば、列を削除したい場合、削除したい列のチェックボックスにチェックを入れ、選択した列項目の「削除」をクリックすると列を減らすことができます。

列の減らし方

この部分で選択しているセルの列数を変更したり、画像を入れたり、セル同士を結合させたりすることもできます。

テーブルオプション

テーブルオプションでは、テーブルの最初の行を見出しにしたり。業の色を変更したりができます。

また、このプラグインのありがたいところは、追加のCSSクラスを設置できる事です。そのCSSのクラスもここの項目で追加してください。

DataTables JavaScriptライブラリの機能

ここでは、ユーザーがテーブルの並べ替えをできるようにするかしないかや、訪問者がテーブル内で項目を検索できるようにするかなどを選択できます。

JavaScriptライブラリ

全ての項目を入れ終わったら、ページ上部もしくは最下部の「変更を保存」をクリック。

③作った表を投稿へ入れる

では、作った表を投稿に入れていきます。入れるのはすごく簡単!

  1. ショートコードをコピー
  2. 投稿の表示したい箇所に挿入

ページ上部の「テーブル情報」項目内右側にある、「ショートコード」の内容をコピー。

ショートコード

投稿内の表を追加したい部分にショートコードをペーストするだけ!

ショートコードを追加

↓ ↓ ↓ このような表が設置されました。 ↓ ↓ ↓

果物名値段人気評価
りんご2004
ぶどう5005
なし2503.5
さくらんぼ10003

表の見出し横の三角をクリックすることで昇順と降順を切り替える事が可能です。

これでTblePressを使ったソート(並び替え)ができる表の作成は完了です。

簡単なのでぜひ作ってみてください。

1 個のコメント

  • うめさん、こんばんは!葉っぱと申します。

    ブログ記事の中で、ある一覧表を作りたくて、自分でMySQLなどを操作するプログラムを書かなくちゃいけないのかな、と思ってましたが、過不足なくやりたいことが全部できそうな機能をもったTablePressをご紹介していただいている、こちらの記事を見つけました!

    とっても嬉しいです。やったー!
    感謝をお伝えしたくてコメントさせていただきました。
    どうもありがとうございました。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA