WordPressで内部リンクを貼ったときに表示される「ブログカード」は、見た目はカード型でも、実際にクリックできる範囲はタイトル・画像・続きを読むリンクなど一部だけです。

そのため、スマホやタブレットでは少し押しにくく感じることがあります。

この記事では、WordPressの埋め込みブログカード全体をクリックできるようにする方法を解説します。

今回対象にしているブログカードは、WordPressの埋め込みカードとして出力される形式です。HTML上では、カード本体に.wp-embed、タイトルリンクに.wp-embed-heading aが使われています。

完成コード

以下を「Code Snippets」に追加してください。

スニペットの種類は「PHPスニペット」です。

add_action('embed_head', function () {
    ?>
    <style>
        .wp-embed {
            cursor: pointer;
            position: relative;
            border: 1px solid #dcdcde;
            border-radius: 10px;
            transition:
                background-color 0.2s ease,
                border-color 0.2s ease;
        }        .wp-embed:hover {
            background-color: #fff3bf;
            border-color: #d69a00;
        }        .wp-embed-heading a {
            text-decoration: none !important;
            transition: color 0.2s ease;
        }        .wp-embed:hover .wp-embed-heading a {
            color: #7a4300 !important;
        }        .wp-embed-featured-image {
            overflow: hidden;
            border-radius: 8px;
        }        .wp-embed-featured-image img {
            transition:
                transform 0.25s ease,
                opacity 0.2s ease;
        }        .wp-embed:hover .wp-embed-featured-image img {
            transform: scale(1.03);
            opacity: 0.92;
        }        .wp-embed-footer,
        .wp-embed-share,
        .wp-embed-share button {
            position: relative;
            z-index: 2;
        }
    </style>
    <?php
}, 9999);add_action('embed_footer', function () {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const cards = document.querySelectorAll('.wp-embed');        cards.forEach(function (card) {
            const mainLink = card.querySelector('.wp-embed-heading a');            if (!mainLink || !mainLink.href) {
                return;
            }            card.setAttribute('tabindex', '0');
            card.setAttribute('role', 'link');
            card.setAttribute('aria-label', mainLink.textContent.trim());            card.addEventListener('click', function (event) {
                if (
                    event.target.closest('a') ||
                    event.target.closest('button') ||
                    event.target.closest('input') ||
                    event.target.closest('textarea') ||
                    event.target.closest('.wp-embed-share-dialog')
                ) {
                    return;
                }                mainLink.click();
            });            card.addEventListener('keydown', function (event) {
                if (event.key === 'Enter') {
                    mainLink.click();
                }
            });
        });
    });
    </script>
    <?php
}, 9999);

このスニペットでできること

このコードを入れると、WordPressのブログカードで次の部分がクリックしやすくなります。

・カードの余白部分
・本文の抜粋部分
・画像の周辺
・タイトル以外のカード内エリア

通常は、ブログカード内のタイトルや画像など、リンクが設定されている場所しかクリックできません。

しかし、このスニペットでは.wp-embed全体にクリックイベントを設定し、カード内のタイトルリンクと同じURLを開くようにしています。

なぜwp_headではなくembed_headを使うのか

通常のWordPressカスタマイズでは、CSSを追加するときにwp_headを使うことが多いです。

しかし、WordPressのブログカードは通常ページとは別に、埋め込み用のテンプレートとして表示されます。

そのため、通常のページに出力するwp_headではなく、埋め込みカード側にCSSを出力できるembed_headを使います。

add_action('embed_head', function () {
    ?>
    <style>
        /* ブログカード用CSS */
    </style>
    <?php
}, 9999);

同じように、JavaScriptも通常のwp_footerではなく、埋め込みカード側のフッターに出すためにembed_footerを使います。

add_action('embed_footer', function () {
    ?>
    <script>
        // ブログカード用JavaScript
    </script>
    <?php
}, 9999);

ここを間違えると、通常ページにはコードが出ても、ブログカードの中には反映されない場合があります。

CSS部分の解説

カード全体をクリックできそうな見た目にする

