WordPressのコメントリンクに推移したあとwpDiscuzのアニメートスクロールを無効にする方法

この記事はwpdiscuzというコメント強化プラグインを使っている方を対象にしています。細かいカスタマイズですので、おそらくこの情報を参考にする人はほとんどいないと思いますし、この情報を検索している人はおそらく自分で問題を解決する力をもっていると思います。

それでははじめていきます。

wpdiscuzをつかっているときにコメントリンクに推移したあとどうなるか

wpdiscuzはコメントのリンクに推移するとアニメートスクロールでコメントのリンクへとスクロールします。この動作が1秒くらいかかるのでユーザビリティが悪いです。というか個人的に不快です。

どういう流れか具体的に書きますとexsample.com/#comment-123というリンクにアクセスしたあと#comment-123という要素があったらそこまで1秒間くらいかけてアニメートスクロールでスクロールするようになっています。

これはjavascriptで制御されているからそうなっているのですが、このアニメートスクロールをできればオフにしたいところです。

コメントリンクに推移後アニメートスクロールを無効にする設定はあるのか？

残念ながらコメントリンク推移後のアニメートスクロールを無効にするwpdiscuzの設定はありません。

ではどうすればアニメートスクロールを無効にできるかというとjavascriptを編集します。←ただこれにも問題があってプラグインが更新されてjavascriptファイルが上書きされてしまい変更したファイルが元に戻ってしまいます。←ただ現状ではこれしか方法がありませんのでjavascriptファイルが上書きされてしまうことを理解した上で編集していきます。

wpdiscuzのjavascriptファイル

まずwpdiscuzのjavascriptファイルは以下の場所にあります。

wpdiscuzのメインのjavascriptファイルは4つあるのですがどのjsファイルがページに読み込まれるかは設定によって決まります。詳しくは以下の記事をごらんください。

wpDiscuzでコメントを投稿したあと新しいコメントをコメントリストの下（末尾）に追加・挿入させる方法

WordPressのwpDiscuzプラグインはwordpressのコメントをajax化できます。しかしwpDiscuzのコメ...

書物の回想.コム

2023年07月15日

わたしの場合は今回は、

を編集しました。

コメントリンクのスクロールでアニメートしないようにする

残念ですが現状ではjavascriptを編集するしかありませんので、wpdiscuz-combo-no_quill.min.jsを編集します。

具体的にはこの部分を変更します↓

function K(t){var o=location.href.match(/#comment\-(\d+)/);if(null!==o){var a=o[1];if(e("#comment-"+a).length)setTimeout(function(){eo(),e("html, body").animate({scrollTop:e("#comment-"+a).parents("[id^=wpd-comm-]").offset().top-D},1e3,ea),t&&G(a)},500);else{var n=new FormData;n.append("action","wpdGetSingleComment"),n.append("commentId",a),eh(C,!0,n).done(function(o){"object"==typeof o&&o.success&&(e("#comment-"+o.data.parentCommentID).length?e("#comment-"+o.data.parentCommentID).parents("[id^=wpd-comm-"+o.data.parentCommentID+"]").replaceWith(o.data.message):e(".wpd-thread-list").prepend(o.data.message),eu(o),eo(),e("html, body").animate({scrollTop:e("#comment-"+a).offset().top-D},1e3,ea),t&&G(a))

↓このfunction Kの中のanimate関数の引数のdurationとeasingを定義している部分を0にします。

function K(t){var o=location.href.match(/#comment-(\d+)/);if(null!==o){var a=o[1];if(e("#comment-"+a).length)setTimeout(function(){eo(),e("html, body").animate({scrollTop:e("#comment-"+a).parents("[id^=wpd-comm-]").offset().top-D},0),t&&G(a)},500);else{var n=new FormData;n.append("action","wpdGetSingleComment"),n.append("commentId",a),eh(C,!0,n).done(function(o){"object"==typeof o&&o.success&&(e("#comment-"+o.data.parentCommentID).length?e("#comment-"+o.data.parentCommentID).parents("[id^=wpd-comm-"+o.data.parentCommentID+"]").replaceWith(o.data.message):e(".wpd-thread-list").prepend(o.data.message),eu(o),eo(),e("html, body").animate({scrollTop:e("#comment-"+a).offset().top-D},0),t&&G(a))

コードが圧縮されているので慣れてないとなにがなんやらという感じになると思いますが、この記事にたどりついている人はたぶん大丈夫でしょう。

これでとりあえず終りです。

まとめ

wpdiscuzを有効化しているとコメントリンクにアクセスしたときに該当のコメント要素までアニメートスクロールするようになるのでコードを変えてこれをすぐにコメントに推移するようにしました。

ただ今回の変更は気休めのようなものですので、応急的な対応になります。