Cocoonフォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

WordPress ダウンロードボタン...
 
共有:
通知
すべてクリア

[解決済] WordPress ダウンロードボタンについて

17 投稿
4 ユーザー
34 Likes
5,075 表示
Ikumi
(@ikumi)
Trusted Member Registered
結合: 3年前
投稿: 93
Topic starter  

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

私の環境では、最近WordPressのダウンロードボタンの動きが変化しています。

新しくダウンロードボタンを作ると、姿は今まで通りですが、ダウンロードが促されません。(メディアファイル設定したときと同じ動きになります。)

いつからのタイミングだったか分からないのですが。

過去記事にいれたダウンロードボタンは機能しています。(例: https://blogstudynotes.com/cocoon-buttons/

過去記事の編集画面からダウンロードボタンをそのままコピーすると、新しい記事でもプレビュー画面でダウンロードが促されます。

ただ、そのファイルを置換すると、ダウンロードが促されないようになります。

 

プラグイン無しのローカル環境でも同じくなのですが、Twenty Ninetyを有効化すると通常通りダウンロードが促されます。

アドバイスをいただけると助かります、よろしくお願いいたします。

----------------------------------------------
サイト名:あぁ、ブログ。
サイトURL: https://blogstudynotes.com
ホームURL: https://blogstudynotes.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-fuwari-omeshicha/style.css
WordPressバージョン:5.4.2
PHPバージョン:7.2.29
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:en-GB,en-US;q=0.9,en;q=0.8,ja;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:2.2.0.5
カテゴリ数:6
タグ数:11
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.6
style.cssサイズ:1535バイト
functions.phpサイズ:770バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:5
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2019/08/0H-home-image.png
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Compress JPEG & PNG images 3.2.1
Contact Form 7 5.1.9
Google XML Sitemaps 4.1.0
Optimize Database after Deleting Revisions 4.9.1
Throws SPAM Away 3.1.3
UpdraftPlus - Backup/Restore 1.16.26
WP Multibyte Patch 2.8.5
----------------------------------------------

 

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

前略、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>

   
Ikumi and わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

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

 

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

 

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

 

参考リンク

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

 

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

 

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


   
Ikumi and わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14137
 

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

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


   
Ikumi reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14137
 

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


   
Ikumi reacted
Ikumi
(@ikumi)
Trusted Member Registered
結合: 3年前
投稿: 93
Topic starter  

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

 

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

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

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

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

 

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

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

 

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

大変失礼いたしました。

 

This post was modified 2年前 by Ikumi

   
Ikumi
(@ikumi)
Trusted Member Registered
結合: 3年前
投稿: 93
Topic starter  

テストページを作って公開してみたのですが、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 -->

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

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@ikumi さん

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

 

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

 

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

 

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

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

等々。

 


   
Ikumi reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@ikumi さん

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

 

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

 

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

 


   
Ikumi reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@ikumi さん

 

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

 

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


   
さる子 and Ikumi reacted
ろこ
(@lococo)
Prominent Member Registered
結合: 5年前
投稿: 830
 

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

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

 

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

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

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


   
Ikumi
(@ikumi)
Trusted Member Registered
結合: 3年前
投稿: 93
Topic starter  

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

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

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

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

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

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

感動。

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

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

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

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@ikumi さん

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

.article h2 {

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

例えば、

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

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

 

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

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

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@ikumi さん

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

 

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

 

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

 

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

 

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

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@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>

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6845
 

@ikumi さん

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

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

 

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


   
Ikumi
(@ikumi)
Trusted Member Registered
結合: 3年前
投稿: 93
Topic starter  

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

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

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

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

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

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


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な回答があった場合は「いいね!」もご活用ください。回答者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました