【WordPress】特定のカテゴリー内の子カテゴリーをリンク付きで表示する方法！

最大52%OFF！

今、ブログを始めようとしている方、

今なら、ConoHaサーバーの「WINGパックプラン」が最大55%OFF！

「1,452円/月」が「643 円/月」の「低コスト」で始められるチャンスとなっております！

お申し込みはこちらから！

【国内最速No.1】高性能レンタルサーバーConoHa WING

ConoHa WINGは国内最速の高性能レンタルサーバーサービスで
初期費用無料、最低利用期間無しでご利用いただけます！

(この記事は2025年05月22日に投稿されました。)

WordPressで特定のカテゴリー内にある子カテゴリーをリンク付きで表示することでユーザーとって親切で、魅力的なページへと変身します。

例えば、ブログの記事数が多くなってきた時、関連性の高い子カテゴリーを整理して表示できれば、ユーザーはよりスムーズに目的の情報へとたどり着くことが可能になります。

つまり、ユーザーの満足度が高まり、クローラーが循環しやすくなるため、SEO対策としても有効です。

こちらの記事で紹介している方法は、コードを直接修正する方法にはなりますが、プラグインを使用して特定のカテゴリー内にある子カテゴリーをリンク付きで表示する方法についても補足として記載しています、

この記事を読めば、ユーザーが求める情報へ最短距離でアクセスできるようになり、サイト全体の価値を高めることができるでしょう。

今回はWordPressで特定のカテゴリー内の子カテゴリーをリンク付きで表示する方法について紹介していきます。

この記事はこんな方におすすめ

特定のカテゴリー内の子カテゴリーをリンク付きで表示するメリット

WordPressで特定のカテゴリー内の子カテゴリーをリンク付きで表示すると、下記のようなメリットがあります。

ユーザー使用率が向上する
SEO対策になる

それぞれのメリットについて解説します。

ユーザビリティーが向上する

まず、1つ目はユーザビリティーが向上することです。

子カテゴリーを表示することで、そのページに関連するカテゴリーページへと遷移できるため、目的のコンテンツへのスムーズな導線を引くことができます。

また、サイト全体の構造が分かりやすくなるため、サイト内の循環経路が完成し、回遊率の向上にも繋がります。

回遊率とは「ユーザーがサイト内の複数のページを閲覧する割合を示す指標」であり、回遊率が高いほどユーザーがサイト内のコンテンツに興味を持ち、積極的に探索しているということになります。

SEO対策になる

2つ目はSEO対策になるということです。

子カテゴリーを表示することで、サイトの内部リンクの強化に繋がるため、クローラーの巡回を促進することができます。

また、親子カテゴリーに属している記事はとても関連している内容が書かれているため、関連性の高いコンテンツ間の連携強化にもつながります。

特定のカテゴリー内の子カテゴリーをリンク付きで表示するには

特定のカテゴリー内の子カテゴリーをリンク付きで表示するには下記の2つの方法があります。

get_categories()を使用する
wp_list_categories()を使用する

2つの方法についてそれぞれ解説していきます。

また、今回使用する親子カテゴリーは下記の画像のように「テスト」内に「テスト1」、「テスト2」、「テスト3」が含まれているとします。

カテゴリー一覧画面

get_categories()を使用する

まず、1つ目はget_categories()を使用する方法です。

get_categories()とはWordPres内で登録されている全てのカテゴリー情報を取得することができる関数になります。

そのため、get_categories()にパラメータを指定することで対象のカテゴリーと親子関係になっているか確認し、親子関係であるカテゴリー情報のみを取得することで、子カテゴリーをリンク付きで表示することが可能になります。

<?php get_header(); ?>
<body>
    <main id="main_content">
    <h1 class="entry-title">get_categories()で子カテゴリーのリンクを表示</h1>
    <!-- このコードを追記　START -->
     <?php
     $cat_id = get_query_var('cat');
     ?>
     <h2 class='h2-title'><span><?php echo single_cat_title(); ?></span>の一覧記事</h2>
     <?php 
     $args = array('orderby' => 'name','order' => 'ASC','hide_empty' => 1);
     $categories = get_categories($args); 
     ?>
     <div class="childCat_list">
       <ul>
     <?php
     foreach($categories as $category):
      if(($category->parent) == $cat_id):
      ?>
      <li>
        <a href="<?php echo get_category_link($category->term_id); ?>">
          <span><?php echo $category->name; ?></span> : 
          <span><?php echo $category->count; ?></span>件
        </a>
      </li>
      <?php endif; ?>
     <?php endforeach; ?>  
        </ul>
      </div>   
    <!-- このコードを追記　END -->
     .
     .
     .
    </main>
</body>
<?php get_footer(); ?>

<?php get_header(); ?>

<body>

<h1 class="entry-title">get_categories()で子カテゴリーのリンクを表示</h1>

