Favicon
Login

แก้ไข Visual Filter ของ Jet Engine ในส่วนของรูปภาพ

โค้ดนี้ทำงานอย่างไรในบริบทของ JetEngine Smart Filters

  1. Color/Image List Filter: โค้ด CSS นี้มีเป้าหมายหลักในการปรับแต่งหน้าตาของ filter ประเภท “Color and Image” ที่ JetEngine Smart Filters มีให้

  2. โครงสร้าง HTML (ที่ JetEngine สร้างขึ้น): JetEngine Smart Filters จะสร้าง HTML structure คล้ายๆ กับตัวอย่างที่ผมให้ไปก่อนหน้านี้ (แต่โครงสร้างจริงๆ อาจจะซับซ้อนกว่าเล็กน้อย ขึ้นอยู่กับการตั้งค่า) โดยจะมี:

    • input[type="radio"]: สำหรับแต่ละตัวเลือก (สี, รูปภาพ)
    • <label>: ที่เชื่อมโยงกับ input แต่ละตัว และจะแสดงเป็นปุ่มให้ผู้ใช้เห็น
    • <img> หรือ <svg>: (อาจจะมี) ภายใน <label> เพื่อแสดงตัวอย่างสี/รูปภาพ

  3. การทำงานของ CSS:

    • jet-color-image-list__button: คลาสนี้ (และคลาสอื่นๆ ที่ขึ้นต้นด้วย jet-) เป็นคลาสที่ JetEngine ใช้ การที่เราเขียน CSS โดยอ้างอิงคลาสเหล่านี้ หมายความว่าเรากำลัง “override” (เขียนทับ) สไตล์เริ่มต้นของ JetEngine เพื่อให้ได้หน้าตาตามที่เราต้องการ
    • selector: อย่างที่ผมบอกไปก่อนหน้านี้ selector จะต้องถูกแทนที่ด้วย selector ที่ถูกต้อง ซึ่งโดยทั่วไปแล้วจะเป็น selector ที่ครอบคลุม filter widget ทั้งหมด คุณอาจจะต้องตรวจสอบ (inspect) โค้ด HTML ที่ JetEngine สร้างขึ้นในหน้าเว็บของคุณ เพื่อหา selector ที่ถูกต้อง
    • hover, active, checked: CSS จะจัดการการเปลี่ยนแปลงสถานะของปุ่ม (label) ตามที่อธิบายไปแล้ว เพื่อให้ผู้ใช้รับรู้ถึงการโต้ตอบ

วิธีใช้โค้ดนี้กับ JetEngine Smart Filters

  1. สร้าง Filter: ใน WordPress Dashboard, ไปที่ JetEngine > Smart Filters และสร้าง filter ใหม่ เลือกประเภท “Color and Image”
  2. ตั้งค่า: กำหนดค่า filter ต่างๆ เช่น เลือก taxonomy หรือ custom field ที่จะใช้เป็นตัวกรอง, เลือกสี/รูปภาพ, ฯลฯ
  3. เพิ่ม Filter ลงในหน้า: ใช้ Elementor (หรือ page builder ที่คุณใช้) เพิ่ม widget “Color and Image Filter” ลงในหน้าที่คุณต้องการ
  4. เพิ่ม CSS: มีหลายวิธีในการเพิ่ม CSS:
    • Customizer: ใน WordPress, ไปที่ Appearance > Customize > Additional CSS แล้วเพิ่มโค้ด CSS ลงไป (วิธีนี้ง่ายที่สุด)
    • Child Theme: สร้าง child theme (ถ้ายังไม่มี) แล้วเพิ่ม CSS ลงในไฟล์ style.css ของ child theme (วิธีนี้ดีที่สุดสำหรับการปรับแต่งขั้นสูง)
    • Elementor (หรือ Page Builder): บาง page builder (เช่น Elementor) มีช่องให้คุณใส่ CSS สำหรับ widget แต่ละตัวได้โดยตรง
    • ปลั๊กอิน CSS: ใช้ปลั๊กอินสำหรับเพิ่ม CSS (เช่น Simple Custom CSS)
  5. หา selector ที่ถูกต้อง: เปิดหน้าที่คุณใส่ filter ลงไป inspect element ที่เป็น container ของ filter ทั้งหมด. และ copy class นั้นมาใส่แทน selector.

ตัวอย่าง Selector (อาจจะไม่ถูกต้องเสมอไป ต้อง Inspect เอง)

สมมติว่าหลังจาก inspect element แล้ว คุณพบว่า filter ทั้งหมดของคุณอยู่ภายใต้ div ที่มี class my-custom-filter-container โค้ด CSS ของคุณก็จะกลายเป็น:

				
					<p>/* สำหรับ Hover และ Active ของปุ่ม (label) */<br />
selector .jet-color-image-list__button:hover,<br />
selector .jet-color-image-list__button:active {<br />
background-color: #252525 !important;<br />
color: #fff !important;<br />
}</p>
<p>selector .jet-color-image-list__button:hover img,<br />
selector .jet-color-image-list__button:active img,<br />
selector .jet-color-image-list__button:hover svg,<br />
selector .jet-color-image-list__button:active svg {<br />
filter: brightness(0) invert(1) !important;<br />
fill: #fff !important;<br />
}</p>
<p>/* สำหรับสถานะ Checked (radio ถูกเลือก) */<br />
/* สมมุติว่า input[type="radio"] อยู่ก่อน label และ label เป็น adjacent sibling */<br />
selector input[type="radio"]:checked + .jet-color-image-list__button {<br />
background-color: #252525 !important;<br />
color: #fff !important;<br />
}</p>
<p>selector input[type="radio"]:checked + .jet-color-image-list__button img,<br />
selector input[type="radio"]:checked + .jet-color-image-list__button svg {<br />
filter: brightness(0) invert(1) !important;<br />
fill: #fff !important;<br />
}</p>

เนื้อหานี้เกี่ยวกับ

Jet Engine