プラグイン「Page Builder by SiteOrigin」が凄過ぎて、エディターを作るモチベーションが下がった。

最近漸くエディターにも力を入れようと思ったんですが、既に多くの人に使用されているプラグイン「Page Builder by SiteOrig」の機能が凄すぎて一気に作る意欲が失せました。ええ、今まで使ったことがなかったんですよ。

もうこれ以上に便利な無料のエディターは、少なくとも僕には超えられないと思い知らされました。

つい最近有料テーマ「AVADA」が凄いなぁなんて思っていたんですが、有料のあのテーマを見た後だと、このプラグインを無料で提供するSIteOriginは異常に見えてしまいます。

というわけで、今更レビューするのも変なのですが、ちょっと使い方をまとめるついでに、他にプラグインなどを使用していないのであれば、意地を張らずインストールしてしまうことを推奨します。

ただ、現在テーマ「ShapeShifter」というよりは、その専用拡張プラグイン「WP Theme ShapeShifter Extensions」との相性は非常に悪いので、早くワードプレスのコードを使い慣れて、JavaScriptもちゃんと扱えるようになるまでは非推奨です。記事の最後にどういう事が起こるかを一応書いておきます。

  • Table of Contents

 文句無しの多機能エディター

僕みたいにHTMLエディターでタグも全てを手打ちしている人にとっては、あまり変化がないように思われるかもしれません。

実際他にも「TinyMCE Advance」などのコンテンツ編集用のプラグインは多くありますし、HTMLの知識が殆ど無くてもコンテンツ作成が簡単に行えるようになっているのですが、「Page Builder by SiteOrigin」の味噌はウィジェットを使って、コンテンツを部分的に管理することが出来ることです。

カラム数指定可能な行毎にコンテンツ管理

プラグイン「Page Builder by SiteOrigin」 行ごとの管理
プラグイン「Page Builder by SiteOrigin」 行ごとの管理

取り敢えず右のスクリーンショットのようにコンテンツ部分を管理することが可能で、「Add Row」で行をカラム数を指定して追加することが可能です。

そして、その中にドラッグ可能なウィジェットアイテムを配置し、ウィジェット毎に設定項目をポップアップさせ、通常のエディターとして機能するウィジェットアイテムも用意されていますので、コンテンツ作成において、不都合を感じる点が一切ありません。

記事を書く際はテキストを打つんですが、それ以外の処理がマウス操作のみでほぼ完結してしまいますので、僕が今までHTMLを手打ちしていたのが馬鹿みたいに思えてしまうほど楽です。

ええ、僕はビジュアルエディターどころか、今までHTMLエディターでクイックタグを殆ど使ったことがないんですよ。今思えばアホなんですが、テーマ「ShapeShifter」に生成されるコンテンツ部分のCSSをエディタースタイルとしても使用することが出来るようになってから漸くビジュアルエディターを使い始めたくらいで、今まで時代遅れだったエディターが急進化したせいで驚きまくっています。

ウィジェットが豊富

プラグイン「Page Builder by SiteOrigin」 全てのウィジェット
プラグイン「Page Builder by SiteOrigin」 全てのウィジェット

テキスト形式のウィジェットもそうなのですが、コンテンツに挿入するに当たって、ラッパークラスを与えたり、背景や余白を設定したり、などなど、アイテムごとに設定するようなおまけ付きで、登録されている全てのウィジェットに加え、オリジナルのウィジェットも複数用意されています。

これが部分毎の管理に非常に便利な方法です。

まぁコンテンツを関数で生成してしまう結果になるようなウィジェットは躊躇ってしまいますが、正直管理しやすいので羨ましかったです。

ライブプレビュー

通常の「Page Builder by SiteOrigin」のエディターウィジェットでも、画面いっぱいに表示されますので、集中しやすく便利な編集画面なんですが、このプラグインではテーマカスタマイザーのようにライブプレビューしながらコンテンツを作成できてしまいます。

「Page Builder」と聞くと連想する典型的な編集画面に切り替わり、ドラッグ&ドロップしながら出来栄えをチェックしながらコンテンツ作成できるようになります。

個人的にはこれはあまり好きじゃないんですが、今までそういうツールを使ってウェブページを作成してきた人にとっては非常に使いやすい機能なんじゃないでしょうか?

イメージは「Pixabay」から直接ダウンロード可能

もはやこれ単体で一つのプラグインになりそうな機能ですが、何気なく凄いものを隠し持っているんです。

ええ、画像が無ければ編集画面で「Pixabay」を検索できるんです。僕が普段使っている手間暇をカットしてくれる優れもので、この機能単体でも欲しいと思いました。

こういう便利な機能が本当に多く、全てを確認したわけではないんですが、使ってみる価値は十分にあると思います。

本気で作ろうか考えてしまいます。まぁその前に他にそれ用のプラグインがあるか探してみます。

テーマ「ShapeShifter」との相性は最悪に近い

将来的には扱えるようにしたいんですが、それには難題が山積みな気がします。少なくともテーマの現行のバージョン1.0.34、プラグイン1.0.12と一緒には使う気になれませんでした。

起こり得る問題が非常に多いんですよ。特にプラグイン「WP Theme ShapeShifter Extensions」との相性が酷いんです。

例えば、ちょっと確認しただけでもこれだけあります。

  1. コンテンツ内にウィジェットの条件出力項目が追加されたフォームが用意され、保存時にエラーの原因となる。
  2. オプショナルアウトプットのウィジェットとして「Page Builder by SiteOrigin」のオリジナルウィジェットも追加されるが、そのウィジェットフォームが呼び出されることにより、後続のHTMLが全て出力されなくなる。(恐らく特定の条件下以外においてdie()が読まれる)
  3. 実は「Page Builder by SiteOrigin」のエディターはメタボックスとして出力されているため、「2」のエラー(die())により、オプショナルアウトプットに後続する形で本来出力される「Page Builder by SiteOrigin」自身のエディターも出力されなくなる。

などなど、といった感じです。まぁ「メタボックスとして出力して、エディターに重ねられるんだ」という驚きもあって、僕としては勉強になったんですが、上手く機能しないのはちょっと悔しいです。

詳細な部分は未確認ですが、テーマ「ShapeShifter」自体とは大丈夫だと思うんで、サイドバーを含めたコンテンツエリアのカラム数変化が出来ることから、最大幅をウィンドウサイズに切り替えるようにし、ショートコードなどでコンテンツ作成を手助けすれば、めちゃ合わせて使いたくなるプラグインなんですよ。

個人的に良い勉強教材

僕としては、ビジュアルエディターのCSSと編集ボタンを上手く追加して組み合わせて、コンテンツ編集を楽にしたいなと思っているんですが、「Page Builder by SiteOrigin」以上のものは作れそうにないのがちょっと悔しいですね。

ただ、勉強になるコードが多いので、勉強用にテスト環境では使っていこうと思っています。つい最近までBackboneやUnderscoreといった便利な存在も知らなかったくらいで、もっと勉強せんといかんと思いました。

ええ、色々他のコードも見るようにして、つい最近はenchant.jsが個人的に面白そうに思いました。いつか使ってみたいもんです。

まぁとにかく取り敢えずは、コンテンツの編集をビジュアルエディターで充実させるために、ショートコードとボタンをプラグイン「WP Theme ShapeShifter Extensions」に追加していきます。

ダウンロード:Page Builder by SiteOrigin

コメントを残す

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