TCDテーマTENJIKUのカスタマイズ

TCDテーマ”TENJIKU” 投稿ページのカテゴリーを複数表示させる方法

デフォルトでは、投稿ページでカテゴリーを複数選択しても1つしか表示されません。

tcd091の初期設定では、複数のカテゴリーを選択しても表示されるのは1つのみになっているようです。これを2つ以上表示させたい、とのご依頼をいただき、カスタマイズいたしました。

今回修正するファイルは、

single.php（投稿ページ）
index.php（アーカイブページ）

の2点と、

テーマ内のカスタムCSSに記述を追加

上記の作業で完了します。

投稿ページ：single.phpの修正

修正前の「single.php」コード
56,57,58行目あたり

修正前

<?php if ( $category && ! is_wp_error($category) ) { ?>
  <a class="category" href="<?php echo esc_url($cat_url); ?>"><?php echo esc_html($cat_name); ?></a>
<?php }; ?>

↓

修正後

<?php foreach($category as $cat){ ?>
  <a class="category" href="<?php echo get_category_link( $cat->term_id ); ?>"><?php echo esc_html( $cat->name ); ?></a>
<?php }; ?>

アーカイブページ：index.phpの修正

修正前の「index.php」コード
118行目あたり

修正前

<a class="category cat_id<?php echo esc_attr($cat_id); ?>" href="<?php echo esc_url(get_term_link($cat_id,'category')); ?>"><span><?php echo esc_html($cat_name); ?></span></a>

↓

修正後

<ul>
  <?php foreach($category as $cat){ ?>
    <li>
      <a class="category cat_id<?php echo esc_attr($cat_id); ?>" href="<?php echo get_category_link( $cat->term_id ); ?>"><?php echo esc_html( $cat->name ); ?></a>
    </li>
  <?php }; ?>
</ul>

CSSの追記

CSSファイルを直接編集するより、テーマ内の「カスタムCSS」に追記する方法をお勧めします。

WordPressログイン後、画面左メニューのTCDテーマ＞基本設定＞カスタムCSSと進み、以下を記述する。
コメントアウトの部分は参考までに。

/* パンくずリスト部分 */
/* カテゴリーを2つ以上表示させる */
#bread_crumb li.category a {
	display:inline-block;
}

/* パンくずリスト部分 */
/* カテゴリー名のあとに「,」（カンマ）を表示する */
/* ただし、リストの最後に表示されるカテゴリー名のあとには「,」無しとする */
#bread_crumb li.category a:not(:last-of-type):after {
	content:" , ";
}

/* メインコンテンツ お知らせ 記事タイトルの上部 */
/* カテゴリー名の表示箇所 */
/* 希望するデザインに応じて各値を調整する */
#post_title .category {
	float: left;
	font-size: 12px;
	border-radius: 50px;
	text-align: left;
	margin: -20px 5px 0 0;
	background: #fff;
	position: relative;
	z-index: 10;
	height: 35px;
	line-height: 35px;
	min-width: 100px;
	padding: 0 20px;
	display: table;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}