クエリーループのカード全体をクリック可能にする方法(メモ)

公開日:2024(令和6)年8月3日/最終更新日:

WordPressのカスタマイズ方法についての画像

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



テーマ内にPHPでコード書いたり、ショートコードにしたり、特別なプラグインを使わなくても本当に簡単に投稿リストの挿入ができる「クエリーループブロック」。Twenty Twenty-Fourなどをはじめとするブロック形式のテーマ(ブロックテーマ)では、投稿一覧テンプレートなどにも使われていて、いわば必須のブロックと言えるでしょう。

このクエリーループブロック内包した「画像」「タイトル」などそれぞれにリンクが張れるようにはなっているものの、カード全体をクリックできるようにはできていないのが個人的にはちょっと使いにくいと感じています。

そこで本ページでは、比較的簡単なスタイルコードを追加するだけで、クエリーループ内のカード(各投稿へのリンク)全体をクリック可能にする方法をメモとして公開しておきます。

できてみたら簡単すぎ?位簡単ですのでぜひやってみてください。

クエリーループ内のカード全体をクリック可能にしたサンプル

百聞は一見に如かずということで、以下が本ページの方法を用いて実際に設定したクエリーループブロックです。

カードのどこマウスポインターを持って行ってもクリックが可能になってますね(分かりやすいよう、ホーバー時に背景色と濃い枠線が付くようにもしています)。

本ページで掲載しているコードは、以下に了承した上で使用ください

  • コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
  • コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
  • 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)
QA Analytics QA Analytics

クエリーループ内のカード全体をクリック可能にする方法

まずは、自身のサイトのクエリーループブロック内のアイキャッチ画像以外の何かの要素にリンクが設定されていることを確認ください。

HTMLソース等を確認すると分かりますが、アイキャッチ画像のリンクはfigureタグで囲まれて出力されている(独立している)ので、アイキャッチ画像以外にリンク設定を行わないとこの措置ではうまく動作しません

その上で以下のコードをテーマのstyle.cssなどスタイルコードを追加できる場所へ追記すると、簡単にカード全体がクリック可能になります。

/*** カード全体をクリック可能にする ***/
.wp-block-post-template li {
    position: relative;
}

.wp-block-post-template li a:after{
    position: absolute;
    content: '';
    z-index: 2;
    inset: 0;
}

.wp-block-post-template a:hover{
	text-decoration:none;
}

.wp-block-post-template a:hover:after{
	border:1px solid #777;
	background:#00000010;
}

通常こういう処置をする場合に数多く紹介されているコード例では、カード内の特定のリンク要素に今回と同様にpositionを使って浮かべ、幅を100%高さをautoにした上で位置の調整をするというものですが、これだと全体をリンクにするためのリンク要素の位置調整が難しく、自身の使用していない環境では表示がおかしくなってしまったりすることが多いです。

それに比べ上記コードでは、同じようにpositionを使いますが、特定のリンク要素にafter属性を加えて、そのafter属性を付加し、inset:0(親要素全体)に対してcontent:”で内容のないコンテンツを、z-index:2で上に被せるというやり方をしていますから、この方が簡単だと思われます。

特定のクエリーループだけに適用させたいときは

まあサイト全体のデザインを共通にするでしょうから、こんなケースは少ないと思いますが、上のサンプルのようにこのクエリーループだけ!と限定したいときは以下のようにすればいいでしょう。

まずはクエリーループブロックの追加CSSへ「qloop-class」という文字列を追加します。

そして以下のコードをstyle.cssへ追加します。

.qloop-class li {
    position: relative;
}

.qloop-class li a:after{
    position: absolute;
    content: '';
    z-index: 2;
    inset: 0;
}

.qloop-class a:hover:after{
	border:1px solid #777;
	background:#00000010;
}

.qloop-class a:hover{
  text-decoration:none;
}

上のコードと見比べると、追加したCSSクラスに対して適用させるのか、WordPressのクエリーループすべてに共通で出力されるCSSクラスに対して適用させるのかの違いだけだということが分かりますね。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPressのカスタマイズ方法についての画像
画面に表示させずにデバッグ情報(エラーや警告の情報)を取得する方法