Product Meta block は、WooCommerceのシングル商品テンプレートに表示される、各商品に関連付けられたメタデータを表示します。これには、商品のカテゴリー、タグ、SKUなどの情報が含まれ、顧客が商品についてさらに理解したり、関連商品を見つけたりするのに役立ちます。
このブロックは、シングル商品テンプレート専用に設計されており、各商品の正しいメタデータを動的に取得します。メタデータのレイアウト方法を選択したり、間隔と配置を制御したり、テキストとリンクの色をカスタマイズしたり、インラインアイテム間に区切り文字を追加したりできるため、商品詳細の表示方法を完全に制御できます。
商品メタブロックをページに追加する
SeedProdシングル商品テンプレートに商品メタブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロック > WooCommerceテンプレートタグの下にある商品メタブロックを、シングル商品テンプレートの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、商品メタブロックをクリックして設定を開きます。コンテンツタブは2つのセクションに分かれています。メタデータの表示方法を制御するレイアウトと、タイポグラフィと色を微調整するレイアウト設定です。
レイアウト:
- 表示：メタデータアイテムの配置方法を選択します。テーブルは、各アイテムを2列のラベル/値レイアウトで表示します。スタックは、ラベルを値の上に縦に配置します。インラインは、すべてのアイテムを単一行に横並びで表示し、区切り文字で区切ります。
- 間隔：テーブルまたはスタック表示を使用する場合、各メタデータ行間の垂直間隔（1〜100px）を設定します。
- 配置：メタデータコンテンツの水平方向の配置を設定します — 左、中央、または右。
- 区切り文字：インライン表示でメタデータアイテムを区切るために使用する文字または記号を入力します（デフォルトはカンマ）。パイプ（|）、ダッシュ（–）、または箇条書き（•）など、任意の文字を使用できます。
レイアウト設定：
- テキストタイポグラフィ：メタデータのプレーンテキスト部分（「カテゴリー：」や「SKU：」などのラベル）のフォントファミリー、サイズ、太さ、行の高さ、文字間隔を設定します。
- テキストカラー：プレーンなメタデータテキストの色を設定します。
- リンクタイポグラフィ：クリック可能なリンクとして表示されるメタデータ値（カテゴリー名やタグ名など）のタイポグラフィを設定します。
- リンクカラー：メタデータリンクテキストの色を設定し、周囲のラベルテキストから視覚的に目立つようにします。
- 区切り文字タイポグラフィ：インラインメタデータアイテム間に使用される区切り文字のフォントサイズとスタイルを設定します。
- 区切り線の色: インラインメタデータ項目の間の区切り文字の色を設定します。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、背景オプション、境界線、間隔、表示/非表示コントロールを使用して、ブロックをさらにスタイル設定できます。
背景:
- 背景: 製品メタブロック全体の背面に背景色、グラデーション、または画像を設定します。これは、メタデータ領域を製品ページの周囲のコンテンツから視覚的に分離するのに役立ちます。
間隔：
- マージン: 製品メタブロックの外側の間隔（上、右、下、左）を制御します。これにより、メタデータとページ上の周囲の要素との間にどれだけのスペースが表示されるかが決まります。
- パディング: 製品メタブロックの内側の間隔（上、右、下、左）を調整します。これにより、メタデータコンテンツとブロックの端の間に十分なスペースができます。
属性:
- CSS ID: 製品メタブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングまたはJavaScriptターゲティングのためにSeedProdによって自動的に作成されます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。属性名を改行し、次の形式で入力します: attribute-name|value (例: data-meta|product)。
境界線:
- 角丸: 製品メタブロックの角の丸みを設定します。
- 境界線のスタイル: 境界線のスタイルを選択します — 実線、点線、破線。
- 境界線の色: ブロックの境界線の色を設定します。
- 境界線の幅: 各辺（上、右、下、左）の境界線の太さを設定します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面で製品メタブロックを非表示にします。
- タブレットで非表示: タブレットデバイスで製品メタブロックを非表示にします。
- モバイルで非表示: モバイルデバイスで製品メタブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: 製品メタブロックが表示領域にスクロールインしたときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあります。
ステップ4：変更を保存
製品メタブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。
シングル製品テンプレートに製品メタブロックを正常に追加しました！このブロックは、各製品のWooCommerceからカテゴリ、タグ、SKU、その他の製品メタデータを自動的に取得します。表示レイアウト、リンクの色、区切り線の設定を試して、ストアのデザインを引き立て、買い物客が関連製品をすばやく見つけられるように製品メタデータを表示してください。