[WordPress] テーブルをスクロールバー付きにするプラグインを作った

完成イメージ

横幅が小さいブラウザで、テーブルの横幅が足りないときは、
スクロールバーが表示されるようにします。

以下の記事では、このプラグインを使って大きな表をスクロールバー付きで表示しています。

http://cod-sushi.com/blog-select-log/

実現方法の検討

何も制約がなければ、divで囲み、カスタムCSSを追加すれば、
プラグインを追加しなくてもスクロールする表は作成できます。

https://webcommu.net/phone-table-scroll/

私は記事作成に「Markdown Editor」プラグインを使っています。
Markdown Editorの仕様上、tableにクラスが付けられず、divで囲むこともできません。
そこで、WordPressのAPIを利用し、同じ内容をプラグインを使って実現することにしました。

開発の手順

レンタルサーバなので以下のような感じでやってました。windows7 + git bashです

• phpやcssを編集する
• フォルダをzipに固めて、WordPressの「プラグイン」から追加
• 動作確認後、プラグイン削除 → 以上繰り返し

WordPressが手元で動いていたり、SSHログインできる環境なら、
直接プラグインフォルダにて作業するのがカンタンでいいと思います。

ファイル構成

フォルダに何らかのphpファイルが含まれていれば、プラグインとして動作します。
今回作成したプラグインの構成は、以下のような単純なものです。

cod_sushi_responsive_table/
├──cod_sushi_responsive_table.php
└──style/
   └──style.css  

WordPressプラグインは、他のプラグインと命名が被るとうまく動作しません。
なので、cod_sushi_というprefixをつけてみました。

実装

全体の処理の流れはgithubリポジトリにてご覧ください。
実装のポイントは大きく分けて3点です。
1. tableをdivで囲む処理
2. テーブルをスクロール可能にさせるためのCSSを追加する処理
3. 処理を行うタイミングの定義

1. tableをdivで囲む処理

コンテンツ全体のHTMLをDOMDocumentにロードし、DOM操作を行う。
<table>~</table>タグを<div class="cod-table-wrapper">~</div>で囲む。

2. テーブルをスクロール可能にさせるためのCSS

cod-table-wrapperクラスの<div>を対象に、以下のとおりCSSを設定する。

.cod-table-wrapper {
    overflow: auto;
    white-space: nowrap;
}
.cod-table-wrapper table {
    width: 100%;
}

3. 処理を行うタイミングの定義

WordPressプラグインAPIのフックを使い、スタイルシートの読み込みとdivタグによる囲みが意図するタイミングで実施されるよう登録します。

// スタイルシートを読み込む処理をキューに追加する
add_action('wp_enqueue_scripts', array( $this, 'add_style_sheet'));
// コンテンツ読み込み時、テーブルをdivタグで囲む
add_filter('the_content', array( $this, 'make_table_responsive'));

リポジトリ

拙いコードですが、以下にのせています。

zipでダウンロードして管理ページからアップロードすればプラグインとして取り込めます。

参考サイト

本気で作りたい人向け、WordPressプラグインの作成方法
非常に丁寧にWordpressプラグインの制作方法・配布方法について解説しています。
参考にさせていただきました。