サイドバーや投稿一覧にあるリンク付きのカテゴリ表示。便利ですよね。
ワンクリックで目的のジャンルを見に行かれるので、サイトの種類問わずよく見かけます。
以下ではリンクなしのカテゴリラベルを設置しましたが、本記事ではリンクを付けて出力!
表示数に応じて、1つだけカテゴリを設置、2つ以上カテゴリを設置の内容をご覧ください。
目次
はじめに
表示するカテゴリが1つでも、2つ以上でも共通してカテゴリ情報の取得が必要です。
カテゴリ情報を取得
最初にget_the_category()
で全カテゴリ情報を取得。内容は「配列」で返ってきます。
取得した情報を、変数$cat
に入れて保存。
<?php
$cat = get_the_category();
?>
カテゴリを複数表示するなら、categoriesの省略形$cats
にすると分かりやすいですよ!
1つだけカテゴリを設置
今回はサイドバーや投稿一覧に設置することを想定して、以下ループ内に書いていきます。
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<!-- 繰り返し処理する内容 -->
<?php endwhile; ?>
<?php else: ?>
<!-- 取得できない場合に処理する内容 -->
<?php endif; ?>
まずは先に完成形から。詳細はこれより後の見出しで解説するので、別途ご確認ください。
<?php
$cat = get_the_category();
$cat_id = $cat[0] -> cat_ID;
$cat_name = $cat[0] -> name;
?>
<span>
<a href="<?php echo esc_url(get_category_link($cat_id)); ?>">
<?php echo esc_html($cat_name); ?>
</a>
</span>
カテゴリ名とIDを取得
$cat
で取得したカテゴリ情報から、カテゴリ名とIDを取得していきます。
それぞれ$cat
に配列の1番目[0]
を指定し、name
、cat_ID
を取り出します。
<?php
$cat = get_the_category();
$cat_id = $cat[0] -> cat_ID; // 追加
$cat_name = $cat[0] -> name; // 追加
?>
取得したものは、カテゴリ名なら$cat_name
に、IDなら$cat_id
に代入すればOK。
get_category_linkで表示
リンク付きで表示するので、<a>
タグのhref
属性にコードを書き加えます。
先ほど取得した$cat_id
を、get_category_link()
に入れてカテゴリリンクを出力。
<?php
$cat = get_the_category();
$cat_id = $cat[0] -> cat_ID;
$cat_name = $cat[0] -> name;
?>
<a href="<?php echo esc_url(get_category_link($cat_id)); ?>"></a><!-- 追加 -->
このとき<a>
タグで$cat_name
を囲むことで、リンク付きのカテゴリ名を表示します。
<?php
$cat = get_the_category();
$cat_id = $cat[0] -> cat_ID;
$cat_name = $cat[0] -> name;
?>
<a href="<?php echo esc_url(get_category_link($cat_id)); ?>">
<?php echo esc_html($cat_name); ?><!-- 追加 -->
</a>
最後に任意で、CSSを適用しやすいよう<span>
などで囲んでパーツ化しておきます。
<?php
$cat = get_the_category();
$cat_id = $cat[0] -> cat_ID;
$cat_name = $cat[0] -> name;
?>
<span>
<a href="<?php echo esc_url(get_category_link($cat_id)); ?>">
<?php echo esc_html($cat_name); ?>
</a>
</span>
2つ以上カテゴリを設置
今回はサイドバーや投稿一覧に設置することを想定して、以下ループ内に書いていきます。
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<!-- 繰り返し処理する内容 -->
<?php endwhile; ?>
<?php else: ?>
<!-- 取得できない場合に処理する内容 -->
<?php endif; ?>
まずは先に完成形から。詳細はこれより後の見出しで解説するので、別途ご確認ください。
<ul>
<?php
$cats = get_the_category();
$cats_id = '';
$cats_name = '';
foreach ($cats as $cat) :
$cats_id = $cat -> cat_ID;
$cats_name = $cat -> name;
?>
<li>
<span>
<a href="<?php echo esc_url(get_category_link($cats_id)); ?>">
<?php echo esc_html($cats_name); ?>
</a>
</span>
</li>
<?php endforeach; ?>
</ul>
カテゴリ名とIDを取得
$cats
で取得したカテゴリ情報から、カテゴリ名とIDを取得していきます。
1つだけ設置する場合と違い、カテゴリを繰り返し入れられるように空っぽの変数を用意。
<?php
$cats = get_the_category();
$cats_id = ''; // 追加
$cats_name = ''; // 追加
?>
foreach
のカッコには$cats
の情報を1つずつ$cat
で取り出す処理を、コロンの後ろには処理内容を記述します。
今回はカテゴリの数だけカテゴリ名とIDが必要なので、$cat
からcat_ID
とname
を取得。
<?php
$cats = get_the_category();
$cats_id = '';
$cats_name = '';
foreach ($cats as $cat) : // 追加
$cats_id = $cat -> cat_ID; // 追加
$cats_name = $cat -> name; // 追加
?>
<?php endforeach; ?> // 追加
最後にendforeach
を追記して、foreach
の処理を終えます。終了宣言を忘れずに!
get_category_linkで表示
リンク付きで表示するので、<a>
タグのhref
属性にコードを入れていきます。
カテゴリリンクを取得するget_category_link()
に、必須パラメータ$cats_id
を記述。
<?php
$cats = get_the_category();
$cats_id = '';
$cats_name = '';
foreach ($cats as $cat) :
$cats_id = $cat -> cat_ID;
$cats_name = $cat -> name;
?>
<a href="<?php echo esc_url(get_category_link($cats_id)); ?>"></a><!-- 追加 -->
<?php endforeach; ?>
このままではリンクが押せないので、$cats_name
をecho
してカテゴリ名を表示します。
<?php
$cats = get_the_category();
$cats_id = '';
$cats_name = '';
foreach ($cats as $cat) :
$cats_id = $cat -> cat_ID;
$cats_name = $cat -> name;
?>
<a href="<?php echo esc_url(get_category_link($cats_id)); ?>">
<?php echo esc_html($cats_name); ?><!-- 追加 -->
</a>
<?php endforeach; ?>
最後に任意で、CSSを適用しやすいよう<span>
などで囲んでパーツ化しておきます。
<ul>
<?php
$cats = get_the_category();
$cats_id = '';
$cats_name = '';
foreach ($cats as $cat) :
$cats_id = $cat -> cat_ID;
$cats_name = $cat -> name;
?>
<li>
<span>
<a href="<?php echo esc_url(get_category_link($cats_id)); ?>">
<?php echo esc_html($cats_name); ?>
</a>
</span>
</li>
<?php endforeach; ?>
</ul>
おわりに
紹介した方法ならHTMLの変更が簡単なので、リンクをアレンジしたいときは特におすすめ。
とにかく表示できればいい、カスタマイズの予定がないということであれば、以下方法でもリンク付きのカテゴリを表示できます。
<?php echo get_the_category_list(); ?>
<?php echo the_category(); ?>
出力されたコードを見比べて、どの関数が自分のケースに適しているか確認してみてください。