もノくロ

解決策ででてくるblogのタグが動かないのでお願いChatGPTで解決したので備忘録。

function generate_image_tag($atts) {
    $atts = shortcode_atts( array(
        'img' => '',
        'alt' => '',
        'webp' => true,
        'theme_url' => get_bloginfo('template_url'),
        'picture_class' => '',
    ), $atts );

    // File path details
    $file_info = pathinfo($atts['img']);
    $file_dir = $file_info['dirname'] != '.' ? $file_info['dirname'].'/' : '';
    $file_url = $file_dir . $file_info['filename'];

    $output = '<picture';

    // クラスが指定されていれば追加
    if (!empty($atts['picture_class'])) {
        $output .= ' class="' . esc_attr($atts['picture_class']) . '"';
    }

    $output .= '>';

    if (strtolower($file_info['extension']) === 'svg') {
        // If the file is an SVG
        $output .= '<source media="(min-width: 768px)" srcset="'.$atts['theme_url'].'/images/'.$file_url.'.svg" type="image/svg+xml">';
        $output .= '<source media="(max-width: 767px)" srcset="'.$atts['theme_url'].'/images/'.$file_url.'_mobile.svg" type="image/svg+xml">';
        $output .= '<img src="'.$atts['theme_url'].'/images/'.$file_url.'.svg" alt="'.esc_attr($atts['alt']).'">';
    } else {
        // For other image types (non-SVG)
        $use_webp = $atts['webp'] && in_array(strtolower($file_info['extension']), array('png', 'jpg'));

        // WebPが指定されている場合
        if ($use_webp) {
            $output .= '<source media="(min-width: 768px)" srcset="'.$atts['theme_url'].'/images/'.$file_url.'.webp" type="image/webp">';
            $output .= '<source media="(max-width: 767px)" srcset="'.$atts['theme_url'].'/images/'.$file_url.'_mobile.webp" type="image/webp">';
            $output .= '<img src="'.$atts['theme_url'].'/images/'.$file_url.'.'.$file_info['extension'].'" alt="'.esc_attr($atts['alt']).'">';
        } else {
            // WebPが指定されていない場合
            $output .= '<source media="(min-width: 768px)" srcset="'.$atts['theme_url'].'/images/'.$file_url.'.'.$file_info['extension'].'" type="image/'.$file_info['extension'].'">';
            $output .= '<source media="(max-width: 767px)" srcset="'.$atts['theme_url'].'/images/'.$file_url.'_mobile.'.$file_info['extension'].'" type="image/'.$file_info['extension'].'">';
            $output .= '<img src="'.$atts['theme_url'].'/images/'.$file_url.'.'.$file_info['extension'].'" alt="'.esc_attr($atts['alt']).'">';
        }
    }

    $output .= '</picture>';

    return $output;
}
add_shortcode('generate_image', 'generate_image_tag');

これで固定ページに以下のショートコードを挿入することで、SVGの時はSVGとして、jpg/pngでwebp用意している・していない時を切り替えることができる。

使い方は

[generate_image img="ディレクトリ+ファイル名" picture_class="pictureへのclassを入力（複数可）" alt="alt属性を入力" webp="true/false"]

img=””にファイル名を入力。拡張子がsvgの時は、webp=””は省略可能。
webp=””はファイル拡張子がpngまたはjpgの時、用意しているのであればtrue、用意していないときはfalseを設定。

迷い人の解決になれば。