この記事をおすすめしたい人
- XO Event CalendarのスタイルシートやJavaScriptを解除したい人
- XO Event CalendarをAMPで使っていたらエラーが出た人
- つまりオレ
今回はWordPressのカレンダープラグイン「XO Event Calendar」から自動登録されるCSSとJavaScriptを解除していきます。
WordPressの上でな！
あ、WordPressの上でいいんだった。
このページの目次
先に今回のコードのまとめ
functions.phpに次のコードを追加するだけです。
function deregister_xo_event_calendar() {
wp_deregister_style('dashicons');
wp_deregister_style('xo-event-calendar');
wp_deregister_script('xo-event-calendar-ajax');
}
add_action('wp_enqueue_scripts', 'deregister_xo_event_calendar');
オプションからオフにできるダッシュアイコンもまとめて解除しているので、オプションを触る必要がありません。
そのままコピペで使えます。
なぜCSSとJavaScriptを解除する必要があるのか
「XO Event Calendar」はシンプルに使ってよし、複雑に使ってよし、なカレンダープラグインで、とても気に入って使わせてもらっています。
がっ！！
AMPで使う場合、追加CSSもJavaScriptもNGなので解除しないといけません。
(もちろんそれに応じて使えない機能は出ます多分)
「XO Event Calendar」はオプションでこれらをオフにすることができますが、一部オプションからでは消せない部分があるので手動でやっていきます。
最近、「xo-event-calendar-ajax-js」とい消せないスクリプトが追加されていたので、そのメモ書きです。
XO Event Calendarが自動追加する項目
次の4項目です。
//dashicons-css
<link rel='stylesheet' id='dashicons-css' href='/wp-includes/css/dashicons.min.css?ver=5.5' type='text/css' media='all' />
//xo-event-calendar-css
<link rel='stylesheet' id='xo-event-calendar-css' href='/wp-content/plugins/xo-event-calendar/css/xo-event-calendar.css?ver=2.2.4' type='text/css' media='all' />
//xo-event-calendar-ajax-js-extra
<script type='text/javascript' id='xo-event-calendar-ajax-js-extra'>
/* <![CDATA[ */
var xo_event_calendar_object = {"ajax_url":"\/wp-admin\/admin-ajax.php","action":"xo_event_calendar_month"};
/* ]]> */
</script>
//xo-event-calendar-ajax-js
<script type='text/javascript' src='/wp-content/plugins/xo-event-calendar/js/ajax.js?ver=2.2.4' id='xo-event-calendar-ajax-js'></script>
XO Event Calendarが自動追加する項目の解除方法
XO Event Calendarのオプションで解除するパターンと、functions.phpにアクションフックを追加するパターンがあります。
オプションで解除する場合は、WordPressの管理画面メニューから「イベント」「オプション」と進んで設定します。
「dashicons-css」の解除
解除されるのは次の部分です。
//dashicons-css
<link rel='stylesheet' id='dashicons-css' href='/wp-includes/css/dashicons.min.css?ver=5.5' type='text/css' media='all' />
「dashicons-css」はオプションから解除できます。
オプション内「カレンダー」の「Dashicons フォントを使用しない」にチェックを入れて「変更を保存」です。
手動でやる場合は以下のコードをfunctions.phpに追加します。
function deregister_xo_event_calendar() {
wp_deregister_style('dashicons');
}
add_action('wp_enqueue_scripts', 'deregister_xo_event_calendar');
オプションで設定できるので手動でやるメリットは薄いですが、他の項目と合わせて一度に済ませてしまう(オプションを触らなくていい)というメリットはあるかなと。
「xo-event-calendar-css」の解除
解除されるのは次の部分です。
//xo-event-calendar-css
<link rel='stylesheet' id='xo-event-calendar-css' href='/wp-content/plugins/xo-event-calendar/css/xo-event-calendar.css?ver=2.2.4' type='text/css' media='all' />
アクションフックで手動解除します。
function deregister_xo_event_calendar() {
wp_deregister_style('xo-event-calendar');
}
add_action('wp_enqueue_scripts', 'deregister_xo_event_calendar');
「xo-event-calendar-ajax」の解除
解除されるのは次の部分です。 今回は2つ。
//xo-event-calendar-ajax-js-extra
<script type='text/javascript' id='xo-event-calendar-ajax-js-extra'>
/* <![CDATA[ */
var xo_event_calendar_object = {"ajax_url":"\/wp-admin\/admin-ajax.php","action":"xo_event_calendar_month"};
/* ]]> */
</script>
//xo-event-calendar-ajax-js
<script type='text/javascript' src='/wp-content/plugins/xo-event-calendar/js/ajax.js?ver=2.2.4' id='xo-event-calendar-ajax-js'></script>
これも手動で解除します。
function deregister_xo_event_calendar() {
wp_deregister_script('xo-event-calendar-ajax');
}
add_action('wp_enqueue_scripts', 'deregister_xo_event_calendar');
プラグインが追加するCSSやJavaScript解除の考え方
プラグインが<head>にCSSやJavaScriptを追加する際には、以下のようなコードで追加しています。
//スタイルシートの追加
wp_enqueue_style('ID', 'スタイルシートのパス');
//JavaScriptの追加
wp_enqueue_script('ID', 'JavaScriptのパス')
なのでまずはプラグインフォルダから全ファイル検索して「wp_enqueue_style」「wp_enqueue_script」が書かれた場所を見つけます。
場合によってはIDとかファイル名とか、もっとユニークな文字列で検索した方が早い場合もあります。
XO Event Calendarの場合だと、「/inc/admin.php」と「/inc/main.php」の2つが見つかります。
前者はおそらく管理画面用の機能追加なので、後者の「main.php」を開いて該当部分を見ます。
すると、「wp_enqueue_style」「wp_enqueue_script」が指定しているIDが分かるので、今度はこれを
//スタイルシートの解除
wp_deregister_style('ID');
//JavaScriptの解除
wp_deregister_script('ID');
のように「wp_deregister_style」「wp_deregister_script」するだけです。
まとめ
今回のコードまとめです。
function deregister_xo_event_calendar() {
wp_deregister_style('dashicons');
wp_deregister_style('xo-event-calendar');
wp_deregister_script('xo-event-calendar-ajax');
}
add_action('wp_enqueue_scripts', 'deregister_xo_event_calendar');
上記コードをfunctions.phpにコピペすると、XO Event Calendarが追加するCSSとJavaScriptを解除できます。
以上、WordPressからお届けしました！