解決策ででてくる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を設定。
迷い人の解決になれば。
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/36ce763a.1c3d7749.36ce763b.7c55e45e/?me_id=1207004&item_id=10000098&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fsuzuyosi%2Fcabinet%2Fimgrc0095788999.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
