XO Event CalendarのCSSとJavaScriptを外す(WordPress)

シェアする:

この記事をおすすめしたい人

  • XO Event CalendarのスタイルシートやJavaScriptを解除したい人
  • XO Event CalendarをAMPで使っていたらエラーが出た人
  • つまりオレ

今回はWordPressのカレンダープラグイン「XO Event Calendar」から自動登録されるCSSとJavaScriptを解除していきます。

WordPressの上でな!

あ、WordPressの上でいいんだった。

ID「xo-event-calendar-event-calendar-style-inline-css」と「xo-event-calendar-simple-calendar-style-inline-css」で追加されるインラインCSSにも対応しました。

先に今回のコードのまとめ

functions.phpに次のコードを追加するだけです。


add_action('wp_enqueue_scripts', function () {
  wp_dequeue_style('dashicons');
  wp_dequeue_style('xo-event-calendar');
  wp_dequeue_style('xo-event-calendar-event-calendar');
  wp_dequeue_style('xo-event-calendar-event-calendar-style');
  wp_dequeue_style('xo-event-calendar-simple-calendar-style');
  wp_dequeue_script('xo-event-calendar-ajax');
});

オプションからオフにできるダッシュアイコンもまとめて解除しているので、オプションを触る必要がありません。

そのままコピペで使えます。

なぜ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'></script>

//xo-event-calendar-event-calendar-style-inline-css
<style id="xo-event-calendar-event-calendar-style-inline-css" type="text/css"></style>

//xo-event-calendar-simple-calendar-style-inline-css
<style id="xo-event-calendar-simple-calendar-style-inline-css" type="text/css"></style>

//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に追加します。


add_action('wp_enqueue_scripts', function () {
  wp_dequeue_style('dashicons');
});

オプションで設定できるので手動でやるメリットは薄いですが、他の項目と合わせて一度に済ませてしまう(オプションを触らなくていい)というメリットはあるかなと。

「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' />

アクションフックで手動解除します。


add_action('wp_enqueue_scripts', function () {
  wp_dequeue_style('xo-event-calendar');
});

「xo-event-calendar-event-calendar-style-inline-css」の解除

解除されるのは次の部分です。


//xo-event-calendar-event-calendar-style-inline-css
<style id="xo-event-calendar-event-calendar-style-inline-css" type="text/css"></style>

アクションフックで手動解除します。


add_action('wp_enqueue_scripts', function () {
  wp_dequeue_style('xo-event-calendar-event-calendar-style');
});

「xo-event-calendar-simple-calendar-style-inline-css」の解除

解除されるのは次の部分です。


//xo-event-calendar-simple-calendar-style-inline-css
<style id="xo-event-calendar-simple-calendar-style-inline-css" type="text/css"></style>

アクションフックで手動解除します。


add_action('wp_enqueue_scripts', function () {
  wp_dequeue_style('xo-event-calendar-simple-calendar-style');
});

「xo-event-calendar-ajax」の解除

解除されるのは次の部分です。 今回は2つ。


//xo-event-calendar-ajax-js-extra
<script type='text/javascript' id='xo-event-calendar-ajax-js-extra'></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>

これも手動で解除します。


add_action('wp_enqueue_scripts', function () {
  wp_dequeue_script('xo-event-calendar-ajax');
});

プラグインが追加する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_dequeue_style('ID');

//JavaScriptの解除
wp_dequeue_script('ID');

のように「wp_dequeue_style」「wp_dequeue_script」するだけです。

まとめ

今回のコードまとめです。


add_action('wp_enqueue_scripts', function () {
  wp_dequeue_style('dashicons');
  wp_dequeue_style('xo-event-calendar');
  wp_dequeue_style('xo-event-calendar-event-calendar');
  wp_dequeue_style('xo-event-calendar-event-calendar-style');
  wp_dequeue_style('xo-event-calendar-simple-calendar-style');
  wp_dequeue_script('xo-event-calendar-ajax');
});

上記コードをfunctions.phpにコピペすると、XO Event Calendarが追加するCSSとJavaScriptを解除できます。

「xo-event-calendar-event-calendar」は旧バージョン用で、今は「xo-event-calendar-event-calendar-style」と「xo-event-calendar-simple-calendar-style」に細分化されてるんだと思います。

以上、WordPressからお届けしました!

シェアする: