カテゴリー: GADGET

マージでハマったので備忘録。

2025.11.27追記
というか前提としてこのやり方自体が間違っていたので、ボクが多いにアホでした。
Webpackはエントリーポイントのjs内部にCSSが出力されるので、ローカル開発のときはそのエントリーポイントjsを読み込めばHMR（Hot Module Replacement：リロードせずにモジュール更新で再描画）してくれる。書き出さないとでないやん！って思ってた頃の無知の記録。
ちなみに、dev.configでHMR用のエントリーポイント（style-loader利用）を使い、build.configでmini-css-extract-pluginで個別CSS出力（テーマファイル内）を最近まで利用していた。
今はViteがトレンドだぜ！という記事を見て最近乗り換えた。

解決策

devServer: {
  static:path.resolve(__dirname, 'public_html/***/wp-content/themes/***/assets/dest'),
  hot: 'only',
  compress: true,
  port: 3000,
  https: true,
  proxy: {
    '*': {
      target: 'https://localhost:＊＊＊＊', // nginxで稼働してるwordpressのアドレス
      secure: false,
      changeOrigin: true,
    },
  },
  devMiddleware: {
  	writeToDisk: true,
  }
}

devMiddlewareでwriteToDisk:trueで解決できた。
海の彼方にいる名も知らぬ友よ。
幾千の感謝を。

Docker / nginxでWordpressを立ち上げて開発しつつ、webpackでbrowserSyncしていたのだけど、browserSyncのバージョンがあがってしまい、browserSync-webpack-pluginが死んだ。
正直pluginだけの問題だからバージョン下げるってのも考えはしたけど、そういうのが嫌でgulpを投げ捨ててwebpackにしたので、なんとか解決した。

ニッチな製作していると突然死んでしまう。

解決策ででてくる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を設定。

迷い人の解決になれば。