category-{slug}.php
category-{id}.php
category.php
archive.php
index.php

เปลี่ยนภาพ heard แต่ละ category

if(is_category('category-a-slug')){
    get_header('a');
}elseif(is_category('category-b-slug')){
    get_header('b');
}

How to change header image of individual categories

To change the header in category page add below given CSS by going to Admin Panel > Appearance > Customize > Additional CSS.

body[class*="category"] #banner-image {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding-bottom: 55%;
}

body[class*="category"] #banner-image img {
	display: none;
}

.category-73 #banner-image {
	background-image: url('https://cms-assets.tutsplus.com/uploads/users/1500/posts/31260/image/summer_nature_background_with_green_grass_and_butterfly_and_blue_sky.jpg');
}

For above given CSS, you have to replace the category ID with your category ID. Similarly, for other category add the same CSS which is :

.category-73 #banner-image {
	background-image: url('https://cms-assets.tutsplus.com/uploads/users/1500/posts/31260/image/summer_nature_background_with_green_grass_and_butterfly_and_blue_sky.jpg');
} 

ยังไม่ทดสอบ
But with replacing the category ID.
You can find the category ID either by inspecting or from the backend.
https://prnt.sc/lswsym

อีกวิธีใช้ https://wordpress.org/plugins/unique-headers/
You can add the following code inside your loop:

if (in_category('news')) {
    get_header('news');
} else {
    get_header();
}

Change background image page header overlay for each category

body.category-6 .page-header {
    background-image: url( http://styleofchamp.com/wp-content/uploads/2019/04/sabri-tuzcu-190600-unsplash-1.jpg ) !important;
}

How can I display a different header image for each category in WordPress?

To display different headers for each post category you can create separate templates for them.
For example for category “sports” you can create a template “category-sports.php” in your theme.
Also create a “header1.php” which contains the image.

Then in that category change the header call function like this –

<?php get_header1(); ?>

Note that – normally themes just have “category.php” which calls “header.php” at the first line. Here we have created a separate template for the sports category “category-sports.php” which calls “header.php”. Our “header1.php” files contains the image for this category.

You can do this for each of the category. หรือ เขียนโค๊ด ในไฟล์ category.php ไฟล์เดียวก็ได้ ให้เช็ค id ถ้าเป็น id categoty x ให้ include head-x.php จะได้มีไฟล์ไม่เยอะ
และสามารถเขียน โค๊ดใน head-category.php ไฟล์เดียวก็ได้ แล้วตรวจสอบ id แล้วให้ echo code แสดงออกมา เพราะ โค๊ดแสดงภาพแต่ละอัน สั้นเค่บรรทัดเดียว

ปลั๊กอินที่เลือกใช้
70,000 Categories Images (ใช้อันนี้)
อื่นๆ ยังไม่ทดสอบ
10,000 Taxonomy Images
200 Custom Category Image
7000 Category and Taxonomy Image
300 Advanced Category and Custom Taxonomy Image

โค๊ดรูปทับ

https://codepen.io/AliKlein/pen/dVrmVO

<aside>
  <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.  </p>
</aside>

<div>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</div>

aside {
  position: fixed;
  width: 25vw;
  height: 100vh;

  p {
    padding: 30px;
    line-height: 2;
  }
}

div {
  position: absolute;
  right: 0;
  width: 75vw;
}

section {
  height: 100vh;
  background-size: cover;
  background-attachment: fixed;
  background-position-y: center;
  
  //Background image X AXIS is 50% plus half the width of it's sibling container
  background-position-x: calc(50% + 12.5vw);
  
  @for $i from 1 to 11 {
    &:nth-child(#{$i}) {
      background-image:url('https://picsum.photos/1500/1000?image=12' + $i);
    }
  }
}

ค้น gg ด้วย key
background-attachment: fixed; position: relative; overflow: hidden;

หัวเว็บอยู่กับที่ เมื่อ scroll ลง
https://jsfiddle.net/ianclark001/wELFH/147/
https://jsfiddle.net/ke9kW/1/
https://stackoverflow.com/questions/18382496/sticky-header-after-scrolling-down

fix background
https://css-tricks.com/almanac/properties/b/background-attachment/