【Stinger3カスタマイズ!】どこを押しても記事ページに移動!記事一覧全体をリンク化しよう

【Stinger3カスタマイズ!】どこを押しても記事ページに移動!記事一覧全体をリンク化しよう

:2014/8/9 STINGER Wordpress

Stingerカスタマイズ最大の見せ場記事一覧。
このサイトでも見た目をカード型2カラムにする方法をご紹介させて頂きました。

見た目にこだわるのも大切ですが、サイトを見に来てくださった方の便利さを向上させることも大切です。
操作性の良いページっていつまでも見ていたくなりますもんね。

というわけで、今回は記事一覧のどこをクリックしても記事ページに移れるようにカスタムしてみたいと思います。

完成するとこんな感じになりますよ。

完成形はこちら

今回やっていくこと

まずデフォルトのStingerがどうなっているかおさらいです。
「タイトル」「続きを見る」「サムネイル」のどれかをクリックすると記事ページに飛べるようになっています。

デフォルトではこの3ヶ所

今回はこの3つ以外に「白い背景の部分」をクリックしても記事ページにいけるように設定したいと思います。

カスタマイズ概要

まず各記事部分にリンクを追加するため「.entry」を編集します。(Stingerのクラス構造がよくわからないよ、という方はこちらをご覧ください)

次に背景をクリックできるようにするためにjQueryを追加します。ここが今回のメインとなるのですが、僕はまだ自分でjQueryをごりごり書くことはできません。
今回は「blog@human」さんのコードを使わさせて頂きました。

最後に訪問者さんに背景もクリックできることをわかってもらうために、マウスオーバー時に背景色が変わるようcssを変更して今回のカスタマイズは終わりです。

カスタマイズ手順

Step1 .entryにリンクを追加

まず「home.php」を変更していきます。「.entry」の部分を以下のように書き換えてください。

<div class="entry" data-href="<?php the_permalink();?>">

これでリンクが追加できました。

Step2 jQueryを追加する

次にjQueryを追加します。
追加するコードはこちらのページの上から2つ目のものです。
[WordPress]抜粋部分のブロック全体をリンクにする|blog@human

@humanさんのコードの以下の部分を書き換えて、「header.php」のheadタグ内に書き加えてください。

1ヶ所目
修正前: 'div.entry-excerpt'
修正後: '.entry'

2ヶ所目
修正前: return false;
修正後: 削除します

これで背景をクリックできるようになりました。

Step3 クリックできることをわかりやすくする

続いて「style.css」を編集します。
今回はマウスオーバーで背景が赤くなって、ポインターが手の形に変化するようにしてみました。

/*----------クリックできることをわかりやすく-----------*/
.entry:hover {
	background-color: #ffcccc;
	cursor: pointer;
}

.kizi .entry .entry-content .entry-title-ac {
	background-color: transparent; //これがないとタイトルだけ白くなります
}

元テーマを直接編集されている方はもとのcssの一番下に、子テーマを使われている方はそちらにコードを追加してください。

以上でカスタマイズは完了です。
ここまで終わるとこのように表示されているはずです。

全体がクリックできるように

あとがき

これどうやってるの?と質問を頂いたので記事にしました。お役に立てれば幸いです。

クリックできる範囲が大きくなると操作性がすごく良くなります。ぜひ取り入れてみてください。

最後まで読んでいただきありがとうございました。
Jimon(@jimon_s)でした。

jimon


-STINGER, Wordpress
-,

CATEGORY
この記事のカテゴリ
STINGERの親カテゴリ
ブログ内の他のカテゴリ
更新チェックはこちらから!