WordPressのサンゴテンプレートで記事投稿のカテゴリーを複数選択しても、1個しか表示されない件

サンゴのテンプレートでカテゴリーを複数個選択しても…

左上のオレンジの楕円の部分がカテゴリ名だが、
↓こんな感じで、1個目のカテゴリーしか投稿記事の画面では表示されない。

これを、↓こんな風に、ちゃんと複数個表示させる。

 

functions.phpへの記述

色々な記述方法が考えらえるが、元々のSANGOの記述をできるだけ踏襲する形で書く。

//カテゴリーを記事一覧に複数表示
function output_catogry_link() {
 $cat = get_the_category();
 if (!$cat) {
  return false;
 }
 if ($cat) {
 $i = 0;
 foreach( $cat as $category) {
 $catId = $category->cat_ID;
 $catName = esc_attr($category->cat_name);
 $catLink = esc_url(get_category_link($catId));
 if ($catLink && $catName) {
  echo '<a class="dfont cat-name catid' . $catId . ' cat-multi' . $i . '" href="' . $catLink . '">' . $catName . '</a>' ;
  }
  $i = $i + 1;
  if ( $i >= 8 ) {
   break;
  }
  }//foreach
 }//if($cat)
 }

カテゴリーがある分だけ取得して、ソースとして吐き出されるので、ソースはこんな感じ。

<a class="dfont cat-name catidXX1 cat-mult0" href="カテゴリー1へのリンクURL">1のカテゴリー名</a>
<a class="dfont cat-name catidXX5 cat-mult1" href="カテゴリー5へのリンクURL">5のカテゴリー名</a>
<a class="dfont cat-name catidXX6 cat-mult2" href="カテゴリー6へのリンクURL">6のカテゴリー名</a>
...

classにclass に “cat-multi$i” ($iは変数でカテゴリのー数0から数字が順番に入る)

cat-multi数字　にCSSで配置を指定してやればいい。

なお、スペースの関係上、今回は上限を8個としている。
 

CSS (管理画面→外観→CSS編集→追加CSS)への記述

.cat-multi0{
 top: 3px !important;
}
.cat-multi1{
 top: 27px !important;
}
.cat-multi2{
 top: 51px !important;
}
.cat-multi3{
 top: 75px !important;
}
.cat-multi4{
 top: 99px !important;
}
.cat-multi5{
 top: 123px !important;
}
.cat-multi6{
 top: 147px !important;
}
.cat-multi7{
 top: 171px !important;
}

で、こんな風になる。

今回は上から下に並べているが、色を変えたり、横にずらしたりと色々できるはず。