読者の悩み
- カテゴリーページに説明文を入れたい
- カテゴリーページに、子カテゴリへのリンクを表示させたい
こんな悩みに答える記事になっています。
親カテゴリに来た時に詳細なカテゴリが分かればユーザも安心できるのでは？
そんな悩みを解決する方法を書いていきます。
多くのWordPressテーマではカテゴリーページは殺風景になっています。
このカスタマイズができれば以下の画像のように、何もなかったカテゴリーページに子カテゴリへのリンクが生まれ、ユーザにとって便利に。
記事の前半では説明文の追記方法、後半では子カテゴリへのリンクをデザイン含めてカスタマイズ方法を説明していきます。
1.WordPressのカテゴリーページに説明文を追加する方法
カテゴリーページに説明文を追加する方法は簡単です。
カテゴリ設定ページから、既にあるカテゴリーに対して編集をクリックすれば以下のページに飛びます。
ここの説明の部分に書くだけ。
それと、外観→テーマの編集により、以下のコードをarchive.phpなどのアーカイブを出力している場所に入れ込めばOKです。
入れ込ませる場所は、○○一覧とかの、カテゴリーページのタイトルが出力される部分のすぐ下です。
<!-- カテゴリの説明 --> <?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です)することで、防ぐことができます。
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.WordPressのカテゴリーページに子カテゴリへのリンクを追加
次に、カテゴリーページに子カテゴリへのリンクを追加する方法を説明していきます。
これは、例えば親カテゴリ:ブログ、子カテゴリ:ブログ運営記録、ブログデザイン、アクセスアップ・・・
のような場合に、ブログカテゴリページに行くと一番上に子カテゴリページへのリンクも出てくるという感じです。
コードを外観→テーマの編集により、以下のコードをarchive.phpなどのアーカイブを出力している場所に入れ込めばOK。
入れ込ませる場所は、○○一覧とかの、カテゴリーページのタイトルが出力される部分のすぐ下で、説明を入れた部分と同じですね。
分かりにくいので、説明文+子カテゴリへのリンクをどちらも挿入するためのコードを書いておきます。
<?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です。
.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.WordPressのカテゴリーページはカスタマイズ必須！
カテゴリーページに説明文および子カテゴリへのリンクを挿入する方法について説明しました。
編集する場所が多数ありますし、function.phpをいじる部分もありますので、バックアップを取りつつ、慎重に進めるようにしてください！
ブログの直帰率を下げるための7つのポイント【5%減少させた方法】
ブログの直帰率を下げるためにはどうしたらいい？今回の記事では、実際に直帰率を86～87％から、5%ダウンさせた効果的な方法を7つ紹介していきます！直帰率と離脱率の違いについても図解しています。
【コピペでOK】WordPressのカスタマイズ集20選【ほぼ必須のカスタマイズあり】
今までにやってきたブログカスタマイズをまとめた記事になっています。必須レベルのカスタマイズも紹介。綺麗なブログに近づけたい人に向けて、コピペでカスタマイズできるようなものを集めました。
