ワードプレスのget_header_image_tag関数の使用方法・解説

概要

get_header_image_tag 関数は、カスタムヘッダーの img 要素を取得するための関数です。この関数は、WordPress テーマにおいて、カスタムヘッダー画像を表示する際にしばしば使用されます。以下は、この関数がどのような機能を実装する際に役立つかの例です：

1. テーマのカスタム化
2. ヘッダー画像の動的表示
3. ユーザーのカスタマイズオプション
4. レスポンシブデザインの実装
5. アクセシビリティの向上
6. SEO 対策（画像の alt 属性）
7. 多言語対応
8. ソーシャルメディアのシェアカード作成

構文

get_header_image_tag( $size = 'full', $attr = '' );

パラメータ

• $size (string) – 取得する画像のサイズ。デフォルトは ‘full’。
• $attr (string|array) – img タグに追加する属性。デフォルトは空。

戻り値

img タグを含む文字列。

関連する関数

• get_custom_header
• get_theme_support

使用可能なバージョン

get_header_image_tag 関数は、WordPress 3.4以降で利用可能です。

コアファイルのパス

wp-includes/theme.php

この関数のアクションでの使用可能性

アクション	使用例
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme	〇
after_setup_theme	〇
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header	〇
wp_head	〇

非推奨または削除されたWordPressバージョン

特定のバージョンで非推奨または削除された情報はありません。

サンプルコード

サンプルコード 1: 基本的な使用例

<?php
  echo get_header_image_tag();
?>

説明：デフォルトのカスタムヘッダー画像を取得し、img タグを表示します。

サンプルコード 2: サイズ指定の使用

<?php
  echo get_header_image_tag('medium');
?>

説明：’medium’ サイズのカスタムヘッダー画像を取得し、表示します。

サンプルコード 3: 属性追加

<?php
  echo get_header_image_tag('full', array('class' => 'header-image', 'alt' => 'サイトのヘッダー画像'));
?>

説明：クラスとalt属性を追加してカスタムヘッダー画像を取得・表示します。

サンプルコード 4: カスタムサイズを指定

<?php
  add_theme_support('custom-header', array('width' => 1200, 'height' => 300));
  echo get_header_image_tag('header-image-size');
?>

説明：カスタムサイズを指定してヘッダー画像を表示します。

サンプルコード 5: 画像URLを直接取得（imgタグなし）

<?php
  $header_image = get_header_image();
  if ($header_image) {
      echo '<img src="' . esc_url($header_image) . '" alt="カスタムヘッダー">';
  }
?>

説明：img タグを手動で作成し、取得したヘッダー画像のURLを表示します。