TablePressの並び替え機能がうまくいかない場合の対処法

この記事では、WordPressのプラグイン「TablePress」を使って並び替え機能付きの表を作る際、うまく並び替えができないときの対処法を共有します。

この記事で扱う問題：TablePressの並び替え機能

上の表は、TablePressの並び替え機能をONにして作成した表です。

実際に並び替えをしてみると、「製品名」「おすすめ度」列は正しく並び替えできていますが、「価格」「発売日」列は期待通りに並び替えできていません。

例えば、価格を昇順で並び替えたとき、3,980円よりも12,480円が上に来てしまっています。

こちらは後で紹介する対処法を使って作成した表。前の表と内容は全く同じですが、価格や発売日に関しても期待通りの並び替えをしてくれています。

問題点：文字列と数字が混在している

これは「文字列と数字が混在しているため、正しく並び替えできていない」ことが原因です。

例えば上の例では、正しく並び替え機能が動作している列は、文字列だけで構成された「製品名」列、数字だけで構成された「おすすめ度」列です。
文字列は辞書順（五十音順）での並び替え、数字列は単純な数字の大小で並び替えが実行されます。


文字列と数字が混在していると、それは文字列として認識されるため、文字列としての並び替えが実行されます。すなわち、辞書順的な並び替えが実行されています。
例えば上の例では、「12,480円」が「3,980円」より上に来ていましたが、これは一文字目を比較して「3」よりも「1」のほうが辞書順では先なので、12,480円が先にきてしまっているというメカニズムです。

文字列としての並び替えと数字としての並び替えの違いを体感できる表を作成しました。数字の大きさは同じでも、並び替え方に違いがあることがわかります。


TablePressで正しい並び替えをしたい我々にとって、「年」や「円」などの文字は邪魔なのです。なぜなら、数字だけで構成された列なら、正しく並び替えをすることができるから。かといってそれらの表記を無くしてしまうと、かえって見にくい表になってしまいます。

対処法：CSSの疑似要素を使う

この問題に対する簡単な対処法は、「邪魔な部分をCSSの疑似要素を使って表記する」ことです。邪魔な部分を擬似要素で表現することで、TablePress内部は数字だけの列として処理し、表記を崩すことなく正しい並び替えをすることができるのです。

少し面倒ですが、やることはシンプルです。CSSの知識がなくても、この記事を見ながら真似することで誰でもこの問題を対処できます。


具体的には、HTMLで邪魔な文字部分を<span>に置き換えて、擬似要素にcontentプロパティで文字を表現します。

3,980円

3<span class="sep-comma"></span>980<span class="add-yen"></span>

【追加CSS】

.sep-comma::after{
    content:",";
}

.add-yen::after{
    content:"円";
}

こうすることで、内部処理的には3980という数字で認識され、辞書順ではなく、単純な数字の大小で並び替えが実行されます。ちょっとわかりにくいかもですが、イメージはこんな感じ。

対処法の実行手順：TablePressとCSS

STEP

TablePressで表を作る

まずは通常通りTablePressで表を作成します。

STEP

不要な部分を書き換える

不要な部分をspanタグで書き換えていきます。

書き方は、<span class=”クラス名”></span>です。すべて半角英数字を使用してください。全角だと機能しません。クラス名は、アルファベットやハイフンなどで好きに書いてください。同じ文字の置き換えには、同じクラス名を使用してください。その部分が何の置き換えなのかをわかりやすくしておくと、後で便利です。普段私が使っているクラス名をいくつかピックアップしておくので、大体こんな風にクラス名をつけるといいんだな～と眺めておいてください。sepはseparator（=区切るもの）の略です。置き換えたい文字列は「ヶ月」や「kg」のように、2文字以上でもOKです。

置き換えたい文字列	書き換え方
,	<span class=”sep-comma”></span>
円	<span class=”add-yen”></span>
年	<span class=”sep-year”></span>
月	<span class=”sep-month”></span>
日	<span class=”sep-day”></span>

置き換えたい文字のうち、同じ文字はすべて同じクラス名を使用するので、例えば、「,」はすべて<span class=”sep-comma”></span>に書き換えます。

不要な部分をすべて書き換えました。

STEP

CSSを追加する

最後に作成したspanの疑似要素にcontentプロパティを適用していきます。CSSを使うわけですが、テーマファイルエディターのstyle.cssでも、記事ごとのカスタムCSSでもOKです。

表記方法は、.クラス名::after{content:”置き換えた文字”;}です。こちらも必ず半角英数字を使ってください。全角だと機能しません。また、少しややこしい表記なので、誤字脱字がないように正しく写してください。以下をコピペして、クラス名と置き換えた文字の部分を書き換えると良いと思います。{}の中身は改行して書くのが通例です。

.クラス名::after{
    content:"置き換えた文字";
}

とします。同じ要領で、

.sep-year::after{
    content:"年";
}
.sep-month::after{
    content:"月";
}
.sep-day::after{
    content:"日";
}
.sep-comma::after{
    content:",";
}
.add-yen::after{
    content:"円";
}

のように、他のクラスにもcontentプロパティを適用します。これでOK。