この記事では、Page Builder Sandwichの仕組みについて簡単に説明します。当社のページビルダーがWordPressのさまざまな機能とどのように連携するかに関心をお持ちの方への入門ガイドとなることを目的としています。Page Builder Sandwichの個々の機能についてはここでは深く触れませんが、それらをご覧になりたい場合は、短い画面録画で各機能を個別に紹介している動画ページをご確認ください。
Page Builder Sandwichが他のページビルダーとどのように違うのかを知りたい方は、記事「How Page Builder Sandwich Is Different from the Rest.
どこにあるのか？何が編集できるのか？
他の多くのページビルダーとは異なり、Page Builder Sandwichはウェブサイトのフロントエンドで動作します。管理画面（バックエンド）にいる場合でも、コンテンツエディターのボタンの横に「Frontend」ボタンを用意しており、ページのフロントエンドに移動できます。
Page Builder Sandwichを使用すると、投稿、固定ページ、カスタム投稿タイプのコンテンツを編集できます。ただし、フロントページのブログ投稿一覧や、サイト内のその他の単一ページ以外のエリアを直接編集することはできません。このように考えてみてください。編集したい対象が管理画面にコンテンツエディター（「新規投稿」や「新規固定ページ」など）を持っているものであれば、Page Builder Sandwichを使用できます。個々の固定ページやブログ投稿を編集できるほか、たとえばレストランのメニューやポートフォリオ項目を導入するプラグインを使用している場合、それらも編集できます。
フロントエンドにいる間は、管理バーに青い「Edit with Page Builder Sandwich」ボタンが表示されます。それをクリックするだけで、ページの編集を開始できます。
直接的なコンテンツ編集
Page Builder Sandwichでは、コンテンツの編集を可能な限り簡単でストレスのないものにしました。コンテンツの編集は分かりやすく簡単で、クリックして入力するだけです。それほどシンプルです。
インスペクターのご紹介
多くのページビルダーにはポップアップが多すぎると私たちは気づきました。個人的には、ポップアップは気が散るだけでなく、「おい、まずこれらの項目を入力するまで今やっている作業を中断しろ」と言われているようなものなので好きではありません。本来スムーズであるはずの編集体験の流れを壊してしまうのです。そのため、私たちはポップアップの使用を全面的に最小限に抑え、代わりにインスペクターを作成しました。
インスペクターは、必要となるすべての書式設定やレイアウトのツールが含まれたサイドバー形式のエリアです。インスペクターは画面の左側または右側にドッキングできるため、編集中の内容を簡単に確認できます。
インスペクターからは、見出し、フォントサイズ、太字、斜体、テキストの色など、さまざまなテキストプロパティを調整できます。それらに加えて、画像の追加や行・カラム構成のコンテンツの作成も可能です。また、行を全幅に調整したり、行やカラムの背景色、コンテンツの垂直配置、マージンや背景の設定など、より高度な編集も行えます。非常に強力で、作業の大部分で活用することになるでしょう。
WordPressテーマとの連携
Page Builder Sandwich自体には、本質的にスタイルがほとんど含まれていません。コンテンツを編集する際、表示されるスタイルは基本的にテーマに基づいています。
ショートコードとの連携
ショートコードはWordPressにおいて重要な要素であり、おそらくサイト内でいくつかのショートコードを使用することになるでしょう。Page Builder Sandwichはこれらを非常にうまく処理し、ショートコードがフロントエンドでレンダリングされた状態で表示されます。ショートコードは編集可能なままであり、さらに素晴らしいことに、ショートコードを編集した後は、変更内容が反映された状態で再びレンダリングされます。
利便性を考慮し、インスペクターを使用してショートコードを編集できます。さらに細かく制御したい場合は、ショートコードをダブルクリックしてそのままの形式で編集することも可能です。これに加えて、ウェブサイトで利用可能なすべてのショートコードがインスペクター内に一覧表示されるため、コンテンツへの組み込みも簡単です。
ウェブサイトの肥大化については？
表示の遅いウェブサイトが好きな人などいるでしょうか？私たちも嫌ですし、あなたも絶対に嫌なはずです。Page Builder Sandwichがウェブサイトのパフォーマンスに及ぼす影響をほぼゼロに抑えるよう配慮しました。ログアウト時には、最低限として行とカラムのCSSスタイルのみがキューに追加され、使用したショートコードに必要なJSおよびCSSスクリプトのみが読み込まれます。
開発者向け
あなたが開発者で、WordPressプラグイン内にショートコードがある場合、Page Builder SandwichはショートコードAPIを提供しているため、ユーザーがショートコードを簡単に作成および変更できるフィールドを容易に提供できます。
さらに機能を拡張したい場合や、Page Builder Sandwichの一部と連携させたい場合は、利用可能な便利なアクションフックやフィルターフックも多数用意されています。