スポンサーリンク

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

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

 

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

  • 大きいディスプレイを使っていて横が余っている
  • クラシックエディターを使っている
  • ブログ・サイトを訪れる人はスマホユーザーが多い
  • プレビューの確認が面倒

 

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

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

 

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

 

インストール方法

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

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

「PreviewOnEditor」プラグインのインストール手順
  • STEP 1
    プラグインの新規追加を選択する

    左メニューの「プラグイン>新規追加」を選択します。

  • STEP 2
    プラグインを検索する

    右上のテキストボックスに「PreviewOnEditor」と入力して検索する。

  • STEP 3
    インストールする

    検索にヒットしたら、「今すぐインストール」ボタンをクリックしてプラグインをインストールします。

  • STEP 4
    有効化する

    インストールが完了したら、「有効化」ボタンをクリックしてプラグインを有効にします。

  • STEP 5
    投稿画面で確認

    投稿の編集画面を開くと右側にプレビューが追加されます。

    新規に投稿する初回は404表示になってしまいますが、下書き保存などでプレビュー表示されるようになります。

 

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

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

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

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

 

プレビュー画面の横幅

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

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

 

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

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

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

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

 

見出し移動ボタン

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

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

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

 

 

コメント

目次へ
タイトルとURLをコピーしました