← บทความทั้งหมด

ใส่ Custom CSS ใน Flatsome ไม่ให้หายตอนอัปเดตธีม

Flatsome มีที่ให้ใส่ CSS ของคุณเองมากกว่าหนึ่งที่ และในวันปกติก็ใช้ได้ทุกที่ ความต่างจะเห็นในสองวัน คือวันที่ Flatsome อัปเดต กับวันที่คุณเปลี่ยนธีม ซึ่งรวมถึงการย้ายไปใช้ Flatsome Child ที่เว็บ Flatsome ส่วนใหญ่ต้องทำสักวัน บทความนี้ไล่ดูทีละที่ว่ารอดอะไรบ้าง และจะเก็บ CSS ไว้ตรงไหนให้ไม่หายทั้งสองวัน

CSS ของ Flatsome อยู่ที่ไหนได้บ้าง

ไฟล์ของธีมเอง อะไรที่เพิ่มใน style.css หรือไฟล์อื่นในโฟลเดอร์ flatsome จะหายไปหลังอัปเดตครั้งถัดไป เพราะการอัปเดตคือการแทนที่ทั้งโฟลเดอร์ คู่มือของ UX Themes เองก็เขียนไว้ชัดว่าห้ามใส่ CSS ใน style.css ของธีมหลัก (Where do I add my custom CSS?)

ช่อง Custom CSS ของ Flatsome ที่ Theme Options → Style → Custom CSS (ช่องชุดเดียวกันนี้อยู่ที่ Theme Options → Advanced → Custom CSS ด้วย) มีสามช่อง คือทุกหน้าจอ แท็บเล็ตและเล็กกว่า และมือถืออย่างเดียว ช่องเหล่านี้รอดจากการอัปเดต เพราะเก็บในฐานข้อมูล ไม่ได้อยู่ในโฟลเดอร์ธีม แต่มันคือ theme options และ WordPress เก็บ theme options แยกตามธีม พอเปิดใช้ Flatsome Child ค่าทั้งหมดจะเริ่มจากว่างเปล่า ถ้าจะย้ายข้ามไปต้องผ่าน Flatsome → Advanced → Backup and Import

หน้าตา → ปรับแต่ง → CSS เพิ่มเติม กล่องของ WordPress เอง รอดจากการอัปเดตเหมือนกัน และก็เก็บแยกตามธีมเหมือนกัน child theme มี CSS เพิ่มเติมของตัวเองที่เริ่มจากว่างเปล่า

style.css ของ child theme วิธีที่ UX Themes แนะนำ และรอดจากการอัปเดตจริง แต่ต้องแก้ไฟล์โดยมักไม่มีการดูตัวอย่างก่อน และเบราว์เซอร์อาจยังใช้ไฟล์เก่าอยู่จนกว่าจะเปลี่ยนเลขเวอร์ชันของ child theme อีกทั้ง CSS จะผูกอยู่กับ child theme ถ้าเปลี่ยนไปธีมอื่นก็ต้องทิ้งไว้ข้างหลัง

ปลั๊กอินที่เก็บ CSS แยกจากธีม รอดทั้งสองวัน เพราะไม่มีส่วนไหนเป็นของ Flatsome ขั้นตอนด้านล่างคือการตั้งแบบนี้

ทำไมบาง rule ใส่แล้วไม่ทำงาน

ก่อนย้ายอะไร ควรรู้ก่อนว่าทำไม rule ที่ดูถูกต้องถึงไม่มีผล ส่วนใหญ่มีสามสาเหตุ

มีอะไรที่มาทีหลังชนะ ถ้าสอง rule เจาะจงเท่ากัน rule ที่พิมพ์ทีหลังจะชนะ Flatsome พิมพ์ CSS ที่สร้างจากตัวเลือกของธีม (สี ฟอนต์ ขนาด) ลงใน head ของหน้า rule ที่มาก่อนจึงแพ้โดยไม่มี error ให้เห็นเลย

มีอะไรที่เจาะจงกว่าชนะ selector ของธีมมักยาวกว่าของคุณ .header-main .nav > li > a ชนะ .nav a ทุกที่ที่ตรงทั้งคู่ ให้เขียน selector ให้ตรงกับของธีม หรือเพิ่ม class ขององค์ประกอบเดียวกันอีกหนึ่งตัว ดีกว่าใช้ !important ซึ่งสุดท้ายต้องเอาชนะด้วย !important อีกตัว

คุณกำลังดูหน้าที่ถูกแคชไว้ ร้าน Flatsome ส่วนใหญ่ใช้ page cache ไม่ว่าจะของโฮสต์ LiteSpeed Cache หรือ WP Rocket ถ้าบันทึกแล้วแต่ไม่เห็นผล มักเป็นแคชที่ยังไม่ได้ล้าง

