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

Photo : akiyan.com

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

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

popular-posts-click-7-1

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

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

スポンサーリンク

方法

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

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

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

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

popular-posts-click-6

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

jQueryを使用する

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

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

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

 リスト(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”>という風に書き込みます。)

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

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

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

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

popular-posts-click-5

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

スポンサーリンク
Written by gozi
iPhone・iPad等のApple製品を中心にWordPressから食べものなど、きになるものを綴っているブログです。
スポンサーリンク
mixhost
おすすめ記事