- HOME
- > BLOG CATEGORY
- 【WordPress】カテゴリーの出力方法について解説
- お知らせ
- NEW 2024.05.16 【CSS】グラデーション色々なパターンを解説!
- お知らせ
- NEW 2024.05.15 【WordPress】親カテゴリーの子カテゴリー一覧を表示する方法
- お知らせ
- 2024.05.09 【レスポンシブデザイン】アニメーションが動かない原因
こんな方に読んでほしい
[記事の内容]
投稿(記事)にはカテゴリーを紐づける事が可能になります。
例として記事毎に「HTML」、「CSS」といったカテゴリーを設定することで、その設定したカテゴリーのみの記事が表示します。
カテゴリーを出力させる際には、基本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>
今回はこれで以上です。
the_category()
を指定します。get_the_category()
を指定します。2024.05.15
2024.05.14
2024.05.09
2024.05.09
2024.05.15
2024.05.14
2024.05.09
2024.05.09
2024.05.09
2024.05.09
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2023 shu-naka-blog