<?php

$cat_id = get_query_var('cat');

<h2 class='h2-title'><span><?php echo single_cat_title(); ?></span>の一覧記事</h2>

<?php

$args = array('orderby' => 'name','order' => 'ASC','hide_empty' => 1);

$categories = get_categories($args);

<ul>

<?php

foreach($categories as $category):

if(($category->parent) == $cat_id):

<li>

<span><?php echo $category->name; ?></span> :

<span><?php echo $category->count; ?></span>件

</a>

</li>

<?php endif; ?>

<?php endforeach; ?>

</ul>

</div>

</main>

</body>

<?php get_footer(); ?>

● style.css

.h2-title {
　　　text-align:center;
}
.childCat_list > ul {
　　　text-align: center;
　　　padding: 0;
}
.childCat_list > ul > li {
　　　display:inline-block;
}

.h2-title {

　　　text-align:center;

}

.childCat_list > ul {

　　　text-align: center;

　　　padding: 0;

}

.childCat_list > ul > li {

　　　display:inline-block;

}

実行結果

上記のコードについて解説します。

get_query_var()にて表示された親カテゴリーページのIDを取得
get_categories()にパラメータを指定し、親カテゴリーのIDをもっているすべてのカテゴリーの情報を取得
1の処理で取得したIDと2の処理で取得した親カテゴリーのIDが同じであるかどうかを判別する
同じでないなら何もしないで、同じであるならカテゴリー名と記事数を出力
get_category_link()に3で取得したカテゴリー情報からIDを指定してリンクを作成

そのため、get_categories()で特定のカテゴリー内にある子カテゴリーをリンク付きで表示されています。

また、カテゴリー名だけでなく、各カテゴリーの記事数も表示され、クリックすると各カテゴリーページへ遷移しています。

こちらは方法だと全てのカテゴリーに対して処理を行っています。
そのため、内部的な処理として使用する場合にはこちらの方法が有効かもです。

wp_list_categories()を使用する

2つ目の方法はwp_list_categories()を使用する方法です。

そもそも、wp_list_categories()とは、カテゴリーの一覧を生成し、HTMLのリスト形式で表示することができる関数になります。

そのため、wp_list_categories()にパラメータを指定して使用することで、特定のカテゴリー内にある子カテゴリーをリンク付きで表示することが可能になります。

● category.php

<?php get_header(); ?>
<body>
    <main id="main_content">
    <h1 class="entry-title">get_categories()で子カテゴリーのリンクを表示</h1>
    <!-- このコードを追記　START -->
     <?php
       $cat_id = get_query_var('cat');
      ?>
     <h2><span><?php echo single_cat_title(); ?></span>の一覧記事</h2>
     <?php
     $arg  = 'show_option_none=&echo=0&show_count=1&use_desc_for_title=0&depth=1&title_li=&child_of='.$cat_id;
     $childCat = wp_list_categories($arg);
     if (!empty($childCat)): ?>
     <div class="childCat_list">
        <ul><?php echo $childCat; ?></ul>
     </div>
     <?php endif; ?>   
    <!-- このコードを追記　END -->
     .
     .
     .
    </main>
</body>
<?php get_footer(); ?>

<?php get_header(); ?>

<body>

<h1 class="entry-title">get_categories()で子カテゴリーのリンクを表示</h1>

<?php

$cat_id = get_query_var('cat');

<h2><span><?php echo single_cat_title(); ?></span>の一覧記事</h2>

<?php

$arg = 'show_option_none=&echo=0&show_count=1&use_desc_for_title=0&depth=1&title_li=&child_of='.$cat_id;

$childCat = wp_list_categories($arg);

if (!empty($childCat)): ?>

</div>

<?php endif; ?>

</main>

</body>

<?php get_footer(); ?>

● style.css

.h2-title {
　　　text-align:center;
}
.childCat_list > ul {
　　　text-align: center;
　　　padding: 0;
}
.cat-item {
　　　display:inline-block;
}

.h2-title {

　　　text-align:center;

}

.childCat_list > ul {

　　　text-align: center;

　　　padding: 0;

}

.cat-item {

　　　display:inline-block;

}

実行結果

上記のコードについて解説します。

get_query_var()にて表示された親カテゴリーページのIDを取得
wp_list_categories()にパラメータを指定し、対象のカテゴリー内の子カテゴリーの情報を取得
子カテゴリー情報を持っているかどうかを判別する
持っていないならなにもしないで、持っているならHTML要素として画面へ出力する

そのため、wp_list_categories()で特定のカテゴリー内にある子カテゴリーをリンク付きで表示しています。

こちらも、カテゴリー名だけでなく、各カテゴリーの記事数も表示されています。

こちらは方法はWordPressで登録しているカテゴリーの関係性を維持したままカテゴリーを表示しています。
そのため、サイドバーなど、手軽にカテゴリーリストをHTML出力したい場合に有効かもです。

