Top

メモ書き

記事一覧ページにはよく使うこちらをメモ。

記事が存在するカテゴリーのみリンク付きで一覧を表示させる方法

<?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をあてておけば、選択されたカテゴリーのみデザインを変更できます。