株式会社サフィックス

  1. TOP  
  2. BLOG  
  3. フロントエンドチーム  

BLOG

株式会社サフィックス STAFF BLOG

予ing

弊社スタッフが更新するブログです。

has.png

cssは親から子参照することによって装飾内容を指定できますが、基本的にその逆はできません。

<ul class="list">
<li>リスト1-1</li>
<li>リスト1-2</li>
<li>
リスト1-3
<ul>
<li>リスト2-1</li>
<li>リスト2-2</li>
<li>リスト2-3</li>
</ul>
</li>
</ul>

例えば上記のようなリストで組まれているときに
ulを入れ子にしているliにだけcssで変更する場合、以下のような書き方になると思います。

ul li:nth-child(3) {
background: #ff0000;
}

これがn番目ではなく
何番目のliタグであろうとulが入れ子になったら、その該当するliだけにcssが適用される
というような指定ができれば、nth-child(n)で上から数えて何番目かというのがなくなるので便利になるかと思います。

その方法が以下になるのですが、cssとしては使用不可。残念です。

li:has(> ul)

ですが、jqueryだと逆参照が可能になります。

<script>
$(function(){
$("li").has("ul").css("background","#ff0000");
});
</script>


これならばli内にulをもってる要素のみcssを適用できます。
今はjqueryのみですが、css4が登場するとしたらその時に実装されると思われるので使用できる日が楽しみです。

親カテゴリ内の子カテゴリで分類された投稿をカウント数とカテゴリ名をリスト表示する方法はメジャーなのですが、

カテゴリではなく「現在表示しているカテゴリ内で使われているタグ」をカウントし、リスト表示したかったので作成いたしました。

theme.png

以下がソースコードになります。


<ul>
 <?php
   $cat_id = get_category_by_slug($slug_name);
   $cat_id = $cat_id->cat_ID;

   $connected_posts = get_objects_in_term( $cat_id, 'category' );

   $args = array(
    'tax_query' => array(
    'orderby' => 'count',
    'order' => 'desc',
    'number' => 10
   )
  );
  $connected_tags = wp_get_object_terms( $connected_posts, 'post_tag', $args );
  if ( $connected_tags ) {
    foreach ( $connected_tags as $value ){
    echo '<li><a href="?tag='. $value->term_id .'">'. $value->name .' ('. $value->count .')</a></li>';
   }
  }
 ?>
</ul>

関数「get_category_by_slug」

スラッグからカテゴリーIDを取得します。
$cat_idはカテゴリーIDが入ったグローバル変数になります。


関数「get_objects_in_term」

第1引数に紐づけているカテゴリーID、第2引数にはカテゴリーを指定しています。
変数$connected_postsは指定したカテゴリーIDに属している投稿IDの配列です。

$argsは再度宣言しているget_objects_in_termのオプション引数として指定するための配列になります。
再度宣言しているget_objects_in_termで現在表示しているカテゴリーIDからオプション引数に指定した条件でタグの情報を取得します。

echo部分

抽出条件は「降順にソート、最大10件抽出、見つかったタームの個数を抽出」で表示、
そのカテゴリ内で投稿した内容に登録したタグがカウント数付きでリスト表示されます。


カテゴリーを使用して投稿内容を分けることの方が多いwordpressですが、
タグで話題のジャンル分けがされる場合に役に立つかと思います。

expand_less
Copyright©2011-2018Suffix, Inc.AllRightsReserved.