解決策ででてくる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を設定。
迷い人の解決になれば。
