[tegecat]

北島様

ご回答ありがとうございました。

指示通りセクションにクラスを振り、その中にカスタムHTMLを書いて解決しました。
問題が解決しましたのでトピックを閉じさせていただきます。

♥ 1

いいねをした人:

[tegecat]

キタジマ様、GONSY様

アドバイスありがとうございました。

お陰様でwp enqueue scriptの理解が進みました。

GONCY様のコードを参考にやってみると前月以降に戻れなかったので最終的にこうなりました。

構成

my-snow-monkey
├ my-snow-monkey.php
└ assets
└ pickadate
└css
└default.css
└default.date.css
└js
└lang-ja.js
└legacy.js
└pickadate.js
└picker.date.js
└picker.js

my-snow-monkey.phpの中身

// css読み込み
add_action(
	'wp_enqueue_scripts',
	function () {
		wp_enqueue_style(
			'pickadate-default',
			MY_SNOW_MONKEY_URL . '/assets/pickadate/css/default.css',
			[ Framework\Helper::get_main_style_handle() ],
			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/css/default.css' ),
			false
		);

		wp_enqueue_style(
			'pickadate-default_date',
			MY_SNOW_MONKEY_URL . '/assets/pickadate/css/default.date.css',
			[ Framework\Helper::get_main_style_handle() ],
			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/css/default.date.css' ),
			false
		);

		// js読み込み
		wp_enqueue_script(
			'pickadate',
			MY_SNOW_MONKEY_URL . '/assets/pickadate/js/picker.js',
			['jquery'],
			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/js/picker.js' ),
			false,
			true
		);

		wp_enqueue_script(
			'pickadate-date',
			MY_SNOW_MONKEY_URL . '/assets/pickadate/js/picker.date.js',
			['jquery', 'pickadate'],
			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/js/picker.date.js' ),
			false,
			true
		);

		wp_enqueue_script(
			'pickadate-legacy',
			MY_SNOW_MONKEY_URL . '/assets/pickadate/js/legacy.js',
			['jquery', 'pickadate'],
			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/js/legacy.js' ),
			false,
			true
		);

		wp_enqueue_script(
			'pickadate-translate',
			MY_SNOW_MONKEY_URL . '/assets/pickadate/js/lang-ja.js',
			['jquery', 'pickadate'],
			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/js/lang-ja.js' ),
			false,
			true
		);

		wp_enqueue_script(
			'pickadate-origin',
			MY_SNOW_MONKEY_URL . '/assets/pickadate/js/pickadate.js',
			['jquery', 'pickadate'],
			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/js/pickadate.js' ),
			true
		);
	}
);

pickadate.jsの中身

jQuery(function ($) {
  $("#date_box").pickadate();
});

これで無事動きました。

お二人に感謝します。

これでトピックを閉じます。

♥ 2

いいねをした人:

[tegecat]

早々のご回答ありがとうございます。

my-snow-monkey.phpのwp_enqueue_style()とwp_enqueue_script()を以下のように書き換えてみました。

// css 読み込み
add_action( 'wp_enqueue_scripts', 'msm_enqueue_style_script' );
function msm_enqueue_style_script() {
wp_enqueue_style(
'msm_style',
MY_SNOW_MONKEY_URL . '/assets/css/main.css',
[],
filemtime( MY_SNOW_MONKEY_PATH . '/assets/css/main.css' )
);
wp_enqueue_style(
'msm_style',
MY_SNOW_MONKEY_URL . '/assets/css/default.css',
[],
filemtime( MY_SNOW_MONKEY_PATH . '/assets/css/default.css' )
);
wp_enqueue_style(
'msm_style',
MY_SNOW_MONKEY_URL . '/assets/css/default.date.css',
[],
filemtime( MY_SNOW_MONKEY_PATH . '/assets/css/default.date.css' )
);

// js読み込み
wp_enqueue_script(
'msm_scripts',
MY_SNOW_MONKEY_URL . '/assets/pickadate/picker.js',
['jquery'],
filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/picker.js' ),
true
);
wp_enqueue_script(
'msm_scripts',
MY_SNOW_MONKEY_URL . '/assets/pickadate/picker.date.js',
[],
filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/picker.date.js' ),
true
);
wp_enqueue_script(
'msm_scripts',
MY_SNOW_MONKEY_URL . '/assets/pickadate/legacy.js',
[],
filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/legacy.js' ),
true
);
wp_enqueue_script(
'msm_scripts',
MY_SNOW_MONKEY_URL . '/assets/pickadate/lang-ja.js',
[],
filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/lang-ja.js' ),
true
);
wp_enqueue_script(
'msm_scripts',
MY_SNOW_MONKEY_URL . '/assets/js/main.js',
[],
filemtime( MY_SNOW_MONKEY_PATH . '/assets/js/main.js' ),
true
);
}

するとコンソールエラーは無くなったのですが、やはり日付ピッカーは動作しませんでした。

しかしwp_enqueue_style()、wp_enqueue_script()の書き方がわかったので大進歩です。ありがとうございます。もう少し検証してみたいと思います。

♥ 0

いいねをした人: 居ません

[tegecat]

ありがとうございます。ご指摘の通りボタンにonClick属性をつけ、main.jsファイルからaddEventlistener部分を削除したら動くようになりました。

snowmonkeyのことではなくJavaScriptの呼び出し方が間違っていたのですね。勉強になりました。

ボタン

<input id="cal_button" class="btn btn-secondary btn-block col-2 form-control" name="calButton" type="button" value="計算" />

main.js

function misoCalc() {
  const $doc = document;
  const calButton = $doc.getElementById("cal_button");

  let misoVolumes = $doc.forms.miso_form.miso_volume.value;

  const kouji = (0.6 * (misoVolumes * 10)) / 10;
  const soi = (0.4 * (misoVolumes * 10)) / 10;
  const drySoi = (0.2 * (misoVolumes * 10)) / 10;
  const nijiru = 100 * misoVolumes;
  const solt = 124 * misoVolumes;

  $doc.getElementById("kouji_value").innerHTML = kouji;
  $doc.getElementById("soi_value").innerHTML = soi;
  $doc.getElementById("dry_soi_value").innerHTML = drySoi;
  $doc.getElementById("nijiru_value").innerHTML = nijiru;
  $doc.getElementById("solt_value").innerHTML = solt;
}

♥ 1

いいねをした人:

[投稿者]

投稿