ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

WordPress5.5 大きく変わったプレビュー機能

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

WordPress5.5からエディタのプレビューが大きく変わりました。

デスクトップ、タブレット、モバイルの切り替えもできます。

エディタをそのままプレビュー画面に

WordPress5.5で新しく追加されたプレビューは、エディタをそのままプレビュー表示します。

デスクトップ、タブレット、モバイルの3つのデバイスサイズで表示することができます。

というかエディタ内のコンテンツエリアのサイズを小さくしたり大きくしたりするだけですが。

WP5.5 プレビュー

『プレビュー』ボタンを押すと、デバイスのメニューが出るので選びます。

また公式フィールドガイドでは、中~大画面しか機能しないと言っています。

The new preview options currently only work on medium to large screens (>= 600px). In the future, there may be a way to preview large screens on a phone.

新しいプレビューオプションは今のところ、中~大画面(≧600px)でしか機能しません。将来的には、携帯電話で大画面をプレビューする方法があるかもしれません。

筆者訳

WP5.5ではタブレット、モバイルが表示されない

ボクの環境で、タブレット、モバイルのプレビューは、エディタのコンテンツエリアの高さが0になって表示されませんでした。

WordPress5.5.1にアップデートしたら修正されてます。

(バグだったらしい。)

使うテーマによっては同じことが起きるかも知れません。

ショートコードは意味がない

エディタをそのままプレビュー表示は、公開ページと同じ見栄えじゃないと使えません。

GutenbergのCSSに、公開サイトと同じCSSを当ててできなくもないですが、ショートコードはコードしか表示されません。

このプレビューは、凝ったコンテンツには向かないと思います。

既存のプレビューの変更

これまでのプレビューは、『プレビュー』ボタンを押すと新しいタブに表示されてました。

WordPress5.5からは『プレビュー』->『新しいタブでプレビュー』に変わっています。

自動更新は無くなった

これまでのプレビューは『下書き保存』や『自動保存』『更新』でリロードされ、つねに最新のコンテンツを表示するようになってました。

プレビューページをスクロールしながら確認して、修正したら勝手にリロードされページのスクロールがトップに戻っているのが面倒でした。

これがWordPress5.5では廃止されてます。

(ブラウザのリロード(更新)を使って手動で行う。)

ブラウザのリロードでは、プレビューページのスクロールを維持するのでうっとうしさが解消されてます。

ブロックスタイルの編集

エディタGutenbergのコンテンツはブロックの集まりです。エディタでブロックにレスポンシブなスタイルを付ける方法が用意されています。

#start-resizable-editor-section {
    display: none;
}
 
/* レスポンシブのスタイルをここに書く。
 
#end-resizable-editor-section {
    display: none;
}

2つのマーカー(#start-resizable-editor-section, end-resizable-editor-section)の間に書かれたスタイルはエディタが検出します。

(マーカーのdisplay: noneはそういう決まり。)

今のところ、テーマエディタのスタイルは未対応です。

前のページ
WordPress5.5 画像の遅延読み込みがデフォルトになった
WordPress5.5 SVGの画像が小さく表示されるのを直す
次のページ

WordPressの本

post-cta-image

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

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

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

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


WordPressの本5選

コメントを残す

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