賢威8にWordPressDownloadManagerをいれてダウンロードしたら一番上までスクロール
質問

シルエット


WordPressのテンプレートで賢威8を使っています。
自分で作った資料を、記事を見てくれた人に使ってもらおうと思って、WordPress Download Managerというプラグインを使ってダウンロードできるようにしました。

WordPress Download Manager


ですが実際にダウンロードをしようと思ってボタンを押すと、画面の一番上までスクロールしてしまいます。
使いにくくて困ります。
どうにかならないのでしょうか。

ケーちゃんケーちゃん

お答えします!

この質問は、ケーちゃん(自作自演)さんからいただきました!

どんな状況なのかというと、こんな状況です。
↓↓↓↓

画面はFireFoxです。
普通なら、ダウンロードボタンを押したら、その場で保存先の選択がでます。
ですが今回は、ページのTOPまで移動してから、選択画面がでてます。
なんだか、みっともないですね。

ちなみにChromeでも同じ症状でした。

WordPress Download Managerは飛ばないようになっている

なぜこんなことになるのか。
早速しらべてみました。

こちらが、実際に設置したダウンロードボタンです。
クリックすると、移動してしまいます。

[wpdm_package id='93']

(クリックするとダウンロードが始まるので、キャンセルしてください)

ダウンロードボタンのhtmlをコッソリ見てみると、こんな感じになっています。

  • <a class='wpdm-download-link btn btn-primary ' rel='nofollow'
  • href='#'
  • onclick="location.href='https://affi-sapo.com/xxxxxx';return false;">Download</a>
AFFS Simple Code Viewer
Copy

<a href="xxx"></a>

はリンクで、hrefで指定したページに移動しなさいという意味です。
そして、

<a href="#"></a>
とすると、ページの一番上まで移動しなさいとなります。

つまり、この部分だけ見ると移動して当たり前の書き方をしているんですね。

次を見ると、onclickという命令が続いています。
これは、リンクをクリックしたときに、この中身を実行しなさいという命令です。

この中の最後に、return falseという命令があります。
これは、この場所から移動するな!という意味です。
これがあるので、仕組みとしてはページの上まで移動しないようになっているのです。

結論:賢威8とWordPress Download Managerは相性が悪い

ではなぜ、移動してしまうのか?
それは、賢威8にある機能が実装されているからでした。

下のリンクをクリックすると…
<a href="#"></a>
いきなり画面が切り替わるのではなくて、スムーズに移動していきます。
この動きは、他のテーマでも採用しているので、ある意味定番の動作ともいえます。

この処理は、Download Managerが移動を止めている仕組みと別の場所で機能しています。
つまりDownload Managerが、スクロールと止めようと思っていても、賢威8側でスクロールさせているのです。

ダウンロードボタンが押された時の処理

誤解しないで欲しいのが、賢威8の処理が間違えているということではありません。
href="#"の動作を忠実に守っているだけです。

ではDownload Managerが悪いのかというと、そうでもありません。
href="#"を指定して、onclickで return falseする方法は、以前はよく使われていました。

どちらも悪くないので、今回はたまたま相性が悪かったようですね。

解決策

ということで解決策です。

賢威8とWordPress Download Manager、両方とも使い続けるにはどうしたらいいか考えてみました。

リンクをクリックしてもスクロールさせない方法には、Download Managerがやっていることの他に、href="javascript:void(0)"とする方法があります。
実際に変更して試してみたところ、正常にダウンロードされました。
また、一番上までスクロールされることもありませんでした。

他の方法も考えましたが、テーマやプラグインを変更する必要があって、少し難しいです。
javascript:void(0)に変更するのなら、その必要がないので簡単でした。

変更方法

次のコードを記事の内または直前に貼り付けます。

  • <script>
  • ( function() {
  • let f =(v)=>{
  • let l = location.href.split('#')[0];
  • let e = document.getElementsByClassName(v);
  • let ec = e.length;
  • for(let i=0;i<ec;i++){
  • let h = e[i].href;
  • h= h.indexOf(l) === 0 ? h.replace(l,'') : h;
  • if(h ==="#"){e[i].href="javascript:void(0)";}
  • }
  • }
  • window.addEventListener('DOMContentLoaded', function() {
  • f('wpdm-download-link');
  • });
  • }());
  • </script>
AFFS Simple Code Viewer
Copy

賢威8の場合は、投稿ページ最下部の この投稿のみに表示するCSS/JS に貼り付けます。

この投稿のみに表示するCSS/JS
※Download Managerのタグを使用している全ての記事に貼り付ける必要があります。面倒に感じる場合は、埋め込みコード設定で、全ての記事に入れ込んでも問題ありません。

上のコードは、内部的にエラーが出ていました。
賢威8のスクロール処理で、href="javascript:void(0)"に対応してなかったようです。
そのままでも、問題なく動作していますが、不安な方は次のコードをお使いください。

  • <script>
  • ( function() {
  • let aid_count=0;
  • let f =(v)=>{
  • let l = location.href.split('#')[0];
  • let e = document.getElementsByClassName(v);
  • let ec = e.length;
  • for(let i=0;i<ec;i++){
  • let h = e[i].href;
  • h= h.indexOf(l) === 0 ? h.replace(l,'') : h;
  • if(h ==="#"){
  • let aid=e[i].getAttribute("id");
  • if(!aid){
  • aid="wpdm-download-"+aid_count;aid_count++;
  • e[i].setAttribute("id",aid);
  • }
  • e[i].href="#"+aid;
  • }
  • }
  • }
  • window.addEventListener('DOMContentLoaded', function() {
  • f('wpdm-download-link');
  • });
  • }());
  • </script>
AFFS Simple Code Viewer
Copy

ただしダウンロードをクリックすると、少しだけスクロールします。