WordPressで新着記事を「カテゴリー名表示＋色分け」で表示

新着

カテゴリ一覧
- wordpress
- google
- サーバー
- ドメイン
- sns
- プラグイン
- css
- Illustrator
- photoshop
- bootstrap
- その他

wordpress

WordPressで新着記事を「カテゴリー名表示＋色分け」で表示

2019/12/18

<span class="<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>">
            <?php
                $cat = get_the_category();
                $cat = $cat[0];
                $cat_name = $cat->cat_name;
                /* ($cat_name =='カテゴリ名'){ echo '表示したい文言'; */
                if($cat_name == 'イベント'){ echo "イベント";
                }elseif($cat_name == 'その他'){ echo "その他";
                }elseif($cat_name == 'サーバー'){ echo "サーバー";
                }elseif($cat_name == '職員一覧'){ echo "職員";
                }else{ echo $cat_name; }
            ?>
            </span>

<?php

$cat = get_the_category();

$cat = $cat[0];

$cat_name = $cat->cat_name;

/* ($cat_name =='カテゴリ名'){ echo '表示したい文言'; */

if($cat_name == 'イベント'){ echo "イベント";

}elseif($cat_name == 'その他'){ echo "その他";

}elseif($cat_name == 'サーバー'){ echo "サーバー";

}elseif($cat_name == '職員一覧'){ echo "職員";

}else{ echo $cat_name; }

</span>

CSS

span.other {
  background: #73a207;
}

span.staff {
  background: #f19ec2;
}

span.event {
  background: #e8992e;
}

span.newmark {
  background: #f9001d;
}

span.newmark, span.other, span.staff, span.event {
  color: #fff;
  margin-right: .2em;
  padding: 0px 6px;
  display: inline-block;
  text-align: center;
  line-height: 20px;
  font-weight: 600;
  font-size: 1.1rem;
  vertical-align: middle;
}

span.other {

background: #73a207;

}

span.staff {

background: #f19ec2;

}

span.event {

background: #e8992e;

}

span.newmark {

background: #f9001d;

}

span.newmark, span.other, span.staff, span.event {

color: #fff;

margin-right: .2em;

padding: 0px 6px;

display: inline-block;

text-align: center;

line-height: 20px;

font-weight: 600;

font-size: 1.1rem;

vertical-align: middle;

}