WordPressのバージョン5の編集エディタgutenbergには『プレビュー』ボタンがあります。
ページの確認（正式なページではない）ができるのですが、『プレビューを生成中...』で止まってなかなか表示されません。
これまで我慢してきたのですが、やっと解決方法が見つかりました。
光など屋内のふつうのネットワーク環境では起きません。スマホで作業するなど環境が悪いときの話です。
gutenbergにはプレビューを表示する方法が二つあります。ひとつは、
『公開する』『更新する』ボタンのとなり。
もうひとつは、
右のオプション設定の『文書タブ』->『パーマリンク』のプレビューURLリンク。
ただし、URLリンクは公開済みのとき公開しているページがそのまま表示されます。
これを繰り返すと、GoogleアナリティクスなどのPV数が自分の操作で増えます。正確な数字ではなくなります。あまり使うものではありません。
そのためにgutenbergでは『プレビュー』ボタンが追加されたのですが、ボタンを押しても『プレビューを生成中...』のままです。ずーっと。
あまりに表示がおそいので、しょうがなくURLリンクで我慢していたのですが、やっと解決方法が見つかりました。
犯人はCSSです。
プレビューボタンで表示するページは、期間限定の非公開ページです。Google アナリティクスなどには影響しません。
プレビューボタンの機能はすぐれものです。
プレビューページを開いたまま、編集画面で『下書きとして保存』『更新する』で保存すると、プレビューページが自動的にリロードされます。
編集画面とは別ウィンドウでプレビューを開いて内容を確認しながら作業することができます。
URLリンクのプレビューではできません。自動保存でもプレビューはリロードされます。
（追記）
WP5.5では自動リロードは廃止されました。ブラウザでの更新が必要です。
プレビューって処理の負荷が高い？
CSSの話へいく前にひとつ。
gutenbergではページを作成するのに、
- ブロックの集合で編集。
- 保存するときに各ブロックのJavaScriptが処理をしてHTMLを作成・保存。
- 保存されたHTMLを使ってページを表示。
という流れがありますが、プレビューボタンを押したときはこのように動きます。
- とりあえずプレビューページを表示。
- 『プレビューを生成中...』にしとく。
- 編集画面の内容をHTMLに変換して保存。（JavaScript）
- プレビューページを保存したHTMLでリロード。
ブロックのJavaScriptのHTML作成が終わるまで、『プレビューを生成中』で止まります。
プレビューは、編集内容の量（=ブロックの量）が多ければ表示が遅くなります。
300字くらいならすぐに出ますが、5000字くらいになると十数秒ほどかかることもあります。
CSSのサイズを小さくする
ぼくは子テーマを使っています。親テーマのCSS設定を子テーマのCSSで上書きしています。
もちろん上書きなので二つのstyle.cssのサイズで大きくなります。120Kバイトくらい。
これを84Kバイトまで小さくしました。別件で気になることがあったので、CSSの内容を見直したからです。
子テーマstyle.cssの上書きをやめ、親テーマのstyle.cssの設定を全部消して、スタイルの設定は子テーマでする作業。
そうしたらプレビューの表示速度が一気に上がりました。
理由は分かりません。『JavaScriptとどういう関係が？』と思いますが、何かあるのでしょう。
とりあえず、プレビューが遅いときはためしてみてください。
CSSのサイズが小さいことは良いことです。ページの表示速度にも影響するのでやって損はないです。
親テーマの先頭のコメントは消してはいけません。
/*
Theme Name: Sample Theme
Theme URI: http://sample.jp/
Description: Sample Theme
Author: sample
Author URI: http://sample.com/
Version: 0.1.0
*/
この部分はWordPressがテーマを読み込むときに使います。
親テーマの読み込みに失敗すると、子テーマも読み込めないのでページが正常に表示できません。
もちろん、子テーマのコメントも同じです。
