前略、ikumi さん

いつもお世話になっております。

私は、ダウンロードボタンを設置したこともない初心者ですが、上手く機能している方のHTMLの構成を拝見しますと以下のようになっているようです。

<div class="wp-block-file">
<a rel="noopener" href="https://blogstudynotes.com/wp-content/uploads/2020/03/Button_1.pdf" target="_blank">Button_1.pdf</a>
<a href="https://blogstudynotes.com/wp-content/uploads/2020/03/Button_1.pdf" class="wp-block-file__button" download="">ダウンロード</a>
</div>

WordPressの「ファイル」ブロックを使うことにより、ボタンの方のリンクに 値の無い、download属性が付与される仕組みになっているようです。

新しく設定したダウンロードボタンが機能しない理由は、わかりませんが、機能している方と機能しない方のHTMLの構造を比較してみると、何らかのヒントが掴めるかもしれません。（掴めないかもしれませんが・・）

HTMLの構造は、デベロッパーツールでも見ることができますし、ソースコードでも見れますし、エディターを、コードエディターの方に切り替えても見ることができるかと思います。

参考リンク

ファイルをダウンロードするリンクを設定する

だからといって、すぐ解決に至るかどうかは、何とも言えないのですが・・

※download属性の値は、省略することもできると書いてあるサイトもありました。

念のため確認ですが、ダウンロードボタンというのは添付画像のもので良いでしょうか？

また、ダウンロードがうまく動作しないページのURLとかはありますか？

一応補足しておくと、テーマ側で意図してそのような変更を加えているという事はないと思います。
意図せず、そのようなことになる可能性もゼロとはいえないのですが、そういった動作を変更するなら、テーマ側で意図したコードを書かないと、変わらない部分なのかなとも思います。

お返事ありがとうございました。

スミマセン・・・・。自己解決しました・・・・・・。

ファイルの種類のせいでした★。

pdfやエクセルファイルだとダウンロードできるのですが、今回やろうと思っていたファイルが、pngで。

pngはできないということが判明しました・・・・・。

訂正です。ローカルで、Twenty Ninetyだと、PNGファイルもできました。

何だろう。もうちょっと見てみます。

リフィトリーさん、わいひらさん、いつもありがとうございます。

大変失礼いたしました。

テストページを作って公開してみたのですが、zipファイルにすると、ダウンロードが促されるので、代替案が見つかったので大丈夫です。

https://blogstudynotes.com/wordpress-download-button-test/

デベロッパーツールにまだ慣れていないのでコードエディタの情報を一応。

<!-- wp:file {"id":9116,"href":"https://blogstudynotes.com/wp-content/uploads/2020/03/Button_1.pdf"} -->
<div class="wp-block-file"><a href="https://blogstudynotes.com/wp-content/uploads/2020/03/Button_1.pdf" target="_blank" rel="noreferrer noopener">Button_1.pdf</a><a href="https://blogstudynotes.com/wp-content/uploads/2020/03/Button_1.pdf" class="wp-block-file__button" download>ダウンロード</a></div>
<!-- /wp:file -->

<!-- wp:file {"id":11414,"href":"https://blogstudynotes.com/wp-content/uploads/2020/07/105-take-it-easy.jpg"} -->
<div class="wp-block-file"><a href="https://blogstudynotes.com/wp-content/uploads/2020/07/105-take-it-easy.jpg">105-take-it-easy.jpg</a><a href="https://blogstudynotes.com/wp-content/uploads/2020/07/105-take-it-easy.jpg" class="wp-block-file__button" download>ダウンロード</a></div>
<!-- /wp:file -->

お騒がせしてしまいました★。

ファイルの種類で変わるんですね。ありがとうございました！

@ikumi さん

へえ～、そうなんですね。

ブロックエディターだと、ダウンロードボタンを簡単に設置できるんですね。

面白そうなので、やってみようかな・・

あ、そうそう、ダウンロードボタンのセレクタがわかったので、色やデザインも変えられるっぽいです。

.wp-block-file a.wp-block-file__button {
    background-color: salmon;/*サーモン色*/
    font-weight: bold;/*文字ちょっと太く*/
}

等々。

@ikumi さん

他テーマで、できたのに、Cocoonでは・・というのは、画像の拡大効果と関係があるのかもしれませんね。

画像の拡大効果を「なし」にすれば、png でもイケるかも？

わいひらさんは、映画見てるかも。

