activeっていう単語、日常でも使うけどjQueryプラグインを導入するとクラス名が重なっておかしい状態が発生するかも！
最近、紹介した自動タブ切り替えの「Tabslet」、「Favorites for WordPress」を使うとちょっと問題が発生した。
「Tabslet」を設置後に、プラグインの「ElementsKit」「Favorites for WordPress」も合わせて利用したところ、「Tabslet」のタブをアクティブにして色を変えるクラス名、「Favorites for WordPress」のお気に入りボタンをクリックしてアクティブになった状態のクラス名、「Elementkits」の無料メガメニューでメニュー内のどこがアクティブになっているかというクラス名の「active」という名のクラス名がアチコチで利用されて「Tabslet」のアクティブの色が別のプラグインに影響してしまう事態が発生した。
「Favorites for WordPress」と「Elementkits」同士では影響はでないので、プラグイン間で影響は限定的。さすが、WordPressのプラグインを作るポリシーはクラス名が重複しないようになっているのであろう（あまり詳しくないので確証はない）。
今回問題だったのは、jQueryのプラグインを持ってきた場合…これがイカンのだね。jQueryプラグインは、それ単体で動作すればOKというポリシーなのか、導入したサイトのCSSなどの設定に影響を与えてしまう…というかしてしまった。
タブ切り替えコンテンツのタブを自動再生できるjQueryのプラグイン。WordPressのプラグインではないので自分で独自に実装する必要がある。
ユーザーごとに投稿やページにお気に入り登録ができるWordPressのプラグイン。投稿やページのお気に入り数のランキングが表示できる。
無料での利用なWordPressのプラグイン。無料でメガメニューが作れるので重宝するが、レスポンシブの設定が独自。Elementorｍに準拠していないので注意。
CSSをいじるも解決せず…最終的にはJavaScriptのコードを書き替えるしか！
Tabslet側のCSSを修正しても改善しなかった。面倒だけどクラス名を修正するしかないとJavsScriptのコードを見てみると…まあ最初の初期設定部分にクラス名の定義があった。下記がその部分。
activeclass:"active"
JavaScriptのコードで、アクティブ部分のクラスを「active」にしてしまうと、別のプラグインのactiveというクラス名に影響がでてしまうので「activelink」とか「activetab」とかに変更をする。でもってCSSのクラス名「active」も同じように変更をする。下記の「active」を上記で設定したクラス名に変更をする。
.active A {
color: #000 !important;
}
これで、めでたく「Tabslet」のCSSが他のプラグインなどに影響を与えることはなくなった。
Tabsletを変更したくない場合はどうするかといえば、影響を受けているプラグイン側のクラス名を変更する必要がある。
今回影響のでたプラグイン内で「active」という単語を全文検索。該当した部分のクラスの定義があったら、そこを変更することで対処できる。ただ、ElementKitsはコードが多いので探すのは困難。あきらめたほうがいい。
しかし「Favorites for WordPress」はメインのJavaScriptのコードの最初にクラス名の宣言がある。そこを修正することでうまくいくだろう…すみません検証してませんが…。
