ブログを運営していると、ユーザー体験の向上について考えることがあります。特にWordPressのブログ一覧ページでは、記事タイトルだけがリンクになっていることが多く、ユーザーが小さなリンク部分を正確にクリックしなければならないという不便さがあります。
この記事では、記事カード全体（inside-article要素）をクリック可能にして、ユーザー体験を向上させる方法を紹介します。さらに、視覚的なフィードバックとして矢印アイコンを追加する方法も解説します。
実現したいこと
- ブログ一覧ページの記事カード全体をクリック可能にする
- クリック可能であることを示す視覚的な矢印を追加する
- ホバー時に視覚的なフィードバックを与える
記事全体をクリック可能にする
まずはWordPressのテーマフォルダにあるfunctions.phpファイルに、以下のコードを追加します。このコードは、JavaScriptを使ってinside-articleクラスを持つ要素全体をクリック可能にします。
// inside-article要素全体を記事へのリンクにする
function make_article_clickable() {
// ブログ一覧ページ（アーカイブページ）でのみ実行
if ( is_home() || is_archive() || is_search() ) {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
// すべてのinside-articleクラスを持つ要素を取得
const articles = document.querySelectorAll('.inside-article');
articles.forEach(function(article) {
// 記事内のリンク要素を取得
const link = article.querySelector('a.entry-title-link') ||
article.querySelector('h2.entry-title a') ||
article.querySelector('.entry-header a');
if (link) {
const articleUrl = link.getAttribute('href');
// 記事全体にクリックイベントを追加
article.style.cursor = 'pointer';
article.addEventListener('click', function(e) {
// 既存のリンクやボタンをクリックした場合は、通常の動作を維持
if (e.target.tagName === 'A' || e.target.tagName === 'BUTTON' ||
e.target.closest('a') || e.target.closest('button')) {
return;
}
// 記事ページへ移動
window.location.href = articleUrl;
});
}
});
});
</script>
<?php
}
}
// wp_footerフックにこの関数を追加
add_action('wp_footer', 'make_article_clickable');
Code language: JavaScript (javascript)このコードの特徴は以下の通りです：
- ブログ一覧ページ（ホーム、アーカイブ、検索結果）でのみ実行されます
- 記事タイトルのリンクから記事URLを取得します
- 記事カード全体にクリックイベントを追加します
- 記事内の既存のリンクやボタンは通常通り機能します
クリック可能であることを視覚的に示す矢印の追加
次に、記事カードの右側に矢印を表示して、クリック可能であることを視覚的に示します。style.cssファイルに以下のCSSを追加します。
.inside-article {
position: relative; /* 子要素の位置決めの基準点にする */
padding-right: 30px; /* 右側に矢印用のスペースを確保 */
transition: background-color 0.3s ease; /* ホバー効果をスムーズに */
}
/* 矢印を線で作成 */
.inside-article::after {
content: "";
position: absolute;
right: 15px;
top: 50%;
width: 8px;
height: 8px;
border-top: 2px solid #ccc;
border-right: 2px solid #ccc;
transform: translateY(-50%) rotate(45deg); /* 45度回転させて右向き矢印に */
pointer-events: none; /* この要素自体はクリックイベントを拾わない */
transition: all 0.3s ease; /* 色の変化をスムーズに */
}
/* ホバー時のスタイル変更 */
.inside-article:hover {
background-color: #f9f9f9; /* 薄い灰色の背景 */
}
.inside-article:hover::after {
border-color: #333; /* ホバー時に矢印の色を濃くする */
right: 10px; /* 少し右に動かす効果 */
}
Code language: CSS (css)このCSSでは、以下のような効果を実現しています：
- 記事カードの右側にスペースを確保し、線で作った矢印を配置します
- 矢印は上と右の境界線を使って「>」の形状を作り、45度回転させています
- ホバー時には背景色が変わり、矢印の色が濃くなって少し右に動くアニメーション効果を付けています
カスタマイズのポイント
自分のサイトに合わせて以下の部分をカスタマイズできます：
JavaScriptのカスタマイズ
- セレクタの調整：テーマによって記事要素のクラス名が異なる場合は、
.inside-articleの部分を実際に使われているクラス名に変更します - リンク取得方法の調整：記事タイトルのリンクを取得するセレクタが異なる場合は、querySelector部分を調整します
CSSのカスタマイズ
- 矢印のサイズ：
widthとheightの値を変更します（大きくすると矢印も大きくなります） - 線の太さ：
border-topとborder-rightの2pxの部分を変更します - 色の調整：
#ccc（通常時）や#333（ホバー時）の色を、サイトのデザインに合わせて変更します - アニメーション速度：
transitionの0.3sの部分を調整します
まとめ
この方法を使えば、WordPressのブログ一覧ページで記事カード全体をクリック可能にし、視覚的なフィードバックも追加できます。ユーザーは小さなリンク部分を探してクリックする必要がなくなり、より直感的にサイトを利用できるようになります。
テーマによってはクラス名が異なる場合があるため、必要に応じてセレクタを調整してください。また、子テーマを使用している場合は、親テーマではなく子テーマのファイルに変更を加えるようにしましょう。