Wordpressサイトを静的HTMLに変換してくれる simply static を使ってみました。
すると・・・
Uncaught RuntimeException: Not valid HTML fragment!
というエラー。
エラー
CSSの内容がズラーっと出力されました。
おぅ・・・（;￣□￣)
環境
[Wordpress]
Ver. 5.9.3
[プラグイン]
Simply Static ： Ver. 2.1.5.7
[テーマ]
SWELL ： Ver. 2.6.1.3
今回出たエラー
アクティビティ・ログではPHPやサーバーエラーなどが出力されますが、今回はCSSの内容が入っているので、どうもCSSの記述に問題がある様です。
simply static は simple html dom を使って HTML を解析している様で、無効なHTMLがあったり、タイポなどあったらエラーとなる様ですね。
調査
- とりあえず、エラーのあったファイルを確認。
~/wp-content/plugins/simply-static/vendor/voku/simple_html_dom/src/voku/helper/SimpleHtmlDom.php on line 199
- 199行目〜
190 protected function replaceChildWithString(string $string, bool $putBrokenReplacedBack = true): SimpleHtmlDomInterface
191 {
192 if (!empty($string)) {
193 $newDocument = new HtmlDomParser($string);
194
195 $tmpDomString = $this->normalizeStringForComparison($newDocument);
196 $tmpStr = $this->normalizeStringForComparison($string);
197
198 if ($tmpDomString !== $tmpStr) {
199 throw new \RuntimeException(
200 'Not valid HTML fragment!' . "\n" .
201 $tmpDomString . "\n" .
202 $tmpStr
203 );
204 }
205 }
$tmpDomString と $tmpStr の不一致で問題が発生してる。
格納された値を見てみないとね〜、という事で早速、確認。
とんでもない量のコードが改行もなく1行で入ってる・・・
diff コマンドでチェックしても1行だから全体が表示されちゃうし、1行のコードの中で差分があるところだけをピックアップしてくれるオプションとかないの？あったら教えて ＞＜；
というわけでターミナルを分割させて、それぞれの値を地味に比較してみましたよ、、っと。
地道な努力も実って原因が分かりました。
原因
$newDocument = new HtmlDomParser($string);
ここで、CSSの中で使われていたSVGの path の閉じタグが補完されてました。
元々、HTMLに不備がないか、というチェックを行う為、オリジナルのコードと補完されたコードを作成して、それらを比較してるっぽい。んじゃないかなと思います。
本来、SVGではpath の閉じタグは省略しても問題ないのですが、simple hthml domでは閉じタグが無いとダメ！って判断したみたいです。
対策
結果的にテーマ Swell がCSSをインラインで読み込んでいる事が原因じゃないか、と仮説を立てました。
いろいろ探してるうちに、WP管理画面 > SWEEL管理画面で以下の設定を見つけました。
「SWELLのCSSをインラインで読み込む」にチェックが入ってますね。
このチェック外せばいけるんじゃ・・・、という事で、
「SWELLのCSSをインラインで読み込む」のチェックを外したら解決しました！
今回は、simply static と Swellテーマ(と設定)の組み合わせでエラー出ました、というお話でした。
まとめ
かなり特殊なケースなので、解決まで苦労しました。(^▽^;)
大量の1行データで差分を見つける方法も模索しないとな、、、と課題。
これを解決する為に、色々調べましたが、特殊な組み合わせゆえにあまり情報がなかったので、どこかの誰かが同じ様なエラーで悩んでいたら参考にして頂けたら幸いです。