Wordpressでショートコードを作ったら、管理画面で保存時に「更新に失敗しました。返答が正しい JSON レスポンス…」って出た

Wordressでショートコードを自作して、そのショートコードを利用してる投稿で保存したら、
「返答が正しい JSON レスポンスではありません。」と出て正しく保存できない状態になった。

解決まで時間がかかったので、備忘録的に載せとく

やった事

こんな感じにショートコードを作った。

管理画面

ソースはこんな感じ

function hogehogeShortCodeController()
{
  require_once(dirname(__file__) . '/view/hoge.php');
}
add_shortcode('hogehoge', 'hogehogeShortCodeController');

<div>hogehoge</div>

ソースの解説？

functions.phpをhtmlで汚したくなかったので、
viewというディレクトリーを作って、その中にhtmlが書かれてるphpファイルを作った。
いにしえのphperはよくやる手だと思う。

これで、表題のようなエラーになる訳です。

解決方法

そもそもWordpressのショートコードは、
「関数内でhtmlを表示するな。returnでhtmlを返せ。」
という物らしい。
何年もWordpressの仕事やってたけど知らなかったよwww

という事でrequire_onceしてきたphpファイルの中のhtmlを変数の中に物こめれば良いんだね。

という事でob_start()を利用して、htmlを変数にぶち込めるようにした。

function hogehogeShortCodeController()
{
  ob_start();
  require_once(dirname(__file__) . '/view/hoge.php');
  $html = ob_get_contents();
  ob_end_clean();
  return $html;
}
add_shortcode('hogehoge', 'hogehogeShortCodeController');

https://www.php.net/manual/ja/function.ob-start.php

これで保存できるようになり、画面でも正しく動作した。