WordPressでjQuery効果を任意のページごとに振り分ける方法

WordPressでウェブサイトを制作する際、
これまでjqueryをheader.php内でまとめて読み込んで全ページに適用しちゃってたんですが、

特定のWordPressプラグインを有効化したときに意図しない挙動をしちゃうこと、ありますよね?

あるいは複数のjQueryの効果が干渉しちゃうこともあるかも…それやばくね?うーん。

なんて思ってました。

というか、実際にとあるウェブサイトの制作で

WordPressプラグインのPostListGeneraterと、jQueryで実装するテーブルハイライトを併用してみたところ

PostListGeneraterの結果がテーブル形式で出力表示されているらしく、これにまでテーブルハイライトが…!!
ぅぉぉ(°°;

こ、これは期待してた効果じゃない!!

ということで、jQueryの適用範囲をページごとに振り分けてみました!

ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー

方法はこちらを拝見しました!

WordPressでfunctions.phpを使ったjQueryプラグインの導入方法

header.php 内でいきなり読み込むのではなく、

function.php 内で一度jsファイルを登録後、
WordPressの条件分岐タグを使ってページごとに整理し、
wp_print_scriptsでhead内に出力しています。

なるほど…   カタカタ….⊂(°ω°⊂*
※wp_print_scriptsの挙動についてはこちらを拝見しました!

WordPressをカスタマイズするなら覚えておきたいアクションフックとフィルターフック

うおーやったー!

テーブルハイライトが特定の個別ページに限定されましたー!
※テーブルハイライトはソースをjsファイルに転記して読み込んでます

ごちゃごちゃしていた header.phpがスッキリしていい感じです!

functions.phpも
どのjQueryがどのページを対象に導入されているのかわかりやすく確認できますし、
メンテナンス性があがりますね!

このjQuery適用の記法は覚えとかないと…!

ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー*ー

ところでこのjQueryで実装するテーブルハイライト。

同じページ内に複数テーブルが存在する場合、
列のハイライトが全テーブルに適用されちゃうんですよね。

また、特にWordPressとかで
サイドバー内にカレンダー等のテーブル形式のものがあると
そちらにもハイライトが適用されちゃいます。

以前コードとにらめっこして改造しようとしたんですが、
どうにもうまくセレクタを使いこなせずダメでした。

テーブル要素にも連番クラスを付けて管理下において、
現在マウスオーバーしているtdの親要素の親要素のtableのクラスがxxだったら…
みたいに考えてたんですが、間違ってるのかなぁ?tdじゃなくtrとか?

くやしい・・・またチャレンジします(°ω°

コメントを残す

メールアドレスが公開されることはありません。