WordPress5 プレビュー表示がおそいとき

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
wordpress image
イラストACの画像をもとに加工しています。

WordPressのバージョン5の編集エディタgutenbergには『プレビュー』ボタンがあります。

このボタンをおすとプレビュー(正式なページではない)でページの内容確認ができるのですが、『プレビューを生成中...』で止まってなかなか表示されません。

これまで我慢してきたのですが、やっと解決方法が見つかりました。

gutenbergには、プレビューを表示する方法が2つあります。ひとつは

『公開する』『更新する』ボタンのとなり

もうひとつは

右のオプション設定の『文書タブ』->『パーマリンク』のプレビューURLリンク

です。

ただし、URLリンクの方は公開済みのものは公開しているページがそのまま表示されます。

これを繰り返していると、GoogleアナリティクスなどのPV数が自分の操作で増えます。正確な数字ではなくなります。あまり使うものではありません。

そのために『プレビュー』ボタンがgutenbergで追加されたのですが、ボタンをおしても『プレビューを生成中...』のままです。ずーっとです。

あまりにも表示が遅いので、しょうがなくURLリンクで我慢していたのですがやっと解決方法が見つかりました。

犯人はCSSです。

プレビューボタンで表示するプレビューはすぐれものです。

プレビューページを開いたまま、編集画面で『下書きとして保存』『更新する』で保存すると、プレビューページが自動的にリロードされます。

編集画面とは別ウィンドウでプレビューを開いて内容を確認しながら作業することができます。

URLリンクのプレビューではこの機能はありません。

ちなみに自動保存でもプレビューはリロードされます。

プレビューって処理の負荷が高い?

CSSの話へいく前にひとつ。

gutenbergではページを作成するのに

  • ブロックの集合で編集
  • 保存するときに各ブロックのJavaScriptが処理をしてHTMLを作成・保存
  • ページを表示するときは保存されたHTMLを表示

という流れがあるのですが、プレビューボタンを押したときはこのように動きます。

  • とりあえずプレビューページを表示。
  • 『プレビューを生成中...』にしとく。
  • 編集画面の内容を保存。
  • プレビューページを保存したHTMLでリロード。

です。もちろん、ブロックのJavaScriptのHTML作成処理のあいだ『プレビューを生成中』になります。

プレビューは、編集内容の量(=ブロックの量)が多ければ多いほど表示するのが遅くなります。

300字くらいならすぐに出ますが、5000字くらいになると十数秒ほどかかることもあります。

CSSのサイズを小さくする

ぼくは子テーマを使っています。親テーマのCSS設定を子テーマのCSSで上書きしています。

もちろん上書きなので2つのstyle.cssのサイズで大きくなります。120kバイトくらいです。

これを84kバイトまで小さくしました。別の件で気になるところがあったのでcssの内容を見直したからです。

子テーマのstyle.cssでの上書きをやめ、親テーマのstyle.cssの設定を全部消してスタイルの設定は子テーマでする作業です。

そうしたらプレビューの表示速度が一気に上がりました。

理由は分かりません。『JavaScriptとどういう関係が?』と思いますが、なにかあるのでしょう。

とりあえず、プレビューが遅いときは試してみて下さい。

CSSのサイズが小さいことは良いことです。ページの表示速度にも影響するのでやって損はないです。

-> WordPressのCSSのサイズを減らすコツ

親テーマの先頭のコメントは消してはいけません。

親テーマのstyle.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がテーマを読み込むときに使います。

親テーマの読み込みに失敗すると子テーマも読み込めないのでページが正常に表示されません。

もちろん、子テーマのコメントも同じです。

WordPressの本
post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本
  • Webサイト作成から運用まで全体的に学ぶ
  • ブログサイトの運営からサイトの収益化を学ぶ
  • サイト作成・運営 + 集客の方法を学ぶ
  • WordPressからPHPプログラミングを学ぶ
  • 最新のWordPress(バージョン5)に対応した本

の7冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。


WordPressの本7選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!