WordPress Ignisでカテゴリー色のカスタマイズ

f:id:goldenmilk:20210306175206p:plain

カテゴリ―ページはこれ。

ふと、「カテゴリーの色も変えれたらいいですよね~」とうかつなことを言ってしまったので、Ignisテーマをカスタマイズすることになりました。

 

ワードプレスの中でもIgnisは写真を扱っている人には使いやすいテーマじゃないでしょうか。

 

athemes.com

 

ちなみに

メインの「I'm a designer」とかを消したい場合

f:id:goldenmilk:20210306180508p:plain

このメインの部分

.ignis-hero-area has-media をdisplay:none; にしてあげてください。(メディアクエリ only screen and (max-width: 1024px) がスマホ用なので、それもdisplay:none;に)

 

あと、探ってわかったのは、

カテゴリ―別表示は

archive.phpに記載されていますね。

 

archive.phpのループ部分のポストは、カスタマイズ用っぽいフォルダの下にあるphpでした。

・・・・・・・・・・・・・・・

投稿ページのほうのカテゴリ―が表示される場所

Ignis: content-single.php (template-parts/content-single.php)

 <footer class="entry-footer">
<?php ignis_show_cats(); ?>
<?php ignis_entry_footer(); ?>

</footer><!-- .entry-footer -->

・・・・・・・・・・・・・・・

 

f:id:goldenmilk:20210306175206p:plain

カテゴリー色が同じ

・Aタグでクラス名が吐き出せるようにすればいいかな…、は×

・なぜなら、二つタグが並んだ時色が変えられないから

・ページIDのクラス名とのand指定も同じ理由でだめ→Wordpressは、bodyタグにカテゴリー名のクラスが割り振られるようにすることができます。例えば以下みたいな感じ。ここでcategory-8をとるとか、できます。ページIDの取得もできます。

body class="archive category category-news category-8 hfeed sticky-header"

saruwakakun.com

 

解決:プラグイン「Advanced Custom Fields」とfunction.phpで解決

結果的に、プラグインはこちらを入れました。

ja.wordpress.org

 

参考:

webkcampus.com

ものすごくわかりやすいです。

 

ちなみに、このプラグインだけだとIgnisでは自動ではカラー変更されません。

 

なので、function.phpに、

function ignis_show_cats() {
  $cats = get_the_category();
  if(!empty($cats)){
    if(!is_wp_error($cats)){
      foreach($cats as $cat){
        $cat_link = get_category_link($cat->term_id);
        $cat_name = $cat->name;
        $cat_id = $cat->cat_ID;
        $cat_color = 'category_'.$cat_id;
        $back_color = get_field('ca_color_band',$cat_color);
        $txt_color = get_field('ca_color_txt',$cat_color);
        echo '<p class="category"><a href="'.$cat_link.'" style="background-color:'.$back_color.';color:'.$txt_color.';">'.$cat_name.'</a></p>';
      }
    }
  }
}

こちらを追加してください。先ほどcontent-single.phpで見た部分の「 ignis_show_cats() 」が入っていますね。

 

後自分はcss

category a {
  1. display: inline-block;

これを追加しました。

 

こんな感じで、カテゴリーごとに色を付けることが「Ignis」でもできました。

 

今日はこんな感じです。