はじめに
以下をCocoonで実現します。
WordPress標準の「ボタン」ブロックの<a>タグにdownload属性を追加します。
この記事では、この方法について説明します。
実装手順
以下のコードをfunctions.phpに追加します。
- ラベルGutenbergエディターでの設定

Gutenbergエディター 以下の手順で作成します。
- 「ボタン」ブロックを配置します。
- ボタンのリンク先URLを入力します。
- 高度な設定→追加CSSクラスに
my-downloadと入力します。
- ラベルPHPを追加
以下のコードをfunctions.phpに追加します。
add_filter('render_block_core/button', function ($block_content, $block) { if (!isset($block['attrs']['className']) || strpos($block['attrs']['className'], 'my-download') === false) { return $block_content; } $processor = new WP_HTML_Tag_Processor($block_content); if ($processor->next_tag('a')) { $processor->set_attribute('download', ''); $block_content = $processor->get_updated_html(); } return $block_content; }, 10, 2);
download属性の注意点
download属性は、同一ドメインでのみ動作します。外部サイトへのリンクには適用されません。download="ファイル名"としてファイル名を指定することも可能です。
さいごに
今回紹介した方法を使えば、WordPress標準の「ボタン」ブロックで特定のクラス名が付与されたリンクに、download属性を自動で付けられるようになります。
訪問者にとっても「クリック=ダウンロード」が明確になり、ユーザビリティ向上にもつながります。

目的こそ違えど、結局やってることは毎回同じだから、WP_HTML_Tag_Processorとrender_block_{$name}のカスタマイズ、正直もう飽きたわ。


