について ショートコード・ブロック 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属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値 (例: data-form|contact)。
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面でショートコードブロックを非表示にします。
- タブレットで非表示:タブレット端末でショートコードブロックを非表示にします。
- モバイルで非表示:モバイル端末でショートコードブロックを非表示にします。
アニメーション効果：
- エントランスアニメーション：ショートコードブロックが画面にスクロールインする際に再生される様々なアニメーション効果から選択できます。バウンス、フェードイン、ズームイン、回転インなど、多数のオプションが用意されています。
ステップ4: 変更を保存する
ショートコードブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
ページにショートコードブロックを正常に追加しました！このブロックにより、SeedProdレイアウト内でWordPressプラグインエコシステムの全機能が利用可能になります。コンタクトフォームや決済ウィジェットから、会員制ゲートやカスタム機能まで幅広く対応。プラグインが提供する任意のショートコードを貼り付け、公開前にライブプレビュー機能で表示を確認し、意図した通りの表示になっていることを必ずご確認ください。