【ha-Basic】複数カテゴリーに登録している投稿のカテゴリー表示デザインを見直しました

公開日：2019年9月9日

カテゴリー:制作備忘録

【ha-Basic】複数カテゴリーに登録している投稿のカテゴリー表示デザインを見直しました

何度も表示チェックをしてリリースしたつもりでいましたが、普段１記事に１カテゴリーしか設定しないように記事を作成していた癖で、１記事に複数カテゴリーの紐づけがあるという形でのチェックをしていなかったため、複数カテゴリーを選択した際に

別々のカテゴリーというのが分かりにくい
一覧表示時に１つしかカテゴリーが表示されない

というところに気づいていませんでした。今回ふと「複数カテゴリーを選択した場合にはどうなるんだろう？」という疑問が湧いて設定してみたら・・・で気づいたこの不具合の対処方法を開発記録として残しておきます。

バージョン1.1をお使いの方で2019年9月9日以前にダウンロードされた方は以下の処置が必要です

ページ上部へ戻る▲

【ha-Basic】テーマでの変更手順（バージョン1.0および2019年9月9日以前にダウンロードいただいた方向け）

手順に従ってファイルの記述を書き換えることで、投稿の一覧と投稿の表示（単独の投稿表示）で複数のカテゴリーが登録されている記事の全カテゴリー表示とデザインの調整ができます。

編集は管理画面から外観→テーマエディタを開き、「」内に記載しているファイルのリンクをクリックして行います

「home.php」の記述変更

42行目付近にある

<span class="cat-data">
<?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
</span>

のコードを以下に置き換えます

<ul class="cat-list">
<?php foreach((get_the_category()) as $cat){
echo '<li>' . $cat->cat_name . '</li>'; } ?>
</ul>

「index.php」の記述変更

60行目付近にある

<span class="cat-data">
<?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
</span>

のコードを以下に置き換えます

<ul class="cat-list">
<?php foreach((get_the_category()) as $cat){
echo '<li>' . $cat->cat_name . '</li>'; } ?>
</ul>

「style.css」の記述変更

136行目付近にある

.cat-data {font-size: .6em;padding: 3px 5px;text-align: center;white-space: nowrap;color: #fff;border-radius: 3px;background-color: #464646;}

のコードを以下に置き換えます

「style.css」の末尾へ単純に追記してもいいのですが、上書きができるだけ繰り返されないように置き換えをおすすめします。

/** single.phpのカテゴリー表示 **/
span.cat-data a {background-color: #464646;border-radius: 5px;padding-left: 10px;padding-right: 10px;padding-top: 5px;padding-bottom: 5px;}
.cat-data {font-size: .8em;padding: 3px 5px;text-align: center;white-space: nowrap;color: #fff;border-radius: 0px;background-color: #fff;}
/** index.php home.phpのカテゴリー表示 **/
ul.cat-list {margin: 0;padding: 0;}
ul.cat-list li {list-style: none;display: inline-block;background-color: #464646;color:#fff;margin-right: 5px;padding:3px;border-radius:5px;font-size:0.6em;}

「a-color-style.css」の記述変更

156行目付近にある

.cat-data {color: #fff;background-color: #464646;}

のコードを以下に置き換えます

「color-style.css」の末尾へ単純に追記してもいいのですが、上書きができるだけ繰り返されないように置き換えをおすすめします。

/** single.phpのカテゴリー表示 **/
span.cat-data a {background-color: #464646;}
.cat-data {color: #fff;background-color: #fff;}
/** index.php home.phpのカテゴリー表示 **/
ul.cat-list li {background-color: #464646;color:#fff;}

ページ上部へ戻る▲

どんな変更をしているのかの簡単な解説

まずPHPコードについてですが、リスト表示では変更前のコードだと複数のカテゴリーに紐づいた投稿でも、一番IDの若いものを１つだけ表示するようになっていましたので、リストとしてすべて取得し表示する形にしました。個別投稿（single.php）はもともと正しい仕様でしたので今回は変更していません。

次にCSSについてですが、個別投稿（single.php）でそのまま表示すると紐づいているカテゴリーすべてに背景色が付き、別のカテゴリーだということが分からないため、それぞれのカテゴリーごとに背景を付けるようにしました。リスト表示の方はもともと個別記事と共通のセレクタを使用していましたがリストタグで出力するようにしましたので専用のCSSコードを追加しました。