WordPressのテンプレートで賢威8を使っています。
自分で作った資料を、記事を見てくれた人に使ってもらおうと思って、WordPress Download Managerというプラグインを使ってダウンロードできるようにしました。
ですが実際にダウンロードをしようと思ってボタンを押すと、画面の一番上までスクロールしてしまいます。
使いにくくて困ります。
どうにかならないのでしょうか。
ケーちゃん お答えします！
この質問は、ケーちゃん（自作自演）さんからいただきました！
どんな状況なのかというと、こんな状況です。
↓↓↓↓
画面はFireFoxです。
普通なら、ダウンロードボタンを押したら、その場で保存先の選択がでます。
ですが今回は、ページのTOPまで移動してから、選択画面がでてます。
なんだか、みっともないですね。
ちなみにChromeでも同じ症状でした。
WordPress Download Managerは飛ばないようになっている
なぜこんなことになるのか。
早速しらべてみました。
こちらが、実際に設置したダウンロードボタンです。
クリックすると、移動してしまいます。
（クリックするとダウンロードが始まるので、キャンセルしてください）
ダウンロードボタンのhtmlをコッソリ見てみると、こんな感じになっています。
- <a class='wpdm-download-link btn btn-primary ' rel='nofollow'
- href='#'
- onclick="location.href='https://affi-sapo.com/xxxxxx';return false;">Download</a>
<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)に変更するのなら、その必要がないので簡単でした。
変更方法
次のコードを記事の
内または
こんにちは。