カテゴリ一覧から記事を探す

WordPressでカテゴリーページに説明文・子カテゴリへのリンクを表示する方法

WordPressでカテゴリーページに説明文・子カテゴリへのリンクを表示する方法

カテゴリーページに来た時に説明文や子カテゴリーも見えるようにしたい。

親カテゴリに来た時に詳細なカテゴリが分かればユーザも安心できるのでは?

そんな悩みを解決する方法を書いていきます。

多くのWordPress無料テーマではカテゴリーページは殺風景になっています。
このカスタマイズができれば以下の画像のように、何もなかったカテゴリーページに子カテゴリへのリンクが生まれ、ユーザにとって便利に。

説明文と子カテゴリを追加

記事の前半では説明文の追記方法、後半では子カテゴリへのリンクをデザイン含めてカスタマイズ方法を説明していきます。

1.カテゴリーページに説明文を追加する方法

カテゴリーページに説明文を追加する方法は簡単です。

カテゴリ設定ページから、既にあるカテゴリーに対して編集をクリックすれば以下のページに飛びます。

カテゴリーに説明文を追加する方法

ここの説明の部分に書くだけ。

それと、外観→テーマの編集により、以下のコードをarchive.phpなどのアーカイブを出力している場所に入れ込めばOKです。

入れ込ませる場所は、○○一覧とかの、カテゴリーページのタイトルが出力される部分のすぐ下です。

archive.php
<!-- カテゴリの説明 -->
<?php if(!is_paged()):?>
<?php if(category_description()):?>
<?php echo category_description(); ?>
<?php endif;?>
<?php endif;?>
<!-- カテゴリの説明終わり -->

もし1ページ目にカテゴリーの説明文があるならそれを出力する、という意味のコードになります。

カテゴリーページの2ページ目以降にも説明文があったらうざったいので、2ページ目以降は表示させないようにしています。

ウィジェットのカテゴリーのaタグにtitle属性が入る

カテゴリの説明文を書くと、カテゴリへのリンク(aタグ)にtitle属性が入ってしまいます。

カテゴリへのリンクのHTMLが<a href=”カテゴリーページのURL” title=”長々と説明文が入る”>となってしまうということです。

今まで無かったものが入ってくるので、SEO的に大丈夫かどうか、不安です。

以下のコードをfunctions.phpに追記(一番下にでもコピペでOKです)することで、防ぐことができます。

functions.php
function my_widget_categories_args( $cat_args ) {

    $cat_args['use_desc_for_title'] = 0;

    return $cat_args;
}
add_filter( 'widget_categories_args', 'my_widget_categories_args' );

このコードは【WordPress】カテゴリーページに説明文を表示させる方法とカテゴリータイトルタグの編集を参考にしています。

2.カテゴリーページに子カテゴリへのリンクを追加する

次に、カテゴリーページに子カテゴリへのリンクを追加する方法を説明していきます。

これは、例えば親カテゴリ:ブログ、子カテゴリ:ブログ運営記録、ブログデザイン、アクセスアップ・・・
のような場合に、ブログカテゴリページに行くと一番上に子カテゴリページへのリンクも出てくるという感じです。

コードを外観→テーマの編集により、以下のコードをarchive.phpなどのアーカイブを出力している場所に入れ込めばOK。

入れ込ませる場所は、○○一覧とかの、カテゴリーページのタイトルが出力される部分のすぐ下で、説明を入れた部分と同じですね。

分かりにくいので、説明文+子カテゴリへのリンクをどちらも挿入するためのコードを書いておきます。

archive.php
<?php
$thisCat = get_category($cat); //現在表示しているカテゴリー情報を取得

$args = array(
'parent' => $cat //現在のカテゴリーの直近子カテゴリーを取得
);
$catChildren = get_categories( $args ); //上記の条件でカテゴリー情報を取得
?>
<!-- カテゴリの説明 -->
<?php if(!is_paged()):?>
<?php if(category_description()):?>
<?php echo category_description(); ?>
<?php endif;?>
<!-- カテゴリの説明終わり -->
<?php if($catChildren){ //子カテゴリーがある場合、子カテゴリーを表示する
echo '<div class="category-child-surrounding"><p class="category-child-surrounding-title">詳細のカテゴリ</p><ul>';
foreach($catChildren as $catChild){
echo '<li><a href="'. get_category_link($catChild->term_id). '">'. $catChild -> name. '</a></li>';
}
echo '</ul></div>';
} ?>
<?php endif;?>

同様に、カテゴリーページの1ページ目なら説明文を出力し、子カテゴリーがある場合は子カテゴリーへのリンクを出力するというコードです。

これも2ページ目以降は説明文も子カテゴリへのリンクも表示しないようにしています。

子カテゴリを囲う枠のCSS

子カテゴリを囲っている枠をいい感じにしましょう。

以下のCSSをstyle.cssにでも追記しておけばOKです。

CSS
.category-child-surrounding {
  background: #fffbf4;
  border: 2px solid #ee7917;
  margin: 0px 0px 30px 0px;
  padding-bottom: 10px;
  letter-spacing: .3px;
  border-radius: 4px;
}

.category-child-surrounding ul {
  list-style: none;
  margin-left: 10px;
  margin-top: 40px;
  margin-bottom: 0px;
  padding-left: 0;
}

.category-child-surrounding ul li {
  margin: .2em;
}

.category-child-surrounding ul li:before {
  font-family: FontAwesome;
  border-radius: 50%;
  margin-right: .3em;
  padding: 2px;
  content: "\f00c";
  color: #fff;
  background: #ee7917;
}

.category-child-surrounding a {
  text-decoration: none;
}

.category-child-surrounding a:hover {
  text-decoration: underline;
}

.category-child-surrounding-title {
  position: absolute;
  margin-top: 0px;
  background: #ee7917;
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 2px 0;
  padding: 4px 6px;
  font-size: 14px;
}

FontAwesomeを使用していますので、(たぶん既にできていると思いますが)表示がおかしければ以下のコードを<head>~</head>の中に追記すればいいです。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

ここまでできれば完成です!

3.まとめ

カテゴリーページに説明文および子カテゴリへのリンクを挿入する方法について説明しました。

編集する場所が多数ありますし、function.phpをいじる部分もありますので、バックアップを取りつつ、慎重に進めるようにしてください!