jQuery投稿記事一覧
日別の投稿記事一覧
【WordPress】jQueryが動かない時の一番簡単な対処方法
(これ、書いておいたと思っていたけど書いていなかったみたいなので、備忘録として残しておきます)
WordPressのjQueryはすでに独自で備わっているので、コードを書くときに「$」を使ってはならぬという決まりがある。
で、「$ → jQuery」に全て書き換えると良いのだが、それは面倒だし漏れることもあるのでやめておく。
結論。以下で。
「jQuery(function($){ });」でコードを囲む。
<script>
jQuery(function($){
$(‘#test’).text();
$(‘.test’).remove(‘.sample’);
});
</script>
「もっと見る」の展開
このサイトで言えば「テンプレート」の部分。
最初は6個のテンプレートを表示させ、「もっと見る」をクリックでさらに6個のテンプレートが表示される。で、最後まで開いたら「閉じる」になり、それをクリックすると最初の状態に戻る。
という挙動をさせたかったので、jQueryを使うことにしました。
いくつかの方法を試しましたが、思い通りに動いてくれたのは下記のサイト様のコードです。(完璧!)
この最後の「//全部表示したらボタン削除」以降の部分を少し変えて、コードをカスタマイズ。
そして忘れてはいけないのが、cssとphpファイルの書き直し。
まず、私の場合はsection.phpのテンプレートのサブループ部分、’posts_per_page’ => -1, で全件表示させる必要がある。(全件表示ということで、_responsiv.scss記載のテンプレートのグリッドも書き換える必要があった)
それからcssは、is-hiddenというクラスにdisplay:none;を指定しなければならない。
つまり、全テンプレートをずらずらっと並べておいて、7番目以降は全て非表示にするというスタイルになりますね。
最後の「//全部表示したら」以降だけここに書いておきます。
var btn1 = $('.moreBtn');
var btn2 = $('.closeBtn');
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
//全部表示したら
if (hiddenLength === 1) {
$(btn1).hide();//moreボタン削除
$(btn2).show();//閉じるボタン表示
}
});
});
//「閉じる」ボタンで最初の6個表示に戻る
$(btn2).on('click', function () {
$(btn2).hide();//閉じるボタンを非表示
$(btn1).show();//moreボタン表示に
(function () {
var addCount = 0;
$(item).each(function () {
if (addCount === 6) {
$(this).addClass(className);
return;
}
if (!$(this).hasClass(className)) {
addCount++;
}
});
}());
});
}());
});
jQueryの不思議
昨夜、jQueryで散々てこずったあと、「これはもうcssでなんとかするしかない」と諦めて就寝しました。
jQueryで何をしたかったかというと、それはこの後のブログで書くとして、今「いざ!」とサイトを見たら…なんと! ちゃんと効いているではないですか!!
これは一体…?!
とにかく昨夜は、ローカル環境ではバッチリなのに、サーバーにアップしたら全く動いてくれなかった。
キャッシュも何度も削除したけど、ダメ。
ファイルは今まで使っていたjsファイルに追加で書き足しただけなので、ファイルのパスが間違っているということはなく、WordPressでは$ではなくjQueryを使わねばならないという問題もfunctions.phpの初っ端にGoogle CDNを使うことを宣言してあるし、Chromeのデベロッパーツールには何の問題も表示されないし、あとはjQueryのバージョンの問題くらいしかないと思っていた。(でも今使っているバージョンでないと動いてくれない挙動がある)
まさにこれから、jQueryの全てのバージョンを試そうと思っていたところ。
でもよかった。
これからは少し時間をおいて様子を見るようにした方がいいかもしれない。