WordPressで特定のカテゴリー内の子カテゴリーをリンク付きで表示する実際のケース

特定のカテゴリー内にある子カテゴリーをリンク付きで表示する実際のケースを紹介します。

ここでご紹介するのは、下記の2ケースのとなります。

対象のカテゴリーページ一覧内に子カテゴリー名のボタンを表示する
サイドバーに対象記事と関連するカテゴリーの投稿記事を表示する

また、今回使用する親子カテゴリーも下記の画像のようになります。

カテゴリー一覧画面

対象のカテゴリーページ一覧内に子カテゴリー名のボタンを表示する

子カテゴリーのリンク付き表示は対象のカテゴリーページ一覧内に子カテゴリー名のボタンを表示する場合に使用できます。

対象のカテゴリーページ一覧内に子カテゴリー名のボタンを表示することで、自分が見たい記事のカテゴリーへ移動するため、滞在時間やPV数を上げることが可能になります。

● category.php

<?php get_header(); ?>
<body>
    <main id="main_content">
     <?php
       $cat_id = get_query_var('cat');
      ?>
     <h2 class='h2-title'><span><?php echo single_cat_title(); ?></span>の一覧記事</h2>
     <?php 
     $args = array('orderby' => 'name','order' => 'ASC','hide_empty' => 1);
     $categories = get_categories($args); 
     ?>
     <div class="childCat_list">
       <ul>
        <?php
        foreach($categories as $category):
          if(($category->parent) == $cat_id):
        ?>
        <li>
          <a href="<?php echo get_category_link($category->term_id); ?>" class= "linkBtn">
            <span><?php echo $category->name; ?></span> : 
            <span><?php echo $category->count; ?></span>件
          </a>
        </li>
          <?php endif; ?>
        <?php endforeach; ?>  
      </ul>
    </div>   
     .
     .
     .
    </main>
</body>
<?php get_footer(); ?>

<?php get_header(); ?>

<body>

<?php

$cat_id = get_query_var('cat');

<h2 class='h2-title'><span><?php echo single_cat_title(); ?></span>の一覧記事</h2>

<?php

$args = array('orderby' => 'name','order' => 'ASC','hide_empty' => 1);

$categories = get_categories($args);

<ul>

<?php

foreach($categories as $category):

if(($category->parent) == $cat_id):

<li>

<a href="<?php echo get_category_link($category->term_id); ?>" class= "linkBtn">

<span><?php echo $category->name; ?></span> :

<span><?php echo $category->count; ?></span>件

</a>

</li>

<?php endif; ?>

<?php endforeach; ?>

</ul>

</div>

</main>

</body>

<?php get_footer(); ?>

● style.css

.h2-title {
	text-align:center;
}
.childCat_list > ul {
	text-align: center;
	padding: 0;
}
.childCat_list > ul > li {
	display:inline-block;
}	
.linkBtn {
  background-color: #fff;
  border: double 6px #3cb371;
  color: #3cb371;
  border-radius: 10px;
  padding: 10px;
  text-decoration: none;
  font-size: 1em;
}
.linkBtn:hover {
  background-color: #3cb371;
  border: double 6px #fff;
  color: #fff;
}

.h2-title {

text-align:center;

}

.childCat_list > ul {

text-align: center;

padding: 0;

}

.childCat_list > ul > li {

display:inline-block;

}

.linkBtn {

background-color: #fff;

border: double 6px #3cb371;

color: #3cb371;

border-radius: 10px;

padding: 10px;

text-decoration: none;

font-size: 1em;

}

.linkBtn:hover {

background-color: #3cb371;

border: double 6px #fff;

color: #fff;

}

実行結果

対象のカテゴリーページ一覧内に子カテゴリー名のボタンを表示しています。

そのため、子カテゴリー名のボタンをクリックすると、子カテゴリーページの一覧画面が表示されます。

サイドバーに対象記事と関連するカテゴリーの投稿記事を表示する

また、サイドバーに対象記事と関連するカテゴリーの投稿記事を表示する場合にも使用できます。

サイドバーに対象記事と関連するカテゴリーの投稿記事を表示することで、カテゴリー外の関連しそうな記事を続けて読んでくれる可能性があるため、滞在時間をあげることが可能になります。

● sidebar.php

