概要
学習も兼ねて、WordPress でオリジナルのテーマを使ってブログを書いています(はてなブログとは別に)。プラグインを使わずに記事を書いているのですが、表を作成する度に table 要素を記述するのが面倒です。
そこで、ショートコード(WordPressで用意されている自作関数の機能)を使って、表を簡潔に書けるようにしました。
環境
WordPress 5.2.3 Gutenberg
作成する表
試しに、今回は次のような表を作成したいと思います。なお、CSSの設定については本記事では省略させていただきます。
<<重要>>結論だけ気になる方は、「別の方法:ビジュアルリッチエディターを使う」まで読み飛ばしてください。
ショートコードを使わずに書いた場合
これまでは次のようなhtmlを記事にベタ書きしていました。
<table> <thead> <tr> <th>品目</th> <th>単価</th> <th>個数</th> </tr> </thead> <tbody> <tr> <td>りんご</td> <td>150</td> <td>3</td> </tr> <tr> <td>バナナ</td> <td>100</td> <td>2</td> </tr> </tbody> </table>
長い!めんどくさい!
ちなみにインデント入れても、保存すると上記のように改行されて行頭が揃ってしまいます。
作成したショートコード
functions.php に以下の関数を追加します。
//テーブル function table_func($atts){ //初期値 $atts = shortcode_atts(array( 'cols' => '2', 'head' => 'ラベル1 ラベル2', 'body' => '内容1 内容2', ), $atts, 'table'); //引数のheadとbodyを連想配列に変換 $head = explode(' ', $atts['head']); $body = explode(' ', $atts['body']); //列数を文字列から数値に変換 $cols = intval($atts['cols']); //テーブル要素(thead)の生成 $str = '<table><thead><tr>'; foreach($head as $val){ $str .= '<th>'.$val.'</th>'; } $str .= '</tr></thead>'; //テーブル要素(tbody)の生成 $str .= '<tbody>'; foreach($body as $index => $val){ if($index % $cols === 0){ $str .= '<tr>'; } $str .= '<td>'.$val.'</td>'; if($index % $cols === $cols - 1){ $str .= '</tr>'; } } $str .= '</tbody></table>'; //テーブル要素を出力 return $str; } add_shortcode('table', 'table_func');
関数table_func
の要点をざっくり説明すると、
1. 引数がなければ2行2列(1行目は項目名)の表を作成する用意をする
2. ショートコードで受け取った表の要素はexplode
で連想配列に変換する
3. thead
要素とtbody
要素の内容は別々に処理する
4. tbody
要素はforeach
でループ処理し、自動採番されるインデックスが列数で割り切れたら1列目、1余ったら最右列と判断して<tr>
タグや</tr>
タグを付与する(行数は引数に指定しなくて良い)
5. $str
変数に格納した html要素 を出力する
なお、ショートコードのリファレンスはこちら。
関数リファレンス/add shortcode - WordPress Codex 日本語版
記事の編集画面での使い方
[table cols='3' head='品目 単価 個数' body='りんご 150 3 バナナ 100 2']
まず、ショートコード記法の[ ] のはじめに、add_shortcode関数の第1引数で指定したtable
を記載します。
次に、半角スペースで区切りながら、引数をkey='value'の形式で記載します。headとbodyはexplodeで連想配列に変換して処理するため、半角スペース区切りの文字列にしています。
functions.phpを正しく読み込めていれば、ちゃんと表が表示されます。1行で書けました!素晴らしい!
別の方法:ビジュアルエディターを使う
ここまで頑張ってから知ったのですが、WordPress の Gutenberg に備わっている「ビジュアルエディター」を使うと表が簡単に作れます。なんてこった!
ちなみにビジュアルエディターのブロックが追加できない(左上の「+」が押せない)場合は、次の記事が参考になります。
ただ、使ってみたところ thead 要素がデフォルトでは設定されないようですね。レイアウトにこだわりたい人は物足りないかもしれません。
感想
なんかビジュアルエディター使えばよかった気もするけど、ショートコードのいい練習になったし、まあいいか!(やけくそ)