プレビュー画面をリアルタイムに更新

 近年人気急上昇中のページビルダーのElementor。このプラグインに出会ってから記事投稿のスピードと出来栄えに革命が起こりました。もう、公開画面に写真や記事を直接貼り付けたり書き込んだりしているような感覚です。さて、この記事は既にWordpressで記事を更新している方向けの内容になっています。長くWordpressを使っている方ほど、「こんなことができるのか!」と驚かれることと思います。なお、この記事に書いているやりたいはすべてElementorを使えば簡単に解決します。

公開画面で記事を更新したい

 私がElementorに行き着くまでには、いくつかのやりたいがありました。特に一番思っていたことは、公開画面を見ながら、もしくは公開画面に直接書き込むような感覚でサクサク更新したいということです。Wordpress,ブログエディターでいろいろと検索しました。

Windows Live writerの最新版がない?

 まず考えたのは、以前使っていたWindows Live Writerの最新版です。これは、テーマをダウンロードすることで実際の表示画面に近い入力画面になります。しかも、ローカル(パソコン上)で記事を更新し、出来上がったらアップロードするとでインターネットにつながっていなくても作業が可能です。

 このプログラムにはずいぶん長い間お世話になりました。ただ、テーマを更新するとそのテーマをダウンロードしなければなりません。このサイトでは2017年にSimplicityから賢威に以降したのですが、Windows Live Writerで賢威のテーマを使おうとすると、またいろいろと事前の作業が必要になってしまいました。毎回できないことはないのですが、ちょっと面倒なのです。さらに、表やCSSについても、もう少し機能が欲しいところでした。さらに、パソコンを変えるとまたやりなおし、複数のパソコンを使って作業するとなるとそれぞれのパソコンで設定しなければいけません。

 なお、Windows Live Writer(Windows Essentials2012)は2017年1月10日でサポートが終了してしまいました。それによりダウンロードもできなくなり、最も近いブログエディターを利用するのであれば、Open Live Writerの利用するしかありません。今のところ日本語にも対応していません。結果、この方法は5年以上続けていましたが止めました。

ビジュアルエディタを公開画面に近づける

 次に考えたのが、Wordpressのビジュアルエディタを公開画面に近づける方法です。プラグインの TinyMCE Advancedとeditor-style.cssを組み合わせてやると見た目は公開画面の同じになります。ウェブ上で作業するのでどのパソコンからでも同じように作業できるのはWindows Live Writerとの大きな違いです。ページ幅や文字のサイズなどが公開状態と同じになったのはよかったです。ただ、物足りない点もあります。画像の挿入、回り込みなどの設定、表の挿入やCSSを追加するといったことははやりビジュアルエディタでは難しく、いちいちテキストエディタで操作しないと上手くいかないのです。

リアルタイムプレビュー

 次に、テキストエディタで変更したものがリアルタイムで表示できるようにならないかを考えました。これはActive Previewというプラグインを使うと簡単で、いちいちプレビューボタンを押さなくても、HTMLを入力したらそれを反映させて表示できるようにできました。HTMLですのでそこそこの知識があれば細かいことまで編集可能で、CSSを使ったページのデザインも可能です。ただ、いちいちコードを書かなければいけないのは面倒ですし、更新したらカーソルの位置がトップに戻るとか、よく使うテンプレートをもっと簡単に挿入できないものかとか、Wordpress特有の使いづらさがあり、そこも解決したいと思いました。

テンプレートをプレビューで選択

 次にやりたくなったことは、記事の雛形(テンプレート)です。

TinyMCE テンプレートは?

 プラグインにTinyMCE テンプレートというものがあります。これは、記事を雛形(テンプレート)として保存しておくことで、投稿の途中に挿入することが可能なツールです。決まった構成で記事を書くときや、広告の挿入の時などには便利です。ただ、テンプレート選択の時に表示される画面が実際の画面と同じならもっとよいのですが残念ながらそうではありません。しかも、挿入した者も結局はHTMLで編集するので、テキストエディタ中心となります。私は良いのですが、家族も更新するとなるとこれでは簡単にできるとは言えません。

似たようなプラグインで・・・