[JavaScript,CSS,WordPress]WordPressの案件で素人がtable使っても同じようにデザインできる小技

WP案件あるあるネタを。

WordPressの案件で納品後、お客様が編集する際に表を利用するときの対応方法をひとネタ書きたいと思います。

どうにかして表を入れてもらっても見た目の部分はスマートに行かないものです。
多くのエンドユーザーは罫線をドラッグして幅や高さを揃えようとしたり、セルの塗りつぶしができずにイライラしたりすることと思います。

今回はそんな悩みを解決するネタを書こうと思います。

表の挿入

表の挿入は「TinyMCE Advanced」を使用しています。

※ボクの場合、必要がないなら極力プラグインは利用しないように心がけています。よってtableが必要ないなら「TinyMCE Advanced」もインストールはしません。

と言っていたら今回の話は終わってしまいますので・・・

「プラグイン　→　新規追加」で「TinyMCE Advanced」で検索後、インストール、有効化しておいてください。

※TinyMCE Advancedの使い方はここでは割愛させていただきます。
下記のサイトが詳しく説明されてますのでリンクしておきます。

バズ部「TinyMCE Advancedの設定方法と使い方」

バズ部「WordPress の投稿に表を挿入する方法」

TinyMCE Advancedで挿入されたtable

TinyNCE Advencedで挿入されたtableは以下の用になっています。

<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
</tbody>
</table>

至ってオーソドックスなhtmlになっています。

エンドユーザーレベルでこのtableをスマホにも対応できるようなtableにしてくださいと言っても「？？？」な話ですから、ここは製作者の方で一手間加えなければいけません。
具体的に対応策として考えられるのがPCのときには普通にCSSでデザインしてあげればいいわけで、問題はスマホです。
そこでメディアクエリーを使ってtableだけを横スクロールしてやればスマホでもスッキリtableの完成と言うわけです。

具体的な方法は以前の記事をみて下さい。

スマホの画面だと見づらいtableをMedia Queriesで見やすくしたら良いと思うよ！今度はスクロールだよ！

要するにTinyMCE Advancedで生成されたtableを何らかの要素で囲ってあげなければ話は進まないんです。
だからと言ってエンドユーザーに「table作ったら、それを<div class=”slide-table”></div>で囲ってください」なんて無理。いや無理じゃないけど素人にそれやらせる？って話。

ココからが今回の本題「Javascriptで<div class=”slide-table”></div>を突っ込んじゃおう！」ってことです。

wrapを使ってtableをdivで囲む

例えば

<a href="#">anchor01</a>
<a href="#">anchor02</a>
<a href="#">anchor03</a>

上記のようなhtmlがあったとして

$("a").wrap("<div />")

のようなjsを実行させると

<div><a href="#">anchor01</a></div>
<div><a href="#">anchor02</a></div>
<div><a href="#">anchor03</a></div>

という結果になります。

これを利用してtableに対して

$('table').wrap('<div class="slide-table"></div>')

これを実行すると

<div class="slide-table">
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
</tbody>
</table>
</div>

となります。

これで一件落着。

まとめ

これを先にリンクした過去ポストの内容でCSSを当ててあげれば問題解決です。
お客様が表組があるページを作成しても見た目まで気にして貰わなくてもいいわけですね。

js1行でこんな恩恵が受けられるなんて便利ですよね。