MENU

ブロック全体をクリックできるようにする方法（プラグインなし）

WordPress
ブロック全体をクリックできるようにする方法（プラグインなし）

「カード型のブロック全体をクリック可能にしたい」と思ったことはありませんか？
リンクはタイトルやボタンだけでなく、ブロック全体に設定することでユーザビリティが向上します。
この記事では、プラグインを使わずにブロック全体をクリックできる方法をわかりやすく解説します。

目次

１.クラス名をブロックに付ける

  1. 対象ブロックを選択。
  2. 右側の「ブロック」設定サイドバーにある「高度な設定」を開く。
  3. 「追加CSSクラス」欄に任意のクラス名を入力（例：clickable-block）。

2.子テーマ or 親テーマにjsファイルを作成する（子テーマ推奨）

テーマにjsファイルを作成しましょう。今回はcustom.jsを作成しました。

custom.js

3.JavaScriptでクリックを検知してリンクに飛ばす

JavaScriptを作成したファイルに追加します。

JavaScript
document.addEventListener("DOMContentLoaded", function () {
  const clickableBlocks = document.querySelectorAll(".clickable-block");

  clickableBlocks.forEach((block) => {
    const button = block.querySelector("a");

    if (button) {
      block.style.cursor = "pointer";
      block.addEventListener("click", () => {
        window.location.href = button.href;
      });
    }
  });
});

このスクリプトは、.clickable-blockクラスを持つ要素の中にある<a>タグのリンク先に飛ばす動作を追加します。

・ブロック内にタグ（ボタン）が含まれている必要があります。
・JavaScriptが読み込まれるよう、テーマやプ

4.functions.phpにjsファイルを読み込ませる

JavaScript
function my_custom_scripts() {
    wp_enqueue_script('clickable-block-script', get_template_directory_uri() . '/js/custom.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');

これで設定は完了です！

WordPress
目次