SHU BLOG

BLOG NEWS ブログ

TITLE

【WordPress】カテゴリーの出力方法について解説

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【WordPress】カテゴリーの出力方法についての解説になります!

こんな方に読んでほしい

  • WordPressを学び始めた方へ
  • WordPressの記事に関する内容について解説していきます。
  • 今回はWordPressの「カテゴリー」の出力方法について解説しております。

カテゴリーについて

投稿(記事)にはカテゴリーを紐づける事が可能になります。
例として記事毎に「HTML」、「CSS」といったカテゴリーを設定することで、その設定したカテゴリーのみの記事が表示します。

the_categoryの使い方について

カテゴリーを出力させる際には、基本the_categoryを使います。
the_categoryを指定した際にはリンク有りで表示します。
以下のようになります。

<?php the_category(); ?>

ループと組み合わせた使用する事が多いです。
以下のようになります。

<ul>
	<?php
		$args = array(
		'post_type' => 'post',
		'posts_per_page' => 9,
	); ?>
	<?php $wp_query = new WP_Query( $args ); ?>
	<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
	<li>
		<?php the_category(); ?>
		<h2>タイトルが入ります</h2>
		<p>本文が入ります。</p>
		<!--以下省略-->
	</li>
	<?php endwhile; ?>
	<?php wp_reset_postdata(); ?>
</ul>

ul li形式で出力されます、CSSはご自身のサイトに合わせてください。
下記のようになれば完了になります。

リンク無しでカテゴリーを出力させる

上記では、リンク有りでの表示方法でしたが、リンク無しでの表示も可能になります。
以下のようになります。

<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>

コード自体をget_the_category()に変更してください。
下記のようになれば完了になります。

クラス名を付けてリンク有りのカテゴリーを出力させる

ホームページ上でカテゴリー毎に色を変える事があります。
そのような時は以下のようになります、今回はリンク有りの状態になります。

<?php 
	$cat = get_the_category();
	$cat = $cat[0];
	?>
<div class="<?php echo $cat->category_nicename; ?>"><?php the_category(' '); ?></div>

div class="〇〇"の形式になります、カテゴリーを登録した際の「スラッグ名」が出力されます。
※スラッグ名は通常はすべて半角小文字で、英数字とハイフンのみを使用してください。

例:イベント情報の場合、HTML上では以下のように出力されます。

<div class="event"><a href="#">イベント情報</a></div>

クラス名を付けてリンク無しのカテゴリーを出力させる

ホームページ上でカテゴリー毎に色を変える事があります。
そのような時は以下のようになります、今回はリンク無しの状態になります。

<?php $cat = get_the_category(); $cat = $cat[0]; {
  echo '<div class="'. $cat->category_nicename .'">'; 
 } ?>
<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></div>

例:イベント情報の場合、HTML上では以下のように出力されます。

<div class="event">イベント情報</div>

まとめ

今回はこれで以上です。

POINT
  • WordPressカテゴリーの表示方法について解説しました。
  • カテゴリーリンク有りの表示をする際にはthe_category()を指定します。
  • カテゴリーリンク無しの表示をする際にはget_the_category()を指定します。
  • カテゴリーにクラス名を付ける際には、「スラッグ名」が反映するので日本語は避けましょう。
  • ※スラッグ名は通常はすべて半角小文字で、英数字とハイフンのみを使用してください。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top