投稿ブロックを使用すると、1つのページに投稿のコレクションを表示できます。コンテンツのクエリ、整理、表示方法を完全に制御できます。複数のスキン、レイアウト、表示オプションから選択して、サイトのデザインに合った投稿フィードを作成してください。
このブロックは、投稿タイプ、カテゴリ、タグ、著者による強力なクエリフィルタリングをサポートしており、グリッド、メーソンリー、カルーセルなどの豊富なレイアウトオプションを提供します。また、アイキャッチ画像、タイトル、メタ情報、抜粋、バッジ、続きを読むリンクなど、表示する投稿情報を単一の設定パネルから制御できます。
投稿ブロックをページに追加する
SeedProdページに投稿ブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
ブロック > 高度な設定の下にある投稿ブロックを、ページの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、投稿ブロックをクリックして設定を開きます。設定タブは、投稿クエリとレイアウトの2つのセクションに分かれています。
投稿クエリ:
- クエリタイプ: 投稿の取得方法を選択します。デフォルトはページの既存のクエリパラメータを使用し、カスタムでは投稿タイプ、カテゴリ、タグ、著者でフィルタリングでき、手動では完全な制御のために生のWP_Queryクエリ文字列を入力できます。
- 投稿タイプでクエリ: 1つ以上の投稿タイプで結果をフィルタリングするにはオンにします。ドロップダウンから含める投稿タイプを選択します（カスタムが選択されている場合に利用可能）。
- カテゴリでクエリ: 1つ以上のカテゴリで結果をフィルタリングするにはオンにします。ドロップダウンから含めるカテゴリを選択します。
- タグでクエリ: 1つ以上のタグで結果をフィルタリングするにはオンにします。ドロップダウンから含めるタグを選択します。
- 著者でクエリ: 1人以上の著者で結果をフィルタリングするにはオンにします。ドロップダウンから含める著者を選択します。
- 並べ替え順: 結果を並べ替えるフィールドを選択します — 日付、最終更新日、タイトル、コメント数、またはメニュー順。
- 順序: 並べ替えの方向を設定します — ASC（古い順/A-Z順）またはDESC（新しい順/Z-A順）。
- クエリパラメータ: 手動WP_Query文字列を入力します（手動が選択されている場合に利用可能）。例:
post_type=post&posts_per_page=3&order=desc。
レイアウト:
- スキン: 全体的な投稿カードのデザインを選択します — クラシック（標準リスト/グリッド）、カード（画像が上にあるボックスカード）、クリエイティブ（画像と重なるコンテンツエリア）、またはミニマル（クリーンで軽量なレイアウト）。
- レイアウト: 投稿の配置方法を選択します — グリッド（均一な列）、マソンリー（可変高さの列）、またはカルーセル（水平スクロールスライドショー）。カルーセルオプションには、表示するスライド数（1〜10）、自動再生トグル、自動再生速度、ナビゲーション位置（上/下）、ナビゲーションスタイル（矢印とドット/矢印/ドット）、およびナビゲーションの色が含まれます。
- 列数: 表示する列数を設定します（グリッドおよびマソンリーレイアウト）。
- ページネーション: 投稿の下にページネーションリンクを追加するにはオンにします。
- 1ページあたりの表示数: 1ページあたりに表示する投稿数を設定します（カスタムまたは手動クエリタイプが選択されている場合に使用可能）。
- アイキャッチ画像を表示: 各投稿のアイキャッチ画像を表示するにはオンにします。有効にすると、画像高さ（0〜500px）と、クリエイティブおよびミニマルスキンでは画像位置（左または右）も設定できます。
- タイトルを表示: 各投稿のタイトルを表示するにはオンにします。有効にすると、タイトルタグ（H1〜H6、div、span、またはp）を選択できます。
- メタ情報を表示: 投稿のメタ情報を表示するにはオンにします。個別のトグルで、最終更新日、作成者、日付、時刻、およびコメント数を表示/非表示にできます。メタ項目間に表示される区切り文字を設定します。
- 抜粋を表示: 各投稿の抜粋を表示するにはオンにします。有効にすると、抜粋の長さ（単語数）を設定できます。
- 続きを読むを表示: 抜粋の下に「続きを読む」リンクを表示するにはオンにします。有効にすると、続きを読むのテキストをカスタマイズできます。
- バッジ: 各投稿にタクソノミーラベルバッジを表示するにはオンにします（カードおよびクリエイティブスキンで利用可能）。有効にすると、バッジのタクソノミー（カテゴリーまたはタグ）を選択できます。
- アバター: 作成者のアバターを表示するにはオンにします（カードスキンのみ）。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、投稿ブロックのすべての要素のビジュアルスタイルを微調整できます。設定は次のセクションに整理されています。
投稿:
- 投稿のパディング: 各投稿カード内のコンテンツの内側の余白を設定します（上、右、下、左）。
- 投稿の背景色: 各投稿カードの背景色を設定します。
- 投稿の影: 各投稿カードの周りに影の効果を追加します — なし、ヘアライン、小、中、大、特大、2倍特大、またはカスタム影から選択します。
- 下の余白: 投稿カード間の垂直方向の余白を0〜100pxで設定します。
テキスト:
- タイポグラフィ（タイトル）: 投稿タイトルのフォントファミリー、サイズ、太さ、スタイルを設定します（デバイスごとの設定をサポート）。
- タイトルの色: 投稿タイトルのテキストの色を設定します。
- メタテキストのタイポグラフィ: 投稿メタ情報のタイポグラフィを設定します（デバイスごと）。
- メタテキストの色: メタテキストの色を設定します。
- 抜粋のタイポグラフィ: 投稿の抜粋のタイポグラフィを設定します（デバイスごと）。
- 抜粋の色: 抜粋テキストの色を設定します。
- 続きを読むテキストのタイポグラフィ: 続きを読むリンクのタイポグラフィを設定します（デバイスごと）。
- 続きを読むテキストの色: 続きを読むリンクの色を設定します。
- ページネーションのタイポグラフィ: ページネーションリンクのタイポグラフィを設定します（デバイスごと）。
- ページネーションの色: ページネーションリンクテキストの色を設定します。
画像:
- 画像の高さ: アイキャッチ画像の高さを0から500pxの間で設定します（アイキャッチ画像が有効な場合に表示）。
- 影: アイキャッチ画像に影の効果を追加します — なし、細線、小、中、大、特大、2倍特大、または下部ドロップシャドウから選択します。
- 画像の余白: アイキャッチ画像の周りの間隔を設定します（上、右、下、左）。
- 画像の境界線: 画像の境界線のスタイル（実線、点線、破線）、色、幅、および角の半径（各コーナーの半径を含む：右上、左上、右下、左下）を設定します。
- 画像の余白パディング: アイキャッチ画像の周りに内側のパディングを追加します。
境界線:
- 境界線の半径: 各投稿カードの角の丸みを0から100pxの間で設定します。
- 境界線のスタイル: 各投稿カードの境界線のスタイルを設定します — 実線、点線、または破線。
- 境界線の色: 各投稿カードの境界線の色を設定します。
- 境界線の幅: 各辺の境界線の幅を設定します（上、右、下、左）。
コンテンツエリア:
- コンテンツのパディング: 各投稿カード内のテキストコンテンツエリアの内側のパディングを設定します（上、右、下、左）。
- コンテンツの背景色: 各投稿カード内のコンテンツエリアの背景色を設定します。
- コンテンツの影: コンテンツエリアに影を追加します — なし、細線、小、中、大、特大、2倍特大、またはカスタムシャドウから選択します。
- コンテンツエリアの境界線: コンテンツエリアの境界線のスタイル（実線、点線、破線）、色、各辺の幅、および境界線の半径を設定します。
バッジの分類:
- 分類のパディング: バッジラベルの内側のパディングを設定します（上、右、下、左）。
- 境界線の半径: バッジの各コーナーの丸みを設定します（右上、左上、右下、左下）。
- 背景色: 分類バッジの背景色を設定します。
- 色: 分類バッジラベルのテキスト色を設定します。
- 分類のタイポグラフィ: バッジテキストのフォントファミリー、サイズ、スタイルを設定します（デバイスごと）。
- 下部の間隔: バッジの下の間隔を0から100pxの間で設定します。
間隔：
- 余白: 投稿ブロックの外側の余白を制御します（上、右、下、左）。デスクトップ、タブレット、モバイルのデバイスごとの設定に対応しています。
- パディング: 投稿ブロックの内側の間隔を調整します（上、右、下、左）。デバイスごとの設定に対応しています。
属性:
- CSS ID: ポストブロックに自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングまたはJavaScriptのターゲット設定のためにSeedProdによって自動的に作成されます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。属性名を改行し、attribute-name|valueの形式で入力します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面でポストブロックを非表示にします。
- タブレットで非表示: タブレットデバイスでポストブロックを非表示にします。
- モバイルで非表示: モバイルデバイスでポストブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: ポストブロックが表示領域にスクロールインしたときに再生される、さまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあります。
ステップ4：変更を保存
ポストブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。
ページにポストブロックを正常に追加しました！これを使用して、コンテンツを視覚的に魅力的で整理されたレイアウトでエレガントに表示し、読者がサイトの他の部分をさらに探索するように促します。さまざまなスキン、レイアウト、クエリ設定を試して、ブランドとコンテンツ戦略に完全に一致する投稿フィードを作成してください。