webのいろいろ

WP TablePress の検索の件

最近HPを制作することが多くなりました。
もはや本業が何なのかわかりません。こうなったらWEB屋さんになるか???

で、本題のWPでTablePressというプラグインを利用して簡単な検索ができるテーブルを作ってるんですが、、、

クライアントさんからいろいろと検索に関してあーだこーだと注文がきまして。
例えば、テーブルには漢字で名前が載ってるとしましょう。
「山田 太郎」みたいな感じ。
で、このTablePressの検索は漢字で「山田」といれないと引っ掛かりません。それを、カタカナやひらがなで検索しても出るようにしたいとな。
「やまだ」「ヤマダ」「ヤマダ」とかですよ。
あー日本語ってやだよ。めんどくさいなぁ。(あ、日本語が、ですよ)

仕方ないのでふりがなを隠し要素として<span>で囲み、cssで見えないようにしてやった(イェイ!)

そこまでは良かったんですが、今度は隠した部分が長すぎて改行されてしまう。
見た目は漢字の名前だけのセルなのに、ふりがなが3種類(ひらがな、カタカナ、半角カタカナ)が入ってるからなんですよ~~。
なのでこれまたcssで、white-spaceをnowrap指定。
めでたく改行されずにながーいまんまのはみ出た隠し要素となりました。
試しに、visibilityをvisibleにしてみたら、、、キャー!変!ふりがながいっぱいはみ出てる!!みたいなテーブルになりました(笑)

その後ちゃんとvisibilityはhiddenに戻しましたよ~~
動作確認して見事ひらがなでもカタカナでもカタカナでも検索にかかるようになりました!

はい、WEBの小話でした。

コメントを残す

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

CAPTCHA