ショート説明ブロックは、各WooCommerce商品のショート説明を動的に取得し、商品詳細ページテンプレートに表示します。静的な説明文を記述する代わりに、このブロックはショートコードを使用してカタログ内の全商品に正しいショート説明を自動的に取得します。これにより、手動作業なしでテンプレートの正確性を維持できます。
このブロックは、シングル商品テンプレートでのみ使用することを想定して設計されています。短い説明文は通常、商品タイトルと価格の近くに表示され、購入者が詳細を読む前に商品の概要を簡潔に把握できるようにします。ショートコードにカスタムテキストを追加したり、デバイスごとに配置やフォントサイズを調整したり、タイポグラフィやカラースタイルを適用したりすることで、説明文をブランドに完璧に合わせることができます。
ページにショート説明ブロックを追加する
SeedProdの単一商品テンプレートに「短い説明」ブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン ＞ ブロック ＞ WooCommerce テンプレートタグ の下にある「短い説明」ブロックを、商品詳細ページのテンプレート内の希望するセクションにドラッグ＆ドロップします。
ステップ2: コンテンツ設定の構成
追加後、ショート説明ブロックをクリックして設定を開きます。コンテンツタブの テキストセクションには、商品ショート説明のショートコードフィールドと表示オプションが含まれています。
- テキスト： コンテンツフィールドには事前に
shortcodeは、各商品についてWooCommerceから自動的に短い説明を取得します。必要に応じて、shortcodeの前後にカスタムテキストを追加できます。 ビジュアルエディター (リッチテキスト)および HTMLを編集 フィールドの下にあるボタンを使用してモードを切り替えます。 - 配置:説明テキストの水平方向の配置を設定します — 左、中央、または右。デスクトップ、タブレット、モバイルごとに異なる配置をサポートします。
- フォントサイズ：スライダーを使用して説明文のフォントサイズを設定します（10～72px）。デスクトップ、タブレット、モバイル端末ごとにサイズ設定が可能です。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、説明テキストの外観をスタイル設定し、デバイスごとの表示状態を制御できます。
スタイル:
- タイポグラフィ:短い説明文のフォントファミリー、太さ、行間、文字間隔、テキスト変換を設定し、コンテンツタブのフォントサイズスライダーを超える詳細な制御を可能にします。
- 色：短い説明のテキストの色を設定します。
- テキストシャドウ：説明文に直接影効果を追加します。プリセットサイズ（なし、ヘアライン、小、中、大、特大、2倍特大）から選択し、文章に奥行きや強調を加えられます。
- シャドウ：ブロック要素全体にボックスシャドウを追加し、周囲のページコンテンツから視覚的に浮き立たせます。
スペース:
- 余白：商品説明ブロックの周囲（上、右、下、左）の外側の間隔を制御します。これにより、説明文と商品タイトルやカート追加ボタンなどの周囲の要素との間に表示されるスペースが決まります。
- パディング：ショート説明ブロック内の内側の間隔（上、右、下、左）を調整します。これにより、説明テキストとブロックの端の間に余白が生まれます。
属性：
- CSS ID:ショート説明ブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングやJavaScriptのターゲティングのためにSeedProdによって自動的に作成されます。
- カスタムクラス：テーマやカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します。
- カスタム属性:ブロックラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値 (例: data-description|short)。
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面で「短い説明」ブロックを非表示にします。
- タブレットで非表示:タブレット端末で「短い説明」ブロックを非表示にします。
- モバイルで非表示:モバイル端末で「短い説明」ブロックを非表示にします。
アニメーション効果：
- エントランスアニメーション：ショート説明ブロックが表示領域にスクロールインする際に再生される様々なアニメーション効果から選択できます。バウンス、フェードイン、ズームイン、回転インなど、多数のオプションが用意されています。
ステップ4: 変更を保存する
ショート説明ブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
シングル商品テンプレートに「商品概要」ブロックの追加に成功しました！このブロックは、WooCommerceストア内の全商品に対して自動的に適切な商品概要を表示します。これにより時間を節約でき、商品カタログ全体で一貫性を保てます。タイポグラフィ、テキストカラー、デバイスごとの配置を調整し、購入へと導く商品説明の表示方法を試してみてください。