WordPressでコンテンツの集まり全体をクリック可能にする手法としては、敢えてコードではなく文章で書くと、子要素にaタグ（リンクタグ）を設定して、CSSでpositionを使って親要素をrelativeに、リンクの要素をabsoluteにして、リンクの幅を100%にし、子要素の位置を絶対指定して調整するということをしますね。
もちろんこれでもいいのですが、実はデバイスによってリンクを設定した子要素の表示調整が大変だったり、ある画面幅ではレイアウトそのものが崩れてしまうなんてこともあります。そしてそうなっていたとしても、すべてのデバイスでの表示テストをするわけではないので、見る人によってレイアウトが実は崩れているということも少なくありません。
それならショートコードで要素全体をaタグでラップして（囲んで）しまえば問題解決するのでは？というアイディアの元に作ったコードを紹介します。結構簡単な囲み型ショートコードで実装できるので青天の霹靂かも知れません。
簡単なコードですので、自身のサイトへ追加して試してみてくださいね。
内包した要素すべてをリンククリック可能にするショートコード
以下のコードを有効化しているテーマのfunctions.phpへ追加します。
// 開始タグ: [pwcn-cover-link url="https://example.com" target="_blank"]
function pwcn_full_cover_anchor_shortcode_init($atts, $content = null){
$a = shortcode_atts([
'url' => '#',
'target' => '_self',
'rel' => 'noopener',
'class' => '',
], $atts);
$target = esc_attr($a['target']);
$rel = ($target === '_blank') ? 'noopener noreferrer' : esc_attr($a['rel']);
$url = esc_url($a['url']);
$class = esc_attr($a['class']);
// do_shortcode($content) を入れることで、中のブロック要素を解析させる
return sprintf(
'<a href="%s" target="%s" rel="%s" class="pwcn-cover-link %s">%s</a>',
$url,
$target,
$rel,
$class,
do_shortcode($content)
);
}
add_shortcode('pwcn-cover-link','pwcn_full_cover_anchor_shortcode_init');追加したら、テスト的な投稿を作り、段落とか画像とかを入れて適当なコンテンツを作り、以下のショートコードで前後を囲んでプレビューしてみてください。
[pwcn-cover-link url="https://example.com" target="_blank"]
ここに適当なコンテンツのブロック
[/pwcn-cover-link]ね！ちゃんと全体がリンクになりますよね？
上のURLは仮なので、実在するURLにすればきちんとリンク先へ飛びます。また、targetを_blankにしていますが、削除すれば同一のタブでリンクが表示されるようになります。
．．．今までCSSであれこれやってたのに．．．簡単すぎました。
ただし、このコードのままだと、WordPressの囲み型ショートコードの特徴であるwpautop機能が効いて、囲んだコンテンツの一番上に空のpタグが入ってしまい、上に微妙な隙間（pタグのマージンなどの設定により隙間の量は変化）ができてしまいます。
また、内包しているコンテンツすべてにリンクの下線などが付いてしまいます。
これを解消するために、有効化しているテーマのstyle.cssへ以下のコードを追加します。
/* 中身が空（または改行のみ）のPタグを隠す */
.pwcn-cover-link p:empty {
display: none;
}
/* 中のリンクの装飾をなくす */
a.pwcn-cover-link {
text-decoration: none;
}wpautopを切ったり、preg_replace()などを使って空のpタグを削除してしまうという方法もあるのですが、HTMLとしては別に空のpタグがあってはならないということではないので、CSSでdisplay:none;(非表示)にしてしまうのが手っ取り早いでしょう。
また、同じページ内に複数の全体クリックコンテンツ（本ページのショートコードで囲まれた部分）があったとしても、きちんと認識して別の動作をするようになっていますので、こちらも自身のサイトで試してみてください。
こんな簡単にできていいの？という位簡単に機能が追加できてしまいましたが、1点だけ注意事項がありますので以下を必ずご覧ください。
運用上の注意点
WordPressの動作ではなくHTMLの仕様上、a（リンク）タグの中にa（リンク）タグがあった場合、2つめのリンクタグの前で強制的に閉じタグが挿入されるようになっています。
例えば本ページのショートコードで囲んだ中にあるボタンやテキストなどにリンクを張った場合です。
そうなると、全体でのリンクが効かなくなりますので、本ページのショートコードを使う場合は中のブロックや文字列には一切リンクを張らないというルールで運用することが必要です。
ただ、冒頭で書いたようにCSSでごにょごにょした挙句に別のデバイスで見たらリンクを拡張させた部分の位置がずれてしまったり、レイアウト全体が崩れてしまうといったことは原則発生しませんから、本ページのショートコードを使った方が簡単かつ確実な方法なのではないでしょうか？
