Page Builder Sandwich は、Jetpack のさまざまなモジュールと互換性があるはずです。
Markdown モジュールはコンテンツの保存時に特殊な処理を行うため、Markdown 変換中に変更内容が失われてしまうことがあります。これに対処するため、フロントエンドから変更を保存する際、バックエンドエディターの Markdown テキストは HTML タグに変換されます。（サポートしてくれた Jake Jackson に感謝します）
Page Builder SandwichをPHP 7でテストしましたが、問題なく正常に動作するはずです。
下位バージョンからPHP 7にサイトをアップグレードする際は、すべてのテーマやプラグインで対処すべき下位バージョンとの互換性のない変更点が多数あるため、ご注意ください。
Page Builder SandwichとMaterializeを同時に使用すると、Javascriptエラーが発生します。materialize.jsとWordPressコアのカラーピッカーとの間で競合が発生しています。
これに関する問題がMaterializeのGitHubリポジトリに報告されています: https://github.com/Dogfalo/materialize/issues/2821
サイトでライセンスを無効化しない限り、プラグインは引き続き正常に動作します。一度無効化すると、再度有効化することはできません。
WordPressダッシュボードからアップデートを受信したり、新しいバージョンを利用したりすることはできなくなります。また、手厚いカスタムサポートを提供することもできなくなります。
ウィジェットの追加は、インスペクターのエレメントセクションにあるウィジェットエレメントボタンをクリックすることで行えます。クリックすると、Page Builder Sandwich がサイト内で検出したすべてのウィジェットを一覧表示するポップアップが表示されます。
WordPress サイトで見つかったすべてのウィジェットを追加できますが、設定内でカスタマイズされた／特殊な JavaScript コードを使用している一部のウィジェットは、正常に動作しない場合があります。以下を使用するウィジェットは動作しない可能性があります。
WordPress のデフォルトウィジェットや、同様に作成されたウィジェットであれば問題ありません。
どうしてもその特定のウィジェットを動作させる必要がある場合は、回避策があります。
Custom Sidebars by WPMU Dev プラグインを使用して新しいサイドバー／ウィジェットエリアを作成し、外観 > ウィジェットの通常の方法でそこにウィジェットを追加します。その後、Page Builder Sandwich でサイドバーエレメントを追加し、必要なウィジェットが含まれているサイドバーを選択します。
もう 1 つの代替案は、Page Builder Sandwich で利用可能なさまざまなエレメントやスタイルを使用して、目的の効果を再現することです。
Page Builder Sandwichを初めて購入された際、プラグインを含む.zipファイルがお使いのコンピューターに自動的にダウンロードされます。
万が一これらを紛失された場合は、こちらのリンクにアクセスして再度.zipファイルをダウンロードすることができます： https://dashboard.freemius.com/license-recovery/203/page-builder-sandwich/
このリンク先でお客様のライセンスを入力すると、ライセンスやアカウントの詳細とともに、Page Builder Sandwichの.zipファイルを再取得することができます。
技術的には、すべてのテーマで動作するはずです。
ユーザーやお客様とともに、WordPress.orgテーマリポジトリのテーマ、Genesis Themes、StudioPress Themes、Elegant Themes、ThemeForestのテーマなど、多数のテーマでPage Builder Sandwichを問題なく使用してきました。
ただし、お使いのテーマが型破りな処理を行っており、Page Builder Sandwichが正常に動作しない場合があります。そのような場合はサポートリクエストをお送りいただければ、修正を試みます。
Page Builder Sandwich でのアイテムの削除は、通常、テキストまたは要素を選択して Delete キーまたは Backspace キーを押すだけで行えます。
もうひとつの方法として、インスペクターの 削除／取り消しボタン をクリックする方法もあります：
これが機能しないケースもあります。機能しないアイテムは、通常、行、列、カルーセルなどのコンテナです。これは、コンテンツを削除する際の誤削除を防ぐための仕様です。
これらのアイテムを削除するには、インスペクターにある要素プロパティの削除／取り消しボタンをクリックします。例えば、行を削除する場合は、このエリアを使用する必要があります：
画像の追加は非常に簡単です。以下のいずれかの方法で行えます：
Page Builder Sandwich は現在、以下の言語で利用可能です：
Page Builder Sandwichをご自身の言語に翻訳して貢献していただける場合は、弊社の Transifexページをご覧ください！
以前、NextGen と Page Builder Sandwich に関する問題が発生していました。
バージョン 2.12 より前では、PBS が何らかの原因で NextGen にエラーメッセージを表示させ、サイトが真っ白な画面になってしまう現象が発生していました。この問題はバージョン 2.12 で修正されましたので、古いバージョンをご使用の場合はアップデートしてください。
世の中には何千ものテーマや他のプラグインが存在します。そのため、標準に準拠して注意深くすべてを構築するよう努めていますが、時には問題が発生することもあります。
お使いの環境でPage Builder Sandwichが正常に動作しない場合は、問題のトラブルシューティングのために実行できるいくつかの手順を以下に示します。
こちらの記事をご確認ください: 「Edit with Page Builder Sandwich」ボタンが表示されない これで解決しない場合は、続きをお読みください。
ドキュメントの トラブルシューティングカテゴリー にあるさまざまな記事を参照してください。
WordPress、プラグイン、テーマ、そしてPage Builder Sandwich本体。常に最新の状態にしておくことをお勧めします。すべてを最新にしておくことで、サイトの最新のバグ修正や脆弱性修正が確実に適用されます。
Page Builder Sandwichでコンテンツを編集できない場合（およびおそらくエラーのポップアップが表示された場合）、現在表示しているページのコンテンツがすべてテーマやプラグインによって自動生成されている可能性があります。これを確認するには、WordPressを使用して通常どおりバックエンドでページ/投稿を編集し、保存したコンテンツがフロントエンドに表示されるかどうかを確認してください。表示されない場合は、そのページ/投稿のコンテンツはすべて生成されたものであり、PBSを使用して編集できないことを意味します。
時には、プラグインがPage Builder Sandwichと競合している場合があります。どのプラグインが競合を引き起こしているかを確認するには、プラグインを1つ無効化し、PBSが再び動作し始めるかどうかを確認します。有効化されている各プラグインに対してこの手順を行ってください。PBSが再び動作し始めてページの編集が可能になった場合、直前に無効化したプラグインがPBSと互換性がないことを意味します。その場合は、[email protected] までメールでお知らせください。修正できるよう対応いたします。
プラグインを無効化しても改善しない場合は、テーマをデフォルトのWordPressテーマ（Twenty-〇〇などのテーマ）に切り替えてみてください。再びPage Builder Sandwichでコンテンツの編集ができるようになった場合、使用しているテーマがPBSと互換性がないことになります。この情報を [email protected] までメールでお知らせいただければ、修正できるよう対応いたします。
稀なケースとして、ブラウザの拡張機能がウェブサイト内のJavaScriptコードの正常な動作を妨げている可能性があります。ブラウザの拡張機能が問題を引き起こしているかどうかを確認するには、ブラウザをシークレットモード（Chrome）またはプライベートブラウジングモードで開き、PBSへのアクセスを試してください。これにより、拡張機能が一切無効化された新しいタブが開きます。これで動作する場合は、競合している拡張機能が存在することになります。
ブラウザ拡張機能「PageXray」が問題を引き起こすことが確認されています。
Page Builder Sandwichがウェブサイトのパフォーマンスに与える影響がほぼゼロになるよう徹底しています。ログアウト時は、少なくとも行と列のCSSスタイルのみがエンキューされ、使用したショートコードに必要なJSおよびCSSスクリプトのみがエンキューされます。
ショートコードは、編集中に貼り付けまたは直接入力することができます。ショートコードを入力した後、Enterキーを押すか、ショートコードの外に移動すると、すぐにレンダリングされた状態で表示されます。
ショートコードを追加するもう1つの方法は、インスペクターのショートコード要素をクリックすることです。これにより、サイトで利用可能なすべてのショートコードを一覧表示するポップアップが表示されます。いずれかを選択するか、ダブルクリックして挿入します。
ショートコードは2つの方法で編集できます。
ショートコード属性はPage Builder Sandwichによって検出できません。そのため、直接入力する必要があります。どなたでも簡単に利用できるよう、ショートコードをシステムにマッピングする方法を現在開発中です。続報をお待ちください。
Markdown は基本的に、テキストの書式設定を追加または変更するために編集中に入力する構文です。ショートカットキーのようなものですが、キーの組み合わせを押す代わりに入力します。
以下は、Page Builder Sandwich でサポートされているすべての Markdown 構文のリストです。
## 見出し2
### 見出し3
以下まで:
###### 見出し6
> 引用
(半角スペース4つ)整形済みテキスト/コード
* 箇条書きリスト - 箇条書きリスト
1. 番号付きリスト 1) 番号付きリスト
- ------------------------------(または複数のダッシュ)
URL を入力すると自動的にリンクに変換されます:
次へアクセス: https://pagebuildersandwich.com
次へアクセス: [Page Builder Sandwich](https://pagebuildersandwich.com
Page Builder SandwichにパーマリンクURLを貼り付けることで、YouTube動画、Vimeo動画、ツイート、さらにはRedditのコメントなど、さまざまなサイトのコンテンツを埋め込むことができます。
行全体にURLのみが含まれている必要があることにご注意ください
Page Builder SandwichはWordPressのoEmbed機能と連携して動作します。そのため、バックエンドで埋め込み可能なURLはサポートされているはずです。追加のoEmbedプロバイダーへのサポートを追加するプラグインも同様に機能するはずです。
oEmbedプロバイダーのリストはコーデックスで確認できます: https://codex.wordpress.org/Embeds
Page Builder Sandwichを使用して編集できるのは、固定ページ、投稿、およびカスタム投稿タイプのコンテンツのみです。
ただし、次のようなテーマテンプレートファイルは編集できません。
フロントエンドの管理バーに「投稿を編集」または「固定ページを編集」が表示されている場合、そのページは編集可能であるとお考えください。
YouTube動画、Vimeo動画、Instagramの写真、Flickrの写真、ツイート、さらにはRedditのコメントなど、さまざまなサイトのコンテンツを、パーマリンクURLを直接貼り付けることで埋め込むことができます。
https://www.youtube.com/watch?v=dQw4w9WgXcQ
埋め込み可能なURLのリストはWordPress Codexで確認できます： https://codex.wordpress.org/Embeds
また、追加の埋め込みURLのサポートを追加する他のプラグインをインストールすることもできます。たとえば、WistiaのURLはWordPressで標準サポートされていませんが、プラグインをインストールして埋め込みを有効にすると、PB Sandwichでも処理できるようになります。
これが機能するためには、1行全体にURLのみが含まれている必要があることに注意してください。
埋め込みコードを直接貼り付けることもできます。
埋め込みコードは次のようになります：
<iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
これが機能するためには、1行全体に埋め込みコードのみが含まれている必要があることに注意してください。
「メディアを追加」ツールをクリックし、「URLから挿入」タブにURLを貼り付けます。
Page Builder Sandwich は、他のプラグインとの共存に問題が生じないよう、可能な限り干渉しない設計で作られています。
しかし、場合によっては例外もあります。以下は、Page Builder Sandwich と併用する際に特有の挙動が見られるプラグインの一覧です。これは必ずしも動作しないことや互換性がないことを意味するわけではなく、一部の動作が異なる可能性があるというだけです。
このリストは今後も更新を続けます。もし何か見つけた場合は、お気軽に [email protected] までサポートチケットをお送りください。
Page Builder Sandwichのプレミアム版では、独自のSVG / ベクターアイコンを使用できます。手順は以下の通りです：
アップロードしたアイコンは、箇条書きリストの行頭文字アイコンやボタンアイコンとしても使用できます。
注意：アイコンが検索結果に表示されない場合は、ファイル名がPBSで正常に解析されなかった可能性があります。その場合は、「custom」または「upload」というキーワードで検索して、アップロードしたアイコンを見つけることができます。
PBSが有効で編集モードになっているかどうかを確認します。
if ( PBSEditor.isEditing() ) {
// 編集時に処理を実行します。
}
なし。
Boolean。現在編集中であればtrue、編集中でなければfalse。
編集時にPBSがレスポンシブビューをレンダリングするために使用するiframe内で使用されます。これは<head>タグが閉じる直前に呼び出され、スクリプトやスタイルを追加するために使用できます。
なし。
add_action( 'pbs_iframe_header', 'change_bg_color' );
function change_bg_color() {
?>
<style>
body {
background-color: hotpink;
}
</style>
<?php
}
お困りの際は、サポートいたします！ですが、時間を節約するためにも、まずはドキュメントのページをご確認ください。そちらで解決策が見つかるかもしれません。
サポートに関するお問い合わせは、[email protected] までメールでお送りください。
PBSは、オプトインしたユーザーがPBSのエディターで保存するたびに利用統計を送信します。このフィルターを使用すると、データの送信を停止できます。
$true
Boolean。これは常に true です。
pbs_is_editable_by_user フィルターを使用することで、PB Sandwich がフロントエンドに表示されないようにすることができます。
例えば、スラッグが slider のカスタム投稿タイプで PB Sandwich の表示を停止するには、functions.php に次のコードを追加します。
add_filter( 'pbs_is_editable_by_user', 'stop_pbs_in_sliders' );
function stop_pbs_in_sliders( $editable ) {
if ( is_singular( 'slider' ) ) {
return false;
}
return $editable;
}
特定の固定ページ/投稿で PB Sandwich を停止するには、投稿 ID を使用して確認できます:
add_filter( 'pbs_is_editable_by_user', 'stop_pbs_for_123' );
function stop_pbs_for_123( $editable ) {
global $post;
if ( is_singular() && ! empty( $post ) ) {
if ( '123' === $post->ID ) {
return false;
}
}
return $editable;
}
お困りの際は、いつでもお手伝いいたします！ただし、時間を節約するためにも、まずはドキュメントのページをご確認ください。そちらで解決策が見つかる場合があります。
サポートに関するお問い合わせは、こちらまでメールでお送りください: [email protected]
PBS >= 4.3
PBSは投稿のコンテンツエリアを識別するためのラッパーを追加します。これはラッパーが配置される前に呼び出されます。
$content
文字列。ラッパーが適用された投稿コンテンツ。
$all_shortcodes = PageBuilderSandwich::get_all_shortcodes()
なし.
配列。検出されたすべてのショートコードタグの配列。
PBS >= 4.3
フロントエンドでPBSを読み込み、ユーザーがPBSを使用して投稿を編集できるようにするかどうかの決定を上書きします。
$is_editable
Boolean。投稿をPBSで編集可能にする場合はTrue、それ以外はFalse
portfolio 投稿タイプをPBSで編集できないように設定する
add_filter( 'pbs_is_editable_by_user', 'disallow_portfolios' );
function disallow_portfolios( $is_editable ) {
global $post;
if ( $post ) {
if ( 'portfolio' === get_post_type( $post ) ) {
return false;
}
}
return $is_editable;
}
編集時にレスポンシブビューをレンダリングするためにPBSが使用するiframe内で使用されます。これは <body> タグが閉じる直前に呼び出され、スクリプトやスタイルを追加するために使用できます。
なし。
PBSは投稿のコンテンツエリアを識別するためのラッパーを追加します。これはラッパーが配置された後に呼び出されます。
$content
String。ラッパーが適用された投稿コンテンツ。
PBS >= 4.3
PageBuilderSandwich のインスタンスを取得します
$pbs = PageBuilderSandwich::instance()
なし。
PageBuilderSandwich オブジェクト。PBS クラスの現在のインスタンス。
PageBuilderSandwich::is_editable_by_user()
なし.
Boolean。PBSが投稿を編集できる場合はtrue、それ以外の場合はfalse。
投稿に保存されるCSSスタイルを変更するためのフィルターです。これは、PBSエディターから保存が開始されたときに呼び出されます。
$style
文字列。保存用に送信されたCSSスタイル。
$post_id
整数。保存対象の投稿ID。
PBSエディターの読み込みが完了したときに呼び出されます（ユーザーが編集開始ボタンをクリックしたときには呼び出されません）
PBSの読み込み後に処理を実行する
wp.hooks.addAction( 'pbs.init', function() {
console.log( 'PBS is ready!' );
}
PBSのショートコードピッカーで非表示にするショートコードタグのリストです。ピッカーのポップアップに表示されるショートコードのうち、すでに非推奨になっているものや、ユーザーから単に非表示にしたいものがある場合に使用します。
$shortcodes
配列。ショートコードタグの配列。
ピッカーから ショートコードを非表示にします。
add_filter( 'pbs_shortcodes_to_hide_in_picker, 'hide_embed_shortcode' );
function hide_embed_shortcode( $shortcodes ) {
$shortcodes[] = 'embed';
return $shortcodes;
}
フロントエンドの pbsFrontendParams オブジェクトにJavaScriptプロパティを追加します。pbsFrontendParams オブジェクトは、ユーザーがログインして編集しているかどうかにかかわらず、フロントエンドで利用可能です。
$params
配列。ウィンドウレベルのJavaScript変数 pbsFrontendParams で利用可能になるキーと値の配列。
フロントエンドで変数にアクセスできるようにする
add_filter( 'pbs_localize_frontend_scripts, 'add_my_property' );
function add_my_property( $params ) {
// This will be available in Javascript under pbsFrontendParams.myProperty
$params['myProperty'] = 'My Property';
return $params;
}
Page Builder Sandwichの大部分はJavaScriptで書かれており、開発者が当社のページビルダーを拡張してさらに機能を追加できるように、多数のメソッドを追加しました。
開発者にとって使いやすくなるよう、WordPressの仕組み（フック経由）に合わせてパターン化しました。
WordPressでは、通常、add_filter() 関数や add_action() 関数を使用してWPの動作を変更または追加します。同様にPBSでは、wp.hooks.addFilter() および wp.hooks.addAction() を使用できます。
使い方も同じです。フィルターを使用してデータを変更し、アクションを使用して追加の処理を実行します。これら2つの関数呼び出しは、JavaScriptで実行される点を除けば、PHPの対応するものと基本的に同じです。
PHPフックとJavaScriptフックを混同しないように、JavaScriptフックには「ピリオドケース（period-case）」（造語）という名前を付けました。PHPフックはすべてスネークケースを使用します：
すべてのフックを参照するには、左側のメニューにある「JavaScript Actions」および「JavaScript Filters」カテゴリを参照してください。
興味のある方のために記載すると、JavaScriptでこれらの便利なフック呼び出しを追加するために https://github.com/carldanley/WP-JS-Hooks を使用しています。
エディターがコンテンツを保存する直前に呼び出されます。保存中に追加のデータを送信するためにこれを使用できます（これはデータを保存するわけではなく、Ajax経由でバックエンドに送信するだけです）
payload
FormData オブジェクト。 保存のためにAjax経由で送信されるデータ。
wp.hooks.addAction( 'pbs.save.payload', function( payload ) {
// 保存時に送信するデータを追加します。
payload.append( 'my_data', 'My Data' );
}
フロントエンドの pbsParams オブジェクトに Javascript プロパティを追加します。ユーザーがログインしており、ページの編集権限がある場合、フロントエンドで pbsParams オブジェクトが利用可能になります。
この変数には、nonce、読み込まれたすべてのショートコードのリスト、翻訳文字列など、編集中に PBS によって使用される多くのプロパティも保持されます。
$params
配列。ウィンドウレベルの Javascript 変数 pbsParams で利用可能になるキーと値の配列。
検出されなかったショートコードをエディターに追加する
add_filter( 'pbs_frontend_scripts, 'add_my_shortcode' );
function add_my_shortcode( $params ) {
$params['shortcodes'][] = 'my_shortcode';
return $params;
}
PBSと同時にスクリプトまたはスタイルをキューに追加します。これは、投稿がPBSで編集可能な場合にのみ呼び出されます。ページがPBSで編集できない場合、これは一切使用されません。
なし。
PBSの読み込み時に、my-script.js もキューに追加します
add_action( 'pbs_enqueue_scripts, 'add_my_script' );
function add_my_script() {
wp_enqueue_script( 'my-script' , plugins_url( 'js/my-script.js', __FILE__ ) );
}
保存したプレミアムプラグインが見当たらない場合は、こちらからメールアドレスを入力して復旧できます。プラグインがメールで送信されます。
https://dashboard.freemius.com/license-recovery/203/page-builder-sandwich/
これはプレミアム機能であり、バージョン4.0.1以降で利用可能です
同一ページ内スクロールアンカーリンクとは、同一ページ内の特定の場所を指すリンクです。同一ページ内リンクをクリックすると、ブラウザが指定されたエリアに向かってスクロールします。
同一ページ内アンカーリンクを作成するには、次の2つが必要です：
ページの下部付近にある要素を1つ選択し、そのプロパティを開きます。高度な設定エリアで、「go_here」という名前のカスタムクラスまたはカスタムIDを追加します。
次に、ページの上部付近のどこかにリンクを作成するか、ボタン要素を追加します。リンクとしてURLを追加する代わりに、「go_here」をカスタムクラスとして追加した場合は「.go_here」（ドット付き）を使用し、カスタムIDとして追加した場合は「#go_here」（ハッシュ記号付き）を使用します。
ページを保存した後、リンク/ボタンをクリックすると、ページ下部の要素に向かってスムーズにスクロールするはずです。
次のような名前付きアンカー
<a name="go_here"></a>
も、「#go_here」（ハッシュ記号付き）へのリンクを追加することでターゲットにできます。
クラス名またはIDを使用してターゲットを指定する限り、エディタエリアの外側であっても、ページ内の他の任意の領域をターゲットにすることができます。
保存される投稿データを変更するためのフィルターです。これは、PBSエディターから保存が開始されたときに呼び出されます。
$post_data
配列。保存される最終的な投稿データ。これは後で直接 wp_update_post() に渡されます。
$_POST
配列。保存のためにエディターから送信された生の投稿データ。これはすでに nonce 検証済みです。
$post_id
整数。保存対象の投稿ID。
add_filter( 'pbs_save_content_data', 'save_always_as_draft', 10, 3 );
function save_always_as_draft( $post_data, $_post, $post_id ) {
// For some reason, we always want the post to be a draft.
$post_data['post_status'] = 'draft';
return $post_data;
}
テーマ開発者の方であれば、テーマにPBSを含めることで製品の価値を大幅に高めることができます。
[email protected] までご連絡ください。ぜひ協力しましょう！
CloudFlareは広く利用されている無料のDNS CDNです。非常に優れていますが、PBSは現在Rocket Loader機能に関して問題を抱えています。Rocket LoaderはJavascriptファイルの読み込み時間を改善しますが、PBSのスクリプトの依存関係や呼び出し順序を乱してしまいます。Rocket Loaderがオンになっていると、Page Builder Sandwichの編集ボタンが表示されなくなります（Javascriptのコンソールエラーも表示されません）。
Rocket Loaderをオフにするには、CloudFlareアカウントにログインし、ドメインの設定に移動します。「Speed」設定を開きます。
次に下へスクロールしてRocket Loader設定に移動し、設定がオフになっていることを確認します。
これをオフにした後、「Cache」設定からサイト全体のキャッシュを必ずパージ（消去）してください。
キャッシュをすべてパージした後、ページを更新するとPage Builder Sandwichの編集ボタンが表示されるようになります。
保存される投稿コンテンツを変更するためのフィルターです。これは、PBSエディターから保存が開始されたときに呼び出されます。
$content
String. 保存される最終的な投稿コンテンツ。
$post_id
Int. 保存対象の投稿ID。
バージョン4.0以降、編集中にデスクトップ、タブレット、モバイル端末（スマートフォン）の表示を切り替えることができるようになりました。これを「レスポンシブモード」と呼びます。レスポンシブモードでは、サイトが小さめのサイズに変更され、画面が小さいデバイスでどのように表示されるかをシミュレートできます。
タブレットまたはモバイル端末のビューでサイトを表示している間は、編集機能が制限されます。この状態で行える操作は以下のみとなります。
* PBSは要素や行に一部のレスポンシブスタイルを適用するため、一部のマージンは調整できません。
以下は行うことができない操作です。
タブレットまたはモバイル端末のビューでサイトを表示している場合、調整したマージンは、現在のビューおよびそれより小さいビューにのみ適用されます。これにより、完全なデスクトップ版とは別に、デザインを微調整して小さい画面で見栄えを良くすることができます。
わかりやすくするために例を挙げます。
これはマージンの調整にのみ適用され、テキストの変更やテキストスタイルの変更はすべての画面サイズに適用されます。
タブレットまたはモバイル端末のビューで表示している場合、行にカーソルを合わせると新しい「目」のツールバーボタンが表示されます。これをクリックすると、現在の画面サイズで行の表示/非表示を切り替えることができます。
非表示になった行は編集中に少し半透明になり、編集完了時に非表示になることが示されます。
この機能は行でのみ利用可能ですのでご注意ください。
Varnish Cacheを使用していて、変更を保存した後も古いコンテンツが表示され続ける場合は、Varnish Cacheが自動的にクリアされていない可能性があります。
キャッシュをクリアできるWordPressプラグインがいくつかあります: https://wordpress.org/plugins/search/varnish+cache/
それでも解決しない場合は、ターミナルで次のコマンドを実行して、Varnish Cacheを手動でパージすることもできます:
curl -X PURGE http://mysite.com/my-page/
Markdownとは基本的に、テキストの書式設定を追加または変更するために編集中に入力する構文です。ショートカットキーに似ていますが、キーの組み合わせを押す代わりに入力して使用します。
以下は、Page Builder SandwichでサポートされているすべてのMarkdown構文のリストです。
(スペースにご注意ください)
# 見出し1
## 見出し2
最大で以下まで:
###### 見出し6
> 引用
(スペース4つ)整形済みテキスト/コード
* 箇条書きリスト - 箇条書きリスト
1. 番号付きリスト 1) 番号付きリスト
- ------------------------------(または複数のダッシュ)
URLを入力すると、自動的にリンクに変換されます:
https://pagebuildersandwich.com にアクセス
「lorem」と入力してTabキーを押すと、ダミーテキストが作成されます。
PBS を無効化するには、まずダッシュボード / 管理画面にログインし、プラグイン > インストール済みプラグインに移動します。
プラグインページが開いたら、プラグインのリストをスクロールして Page Builder Sandwich を見つけます。名前のすぐ下に、「編集」や「ライセンスの変更」などの他のリンクとともに無効化リンクが表示されているはずです（サイトによって異なる場合があります）。プラグインを停止するには、「無効化」リンクをクリックしてください。
ほとんどの要素（ショートコードは除く）では、要素が画面に表示されたときに再生される入場アニメーションを指定できます。
これを行うには、要素の上にカーソルを置いてツールバーを表示させ、歯車ボタンをクリックします。
これによりインスペクターが表示されます。アニメーション領域に移動して開き、アニメーションを選択します。
アニメーションを選択すると、プレビューとして再生されます。提供されている他のオプションを使用して、アニメーションをさらに細かく調整できます。
アニメーションは、ユーザーがスクロールして要素が表示されたときにのみ再生されます。ページを開いた時点で要素がすでに表示されている場合、アニメーションは再生されません。
いいえ、失われません！ すべてのページとコンテンツはサイトに残ります。つまり、無料版からプレミアム版へアップグレードする場合や、単にテストする場合でも、PBSを安全に無効化できます。
ただし、すべてが同じように表示されるわけではありません。PBSには、より複雑な要素に必要な追加のスタイルやスクリプトが含まれているため、ページ内の一部の項目が変化することに気づくでしょう。
PBSを無効化した際にも維持される項目は以下の通りです：
PBSを無効化すると失われる項目は以下の通りです：
ページの変更を保存したものの…
保存時にキャッシュソリューションの保存データクリアがトリガーされなかった可能性があります。
W3 Total Cacheなどのキャッシュプラグイン、MemcachedやRedisなどのサーバー側キャッシュソフトウェア、またはCloudFlareなどのDNSキャッシュといった何らかのキャッシュソリューションを使用している場合、保存されたコンテンツがクリアされていない可能性があります。
これに該当するかどうかを確認する1つの方法は、管理画面（通常の方法）でページを編集し、フロントエンドでページを表示してみることです。コンテンツが変わっていない場合は、キャッシュが自動的にクリアされなかった可能性があります。
WordPress以外のキャッシュソリューションの中には、現在のキャッシュのパージやクリアを支援する補完的なWordPressプラグインが用意されているものもあります。WordPress向けソリューションには通常、このためのボタンやオプションがあります。
保存中に何らかのPHPエラーが発生した可能性もあります。
これが発生しているかどうかを確認するには、（できればChromeで）開発者コンソールを開き、「Network（ネットワーク）」タブに移動します。そこでPBSで変更を保存すると、admin-ajax.phpへの複数のエントリが表示されます。これが赤色で表示されている場合は、エラーが発生したことを示しています。以下のようなものが表示されていないか確認してください：
これに該当する場合は、こちらで確認および修正ができるよう、必要なログイン情報を添えて [email protected] までメールでお問い合わせください。
Wordfenceの互換性に関する記事はこちらをお読みください：http://docs.pagebuildersandwich.com/article/214-wordfence-firewall-setup-compatibility
注: これはEnvatoのお客様には適用されません
ライセンスのアクティベーション時にエラーが発生する場合は、以下の方法をお試しください。
これは主に、より新しいバージョンにアップデートしたユーザーに発生します。プラグインのファイルを手動で直接更新し、通常のアップデートや「無効化して有効化」の手順をスキップした場合、一部の処理が正常に実行されなかった可能性があります。プラグインを無効化し、再度有効化してから、もう一度ライセンスを入力してみてください。
v3.2より、Page Builder SandwichはFreemiusと統合されました。Freemiusのデータをクリアすることでライセンスのアクティベーションエラーが解消された事例があります。解決手順は以下の通りです。
ダッシュボードに移動し、URLをhttp://yoursite.com/wp-admin/admin.php?page=freemiusに変更します（ご自身のサイトに合わせてURLを変更することを忘れないでください）。下の画像のような画面が表示されれば、正しい場所にアクセスできています。
Delete All Accountsボタンをクリックし、さらにClear API Cacheボタンもクリックします。これを行った後、もう一度ライセンスキーを入力してみてください。
それでも解決しない場合は、[email protected]までお問い合わせいただき、問題の詳細とお客様のサイト情報をお知らせください。
ここでは、背景色付きの行（Row）を追加し、その中に画像を配置しました。こちらです：
コンテナの上にはみ出させる（「peek」させる）には、移動したい要素の上にマウスを置きます。枠線が表示されたら、枠線の上端を越えてマウスを移動させます。現在の上のマージン値が表示されるはずです：
上のマージンを上方向にクリック＆ドラッグしてマージンを減らし、マイナスの値にします：
これで画像が行の外に「はみ出る」ようになりました！
行の外側に出た際に要素が途切れてしまう（切り取られる）場合は、行のプロパティインスペクタを開き、詳細（Advanced）オプションにあるオーバーフローを非表示（overflow hidden）オプションをオフに切り替えてください：
ダミーテキストを素早く追加するには、「lorem」という単語を入力して Tab または Enter キーを押すと、lorem ipsum プレースホルダーテキストを素早く追加できます：
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dolor sed numquam? Sapiente autem adipisci, minus expedita enim, suscipit laboriosam deleniti possimus sequi pariatur explicabo numquam alias atque officia sit.
Page Builder Sandwich はすべてのキャッシュプラグインで動作します。ただし、縮小 (minify) または キャッシュ 機能を有効にしていると、問題が発生する場合があります。
縮小がログインユーザーに対して無効化されていることを確認すれば、問題なく動作するはずです。
ここでは W3 Total Cache の設定のみを示していますが、他のキャッシュ＆縮小プラグインにも同様の設定があるはずです。
Performance > Page Cache で Don’t cache pages for logged in users（ログインユーザーに対してページをキャッシュしない）にチェックが入っていることを確認してください
縮小機能を使用している場合は、Performance > Minify で Disable minify for logged in users（ログインユーザーに対して縮小を無効化する）にチェックが入っていることを確認してください
外部ウェブサイトのコンテンツを埋め込むには、単にURLを貼り付けてEnterキーを押します。例えば、YouTubeから以下のURLをコピー＆ペーストできます：
https://www.youtube.com/watch?v=dQw4w9WgXcQ
<iframe>埋め込みコードを貼り付けることで、iframeによる埋め込みも可能です。例えば、以下の埋め込み文字列をコピー＆ペーストします：
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0″ frameborder=”0″ allowfullscreen></iframe>
WordPress Codexに記載されているサイト（https://codex.wordpress.org/Embeds）や、oEmbedに対応している任意のサイトのURLを埋め込むことができます。
上下のマージンやパディングのハンドルをドラッグしても要素のマージン／パディングが変更されない場合、他のスタイルがスタイルの変更を強制的に上書きしている可能性があります。これは、背景やボーダーを変更できない場合や、透過画像に常に背景色がついてしまう場合にも発生することがあります。
問題を特定するには、ブラウザのインスペクターを開いて要素を検証してください。その要素のスタイルを確認します。次のような表示がある場合：
テーマまたはプラグインのいずれかが原因で、その要素に他のスタイルが適用されないようになっていると考えられます。スタイルシートの上にマウスカーソルを置くと、どのテーマやプラグインに起因するものかを確認できます。
これを修正するには、スタイルの「! important」部分を削除してください。これで再びスタイルが適用できるようになります。この修正を行うには、テーマまたはプラグインの作成者にお問い合わせいただく必要がある場合があります。
注意: デフォルトでは、ヘッダーはフロントページからのみ削除されます。
固定ページからヘッダーまたはメニューを削除するには、Jetpack などのカスタム CSS を追加できるプラグインが必要です。
ヘッダーを削除するには、投稿の投稿 ID が必要になります。その後、このカスタム CSS を追加します（ここでの 9999 をお使いの投稿 ID に置き換えてください）:
body.page-id-9999 #masthead {
display: none;
}
固定ページからメニューを削除する場合（ここでの 9999 をお使いの投稿 ID に置き換えてください）:
body.page-id-9999 #header-wrapper {
display: none;
}
または、ホームページからのみメニューを削除する場合:
body.page-id-9999 #header-wrapper {
display: none;
}
行や背景に背景画像を追加できます。さらに、背景画像に色を着色（ティント）して、デザインによりフィットさせることも可能です。
例えば、背景画像の上に白いテキストを重ねた行があります。選んだ背景画像のせいで、現状テキストがかなり見づらくなっています。
見栄えを良くするために、背景画像に色を追加できます。これを行うには、行の上にマウスカーソルを合わせ、行の歯車アイコンをクリックしてプロパティを開きます。背景オプションに移動し、背景画像の色合い（Background Image Tint）.
オンにした後、背景色を変更すると、背景画像に色味のあるティントが追加されます。ティントの強さや不透明度を変更することもできます。テキストを見やすくするために背景を緑色に着色した例がこちらです:
Page Builder Sandwich は、WordPress にログインしたままになっているかどうかを定期的に確認します。これは、保存ボタンをクリックしたときに変更が確実に保存されるようにするために行われます。また、投稿のロックや自動保存にも使用されます。
この確認には WordPress の Heartbeat API を使用しており、これはブラウザの Cookie とセッションに依存しています。そのため、編集中に「セッションの有効期限が切れました」というポップアップが繰り返し表示される場合は、WordPress が正常に追跡できない何らかの要因がある可能性があります。これを解決するために試せる手順は以下のとおりです：
キャッシュプラグインをインストールしている場合や、DNSキャッシュ、その他何らかのキャッシュを利用している場合は、それらをクリアしてください。また、ブラウザのキャッシュもクリアしてください。サイトの最新のスクリプトが読み込まれていない可能性があります。
Cookie が破損している可能性もありますが、これはブラウザの設定からブラウザの Cookie をクリアすることで簡単に解決できます。通常は、ブラウザのキャッシュをクリアするオプションの近くにあります。
設定 > 一般 に移動し、設定を確認してください。WordPress アドレス (URL) と サイトアドレス (URL) の設定項目を探します。これらのドメインとプロトコルは、実際のドメインと一致している必要があります。たとえば、一方が「http://」で、サイトへのアクセスには「https://」を使用している場合、設定は「https://」になっている必要があります。もう1つのよくある問題は、一方の URL に「www」があり、もう一方にはないというケースです。
これらは一致している必要があります：
または：
これを修正するには、設定 > 一般 から設定を変更できます。これらの設定を編集できない場合は、FTP を開いて wp-config.php ファイルを編集し、次の行を追加します。
define( 'WP_HOME', 'http://example.com' ); define( 'WP_SITEURL', 'http://example.com' );
| Liteバージョン | 利用不可 |
| Premiumバージョン | すべての機能が利用可能
|
カルーセルは、繰り返しループ表示されるコンテンツを追加するための斬新な方法です。Page Builder Sandwichには標準でカルーセル要素が備わっているため、外部のカルーセルプラグインを使用する必要がありません。
カルーセル要素の歯車ボタンをクリックすると、スライドアニメーションや遅延時間など、カルーセルの動作を設定できます。作成時には作業用のカルーセルスライドが3つ用意されており、スライドの追加や削除も可能です。これらのスライドにはすべて、テキスト、画像、特定のショートコードなど、普段使用する通常の要素を配置できます。
スライドの切り替えは、ナビゲーションボタン自体を選択するのと同じくらい簡単です。スライドの順序も、プロパティ（歯車アイコン）から変更できます。
Lite版をお使いの場合、黄色の三角形のフラグにお気づきかもしれません。これらは、特定のボタン、要素、オプションがプレミアム機能であるかどうかを示しています。
これらを非表示にしたい場合は、ダッシュボードに移動し、PBSandwich > Settings の設定ページを開いて、Hide Premium Feature Flags の設定にチェックを入れてください。
| Lite版 | すべての機能を利用可能 |
| Premium版 | すべての機能を利用可能 |
インスペクターでHTML要素をクリックして新しいHTML要素を追加すると、モーダルウィンドウが表示されます。そこにHTMLコードを入力または貼り付け、「HTMLを保存」をクリックします。これでエディター内にHTMLが表示されます。
HTML要素にマウスカーソルを合わせるとツールバーが表示されます。ツールバーの鉛筆アイコンをクリックするか、要素自体をダブルクリックすることでHTMLを編集できます。
私たちはごちゃごちゃしたインターフェースを避け、すべてを直感的で見つけやすくしたいと考えました。そのため、Page Builder Sandwich のユーザーインターフェースはシンプルに見えますが、非常に強力で、編集中に多くのことができます。
マウスカーソルを使って、さまざまな便利な操作を行うこともできます。さまざまな要素の上にマウスを重ねると、インタラクティブなオーバーレイやツールバーが表示されます。これらはそれぞれ異なる機能を持ち、以下のようなことができます。
PBSで編集を開始したら、ページや投稿のタイトルにマウスカーソルを合わせます。輪郭線が表示されるはずです。タイトルをクリックしてカーソルを置き、編集してください。
タイトルエリアでは書式設定ツールは利用できません。スタイルを変更したり、タイトルに要素を追加したりすることはできません。
行と列は、セクション分けされたコンテンツを作成するために使用できるツールです。
新しく作成した固定ページ/投稿からPage Builder Sandwichを使用して編集する場合、入力したコンテンツはすべて単一の列に配置されます。これはブログ投稿を書くのには適していますが、ランディングページやお問い合わせページ用の特別なレイアウトにしたい場合は、2列のレイアウトや、ページ全体でさまざまな列を組み合わせたレイアウトが必要になるでしょう。
インスペクターにある以下のボタンを使用して、行と列を追加できます。
追加されると、新しい行がアウトラインで囲まれます。
行や列の中には、テキスト、ショートコード、ウィジェットなど、あらゆるものを配置でき、さらには行や列をさらに追加することも可能です。
行（または行内のコンテンツ）が選択されると、インスペクターでより多くのオプションが利用可能になります。これらのボタンを使用して、セクションのスタイルをさらに調整できます。
インスペクターのこの下には、列のスタイルを設定するための追加オプションもあります。
行自体をクリックして長押しすることで、行を別の場所に移動できます（行内の要素をクリックして長押しした場合は、行ではなくその要素がドラッグされます）。
| ライト版 | 利用不可 |
| プレミアム版 | すべての機能を利用可能
|
必要に応じてテキストをハイライトし、インスペクター内のボタン要素をクリックします。これによりモーダルが表示され、ボタンのリンク先URLを入力できます。そこからWebサイト内の既存のウェブページを検索することも可能です。
他の要素とは異なり、ボタンはインラインで配置されます。つまり、他のテキスト（または他のボタン）の横に並んで配置されます。個々のボタンを別の場所にドラッグ＆ドロップすることはできませんが、代わりにボタンを周囲のテキストと一緒にドラッグできます。
編集中にボタンをクリックすると、インスペクターに追加のスタイル設定オプションが表示されます。また、ボタンの上にマウスを置くと、リンク先のURLやその他のコマンドを確認できます。
注意: これは、PBSがすでにインストールおよび有効化されており、サイトからダウンロードしたZIPファイル、またはメールで送信された添付ファイルを使用してアップデートする場合に行ってください。
注意: アップデートを実行するために別のプラグインを使用しています。これにより、PBSを最初にアンインストールすることなく、すぐにアップデートできます。
プラグイン > 新規追加に移動し、検索ボックスで「Easy Theme and Plugin Upgrades」というプラグインを検索します。
プラグインが見つかったら、インストールして有効化します。
Easy Theme and Plugin Upgradesプラグインを有効化した後、再度プラグイン > 新規追加に移動し、上部付近にあるプラグインのアップロードボタンをクリックします。
Page Builder SandwichのZIPファイルを選択してインストールします。
これで完了です。これで新しいバージョンのPBSが適用されているはずです。
| Lite版 | 限定されたスタイリングで利用可能 |
| Premium版 | すべての機能が利用可能
|
マップ要素をクリックして、ページにマップを追加します。マップ要素が選択されているときは、インスペクターにマップの設定が表示されます。インスペクターの位置フィールドに緯度と経度の座標または住所を入力して、その地域をマップの中心に配置できます。その他にも様々なスタイリングオプションが用意されています。
マップをパン（移動）したり拡大/縮小したりして、マップ要素をさらに操作できます。マップ上での変更は要素に反映されることに注意してください。
Premiumユーザーは、色を選択して色合いを付けることでマップをスタイル設定できます。もう1つのオプションとして、snazzymaps.com を使用してカラースキームを生成し、それらを使用することもできます。SnazzyMapsを使用すると、次のようなカラースキームを作成できます：https://snazzymaps.com/style/20053/papuportal-dark これらのカラースキームを使用するには、Javascript style array をインスペクターにコピーします。
マップの高さは調整できますが、マップの幅は調整できず、常に利用可能な最大幅にリサイズされます。サイズを変更するには、行や列の中にマップを配置してください。ブラウザの全幅を占めるようにマップを設定することもできます。
マウスを使用して、コンテンツ内のさまざまな領域にカーソルをすばやく配置したり、さまざまな要素を選択したりできます。
キーボードの矢印キーを使用して、コンテンツ全体でカーソルを移動することもできます。これを使用して、行の上や下に移動できます。
行や列を扱う場合、行の端をクリックして、行の直前または直後にコンテンツを追加できます。これは、複数の行が入れ子になっており、その間にコンテンツを追加したい場合に特に役立ちます。
サイトのフロントエンドに「Page Builder Sandwich で編集」ボタンが表示されない場合は、次の方法をお試しください：
PB Sandwich の編集ボタンは、フロントエンドの管理バーに表示されます。管理画面に移動し、ユーザー > プロフィールに進み、サイトを見るときにツールバーを表示するのチェックボックスがオンになっていることを確認してください。
フロントエンドで編集できるのは、投稿、固定ページ、カスタム投稿タイプのみです。バックエンドの WordPress コンテンツエディターを使用して編集できる場合にのみ、フロントエンドで編集できます。サイトのその他の領域（例：フロントページのブログ投稿一覧、すべてのブログ投稿の一覧、カテゴリー一覧、404ページ、検索結果ページなど）は、WordPress と使用しているテーマによって作成される動的なページであり、PB Sandwich を使用して編集することはできません。
現在のウェブページが編集可能かどうかを示す目安の1つは、管理バーに「投稿を編集」または「固定ページを編集」が表示されているかどうかです。
ページ/投稿がテーマやプラグインによって動的に生成されている場合、Page Builder Sandwich（およびほとんどの場合、他のページビルダーでも）では編集できません。バックエンドのコンテンツエディターが空であるにもかかわらず、フロントエンドでページを表示するとコンテンツが充実している場合、そのページが動的に生成されている可能性が高いです。
ページが動的に生成されているかどうかを確認するには、ウェブページのソースを表示します（右クリックして「ページのソースを表示」を選択）。テキスト「pbs-main-wrapper」を検索し、そのテキストがどこにも見つからない場合、そのページは動的に生成されています。
動的に生成されるコンテンツの例をいくつか示します：
コンテンツが空白の場合、テーマがコンテンツをまったく表示せず、その結果 PBS がページが編集不可であると誤認してしまうケースがありました。これが原因かどうかを確認するには、バックエンドエディターでページ/投稿を編集し、コンテンツに何らかのテキスト（例：「こんにちは」など）を追加してみて、そこから「Page Builder Sandwich で編集」ボタンをクリックしてください。
このヒントを提供してくれた Mathias Hellquist 氏に感謝します！
一部のページビルダーでは、WordPress のデフォルトのコンテンツエディターを使用するか、ページビルダー自身のエディターを使用するかを選択させることがあります。すでに別のページビルダーを使用してページを編集している場合、そのページビルダーがすでにコンテンツを「専有」してしまい、他のコンテンツフック/フィルターが機能しなくなっている可能性があります。このため、Page Builder Sandwich がコンテンツの場所を検出できず、編集するものがないために編集ボタンが表示されないことがあります。
これを修正するには、その特定のページ/投稿で該当のページビルダーを使用しないようにオプトアウトし、WordPress のデフォルトのコンテンツエディターを使用するように選択してください。
ページに対する編集権限があることを確認する
ページを編集できない場合、編集ボタンは表示されません。たとえば、編集者や寄稿者としてサイトでブログ投稿や記事を作成できる場合でも、フロントページやお問合せページを編集できるとは限りません。管理バーに「投稿を編集」ボタンが表示されている場合は、PB Sandwich を使用して編集できるはずです。編集権限が必要な場合は、サイト管理者に依頼してください。
PB Sandwich は JavaScript を多用しています。サイトにある他のスクリプトからの JavaScript エラーがある場合、PB Sandwich の動作が妨げられる可能性があります。これが原因かどうかを確認するには、ブラウザの開発者コンソールを開いてエラーを確認できます。
この確認には Chrome を使用することをお勧めします。ページ内の任意の場所を右クリックし、「検証」オプションをクリックします。ブラウザの下部に新しい領域が表示されるので、「コンソール（Console）」タブをクリックします。エラーがある場合は、次のように表示されます：
エラーが発生している場合は、スクリプト名をクリックまたはマウスカーソルを合わせることで、そのエラーがどこから発生しているかの手がかりを得ることもできます：
これらのエラーは、テーマや他のプラグインから発生している可能性があります。それらのエラーを修正することで、PB Sandwich が再び機能するようになる場合があります。
テーマまたはプラグインのいずれかが JavaScript エラーの原因となっている場合は、お気軽にメール（[email protected]）でお知らせください。問題解決に向けて最善を尽くします 🙂
CloudFlare は広く使われている無料の DNS CDN です。素晴らしいサービスですが、現在 PBS では Rocket Loader 機能に関して問題が発生します。Rocket Loader は JavaScript ファイルの読み込み時間を改善しますが、PBS スクリプトの依存関係や呼び出し順序を乱してしまいます。Rocket Loader が有効になっていると、Page Builder Sandwich の編集ボタンが表示されなくなります（そして JavaScript コンソールエラーも表示されません）。
サイトが CloudFlare の Rocket Loader を使用しているかどうかを確認するには、ウェブページのソースを表示し（右クリックして「ページのソースを表示」を選択）、「rocketscript」というテキストを検索します。そのテキストが見つかった場合、Rocket Loader が有効になっています。
オフにするための詳細な手順については、CloudFlare & Rocket Loader の互換性に関する記事をお読みください。
さて、この段階で上記の解決策がいずれも機能しない場合は、なぜ表示されないのか、そしてそれに対して何をすべきかを説明する時が来たかもしれません。準備はいいですか？始めましょう！
Page Builder Sandwich は、ページ/投稿のコンテンツがどこにあるかを知る必要があります。これは、WordPress が投稿のコンテンツを読み込むタイミングをリッスンし、その領域を「マーキング」することで行われます。これにより、すべてが読み込まれたときに、目的のコンテンツがどこにあるかを見つけることができます。
時には、一部のプラグインがこのプロセスをオーバーライドまたはバイパスし、独自の方法でコンテンツを読み込もうとすることがあります。これで問題ない場合もありますが、特定のシナリオ、特にメインの投稿コンテンツの読み込みに関しては、一部のプラグインが機能しなくなる原因となる可能性があります。別のプラグインがこの読み込みプロセスをバイパスすると、行った「マーキング」が失われ、エディターが起動するタイミングでコンテンツがどこにあるかを見つけられなくなります。そのため、編集ボタンが表示されません！また、ソーシャル共有プラグインなど、ページにコンテンツを追加する一部のプラグインもまったく同じ理由で機能しなくなる場合があります。
Page Builder Sandwich は、ページ/投稿のコンテンツがどこにあるかを知る必要があり、これは the_content フィルターにフックしてメインコンテンツの周りにラッパーを追加することによって行われます。一部のプラグインはこれをオーバーライドし、さらに先の処理で get_the_content() 関数を使用してコンテンツを上書きしてしまう場合があります。残念ながら、これを行うとすべての the_content フィルターの呼び出しがブロックされるため、PBS のラッパーが失われてしまいます。他のプラグインによる変更も同様に失われます。
get_the_content() を使用すること自体に何の問題もありませんが、すべての the_content フィルターが実行される通常の the_content() 呼び出しの代わりに、メインクエリ内および単一投稿テンプレートページ内で使用される場合、悪影響が生じる可能性があります。
フロントエンドでページ/投稿にアクセスし、ログインした状態でページのソースを表示することで、Page Builder Sandwich の「マーキング」が存在しないかどうかを確認できます。入り組んだコードの中から次の文字列が見つかるか検索してください：
data-name="main-content"
見つかった場合は、どこかで JavaScript の問題が発生しているだけの可能性がありますので、使用しているテーマとプラグインをお知らせいただければ修正できます。
しかし見つからない場合は、テーマ（またはプラグインですが、固定ページやブログ投稿の場合はほぼ確実にテーマ）が投稿コンテンツに対して何らかの処理を行っているだけである可能性があります。この場合は、テーマの作成者に連絡して問題について知らせる必要があります！上記の技術的な「なぜ」の説明を見せることもでき、デバッグの役に立ちます 🙂
PHP をいじることに自信がある場合は、投稿コンテンツを処理するテンプレートファイルを見つけて修正を試みることができます。これまでに見られた解決策の1つは、次の呼び出しを置き換えることです：
$content = get_the_content();
次のように変更します：
ob_start(); the_content(); $content = ob_get_clean();<br>
注：お使いの環境によって PHP の変数は異なる場合がありますが、概念は同じです。これが機能する場合、テーマに直接この変更を加えるのではなく、子テーマを作成することをお勧めします。また、変更によって副作用が生じる可能性もあるため、この件についてはテーマの作成者に相談することをお勧めします。
Page Builder Sandwich は一般的なページビルダーとは異なり、複雑さがなくシンプルに使用できます。
概要を手短に確認するには、以下の動画をご覧ください。
まず、新しい固定ページ、投稿、またはカスタム投稿タイプ（CPT）を作成します。次に、フロントエンドで新しく作成した投稿または既存の投稿にアクセスします。PBS は100%フロントエンドで動作するため、バックエンドであれこれ操作する必要はありません。
ページ上部（管理バー）に「Page Builder Sandwich」ボタンが表示されているはずですので、それをクリックして編集を開始します。上部からテキスト書式設定エリアがポップアップし、側面から要素追加パネルがポップアップします。お使いのテーマのコンテンツエリアが、そのままエディターになります！
PBS で編集できるのは単一ページのみです。ブログ記事一覧や404ページはテーマによって生成されるため編集できません。投稿、固定ページ、カスタム投稿タイプは編集可能です。
ここからが素晴らしいところです。フロントエンドでエディターを開いたら、コンテンツ内のテキストをクリックするか、コンテンツエリア内をクリックして入力を開始するだけです！他のページビルダーとは異なり、PBS ならポップアップダイアログを介することなく、直接コンテンツを編集できます。
編集時、上部にあるエリアはテキスト書式設定バーと呼ばれます。このバーには、色、太字、斜体、配置、リンクの追加、箇条書きなど、テキストの装飾に使用するすべての書式設定ツールが含まれています。各ボタンにカーソルを合わせると、そのツールの機能を確認できます。
画面左上にある「Add Elements（要素を追加）」ボタンにマウスを合わせると、要素追加パネルが表示されます。また、マウスを画面の左端に移動するだけでも表示させることができます。
要素を挿入するには、いずれかの要素をマウスで押し続け、コンテンツエリアまでドラッグします。要素が配置されるエリアがハイライトされます。マウスボタンを離すと、要素が配置されます。
コンテンツ内の任意の要素にマウスを合わせると、要素の周囲に枠線とツールバーが表示されます。
枠線の端にマウスを合わせると、要素間のマージンを拡大/縮小できます。
また、ツールバーのボタンをクリックして、要素に対してクイックアクションを実行することもできます。ツールバーの歯車アイコンをクリックすると、さらに多くのオプションが含まれるプロパティインスペクターが表示されます。
プロパティインスペクターを使用すると、要素の外観をさらに細かくコントロールできます。シャドウやアニメーションの追加、マップの色の変更、境界線の角丸（border radius）など、さまざまな設定が可能です。
また、要素の親要素のプロパティにアクセスすることもできます。たとえば、カラム内に画像を配置してプロパティインスペクターを開くと、画像、それが含まれるカラム、およびそのカラムが含まれる行のプロパティにアクセスできます。
プロパティインスペクターには要素ごとに異なる設定が多数用意されているため、ぜひすべて確認してみてください。
Page Builder Sandwich では、フロントエンドに実際のショートコードが表示され、簡単に編集することもできます！
ショートコードを覚えている場合は、コンテンツに直接入力して挿入できます。しかし、すべてを暗記していない場合（覚えている人などいるでしょうか？）、インスペクターにサイトで利用可能なすべてのショートコードが一覧表示されます。インスペクターから Shortcode ボタンをコンテンツエリアにドラッグし、挿入したいショートコードを見つけてクリックすると挿入されます。
ショートコードはフロントエンドで実際のコンテンツとしてレンダリングされます。編集するには、選択してインスペクターで属性を確認できます。あるいは、より細かくコントロールしたい場合は、ショートコードをダブルクリックしてraw形式（元のコードのまま）で編集することもできます。編集を行うと、変更内容を反映してショートコードが更新されます。
PBS では、あらゆるものをクリック＆ドラッグしてどこにでも移動できます。ドラッグする際、ページ内の他の要素の上に移動させることで、他のコンテンツの上または下に配置できます。
作業内容の保存
デザインに納得したら、ページ左上の保存ボタンをクリックするだけです。完了です！
Page Builder Sandwichは一般的なページビルダーとは異なり、複雑さがなくシンプルに使えます。
簡単な概要については、以下の動画をご覧ください。
まず、新しい固定ページ、投稿、またはCPT（カスタム投稿タイプ）を作成します。その後、フロントエンドで新しく作成した投稿、または既存の投稿を表示します。PBSは100%フロントエンドで動作するため、バックエンドで細々とした作業をする必要はありません。
ページ上部（管理バー）に「Page Builder Sandwich」ボタンがあるはずですので、それをクリックして編集を開始します。上部からテキスト書式設定エリアが、サイドから要素追加パネルがポップアップ表示されます。お使いのテーマのコンテンツエリアが、そのままエディターになります！
PBSで編集できるのは個別ページのみです。ブログ投稿一覧や404ページはテーマによって生成されるため、編集できません。投稿、固定ページ、カスタム投稿タイプは編集可能です。
ここからが素晴らしいところです。フロントエンドのエディターに入ったら、コンテンツ内の任意のテキストをクリックするか、コンテンツエリア内をクリックして入力を開始するだけです！他のページビルダーとは異なり、PBSではポップアップダイアログボックスを開くことなく、直接コンテンツを編集できます。
編集中、上部のエリアはテキスト書式設定バーと呼ばれます。このバーには、色、太字、斜体、配置、リンクの追加、箇条書きなど、テキストのスタイル設定に使用するすべての書式設定ツールが含まれています。各ボタンにカーソルを合わせると、そのツールの機能を確認できます。
画面左上の「要素を追加」ボタンにマウスカーソルを合わせると、要素追加パネルが表示されます。また、マウスを画面の左端に移動するだけでも表示させることができます。
要素を挿入するには、要素をマウスで長押ししたまま、コンテンツエリアにドラッグします。要素が配置されるエリアがハイライトされます。マウスボタンを離すと要素が配置されます。
コンテンツ内の任意の要素にマウスカーソルを合わせると、その要素の上にアウトラインとツールバーが表示されます。
アウトラインの端にマウスカーソルを合わせることで、要素間のマージン（余白）を増減できます。
また、ツールバーのボタンをクリックして、要素に対してクイックアクションを実行することもできます。ツールバーの歯車アイコンをクリックすると、さらに多くのオプションを含むプロパティインスペクターが表示されます。
プロパティインスペクターを使用すると、要素の外観をより詳細に制御できます。シャドウやアニメーションの追加、マップの色の変更、ボーダーの角丸（border-radius）など、さまざまな設定を行うことができます。
また、要素の親要素のプロパティにアクセスすることも可能です。たとえば、カラム内に画像を配置してプロパティインスペクターを開いた場合、その画像、画像が含まれるカラム、そしてカラムが含まれる行のプロパティにアクセスできます。
プロパティインスペクターには要素ごとに異なる多くの設定項目が含まれていますので、ぜひすべて確認してみてください。
Page Builder Sandwichはフロントエンドで実際のショートコードを表示し、簡単に編集することもできます！
ショートコードを覚えている場合は、コンテンツに直接入力して挿入することができます。しかし、すべてを覚えていなくても（普通は覚えていませんよね）、インスペクターにサイトで利用可能なすべてのショートコードが一覧表示されます。インスペクターからショートコードボタンをコンテンツエリアにドラッグし、挿入したいショートコードを見つけてクリックすると挿入されます。
フロントエンドではショートコードが実際のコンテンツとしてレンダリングされます。編集するには、対象を選択してインスペクターで属性を確認します。より細かく制御したい場合は、ショートコードをダブルクリックしてraw形式（そのままのコード）で編集できます。編集を適用すると、変更を反映してショートコードが更新されます。
PBSでは、何でもクリック＆ドラッグして好きな場所に移動できます。ドラッグしたものをページ内の別の要素の上に移動させることで、他のコンテンツの上または下に移動できます。
作業内容の保存
デザインに満足したら、ページ左上の保存ボタンをクリックするだけです。これで完了です！
Lite版プラグインとPremium版プラグインは2つの異なるプラグインです。プレミアム機能をご利用いただくには、Lite版を無効化（またはアンインストール）してから、Premium版プラグインをインストールして有効化し、ライセンスキーを入力する必要があります。
注意：Lite版とPremium版の両方のプラグインを同時に有効化した場合、先に進む前に既存のプラグインを無効化するようメッセージが表示されます。
pagebuildersandwich.com からPBSを購入されたお客様への注意：サイトからプラグインをダウンロードすることも可能で、お持ちの現在のライセンスキーは引き続き機能するはずです。機能しない場合は、新しいキーを発行いたしますのでお問い合わせください。
PBSを購入すると、次の2点が含まれたメールが届きます：
Premiumプラグインをインストールして有効化すると、次の画面が表示されます：
ここにライセンスキーを入力し、Agree & Activate Licenseをクリックします。これでプレミアム機能が利用可能になります。
あるいは、プラグインページに移動し、一覧からPage Builder Sandwichプラグインを見つけることもできます：
Activate Licenseリンクをクリックすると、そこからライセンスを入力できるようになります。
Page Builder Sandwichを使用して編集できるのは、個別の固定ページまたは投稿のみです。管理画面にコンテンツエディターを備えた「新規投稿」エリアがあるものであれば、Page Builder Sandwichで編集できるとお考えください。
あらゆるカスタム投稿タイプのコンテンツを編集できます。
Page Builder Sandwichがウェブサイトのパフォーマンスに与える影響はほぼゼロになるよう配慮されています。ログアウト時には、最低限として行と列のCSSスタイルのみがキューに追加され、使用したショートコードに必要なJSおよびCSSスクリプトのみがキューに追加されます。
ウェブサイトの訪問者に対しては、最低限として行と列のCSSスタイルのみがキューに追加され、使用したショートコードに必要なJSおよびCSSスクリプトのみが含まれます。
最近、Page Builder Sandwich と IMPress for IDX Broker プラグインの両方が同時に有効化された場合の互換性の問題に関する修正を追加しました。これにより、ログインユーザーのフロントエンドでクラッシュが発生していました。
この修正により PBS は再び機能するようになりましたが、IDX Broker ウィジェットをエディター内に挿入する機能を削除する必要がありました。それにもかかわらず、IDX Broker ウィジェットは「外観」>「ウィジェット」メニューで引き続きご利用いただけます。
作業をより迅速に行えるよう、Page Builder Sandwichで利用可能なさまざまなショートカットキーを使用できます。
これらは書式設定以外／ツールのコマンド用のショートカットです。書式設定／ツールのショートカットキーについては、テキスト書式設定バーの各ボタンの上にマウスを置くと、そのショートカットキーの組み合わせが表示されます。
| ショートカットキー | 説明 |
| CTRL+E （非編集中） | 編集を開始 |
| CTRL+SHIFT+R （編集中） | ページを再読み込み（CTRL+Rは右揃えに使用されるため） |
| CTRL+S | 変更を保存 |
| CTRL+ESC | 変更を破棄して編集を終了 |
| CTRL+C | コピー |
| CTRL+V | 貼り付け |
| CTRL+X | 切り取り |
| CTRL+ENTER | 改行／次の行 |
| CTRL+Z | 元に戻す |
| CTRL+SHIFT+Z (Mac) CTRL+Y (PC) |
やり直す |