注目キーワード
  1. MacBook
  2. WordPress
  3. iPhone

【jQuery】WordPress Popular Postsで項目全体をクリックさせる方法

Photo : akiyan.com

いつも「タイトルは簡潔に!」を心がけているのですが…難しい
WordPress Popular Postsでサムネイルを表示した際に、項目全体をクリックさせる方法です。

プラグイン「WordPress Popular Posts」を使用し、サムネイルを表示する設定にすると、サムネイルと記事タイトルが別々にアンカータグでくくられてしまいます。

popular-posts-click-7-1

それ故、サムネイルと記事タイトルがバラバラにクリックできますが、上図の青の部分はクリックはおろかhoverさえ効きません。
最終的には、上図の赤の部分(項目)全体をクリック及び、hoverで背景色を変えることができるようにします。

※お使いのブラウザによっては正しく表示されません

スポンサーリンク

方法

まず、お使いのブラウザでWordPress Popular Postのソースを見ます。
ここでは、

<li id="wpp-2" class="widget popular-posts">

とわかりましたので、classのpopular-postsを使用してCSSを書いていきます。
(※idを使用しても問題はありませんが、ウィジェットによって数字が変わったりします。WordPress Popular Posts 2.3.0以前だとclassがwpp-popular-postsになっているかと思いますので一度必ず確認して下さい。) 

項目全体をhoverさせるため、li:hoverを使用します。

.popular-posts {margin:20px 5px 10px 10px;}.popular-posts ul li{min-height:80px; list-style:none ;  margin:0 5px 5px 8px; padding:8px; border-bottom:1px solid #f2ece6; display:block;}.popular-posts ul li a{ margin:0; padding: 0; color: #665e53 ;  text-decoration: none ; line-height:18px;}.popular-posts ul li a img {float:left;margin-right:10px;width:75px; height:75px;overflow:hidden;border: 1px solid #ccc;padding: 2px;-webkit-box-shadow: 0 8px 6px -6px #777, 0px 0px 5px rgba(0,0,0,0.2);-moz-box-shadow: 0 8px 6px -6px #777, 0px 0px 5px rgba(0,0,0,0.2);box-shadow: 0 8px 6px -6px #777, 0px 0px 5px rgba(0,0,0,0.2);}.popular-posts ul li:hover{ background-color: #665e53 ;display:block;padding:8px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;}.popular-posts ul li:hover a {color:#fff;}

 以上で、項目全体がhoverで背景色を変えることができるようになりました。

popular-posts-click-6

このままだとhoverで背景色は変えれてもクリックはできません。

jQueryを使用する

ここでjQueryを使用して、項目全体をクリックできるようにします。

まずは、jQueryが使用できる環境にします。
参考になるかわかりませんが、以前の記事はこちら↓

以下のコードを私はfooter.phpに記述しました。

<script type="text/javascript">jQuery(function(){  jQuery(".p-posts").click(function(){window.location=jQuery(this).find("a").attr("href");return false; });});</script>

 リスト(li)のclass「.p-posts」全体をクリックしたら、「.p-posts」内にあるリンクに飛びます。というコードです。
この「.p-posts」はどこからきたのかと言いますと、WordPressのウィジエットより、「HTML Markup settings」「Use custom HTML Markup」にチェックを入れます。

popular-posts-wigetすると、項目が表示されますので、その中の「Before / after each post」<li>のクラスに「p-posts」を入れます。

<li class=”p-posts”>という風に書き込みます。)

そして、右下の「保存」をクリックします。

 そしてソースを確認すると、

<li class="p-posts">  <a href="リンク先"><img src="画像の場所"></a>  <a href="リンク先">記事タイトル</a></li>

となっているはずです。
あとは、CSSに

.p-posts { cursor: pointer;}

 を記述すれば、項目全体がクリックできるようになっているはずです!

popular-posts-click-5

jQueryに関しては、Webクリエイターボックスさんの “少しのコードで実装可能な20のjQuery小技集” 4. Div全体をクリックできるようにする を参考にさせて頂きました

いいね!&フォローで最新情報をお届けします!
スポンサーリンク