ワードプレス投稿編集画面にプレビューを追加する「PreviewOnEditor」プラグイン

「PreviewOnEditor」は、ワードプレスの投稿の編集画面にモバイルサイズのプレビューを追加するプラグインです。

 

PreviewOnEditor は、こんな人におすすめのプラグインです。

 

ワードプレスは編集結果を確認するためのプレビューは、別のタブに表示されます。

編集結果を確認するために、いちいちタブを切り替えるのは面倒なので投稿画面にプレビューがあると便利です。

 

この記事では、投稿編集作業が少し快適になる「PreviewOnEditor」プラグインについて紹介します。

 

インストール方法

「PreviewOnEditor」プラグインのインストール方法について説明します。

他のプラグインと手順は同じで、簡単にインストールできます。

 

現状では、クラシックエディター用

クラシックエディター用です。

使用しているテーマはGutenberg対応の機能が充実し始めているので、プラグインもそろそろブロックエディター（Gutenberg）に対応しなきゃいけないのかなと思います。

ブロックエディター（Gutenberg）はカスタマイズの実装もしにくいですね。

 

プレビュー画面の横幅

追加するプレビューの表示幅はモバイルにあわせて430pxにしています。

サイトの内容にもよりますが、最近のサイトへのアクセスはPCよりもモバイルが多いのでパソコン向きの大きいサイズの横幅は非対応にしました。

 

プレビューの表示位置を保存

プレビューの更新は、編集画面にあるデフォルトのプレビューボタンか、プレビューの下に追加されている「Reload」ボタンでプレビューが更新されます。

そのときは、更新前に表示していたスクロール位置を保存しているのでプレビューの表示が終わると自動的に更新前の位置にスクロールします。

ただし画像の読み込みまでは考慮していないので、画像が読み込まれていない場合は位置が少しずれることがあります。

 

見出し移動ボタン

「Pre H」「Next H」ボタンをクリックすると、プレビューに表示している前後の見出しに移動できます。

テーマやカスタマイズによっては画面上部に表示している見出しを固定することもあるので、少しずれた位置にスクロール移動します。

テーマによっては見出しを取得できなくて正しく動作しない可能性があります。