wordpress wp_list_categories()で出力したリストの背景画像を変更する

CATEGORY: WordPress | TAG:

2013年4月15日

WordPress で wp_list_categories()で出力したリストに CSS で背景画像を設定して、マウスオーバーしたときに表示するようにする。

<div id="cat_list">
<h3>リスト</h3>
<ul>
<?php wp_list_categories(array('title_li' => '')); ?>
</ul>
</div>

出力されるHTML
<div id="cat_list">
<h3>リスト</h3>
<ul>
  <li class="cat-item cat-item-4"><a href="http://localhost/wp/category/jquery/" title="jQuery に含まれる投稿をすべて表示">jQuery</a>
</li>
  <li class="cat-item cat-item-5"><a href="http://localhost/wp/category/php/" title="PHP に含まれる投稿をすべて表示">PHP</a>
</li>
・・・
</ul>
</div>

CSSは

#cat_list ul li {
  margin-left: 20px;
  background:url(images/arrow-trans.png) no-repeat ;
}

#cat_list ul li a {
  font-size: 0.8em;
  padding: 0 30px 0 15px;
  border-bottom: 1px solid #999999;
}

jQuery でまず、「background」を「none」にしておく。
マウスオーバーしたら、背景画像を指定して、マウスアウトしたら、「background」を「none」にする。

WordPress で jQuery を使い画像のパスを指定する場合、絶対パスで指定しないと表示されない。

jQuery(document).ready(function($) { 
  $('#cat_list ul li').css('background', 'none');
  
  $('#cat_list ul li a').hover(
    function() {
      $(this).parent().css('background', 'url(http://localhost/画像への絶対パスを指定/images/arrow-trans.png) no-repeat');
    },
    function() {
      $(this).parent().css('background', 'none');

  });
});

リストの背景画像としてではなく、jQuery で「insertBefore」を使って<li>と<a>の間に画像を挿入することも可能。（あえてそうする理由はあまりないと思おうが）

その場合の CSS は、画像要素の「position」を「absolute」にして、その親要素の li 要素の「position」を「relative」にする必要がある。

#sidebar #cat_list ul li {
  margin-left: 20px;
  position: relative;
}

#sidebar #cat_list ul li img { 
  float: left;
  position: absolute;
}

#sidebar #cat_list ul li a {
  font-size: 0.8em;
  padding: 0 30px 0 15px;
  border-bottom: 1px solid #999999;
}
$('<img src="http://localhost/画像への絶対パスを指定/images/arrow-trans.png" width="10" height="10" alt="" />').insertBefore($('#cat_list ul li a'));
  
  list_images$ = $('#cat_list ul li img');  //挿入された画像のラップ集合
  list_images$.css('display', 'none');  //挿入された画像を非表示に
  
  $('#cat_list ul li a').hover(
  function() {
    $(this).parent().find('img').css('display', 'block');  //画像を表示
  },
  function() {
    $(this).parent().find('img').css('display', 'none');  //画像を非表示

  });
  
   //画像の垂直方向の位置を調整
   imgHeight = $('#cat_list ul li img').outerHeight(false);
   liHeight = $('#cat_list ul li').outerHeight(false);
   $('#cat_list ul li img').css('top',(liHeight - imgHeight)/2+'px');