.wp-embed {
    cursor: pointer;
    position: relative;
    border: 1px solid #dcdcde;
    border-radius: 10px;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.wp-embedはブログカード全体を囲む要素です。

ここにcursor: pointer;を指定することで、マウスを乗せたときに「クリックできる場所」と分かるようになります。

また、border-radiusで角を少し丸くし、カードらしい見た目にしています。

マウスオーバー時に選択中のように見せる

.wp-embed:hover {
    background-color: #fff3bf;
    border-color: #d69a00;
}

カードにマウスを乗せたとき、背景色と枠線の色を変えています。

これにより、ユーザーが「今このカードを選択している」と分かりやすくなります。

強い影を使わず、枠線と背景色だけで自然に目立たせる設計です。

タイトルリンクの下線を消す

.wp-embed-heading a {
    text-decoration: none !important;
    transition: color 0.2s ease;
}

ブログカードのタイトルリンクに下線が出る場合があります。

カード型デザインでは、タイトルの下線があると少し古い見た目になりやすいため、text-decoration: noneで下線を消しています。

hover時にタイトル色を変える

.wp-embed:hover .wp-embed-heading a {
    color: #7a4300 !important;
}

カード全体にマウスを乗せたとき、タイトルの色も変わるようにしています。

背景色だけでなくタイトル色も変わるため、クリック対象としてより分かりやすくなります。

画像を少し拡大する

.wp-embed-featured-image {
    overflow: hidden;
    border-radius: 8px;
}.wp-embed-featured-image img {
    transition:
        transform 0.25s ease,
        opacity 0.2s ease;
}.wp-embed:hover .wp-embed-featured-image img {
    transform: scale(1.03);
    opacity: 0.92;
}

画像部分は、マウスオーバー時に少しだけ拡大します。

scale(1.03)なので、派手すぎず自然です。

overflow: hidden;を指定しているため、画像が拡大してもカード外にはみ出しにくくなります。

JavaScript部分の解説

ブログカードを取得する

const cards = document.querySelectorAll('.wp-embed');

ページ内のブログカードをすべて取得しています。

WordPressの埋め込みブログカードは.wp-embedというクラスを持っているため、この指定で対象をまとめて取得できます。

メインリンクを取得する

const mainLink = card.querySelector('.wp-embed-heading a');

カード内のタイトルリンクを取得しています。

このタイトルリンクのURLを、カード全体クリック時の移動先として使います。

つまり、カードの余白や本文部分をクリックしても、タイトルをクリックした場合と同じページを開く仕組みです。

リンクがない場合は処理しない

if (!mainLink || !mainLink.href) {
    return;
}

万が一、タイトルリンクがないカードがあった場合は処理を中止します。

これを入れておくことで、JavaScriptエラーを防げます。

アクセシビリティ対応

このコードでは、マウスクリックだけでなく、キーボード操作にも対応しています。

card.setAttribute('tabindex', '0');
card.setAttribute('role', 'link');
card.setAttribute('aria-label', mainLink.textContent.trim());

tabindex="0"を付けることで、キーボードのTabキーでカードにフォーカスできるようになります。

role="link"を付けることで、スクリーンリーダーなどに「これはリンクです」と伝えられます。

aria-labelにはタイトルテキストを入れているため、読み上げ時にも何のリンクなのか分かりやすくなります。

Enterキーで開けるようにする

card.addEventListener('keydown', function (event) {
    if (event.key === 'Enter') {
        mainLink.click();
    }
});

カードにフォーカスした状態でEnterキーを押すと、リンクを開くようにしています。

マウスだけでなくキーボードでも操作できるため、使いやすさが上がります。

既存リンクやボタンは邪魔しない

重要なのがこの部分です。

if (
    event.target.closest('a') ||
    event.target.closest('button') ||
    event.target.closest('input') ||
    event.target.closest('textarea') ||
    event.target.closest('.wp-embed-share-dialog')
) {
    return;
}

ブログカード内には、タイトルリンク、画像リンク、「続きを読む」リンク、共有ボタンなどがあります。

カード全体にクリックイベントを付けるだけだと、これらの本来の操作を邪魔してしまう可能性があります。

そのため、次の要素をクリックしたときは、カード全体クリックの処理を止めています。

・リンク
・ボタン
・入力欄
・テキストエリア
・共有ダイアログ

これにより、既存のリンクや共有機能はそのまま使えます。

mainLink.click()を使う理由

mainLink.click();

リンク先URLを直接window.location.hrefで開く方法もあります。

しかし、WordPressの埋め込みカードでは、リンクにtarget="_top"が付いている場合があります。

この場合、iframe内ではなく、親ページ側でリンクを開く必要があります。

mainLink.click()を使うことで、WordPressが出力しているリンク本来の挙動を活かせます。

そのため、ブログカードではwindow.location.href = mainLink.href;よりも、mainLink.click();の方が自然です。

注意点

通常の投稿一覧カードとは対象が違う

今回のコードは、WordPressの埋め込みブログカード用です。

投稿一覧のli.wp-block-postをカード全体リンクにするコードとは対象が違います。

投稿一覧の場合は、主に次のような要素を対象にします。

.wp-block-post-template > .wp-block-post

一方、今回のブログカードでは次の要素を対象にします。

.wp-embed

この2つは別物です。

同じ「カード」でも、HTML構造が違うため、スニペットも分けて考える必要があります。

外部サイトの埋め込みカードには効かない場合がある

今回のコードは、自分のWordPressサイトが生成している埋め込みカードに対して有効です。

外部サイト側が生成しているiframe内のデザインまでは、基本的にこちらのCSSやJavaScriptでは操作できません。

そのため、主に自サイト内のWordPress埋め込みカード向けのカスタマイズと考えてください。

キャッシュを削除して確認する

コードを追加しても反映されない場合は、キャッシュが原因の可能性があります。

確認時は、以下を試してください。

・ブラウザのキャッシュを削除する
・WordPressのキャッシュプラグインを削除する
・サーバーキャッシュを削除する
・シークレットウィンドウで確認する

特にCSSやJavaScriptはキャッシュの影響を受けやすいです。

まとめ

WordPressのブログカードは、見た目はカード型でも、初期状態ではカード全体がリンクになっているわけではありません。

今回のスニペットを使うことで、ブログカード全体をクリックしやすくできます。

今回のポイントは次の通りです。

・.wp-embedをカード全体の対象にする
・.wp-embed-heading aのリンク先をメインリンクとして使う
・embed_headでCSSを追加する
・embed_footerでJavaScriptを追加する
・リンクや共有ボタンの本来の動作は邪魔しない
・Enterキーでも開けるようにする

ブログカード全体がクリックできるようになると、特にスマホでの操作性が上がります。

内部リンクをブログカードで見せているサイトでは、回遊率の改善にもつながりやすいカスタマイズです。