<div id="sidebar1">
<aside>
    <div id="sidebar">
        <?php if (is_single): ?>
        <p class="block-head">関連カテゴリーの記事</p>
        <div class="block">
            <div class="block-group">
        <?php
            $the_cat = get_the_category();
            foreach ($the_cat as $category):
                $the_cat_id = $category->cat_ID;
                $the_cat_parent = $category->parent;
                if (!empty($the_cat_parent)):
                    $args = array('orderby' => 'name','order' => 'ASC','hide_empty' => 1,'exclude' => $the_cat_id);
                    $categories = get_categories($args);
                    foreach ($categories as $wpcategory):
                        if ($the_cat_parent == $wpcategory->parent): ?>
                <h2 class="side-block-head"><?php echo $wpcategory->name?></h2>
                <ul class="block-list">
                <?php $cat_posts = get_posts(array(
                    'post_type' => 'post', 
                    'category' => $wpcategory->cat_ID, 
                    'posts_per_page' => 3, 
                    'orderby' => 'date'
                ));
                global $post;
                if($cat_posts):
                    foreach($cat_posts as $post):
                        setup_postdata($post); ?>
                    <li>
                        <a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?><span class="side-post-title"><?php the_title(); ?></span></a></li></a>
                    </li>
                    <?php endforeach; endif; 
                    wp_reset_postdata(); ?>
                </ul>
                <?php endif; endforeach; ?>
            <?php endif; endforeach; ?>
            </div>
        </div>
        <?php endif; ?>
    </div>
    <?php endif;?>
</aside>
</div>

<aside>

<?php if (is_single): ?>

<p class="block-head">関連カテゴリーの記事</p>

<?php

$the_cat = get_the_category();

foreach ($the_cat as $category):

$the_cat_id = $category->cat_ID;

$the_cat_parent = $category->parent;

if (!empty($the_cat_parent)):

$args = array('orderby' => 'name','order' => 'ASC','hide_empty' => 1,'exclude' => $the_cat_id);

$categories = get_categories($args);

foreach ($categories as $wpcategory):

if ($the_cat_parent == $wpcategory->parent): ?>

<?php $cat_posts = get_posts(array(

'post_type' => 'post',

'category' => $wpcategory->cat_ID,

'posts_per_page' => 3,

'orderby' => 'date'

));

global $post;

if($cat_posts):

foreach($cat_posts as $post):

setup_postdata($post); ?>

<li>

</li>

<?php endforeach; endif;

wp_reset_postdata(); ?>

</ul>

<?php endif; endforeach; ?>

</div>

<?php endif; ?>

</div>

<?php endif;?>

</aside>

</div>

● style.css

.side-head {	
	color: #ffffff;
    padding: 7px 13px;
    font-size: 1.2em;
    font-weight: bold;
    background: #6bb6ff;
    margin: 0;
    border-bottom: 2px solid #b3b8dc;
}
.block-group {
	box-sizing: border-box;
}
.sidebar .block-group h2 {
    margin-bottom: 0;
    padding: 7px 13px;
    font-size: 1.2em;
}
h2.side-block-head {
    margin: 0;
	color: #655d5d;
    background-color: #c8e4ff;
}
ul.block-list {
    margin: 0;
    background-color: #fff;
}
img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
    width: 32%;
}
.block-list > li {
    border-bottom: 1.5px dashed #e5e0e0
}
.block-list .side-post-title {
	margin-left: 8px;
}

.side-head {

color: #ffffff;

padding: 7px 13px;

font-size: 1.2em;

font-weight: bold;

background: #6bb6ff;

margin: 0;

border-bottom: 2px solid #b3b8dc;

}

.block-group {

box-sizing: border-box;

}

.sidebar .block-group h2 {

margin-bottom: 0;

padding: 7px 13px;

font-size: 1.2em;

}

h2.side-block-head {

margin: 0;

color: #655d5d;

background-color: #c8e4ff;

}

ul.block-list {

margin: 0;

background-color: #fff;

}

img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image {

width: 32%;

}

.block-list > li {

border-bottom: 1.5px dashed #e5e0e0

}

.block-list .side-post-title {

margin-left: 8px;

}

実行結果

サイドバーに対象記事と関連するカテゴリーの投稿記事を表示しています。

そのため、「テスト1」の投稿記事には関連するカテゴリーの一覧として「テスト2」と「テスト3」が、「テスト3」の投稿記事には「テスト1」と「テスト2」が関連するカテゴリーの一覧としてサイドバーに表示されています。

まとめ

⚫︎ WordPressで特定のカテゴリー内の子カテゴリーをリンク付きで表示すると、下記のようなメリットがある。
・ユーザビリティーが向上する
・SEO対策になる

⚫︎ 特定のカテゴリー内にある子カテゴリーをリンク付きで表示するには下記の2つの方法がある。
・get_categories()を使用する
→WordPressに登録している全てのカテゴリーに対して処理を行う方法
・wp_list_categories()を使用する
→特定のカテゴリーと親子関係になっているカテゴリーのみに対して処理を行う方法

⚫︎ 特定のカテゴリー内にある子カテゴリーをリンク付きで表示する際には下記のようなケースで使用できる。
・対象カテゴリーのページ内に子カテゴリーとして表示する
・サイドバーで関連記事のカテゴリー一覧として表示する