ショートコードブロックを使用すると、WordPressのショートコードをSeedProdページに直接埋め込むことができます。ショートコードは、角括弧で囲まれた短いコード（例：[contact-form-7]や[woocommerce_cart]）で、ページがレンダリングされる際に特定の機能をトリガーします。このブロックは、SeedProdのビジュアルエディターと、より広範なWordPressプラグインエコシステムとの間のギャップを埋めます。
ショートコードを通じてコンテンツを出力するプラグインは、このブロックを使用してSeedProdページにドロップできます。一般的な例としては、お問い合わせフォーム、支払いボタン、メンバーシップコンテンツ、スライダー、予約カレンダー、カスタムPHPスニペットなどがあります。オプションのライブプレビュー切り替えにより、エディター内でレンダリングされた出力を確認できるため、公開前にショートコードが機能していることを検証できます。
ページにショートコードブロックを追加する
SeedProdページにショートコードブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、目的のセクションにショートコードブロックをドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、ショートコードブロックをクリックして設定を開きます。コンテンツタブの設定セクションで、ショートコードを入力し、オプションでエディターでの出力をプレビューできます。
- ショートコード：WordPressのショートコードをテキストエリアに入力または貼り付けます。角括弧や属性を含む完全なショートコードを入力してください。例：
[contact-form-7 id="1" title="Contact form"]。ショートコードは処理され、ライブページにレンダリングされます。 - ショートコードプレビューを表示：これをオンにすると、SeedProdエディター内でショートコードの出力のライブプレビューが直接レンダリングされます。これにより、ビルダーを離れることなく、ショートコードが機能していることを確認し、その外観をチェックできます。プレビューを非表示にし、他の要素を編集しながらエディターの応答性を維持するには、オフにしてください。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、ブロックの周囲のスペーシングを制御し、さまざまなデバイスでの表示を管理できます。
間隔：
- マージン：ショートコードブロックの周囲の外部スペーシング（上、右、下、左）を制御します。これにより、ショートコードの出力と周囲のページ要素の間にどれだけのスペースが表示されるかが決まります。
- パディング：ショートコードブロック内の内部スペーシング（上、右、下、左）を調整します。これにより、ショートコードの出力とブロックの端の間に十分な余白ができます。
属性:
- CSS ID：ショートコードブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングまたはJavaScriptターゲティングのためにSeedProdによって自動的に作成されます。
- カスタムクラス：カスタムCSSクラスを追加して、テーマまたはカスタムCSSの特定のスタイルをブロックラッパーに適用します。
- カスタム属性: ブロックのラッパー要素に任意のHTML属性を追加します。属性名を新しい行に入力し、次の形式を使用します: attribute-name|value (例: data-form|contact)。
デバイス表示:
- デスクトップで非表示: デスクトップ画面でショートコードブロックを非表示にします。
- タブレットで非表示: タブレットデバイスでショートコードブロックを非表示にします。
- モバイルで非表示: モバイルデバイスでショートコードブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: ショートコードブロックが表示領域にスクロールインしたときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあります。
ステップ4：変更を保存
ショートコードブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。
ショートコードブロックをページに正常に追加しました！このブロックは、連絡フォームや支払いウィジェットからメンバーシップゲートやカスタム機能まで、WordPressプラグインエコシステムのすべてのパワーをSeedProdレイアウト内で解き放ちます。プラグインが提供する任意のショートコードを貼り付け、ライブプレビュー切り替えを使用して、ページが公開される前にすべてが意図したとおりに見えることを確認してください。