WordPress でプラグインを使わずに、表を作成するショートコードを定義する

概要

学習も兼ねて、WordPress でオリジナルのテーマを使ってブログを書いています（はてなブログとは別に）。プラグインを使わずに記事を書いているのですが、表を作成する度に table 要素を記述するのが面倒です。
そこで、ショートコード（WordPressで用意されている自作関数の機能）を使って、表を簡潔に書けるようにしました。

環境

WordPress 5.2.3 Gutenberg

作成する表

試しに、今回は次のような表を作成したいと思います。なお、CSSの設定については本記事では省略させていただきます。 f:id:ishii-akihiro:20191014200017p:plain <<重要>>結論だけ気になる方は、「別の方法：ビジュアルリッチエディターを使う」まで読み飛ばしてください。

ショートコードを使わずに書いた場合

これまでは次のような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' => 'ラベル１ ラベル２',
    'body' => '内容１ 内容２',
  ), $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. ショートコードで受け取った表の要素はexplodeで連想配列に変換する
3. thead要素とtbody要素の内容は別々に処理する
4. tbody要素はforeachでループ処理し、自動採番されるインデックスが列数で割り切れたら１列目、１余ったら最右列と判断して<tr>タグや</tr>タグを付与する（行数は引数に指定しなくて良い）
5. $str変数に格納した html要素を出力する

なお、ショートコードのリファレンスはこちら。
関数リファレンス/add shortcode - WordPress Codex 日本語版

記事の編集画面での使い方

[table cols='3' head='品目 単価 個数' body='りんご 150 3 バナナ 100 2']

まず、ショートコード記法の[ ] のはじめに、add_shortcode関数の第１引数で指定したtableを記載します。
次に、半角スペースで区切りながら、引数をkey='value'の形式で記載します。headとbodyはexplodeで連想配列に変換して処理するため、半角スペース区切りの文字列にしています。
functions.phpを正しく読み込めていれば、ちゃんと表が表示されます。１行で書けました！素晴らしい！

別の方法：ビジュアルエディターを使う

ここまで頑張ってから知ったのですが、WordPress の Gutenberg に備わっている「ビジュアルエディター」を使うと表が簡単に作れます。なんてこった！

tabi-z.com

ちなみにビジュアルエディターのブロックが追加できない（左上の「＋」が押せない）場合は、次の記事が参考になります。

php-labs.com

ただ、使ってみたところ thead 要素がデフォルトでは設定されないようですね。レイアウトにこだわりたい人は物足りないかもしれません。

感想

なんかビジュアルエディター使えばよかった気もするけど、ショートコードのいい練習になったし、まあいいか！（やけくそ）

生活の跡

個人的な備忘録