テーマカスタマイズ

子カテゴリーに属する場合のみ子カテゴリーのナビを展開する方法

2018.08.31

本を読む子供

なんだかややこしいタイトルになってしまいましたが、記事詳細ページのカテゴリーナビゲーションのお話です。該当記事が子カテゴリーに属する場合のみ子カテゴリーのナビゲーションを展開する方法です。

  • 親カテゴリーのリストは常に表示
  • 子カテゴリーに所属している場合のみ子カテゴリーのリストを表示

サンプルコード

なんかこれ系何回も調べてる気がするので、備忘録として・・・・

<ul>
<?php
if ($category->parent) {
  $pid = $category->parent;
}
$categories = get_categories('parent=0');
?>
<?php foreach($categories as $category): ?>
<?php
$cat_id = $category->cat_ID;
$cat_name = $category->cat_name;
$cat_url = home_url('/').$category->category_nicename.'/';
$cat_slug = $category->category_nicename;
$cat_child_list = wp_list_categories(array('child_of' => $cat_id,'echo' => 0));
?>
<li>
<a class="sidebar__catnav" href="<?php echo $cat_url; ?>"><?php echo $cat_name; ?></a>
<?php if ($cat_id == $pid): ?>
<ul class="sidebar__catnav__child">
<?php
wp_list_categories(
array(
'depth'       => -1,
'show_date'   => '',
'date_format' => get_option('date_format'),
'child_of'    => $pid,
'title_li'    => __(''),
'echo'        => 1,
'authors'     => '',
'sort_column' => 'menu_order',
'link_before' => '',
'link_after'  => '',
'current_category'  => $class,
'exclude_tree'=> '' )
);
?>
</ul>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>

親カテゴリーが存在しているか調べる

まずは、記事に親カテゴリーがあるか調べます。それが下記の箇所です。

<?php
if ($category->parent) {
  $pid = $category->parent;
}
?>

親カテゴリーのリストを出力する

続いて親カテゴリーのリストを出力させます。

<ul>
<?php
$categories = get_categories('parent=0');
?>
<?php foreach($categories as $category): ?>
<?php
$cat_id = $category->cat_ID;
$cat_name = $category->cat_name;
$cat_url = home_url('/').$category->category_nicename.'/';
$cat_slug = $category->category_nicename;
$cat_child_list = wp_list_categories(array('child_of' => $cat_id,'echo' => 0));
?>
<li>
<a class="sidebar__catnav" href="<?php echo $cat_url; ?>"><?php echo $cat_name; ?></a>
</li>
<?php endforeach; ?>
</ul>

親カテゴリーがある場合は子カテゴリーを出力

最初に調べた親カテゴリーがある場合は、子カテゴリーを出力します。

<?php if ($cat_id == $pid): ?>
<ul class="sidebar__catnav__child">
<?php
wp_list_categories(
array(
'depth'       => -1,
'show_date'   => '',
'date_format' => get_option('date_format'),
'child_of'    => $pid,
'title_li'    => __(''),
'echo'        => 1,
'authors'     => '',
'sort_column' => 'menu_order',
'link_before' => '',
'link_after'  => '',
'current_category'  => $class,
'exclude_tree'=> '' )
);
?>
</ul>
<?php endif; ?>

最初のサンプルコードが今回やりたかった全体像です。ナビゲーション系は思ったように出力させようと思うとやっぱ一手間必要ですね。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する