【WordPress】M ChartやVisualizerなどのグラフが表示されない問題を解決した話

デフォルトのjQueryを削除しているのが原因だった

wp_head()で読み込まれるWordPressのjQueryを削除していたのが原因でした｡

NGだったfunctions.phpのコード

//デフォルトのjQuery削除
function delete_jquery() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
	}
}
add_action('init', 'delete_jquery');

「M Chart」の場合､以下のJSの読み込みが必要なのですが

• /wp-content/plugins/m-chart/components/js/m-chart-chartjs-helpers.min.js
• /wp-content/plugins/m-chart/components/external/chartjs/chart.js
• /wp-content/plugins/m-chart/components/external/chartjs/chartjs-plugin-datalabels.js

デフォルトのjQueryを削除すると､これらも削除されてしまうようです｡

なのでまずは､この記述をコメントアウトして､グラフが表示されるか試しましょう｡

表示されたら

表示されたら､functions.phpの記述を見直します｡

独自にjQueryを読み込んでる場合､確かにWordPressのjQueryは不要なので

functions.phpの記述を以下のように変更します｡ (M Chartの場合)

//デフォルトのjQuery削除
function delete_jquery() {
	if (!is_admin()) {
		wp_deregister_script('jquery');

		//M ChartのJSは読み込むように
		wp_enqueue_script('m-chart', plugins_url() . '/m-chart/components/js/m-chart-chartjs-helpers.min.js', array(), NULL, true);
		wp_enqueue_script('chart-js', plugins_url() . '/m-chart/components/external/chartjs/chart.js', array(), NULL, true);
		wp_enqueue_script('datalabels', plugins_url() . '/m-chart/components/external/chartjs/chartjs-plugin-datalabels.js', array(), NULL, true);
	}
}
add_action('init', 'delete_jquery');

これで､WordPressのjQueryは削除するけど､「M Chart」に必要なJSファイルは読み込むようになります｡

「Visualizer」の場合､uploadフォルダに動的にjsファイルが生成されるのと､インラインにJSが書かれるみたいなので､こういうことはできなそうです｡

functions.phpの記述を削除するだけで我慢しましょう｡

他のプラグインの場合でも､functions.phpの記述を削除したらどのようなJSが読み込まれるのか観察して､対応してみてください｡

コメント