@ikumi さん

ローカルのテストサイトで png ファイルで試してみたら、画像の拡大効果を「なし」にすると、ダウンロードのダイヤログが表示されました。

しかし、画像の拡大効果を「なし」以外の４種類の、いずれに設定しても、画像の拡大効果として表示されちゃいました。

Ikumi様のテストページにあるダウンロードボタンをクリックしたところ、Cocoon側で実装されている画像の拡大効果が動作してしまっているのが問題のようです。

現在設定されている拡大効果はbaguetteBoxで間違いないでしょうか？

baguetteBoxの場合、テストページの投稿編集画面内にあるカスタムJavaScript設定欄に、以下のコード

(function($){baguetteBox.run(".entry-content", {ignoreClass: 'wp-block-file__button'})})(jQuery);

を入力・保存し、テストページのダウンロードボタンから画像をダウンロードできるかどうか再度確認してみてください。

本当にありがとうございました・・・！

リフィトリーさんとロコさんのおっしゃる通り、画像の効果の設定と関係していました。

画像が好きなわりに、このCocoon設定の画像タブにある設定、全然見てませんでした・・・。

わいひらさんの以下の記事で勉強させていただきました。（わいひらさんありがとうございます・・・！）

https://wp-cocoon.com/lightbox-libraries/

上のページで見て、baguetteBoxのままがいいなぁと思い、ロコさんのコードを利用させていただきました。

感動。

そして、リフィトリーさん、色替えのコードもありがとうございます・・・！実はCSS検索の死闘（？！）を繰り広げ、あきらめていたところでした。

あの・・・。同じページ内に複数のダウンロードボタンを入れて、各ボタンの色を変えることって・・・できますでしょうか？各ブロックにある、「高度な設定」を自己流で試すと、ブロック全部に色がついて、ダウンロードボタンの部分が黒のまま、とかになり。同じシナリオの利用例や説明ページが見つからず・・・。

「無理」という結論でも良いのですが、ご存知だったらご助言いただけると助かります。

サポート外のことだと思うので、ご存知だったらで・・・。

@ikumi さん

CSSを適用範囲を絞るときは、よく

.article h2 {

のように半角スペースで繋げて子孫セレクタで用いることが多いのですが、HTMLの同じタグ内にある、要素 や id や  class を半角スペースを空けずに繋げることで、適用範囲を絞ることもできるようになっているようです。

例えば、

<div class="wp-block-file c-color-salmon">

のように、同じHTMLのタグ内に２つの class が付与されている場合に、その２つの class が付与されているHTMLのタグだけに適用範囲を絞ることができます。

その場合は、CSSのセレクタに、２つの class を半角スペースを空けずに並べて記述します。

.wp-block-file.c-color-salmon {

@ikumi さん

ikumiさんの試された「高度な設定」で クラスを設定すれば、個々のボタンの色を別の色にすることもできそうです。

クラスの名前は、WordPressや、Cocoonで使われていない、オリジナルの名前を設定します。

使うのは半角アルファベットとハイフンとアンダースコアです。（ハイフンとアンダースコアは最初と最後には使わない）

他の記号も実際は、使えるらしいのですが、まあ、使わない方が良いでしょう。

新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]

@ikumi さん

例えば、高度な設定でクラス名を

c-color-salmon

とすると、以下のように、ブロックにクラスが追加されるようです。

<div class="wp-block-file c-color-salmon">
<a href="http://demo.local/wp-content/uploads/2020/07/2020-07-03-213750.png">画像の拡大効果2020-07-03-213750</a>
<a href="http://demo.local/wp-content/uploads/2020/07/2020-07-03-213750.png" class="wp-block-file__button" download="">ダウンロード</a>
</div>

@ikumi さん

ということは、試していないのですが、以下のように書けば、良いのではないかと思われます。

.wp-block-file.c-color-salmon a.wp-block-file__button {
    background-color: salmon;/*サーモン色*/
    font-weight: bold;/*文字ちょっと太く*/
}

私も、ロコさんのコードを試してみたのですが、上手くダウンロードのダイアログが表示されました。

ありがとうございます・・・！

今試してみました、教わったように設定したところ、できました ? 。

検索しているときに、どこか的外れになったり、理解が追い付かなかったりするのだと思います。

今はパッと試しただけなのですが、ご説明くださったところをよくよく読んでみます。

すっきりしました・・・・。

感謝です、ありがとうございました！