ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

TCDテーマNULL:記事ページに複数のカテゴリーを表示する方法

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

Q.複数のカテゴリーを設定しましたが、記事ページのタイトルの上には1つしか表示されません。これを複数個表示できますか?

恐れ入りますが、テーマ仕様ではカテゴリーを1つのみ表示する仕様となっています。
同じく「NULL」で制作しているTCD LABO(当サイト)では以下のようなカスタマイズを行っております。

▼変更後のイメージ  →変更前:NULLデモサイト内記事
変更箇所イメージ

A.下記の方法でご対応ください。

1. 複数カテゴリーを表示するようテーマファイルをカスタマイズする

編集するファイル: single.php
編集する箇所その1: 58行目付近

<?php if ( $category && ! is_wp_error($category) ) { ?>

<?php if ( $category && ! is_wp_error($category) ) { 
  foreach ( $category as $cat ) :
    $cat_name = $cat->name;
    $cat_id = $cat->term_id;
    $cat_url = get_category_link( $cat_id );
    $cat_color = ( get_term_meta( $cat_id, 'main_color', true ) ) ? get_term_meta( $cat_id, 'main_color', true ) : '#c3c3c3';
?>

 
編集する箇所その2: 74行目付近(その1編集後)

<?php } ?>

<?php if( $dp_options['blog_show_date'] == 'display' ){ ?>

<?php
   endforeach;            
   }            
?>
          
<?php if( $dp_options['blog_show_date'] == 'display' ){ ?>

2. カスタムCSSで見た目を調整する

以下をTCDテーマ>基本設定のカスタムCSSに入力してください。

.p-article__header-meta { -ms-flex-wrap: wrap; flex-wrap:wrap; }
@media not all and (max-width: 767px) {
  .p-article__header-meta { margin: -15px 0 20px -15px; }
  .p-article__header-meta li { margin: 10px 0 0 10px; }
}

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事