「ボタン」ブロックの<a>タグにdownload属性を追加する方法

Cocoonカスタマイズ集
この記事は約2分で読めます。
記事内に広告が含まれています。

実装手順

以下のコードをfunctions.phpに追加します。

  • ラベル
    Gutenbergエディターでの設定
    Gutenbergエディター

    以下の手順で作成します。

    1. 「ボタン」ブロックを配置します。
    2. ボタンのリンク先URLを入力します。
    3. 高度な設定→追加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}のカスタマイズ、正直もう飽きたわ。

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