現在、新しいブログを企画しています。
そのため、久々に「WordPress」をサーバーにインストールし設定を行いました。
このWebサイトを作ってから、既に数年経過。インストールした「WordPress」のバージョンは最新の5.xです。
テーマは無料から有料まで色々と検討した上で決定。その後にプラグインをインストールしました。
改めてプラグインを探すと、前回には気付かなかったプラグインも発見。
そのひとつが今回紹介する「Page Builder by SiteOrigin」です。
「Page Builder by SiteOrigin」は、最近リリースされたプラグインではありません。今まで私が気付かなかっただけです。
「Page Builder by SiteOrigin」の特長は、投稿ページや固定ページのレイアウトをドラッグ&ドロップで簡単に作れることです。
「簡単」が売りのページレイアウトプラグインによくあるのが、左右のレイアウトが1/2均等や1/3均等と限定されてしまうことです。
そのため、しばらくするとレイアウトに自由さがないのが不満になります。
ところが「Page Builder by SiteOrigin」は、簡単なのに割り付けが自由な仕様になっています。
さらに、「ビジュアルエディター」を使えばプレビュー画面を見ながらレイアウト作業が行えます。
プレビューを見ながらレイアウトできるのは初心者だけでなく、レイアウト重視のユーザーにも嬉しい機能です。
変更の都度プレビューで確認しなくても良いので確実に時間短縮になります。
「Page Builder by SiteOrigin」の使い方
「Page Builder by SiteOrigin」をインストールすると「投稿ページ」、「固定ページ」に「ビジュアル」、「テキスト」の他に「ページビルダー」タブができます。
この「ページビルダー」を選択。
すると、上部に各種タブがある画面になります。
「Layouts」を選択すると「レイアウトディレクトリ」というテンプレート画面になります。
これは、「Page Builder by SiteOrigin」が用意しているレイアウトのテンプレートです。
自分のイメージに合ったテンプレートがあったら、これを流用すると迅速にできます。
例えば、「アクセス」ページなどは、この中の「Lets Chat」を使えば簡単に作れそうです。
オリジナルレイアウトをイチから作るならば、「列を追加」から作業を行います。
「列を追加」をクリックすると「New Row」画面になります。
ここで、カラム数やその割合をパーセントで指示します。
この際、右側にある「行スタイル」内の「属性」、「レイアウト」、「デザイン」で詳細を指定できます。
HTMLコードやCSSを使えるユーザーなら指定内容はわかるはずです。
「New Row」画面の設定が完了したら元の画面に戻り、「ライブエディタ」を選択。
すると、左側に2コラムとタブ、右側にプレビューが表示される画面になります。
ここからが、「Page Builder by SiteOrigin」の売りの「ライブエディタ」です。
左側の「ウィジェットを追加」タブから各コラムの内容を決定します。
例えば、2コラムの左側には画像、右側にはテキストを指定。各コラムの右上部の「編集」から画像やテキストを入力します。
すると、右側のプレビューに即座に、その内容が反映されます。
まとめ
作業画面からプレビュー画面を表示。気付いた点を再度作業画面に戻し修正。その修正内容をプレビュー画面で確認。
このように作業画面とプレビュー画面を行ったり来たりしていた作業が「Page Builder by SiteOrigin」では同じ画面で行えるのですからかなりの時間短縮になるはずです。
ただし、注意する点があります。
「Page Builder by SiteOrigin」の「ページビルダー」で作業したページは、「ビジュアル」、「テキスト」で変更はできません。
もし、「ページビルダー」で作業した内容を「ビジュアル」、「テキスト」で修正をしようとすると、「ページビルダー」で作った内容がすべて削除されるという恐ろしい結果になります。
この点は、くれぐれも注意が必要です!
また、適用しているテーマ、あるいはレンタルサーバーの仕様によっては、「レイアウトディレクトリ」が機能しないことも発生するようです。
詳細な検証はできていませんが、私が試した範囲でそのような事例がありました。
原因などをご存知でしたら、教えて頂ければ嬉しいです。
と言うことで、新しい企画のWebサイトでは「Page Builder by SiteOrigin」を活用してみたいと考えています。
