SNS

WordPress 7.1 に上げたら MW WP Form の日付ピッカーが崩れた(jQuery UI 1.14.2 の CSS が 404)

WordPress を 7.1 系に上げたところ、MW WP Form で作った予約フォームの日付ピッカー([mwform_datepicker])が崩れました。カレンダーにスタイルが当たらず、曜日や日付がフォームの上にそのまま重なって表示されます。

原因と、プラグインを書き換えずにテーマ側で直す方法をまとめます。

環境(執筆時点)

  • WordPress 7.1.3(同梱の jQuery UI は 1.14.2)
  • MW WP Form 5.1.8
  • PHP 8.3

症状

  • 入力欄をクリックすると、枠も背景もないカレンダーが表示される
  • 「Prev / Next」や年月のセレクトボックス、日付の数字がフォームの上に重なって、レイアウトが崩れる

JavaScript(datepicker 本体)は動いていて、見た目の CSS だけが当たっていない状態です。

原因を調べる

ページで読み込まれている CSS を確認すると、次の URL がありました。

//ajax.googleapis.com/ajax/libs/jqueryui/1.14.2/themes/smoothness/jquery-ui.min.css?ver=1.14.2

この URL を開くと 404 になります。版を変えて確認すると、1.14.1 以前は存在しました。

for v in 1.14.2 1.14.1 1.14.0 1.13.3; do
  printf '%s %s\n' $v "$(curl -s -o /dev/null -w '%{http_code}' \
    https://ajax.googleapis.com/ajax/libs/jqueryui/$v/themes/smoothness/jquery-ui.min.css)"
done
# 1.14.2 404
# 1.14.1 200
# 1.14.0 200
# 1.13.3 200

MW WP Form のソースを見ると、日付ピッカーの CSS の URL を、WordPress に同梱されている jQuery UI の版の番号を使って組み立てています。

// mw-wp-form/classes/form-fields/class.datepicker.php
wp_enqueue_style(
	'jquery.ui',
	'//ajax.googleapis.com/ajax/libs/jqueryui/' . $ui->ver . '/themes/smoothness/jquery-ui.min.css',
	array(),
	$ui->ver
);

WordPress 7.1 で同梱の jQuery UI が 1.14.2 になったため、Google の CDN にまだ無い版の CSS を読みに行って 404 になっていました。同じ組み立て方は、月の選択(class.monthpicker.php)や管理画面にもあります。

対処:テーマで URL の版を差し替える

プラグイン本体を直すと、更新のたびに消えてしまいます。そこで、テーマの functions.php で style_loader_src フィルターを使い、このハンドル(jquery.ui)の URL だけ、版の番号を CDN にある版に差し替えます。

// MW WP Form の日付ピッカー用CSSは WP 同梱の jQuery UI のバージョンで Google CDN の URL を組み立てるが、
// WP 7.1 の 1.14.2 は CDN に存在せず 404 になりカレンダーが崩れる。CDN にある版に固定する
add_filter( 'style_loader_src', function ( $src, $handle ) {
	if ( $handle === 'jquery.ui' ) {
		$src = preg_replace( '#/jqueryui/[0-9.]+/#', '/jqueryui/1.14.1/', $src );
	}
	return $src;
}, 10, 2 );

wp_enqueue_style() は、ショートコードを処理した時点(本文の出力中)で呼ばれます。CSS はフッターで出力されるので、style_loader_src なら確実に URL を差し替えられます。

差し替えたあと、出力される URL は次のようになります。

//ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/themes/smoothness/jquery-ui.min.css?ver=1.14.2

テーマの CSS(smoothness)は 1.14.1 と 1.14.2 で見た目が変わらないので、JavaScript 側が 1.14.2 のままでも問題ありません。

補足

  • 版を 1.14.1 に固定しているので、今後 CDN に 1.14.2 が追加されたり、WordPress がさらに新しい jQuery UI を同梱したりしても、このまま動きます。
  • 外部の CDN に頼りたくない場合は、smoothness テーマの CSS と画像をテーマ内に置き、$src をテーマの URL に差し替える方法もあります。
  • 同じ症状は、MW WP Form に限らず「同梱の jQuery UI の版で CDN の URL を組み立てている」プラグインやテーマで起こりえます。WordPress を上げてから jQuery UI の見た目が崩れたら、まず読み込んでいる CSS の URL が 404 になっていないかを確認するとよいです。

CONTACT

サイト訪問ありがとうございます。
お仕事のご依頼、ご相談がありましたらお気軽にご連絡ください。
*は必須項目となります。

お名前 *
メールアドレス *
会社・組織名
お問い合わせ内容 *
0/300

当サイトはreCAPTCHAによって保護されており、Google のプライバシーポリシーおよび利用規約が適用されます。
当サイトのプライバシーポリシーをご一読の上ご連絡ください。