scrollタームjQueryワードプレス目次タグフィルターも同時に実装フィルターが効かないタグフィルター内に書いたリンクが効いてしまう無限スクロール(InfiniteScroll)Pinterest風のレイアウトを実現できる「Masonry」系スクリプト実装時のトラブルメモです。タグフィルターも同時に実装タグで表示を絞り込む案件だったので、これも同時に追加しました。このとき困ったのが、「masonry.min.js」だと、レンガそれぞれの幅を「px」で指定しないと、フィルタリング時にうまく並んでくれないこと。ワードプレスに内蔵されているのでmasonry.min.jsを使いたかったのですが、ちょっと無理でした。「Isotope」か「Muuri」なら出来るようで、現在はとりあえずIsotopeを個人使用の範囲で試しています。)」みたいな指定できれいに並んでくれています。フィルターが効かないフィルターが機能したりしなかったり、おかしいな、と思い調べるうち、タームスラッグが日本語だと機能しないことに気が付きました。タームスラッグを、フィルターのトリガー・ターゲットに設定していたのでこういうことが起きたのですが、スラッグをきれいに英数字にしているクライアント様なんて見たことない。日本語名のファイルをアップロードすると英数字に変換してくれる機能、なんていうのかわかりませんが、ソレでも動くと思いますが、多分不可逆なのでパス。ここは素直に、「投稿ID」をフィルターのトリガー、ターゲットにすることで解決。タグフィルター内に書いたリンクが効いてしまう実装例を見ながらフィルターはどうにか機能してくれましたが、ページ先頭にスクロールしているのに気が付きました。false」としてあるので、リンクは効かないはずなのですが~実装例では、リンク先を「#」としてあることが多いですが、コレでした。ページ内リンクにスムーズにスクロールさせるスクリプトが処理を横取りしておりました。書いてあるリンクはスムースに処理するよ」という内容で、当然「#」はページ先頭に。href=”#”>」とは書かないことが殆どだと思うので、リンク先をパーマリンクにすれば解決。無限スクロール(InfiniteScroll)タグフィルターを実装するなら、無限スクロールも実装したいところですが、またまたトラブル。自動なり、「もっと見る」ボタンなりで投稿をロードすると、見事にレンガの壁が崩れます。「masonry.min.js」で固定幅なら行けるかな、めんどくさいな、と思いながら調べると回避策がありました。Isotopeの公式サイトなので、先に見ておくべきでした。https://isotope.metafizzy.co/v1/demos/infinite-scroll.htmlコールバックという、いつも見て見ぬふりをしているヤツだったのですが、コピペで色々試しながら成功。「Loading...」がチョロチョロ見え隠れして邪魔、とかフィルタリング結果が1件とか少ない場合におかしな挙動になる、とか色々残っていますが、大枠は動いた動いた。外部ブログのフィードを表示する。APIが廃止になったとき、結構騒いだ記憶があります。Filter」フリーなのが素敵です。今までショートコードはほとんど使わなかったので、初歩的なことから練習中。文中、[]は「」に置き換えています。