プラグインElementorのelementor/image_size/get_attachment_image_htmlフィルタの使用方法・解説

概要

elementor/image_size/get_attachment_image_html フィルタは、Elementorプラグイン内で画像添付ファイルのHTMLをカスタマイズできるフックです。このフィルタを使用することで、画像を表示する際のHTMLマークアップを柔軟に変更でき、さまざまな機能を実装する際に役立ちます。以下は、よく使われるシナリオの例です：

画像のラッパーに特定のクラスを追加する。
画像のAlt属性を動的生成する。
画像のサイズを条件に基づいて変更する。
サムネイル画像を異なるHTMLマークアップで表示する。
画像リンクをカスタマイズする。
特定の条件に応じて、異なる画像を表示する。

このフィルタは、Elementorのバージョン3.0以降で使用可能で、WordPress 5.0以降で動作します。

構文

function custom_function_name( $html, $attachment_id, $size, $icon ) {
    // カスタム処理
    return $html;
}
add_filter( 'elementor/image_size/get_attachment_image_html', 'custom_function_name', 10, 4 );

パラメータ

$html: 出力される画像のHTMLマークアップ。
$attachment_id: 添付ファイルのID。
$size: 画像サイズの指定。
$icon: アイコンとして表示するかどうかのフラグ。

戻り値

修正された画像のHTMLマークアップ。

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

アクション	使用例
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

サンプルコード

サンプルコード1: 画像にカスタムクラスを追加する

function add_custom_class($html, $attachment_id, $size, $icon) {
    return str_replace('class="', 'class="custom-class ', $html);
}
add_filter('elementor/image_size/get_attachment_image_html', 'add_custom_class', 10, 4);

このコードは、画像のHTMLクラスに”custom-class”を追加します。

サンプルコード2: Alt属性を動的に設定する

function dynamic_alt_text($html, $attachment_id, $size, $icon) {
    $alt_text = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
    return str_replace('alt=""', 'alt="' . esc_attr($alt_text) . '"', $html);
}
add_filter('elementor/image_size/get_attachment_image_html', 'dynamic_alt_text', 10, 4);

このコードは、画像のAlt属性を添付ファイルのメタデータから取得して設定します。

サンプルコード3: アイコン設定に応じた処理

function icon_based_image($html, $attachment_id, $size, $icon) {
    if($icon) {
        // アイコン使用時の特別なHTML処理
        return '<div class="icon-wrapper">' . $html . '</div>';
    }
    return $html;
}
add_filter('elementor/image_size/get_attachment_image_html', 'icon_based_image', 10, 4);

このコードは、アイコンが指定されている場合に特別なラッパーを追加します。

サンプルコード4: 画像サイズを条件に変更する

function conditional_image_size($html, $attachment_id, $size, $icon) {
    if ($size === 'large') {
        $html = str_replace('large', 'medium', $html);
    }
    return $html;
}
add_filter('elementor/image_size/get_attachment_image_html', 'conditional_image_size', 10, 4);

このコードは、指定されたサイズが”large”の場合、HTML内のサイズを”medium”に変更します。

サンプルコード5: リンクをカスタマイズする

function customize_image_link($html, $attachment_id, $size, $icon) {
    return preg_replace('/(<a.*?)(href=".*?")/', '$1href="https://custom-link.com"', $html);
}
add_filter('elementor/image_size/get_attachment_image_html', 'customize_image_link', 10, 4);

このコードは、画像のリンク先をカスタムURLに変更します。

概要

構文