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;
}で、こんな風になる。
今回は上から下に並べているが、色を変えたり、横にずらしたりと色々できるはず。
