記事一覧ページにはよく使うこちらをメモ。
記事が存在するカテゴリーのみリンク付きで一覧を表示させる方法
<?php
$categories = get_terms('faq-cat', 'orderby=id&order=ASC&parent=0&hide_empty=1');
if (!empty($categories)):
?>
<ul class="catBox__list">
<li>
<a href="<?php echo esc_url( home_url('/faq') )?>" class="is-choose">すべて</a>
</li>
<?php foreach($categories as $category) : ?>
<li>
<a href="<?php echo esc_url( home_url('/faq-cat/') ).$category->slug ?>"><?php echo $category->name; ?></a>
</li>
<?php endforeach; ?>
</ul>
<?php endif ?>
7行目に.is-chooseが入っています。
これは他のカテゴリーページに移動した時、現在表示しているページのカテゴリーのみデザインを変更したい時に使えます。
archive-〇〇.phpのときは「すべて」が選択されていることになるので、上記コードになります。
選択したカテゴリーのみデザインを変更する方法
taxonomy-〇〇-cat.phpの方にはこちらを。
<?php
$categories = get_terms('faq-cat', 'orderby=id&order=ASC&parent=0&hide_empty=1');
if (!empty($categories)):
?>
<ul class="catBox__list">
<li>
<a href="<?php echo esc_url( home_url('/faq') )?>">すべて</a>
</li>
<?php foreach($categories as $category) : ?>
<li>
<a href="<?php echo esc_url( home_url('/faq-cat/') ).$category->slug ?>" class="<?php if(strpos($category->slug, $term_slug) !== false){ echo 'is-choose'; } ?>"><?php echo $category->name; ?></a>
</li>
<?php endforeach; ?>
</ul>
<?php endif ?>
変更点は7行目と11行目。
現在のカテゴリーページと、指定したカテゴリーのスラッグが一致しているかどうかを判定し、一致している場合は is-choose
というクラスを付与しています。
.is-choose
にcssをあてておけば、選択されたカテゴリーのみデザインを変更できます。