render_block_core_cover()


WordPressのrender_block_core_cover()関数は、カバーブロックをレンダリングするために使用されます。この関数は、Gutenbergエディタで作成されたカバーブロックをフロントエンドに表示する際に役立ちます。

構文

render_block_core_cover( array $block );
  • $block(array) — カバーブロックのプロパティを含む配列。

例1: 基本的なカバーブロックのレンダリング

この例では、カバーブロックをレンダリングします。

echo render_block_core_cover( array( 'blockName' => 'core/cover', 'attrs' => array( 'url' => 'https://example.com/image.jpg' ) ) );

例2: カバーブロックにカスタムスタイルを適用

カバーブロックにカスタムスタイルを適用する例です。

echo render_block_core_cover( array( 'blockName' => 'core/cover', 'attrs' => array( 'url' => 'https://example.com/image.jpg', 'customStyles' => array( 'background-color' => '#ff0000' ) ) ) );

例3: カバーブロックにオーバーレイを追加

カバーブロックにオーバーレイを追加する例です。

echo render_block_core_cover( array( 'blockName' => 'core/cover', 'attrs' => array( 'url' => 'https://example.com/image.jpg', 'overlayColor' => '#000000', 'overlayOpacity' => 0.5 ) ) );

例4: カバーブロックにテキストを追加

カバーブロック内にテキストを追加する例です。

echo render_block_core_cover( array( 'blockName' => 'core/cover', 'attrs' => array( 'url' => 'https://example.com/image.jpg', 'content' => 'サンプルテキスト' ) ) );

例5: カバーブロックの高さを設定

カバーブロックの高さを設定する例です。

echo render_block_core_cover( array( 'blockName' => 'core/cover', 'attrs' => array( 'url' => 'https://example.com/image.jpg', 'height' => 500 ) ) );

例6: カバーブロックの最小高さを設定

カバーブロックの最小高さを設定する例です。

echo render_block_core_cover( array( 'blockName' => 'core/cover', 'attrs' => array( 'url' => 'https://example.com/image.jpg', 'minHeight' => 300 ) ) );

例7: カバーブロックにカスタムクラスを追加

カバーブロックにカスタムクラスを追加する例です。

echo render_block_core_cover( array( 'blockName' => 'core/cover', 'attrs' => array( 'url' => 'https://example.com/image.jpg', 'className' => 'custom-class' ) ) );

注意点

  • カバーブロックの画像URLが正しいことを確認してください。
  • カスタムスタイルやクラスを適用する際は、CSSの競合に注意してください。

関連機能：