เบรกพอยต์ก็สำคัญ สไตล์แท็บเล็ตของ Flatsome เริ่มที่ 849 พิกเซล และสไตล์มือถือเริ่มที่ 549 พิกเซล media query ของคุณจะตรงกับธีมเมื่อใช้ตัวเลขเดียวกัน

/* แท็บเล็ตและเล็กกว่า เหมือนช่อง tablet ของ Flatsome */
@media (max-width: 849px) {
	.header-main .nav > li > a {
		padding: 0 8px;
	}
}

/* มือถืออย่างเดียว เหมือนช่อง mobile ของ Flatsome */
@media (max-width: 549px) {
	.product-small .box-text {
		padding-bottom: 12px;
	}
}

ย้าย CSS ไปไว้ที่ที่ไม่หาย

StyleScript เป็นปลั๊กอินฟรีที่เก็บ CSS, JavaScript และโค้ดส่วนหัว/ส่วนท้ายของคุณไว้ในฐานข้อมูลของ WordPress แยกจากธีมใดก็ตาม และพิมพ์ CSS ไว้ท้ายสุดของ head ของหน้า ต่อจาก CSS เพิ่มเติมของ Customizer และต่อจาก CSS ที่สร้างจากตัวเลือกของธีม เมื่อเจาะจงเท่ากัน rule ของคุณจึงเป็นตัวที่ชนะ

1. ติดตั้ง StyleScript แล้วเปิด หน้าตา → StyleScript
2. ในแท็บ CSS วาง CSS จากช่องทุกหน้าจอของ Flatsome
3. วาง CSS จากช่องแท็บเล็ตไว้ใน @media (max-width: 849px) { … } และจากช่องมือถือไว้ใน @media (max-width: 549px) { … } เมื่อใช้ธีม Flatsome อยู่ ปุ่ม แทรก media query ตามเบรกพอยต์ ในตัวแก้ไขจะมีเบรกพอยต์ทั้งสองของ Flatsome ให้เลือก
4. กด ดูตัวอย่าง เพื่อดูเว็บข้างตัวแก้ไขพร้อม CSS ที่ยังไม่บันทึก ซึ่งเห็นคุณคนเดียว และสลับดูขนาดเดสก์ท็อป แท็บเล็ต และมือถือได้
5. กด บันทึก CSS ขึ้นเว็บทันที และ page cache ของปลั๊กอินแคชที่ใช้กันทั่วไปจะถูกล้างให้
6. ล้างช่อง Custom CSS ของ Flatsome เพื่อไม่ให้ rule ชุดเดียวกันทำงานซ้ำสองรอบ ถ้าเคยใส่ CSS ไว้ใน CSS เพิ่มเติมของ Customizer ด้วย แท็บ เครื่องมือ ของ StyleScript ย้ายมาให้ได้ที่ นำโค้ดจากที่อื่นเข้ามา

ช่องสคริปต์ของ Flatsome ทั้ง header, footer และ body scripts ก็มีที่อยู่เหมือนกัน แท็บ ส่วนหัวและส่วนท้าย มีกล่องสำหรับ <head> กล่องหลัง <body> และกล่องก่อน </body>

หลังจากนั้น การอัปเดต Flatsome จะไม่เปลี่ยนอะไรใน CSS ของคุณ การย้ายไป child theme หรือธีมอื่นก็เช่นกัน rule ชุดเดิมทำงานกับธีมไหนก็ได้ที่เปิดใช้อยู่ การบันทึกครั้งหลัง ๆ เก็บไว้ในประวัติของแต่ละกล่อง เวอร์ชันเก่าจึงกลับมาได้ในคลิกเดียว และถ้าการแก้ครั้งไหนทำให้หน้าเว็บพัง โหมดปลอดภัยจะแสดงเว็บโดยไม่มีโค้ดของคุณระหว่างที่แก้

เมื่อหน้าเดียวต้องการ CSS ของตัวเอง

CSS ระดับทั้งเว็บเหมาะกับ header กล่องสินค้า และ footer แต่ landing page ที่มีหน้าตาเฉพาะเป็นอีกกรณี rule ของมันควรอยู่กับหน้านั้นหน้าเดียว จะจำกัดขอบเขตด้วย class ที่ WordPress ใส่ให้ body ของหน้าก็ได้ เช่น .page-id-123 .banner { … } หรือถ้าใช้ StyleScript Pro ก็เขียนไว้ในกล่อง StyleScript ของหน้านั้นเอง ซึ่งจะพิมพ์ในหน้านั้นหน้าเดียวเท่านั้น