WordPress ダウンロードボタンについて | ブログ相談 | Cocoon フォーラム

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

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

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

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
WordPress ダウンロードボタン...
 
Share:
Notifications
Clear all

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


Ikumi
(@ikumi)
Trusted Memberサイト
参加: 12か月 前
投稿: 74
2020年7月3日 05:40  

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

私の環境では、最近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)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月3日 12:01  

前略、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わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月3日 12:09  

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

 

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

 

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

 

参考リンク

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

 

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

 

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


Ikumiわいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 3年 前
投稿: 10385
わいひら - Facebookわいひら - Twitter
2020年7月3日 17:41  

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

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


Ikumi 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 3年 前
投稿: 10385
わいひら - Facebookわいひら - Twitter
2020年7月3日 17:44  

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


Ikumi 件のいいね!
Ikumi
(@ikumi)
Trusted Memberサイト
参加: 12か月 前
投稿: 74
2020年7月3日 20:22  

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

 

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

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

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

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

 

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

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

 

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

大変失礼いたしました。

 

This post was modified 1か月 前 by Ikumi

わいひらリフィトリー 件のいいね!
Ikumi
(@ikumi)
Trusted Memberサイト
参加: 12か月 前
投稿: 74
2020年7月3日 20:55  

テストページを作って公開してみたのですが、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)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月3日 21:29  

@ikumi さん

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

 

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

 

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

 

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

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

等々。

 


Ikumi 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月3日 21:40  

@ikumi さん

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

 

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

 

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

 


Ikumi 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月3日 22:45  

@ikumi さん

 

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

 

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


さる子Ikumi 件のいいね!
ロコ
(@lococo)
Honorable Member
参加: 2年 前
投稿: 576
2020年7月3日 23:59  

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

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

 

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

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

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


わいひら, さる子, リフィトリー と 1 人の方がいいね!
Ikumi
(@ikumi)
Trusted Memberサイト
参加: 12か月 前
投稿: 74
2020年7月4日 05:50  

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

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

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

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

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

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

感動。

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

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

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

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


わいひらリフィトリー 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月4日 08:52  

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

わいひら, さる子Ikumi 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月4日 08:59  

@ikumi さん

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

 

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

 

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

 

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

 

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

 


わいひら, さる子Ikumi 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月4日 09:02  

@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 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1816
2020年7月4日 09:06  

@ikumi さん

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

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

 

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


わいひら, さる子Ikumi 件のいいね!
Ikumi
(@ikumi)
Trusted Memberサイト
参加: 12か月 前
投稿: 74
2020年7月4日 10:18  

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

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

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

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

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

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


わいひらリフィトリー 件のいいね!
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:1年10ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

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