render_block_core_image()


WordPressのrender_block_core_image()関数は、コアの画像ブロックをレンダリングするために使用されます。この関数は、画像ブロックのHTMLを生成し、フロントエンドに表示します。

構文

render_block_core_image( array $block );
  • $block(array) — 画像ブロックの属性とコンテンツを含む配列。

例1: 基本的な画像ブロックのレンダリング

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

echo render_block_core_image( array( 'attrs' => array( 'url' => 'https://example.com/image.jpg' ) ) );

例2: カスタムクラスを追加した画像ブロック

画像ブロックにカスタムクラスを追加してレンダリングします。

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

例3: 画像にaltテキストを追加

altテキストを指定して画像ブロックをレンダリングします。

echo render_block_core_image( array( 'attrs' => array( 'url' => 'https://example.com/image.jpg', 'alt' => 'サンプル画像' ) ) );

例4: 画像のサイズを指定

画像の幅と高さを指定してレンダリングします。

echo render_block_core_image( array( 'attrs' => array( 'url' => 'https://example.com/image.jpg', 'width' => 300, 'height' => 200 ) ) );

例5: リンク付き画像ブロック

画像にリンクを追加してレンダリングします。

echo render_block_core_image( array( 'attrs' => array( 'url' => 'https://example.com/image.jpg', 'linkDestination' => 'custom', 'href' => 'https://example.com' ) ) );

例6: レスポンシブ画像のレンダリング

レスポンシブ対応の画像をレンダリングします。

echo render_block_core_image( array( 'attrs' => array( 'url' => 'https://example.com/image.jpg', 'srcset' => 'https://example.com/image-300x200.jpg 300w, https://example.com/image-600x400.jpg 600w', 'sizes' => '(max-width: 600px) 100vw, 600px' ) ) );

例7: キャプション付き画像ブロック

キャプションを追加して画像ブロックをレンダリングします。

echo render_block_core_image( array( 'attrs' => array( 'url' => 'https://example.com/image.jpg', 'caption' => 'これはサンプル画像です。' ) ) );

注意点

  • 画像のURLが正しく指定されていることを確認してください。
  • altテキストはアクセシビリティのために重要です。
  • 画像のサイズを指定する際は、アスペクト比を維持するように注意してください。

関連機能：