トップページには新着記事の一覧がずらーっと並んでいて、それぞれの投稿記事に移動しようと思うと、記事タイトルかサムネイル画像をクリックする必要があります。
デフォルトの記事一覧はこんな感じ。
投稿記事に移動するのはタイトルとサムネイルだけで、それ以外の抜粋文や空白スペースをクリックしても当然何も起こりません。でも、そういう箇所も含めて、どこをクリックしても記事に移動できたら便利なんじゃないかと思いました。
そこで、以下のようにカスタマイズ。
記事一覧のクリック範囲を拡げて、タイトルとサムネイル以外をクリックしても投稿記事に移動するようカスタマイズしてみました。トップページの記事一覧だけでなく、記事下の関連記事やサイドバーの新着記事も同じような仕様に。
参考サイト
カスタマイズにあたって、こちらの記事を参考にさせていただきました。ありがとうございます。
STINGER5 の記事一覧に対してリンクのクリック範囲を広げる方法 | キャリコ
こちらはSTINGER5でのカスタマイズ情報なので、STINGER PLUS+で使えるようにアレンジしていきます。
記事一覧のdl要素にリンクを追加
トップページの記事一覧
まず、トップページの記事一覧からカスタマイズしていきます。
WordPress管理画面で「外観」⇒「テーマの編集」⇒子テーマ「itiran-thumbnail-on.php」の編集画面へ。
<dl class="clearfix"> <dt><a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php the_post_thumbnail( 'thumbnail' ); ?>
上の方にdl要素の記述があるので、ここにコードを追記します。
<dl class="clearfix" data-href="<?php the_permalink(); ?>">
上記のように、dl要素をリンク化してください。
投稿記事下の関連記事
つぎに、投稿記事下の関連記事も同様のカスタマイズを。
子テーマ「kanren-thumbnail-on.php」の編集画面へ。
<dl class="clearfix"> <dt><a href="<?php the_permalink() ?>"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php the_post_thumbnail( 'thumbnail' ); ?>
真ん中くらいにdl要素の記述があるので、ここにコードを追記します。
<dl class="clearfix" data-href="<?php the_permalink(); ?>">
上記のように、dl要素をリンク化してください。
サイドバーの新着記事
つづいて、サイドバーの新着記事も。
子テーマ「newpost-thumbnail-on.php」の編集画面へ。
<dl class="clearfix"> <dt><a href="<?php the_permalink() ?>"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php the_post_thumbnail( 'thumbnail' ); ?>
こちらも真ん中くらいにdl要素の記述があるので、ここにコードを追記します。
<dl class="clearfix" data-href="<?php the_permalink(); ?>">
上記のように、dl要素をリンク化してください。
サイドバーの人気記事
最後に、サイドバーの人気記事も同様のカスタマイズをしていきます。
当ブログでは、人気記事の表示は以下のカスタマイズで設定しているので、その前提で説明します。
≫【STINGER PLUS+】新着記事と同じデザインの人気記事をサイドバーに設置してみた
WordPress管理画面で「外観」⇒「ウィジェット」⇒サイドバーに入れている「PHP コード」の編集画面へ。
'post_html' => '<dl class="clearfix"><dt>{thumb}</dt><dd><h5>{title}</h5><div class="smanone2"><p>{summary}</p></div></dd></dl>',STINGER風にするため記述しているHTMLの中にdl要素の記述があるので、ここにコードを追記します。
'post_html' => '<dl class="clearfix" data-href={url}><dt>{thumb}</dt><dd><h5>{title}</h5><div class="smanone2"><p>{summary}</p></div></dd></dl>',上記のように、dl要素をリンク化してください。
jQueryを追加し、クリック可能に
当ブログは、トップページでは新着記事一覧とサイドバーの人気記事を、投稿記事では記事下の関連記事とサイドバーの新着記事・人気記事を表示しています。
つまり、どのページでもサイドバーの人気記事は表示されているということ。
なので、人気記事を表示させるための「PHP コード」にjQueryを追加します。
<script>
(function($) {
$(function() {
$(".kanren dl.clearfix").click(function() {
window.location = $(this).data("href");
});
});
})(jQuery);
</script>「PHP コード」の最下部に上記のコードを追記します。
これでクリック範囲が拡がり、タイトルやサムネイル以外の部分をクリックしても投稿記事に移動できるようになりました。
※「itiran-thumbnail-on.php」など、それぞれに記述すると重複してしまうので、常に表示されている人気記事に記述しました。
クリック範囲が分かるようにCSSでデザイン
ここまでの作業で記事一覧のクリック範囲が拡がりましたが、見た目に変化がないのでクリック可能かどうか判断できません。
そこで、CSSでクリック可能と分かるようにデザインしていきます。
仕上がりはこんな感じに。これで分かりやすくなりますよね。
WordPress管理画面で「外観」⇒「テーマの編集」⇒子テーマ「style.css」の編集画面へ。
/* 記事一覧のクリック範囲を拡げる */
.kanren dl.clearfix:hover {
background-color: #FFFFE0;
cursor: pointer;
}
.kanren dl.clearfix {
padding: 10px;
margin-bottom: 0;
}
.kanren dl:last-child {
margin-bottom: 20px;
}上記のコードを追記してください。
マウスホバー時に背景色を変化させて、カーソルが指になるようにしています。あと、余白の調整も行っています。
背景色はお好みで変更してくださいね。
マウスホバーでサムネイル画像を動かしてみる
これは完全に好みですが、クリック範囲のマウスホバー時にサムネイル画像に動きを加えてみました。
とりあえず2パターンを用意したので、よかったらどうぞ。
コードをコピーして、子テーマ「style.css」に追記してください。
パターン1
1つ目は、マウスホバーで画像が拡大するようにしてみました。
.kanren dl.clearfix:hover > dt img {
transform: scale(1.2);
}
dt img {
transition: 0.2s ease-in-out;
}
パターン2
2つ目は、マウスホバーで画像自体のサイズは変わらないけれど、枠内で拡大されるようにしてみました。
.kanren dl.clearfix:hover > dt img {
transform: scale(1.2);
}
dt img {
transition: 0.2s ease-in-out;
}
dt {
overflow: hidden;
}
まとめ
クリック範囲を拡げることで、ユーザビリティの向上！…になるかどうかは分かりませんが、こちらの方が多少は便利かなと思います。
マウスホバーで背景色やカーソルを変化させておけば、ユーザーもクリック可能だと認識できるでしょう。
もしよかったら、カスタマイズを取り入れてみてください。