วิธีรักษา CSS ที่กำหนดเองเมื่ออัปเดตธีม WordPress
เผยแพร่แล้ว: 2022-05-05ธีมเป็นตัวกำหนดเลย์เอาต์และรูปลักษณ์ของเว็บไซต์ WordPress ไม่ว่าคุณจะเลือกธีมใด คุณอาจต้องปรับแต่งเล็กน้อยเพื่อให้เหมาะกับความต้องการเฉพาะของคุณ
วิธีหนึ่งในการปรับแต่งธีมของคุณคือการใช้ Cascading Style Sheets (CSS) ภาษาสไตล์ชีตยอดนิยมนี้จะช่วยให้คุณเปลี่ยนองค์ประกอบเกือบทุกส่วนของธีมได้ คุณสามารถเพิ่ม CSS แบบกำหนดเองให้กับธีมของคุณเพื่อระบุสีพื้นหลัง เปลี่ยนขนาดฟอนต์ สร้างระยะห่างระหว่างเนื้อหา เมนูเปลี่ยนตำแหน่ง และอื่นๆ อย่างไรก็ตาม CSS ที่กำหนดเองอาจถูกลบในครั้งต่อไปที่คุณอัปเดตธีม
เหตุใดการอัปเดตธีมจึงทำลาย CSS ที่กำหนดเอง
ธีมทั้งหมดมีไฟล์ style.css มีอยู่ในโฟลเดอร์ธีม ซึ่งมี CSS เมื่อคุณอัปเดตธีม คุณจะดาวน์โหลดเวอร์ชันใหม่ที่แตกต่างออกไปเพื่อแทนที่เวอร์ชันที่มีอยู่
การอัปเดตธีมของคุณจะลบไฟล์ style.css ที่มีอยู่และแทนที่ด้วยไฟล์ style.css ใหม่ ไฟล์ style.css ใหม่จะไม่มี CSS ที่กำหนดเองซึ่งคุณอาจเพิ่มไว้ก่อนหน้านี้ คุณสามารถเพิ่ม CSS ที่กำหนดเองที่ถูกลบกลับเข้าไปใหม่ได้เสมอ แต่การทำเช่นนั้นหลังจากการอัปเดตธีมแต่ละครั้งอาจเป็นเรื่องที่น่าเบื่อหน่าย
เพิ่มไปยังเครื่องมือปรับแต่ง
คุณเก็บ CSS ที่กำหนดเองไว้ได้เมื่ออัปเดตธีมโดยเพิ่มลงในเครื่องมือปรับแต่ง เครื่องมือปรับแต่งคือเครื่องมือปรับแต่งธีมในแดชบอร์ด WordPress มีฟิลด์ " CSS เพิ่มเติม" แทนที่จะเพิ่ม CSS ที่กำหนดเองลงใน style.css ของธีมโดยตรง คุณสามารถเพิ่มลงในฟิลด์นี้ได้
ฟิลด์ “ CSS เพิ่มเติม” ถูกนำมาใช้ใน WordPress เวอร์ชัน 4.7 เพื่อป้องกันไม่ให้ CSS ที่กำหนดเองถูกลบระหว่างการอัปเดตธีม ไม่มีผลกับไฟล์ style.css และไม่ส่งผลต่อไฟล์อื่นๆ ในโฟลเดอร์ธีม เมื่อคุณเพิ่ม CSS ที่กำหนดเองไปยังเครื่องมือปรับแต่งผ่านฟิลด์นี้ CSS นั้นจะถูกจัดเก็บไว้ในฐานข้อมูลของเว็บไซต์ของคุณ จากนั้นคุณสามารถอัปเดตธีมของคุณในขณะที่ยังคงรักษา CSS ที่กำหนดเองไว้ได้
หากต้องการเข้าถึงเครื่องมือปรับแต่ง ให้คลิก "ลักษณะที่ปรากฏ" ในแดชบอร์ดของ WordPress แล้วเลือก "ปรับแต่ง" แท็บ “ CSS เพิ่มเติม” อยู่ใกล้กับด้านล่าง การคลิกแท็บนี้จะแสดงช่องที่คุณสามารถป้อน CSS ที่กำหนดเองได้ การอัปเดตธีมของคุณจะแทนที่ไฟล์ในโฟลเดอร์ธีมเท่านั้น จะไม่แทนที่หรือส่งผลต่อฐานข้อมูลของเว็บไซต์ของคุณ ดังนั้น CSS ที่กำหนดเองจะยังคงอยู่
การเพิ่ม CSS ที่กำหนดเองให้กับเครื่องมือปรับแต่งช่วยให้คุณดูตัวอย่างได้ เครื่องมือปรับแต่งมีคุณสมบัติการแสดงตัวอย่างในตัวสำหรับการเปลี่ยนแปลงทั้งหมด ไม่ว่าคุณจะตั้งค่าวิดเจ็ตใหม่หรือเพิ่ม CSS ที่กำหนดเอง เครื่องมือปรับแต่งจะเปิดเผยว่าเว็บไซต์ของคุณจะมีหน้าตาเป็นอย่างไร จากนั้นคุณสามารถเลือกดำเนินการปรับแต่งได้โดยคลิก "เผยแพร่" หากเว็บไซต์ของคุณดูไม่ถูกต้อง คุณสามารถเปลี่ยนตัวเลือกการปรับแต่งก่อนเผยแพร่ได้ ไม่ว่าเครื่องมือปรับแต่งจะแสดงตัวอย่างเว็บไซต์ของคุณด้วย CSS ที่กำหนดเอง
สร้างธีมลูก
อีกวิธีหนึ่งคือการสร้างธีมลูก ธีมย่อยคือสำเนาของธีมอื่นๆ ที่คุณสามารถปรับแต่งโดยไม่ต้องกลัวว่าการเปลี่ยนแปลงของคุณจะสูญหาย ไม่ใช่สำเนาที่สมบูรณ์ ธีมย่อยส่วนใหญ่ประกอบด้วยไฟล์พื้นฐานเพียงไม่กี่ไฟล์ รวมถึงไฟล์ style.css และไฟล์ functions.php
ธีมย่อยออกแบบมาเพื่อสืบทอดคุณสมบัติของธีมหลัก คุณสามารถใช้ธีมของคุณเป็นธีมหลักได้ ธีมลูกจะมีโฟลเดอร์ของตัวเอง ซึ่งจะมีไฟล์ style.css และไฟล์ functions.php เป็นของตัวเอง อย่างไรก็ตาม ธีมย่อยจะไม่มีไฟล์ index.php, ไฟล์ page.php, ไฟล์ single.php หรือไฟล์ธีมมาตรฐานอื่นๆ จะใช้ประโยชน์จากธีมหลักสำหรับคุณสมบัติเหล่านี้
เนื่องจากธีมลูกมีไฟล์ style.css ของตัวเอง จึงสนับสนุน CSS ที่กำหนดเอง ที่สำคัญกว่านั้น ธีมย่อยจะคง CSS ที่กำหนดเองไว้ทั้งหมดเมื่อมีการอัปเดตธีมหลัก การอัปเดตธีมหลักจะไม่ส่งผลต่อไฟล์ style.css ของธีมลูก สำหรับคำแนะนำเกี่ยวกับวิธีการสร้างธีมย่อย โปรดไปที่ developer.wordpress.org/themes/advanced-topics/child-theme อีกทางหนึ่ง ธีมพรีเมียมบางธีมมาพร้อมกับธีมย่อย
สำหรับ CSS ที่กำหนดเองเพียงไม่กี่บรรทัด คุณอาจต้องการเพิ่มลงในเครื่องมือปรับแต่ง สำหรับ CSS ที่กำหนดเองจำนวนมากขึ้น การสร้างธีมลูกน่าจะคุ้มค่ากับความพยายาม ธีมลูกจะให้ไฟล์ style.css แยกต่างหากซึ่งคุณปรับแต่งได้
คุณยังสามารถทำงานกับไฟล์ style.css ของธีมลูกแบบออฟไลน์ได้ และเนื่องจากเป็นไฟล์แยกต่างหาก คุณจะมีพื้นที่มากมายสำหรับ CSS ที่กำหนดเอง การเพิ่ม CSS ที่กำหนดเองให้กับเครื่องมือปรับแต่งจะจำกัดคุณให้อยู่ในฟิลด์ขนาดเล็กที่เข้าถึงได้ทางออนไลน์เท่านั้น เครื่องมือปรับแต่งมีประโยชน์ของโหมดแสดงตัวอย่าง ในขณะที่ธีมย่อยนำเสนอประโยชน์ของไฟล์ style.css ที่แยกต่างหาก
ใช้ปลั๊กอิน CSS แบบกำหนดเอง
คุณสามารถใช้ปลั๊กอิน CSS ที่กำหนดเองได้ ตัวอย่างเช่น ปลั๊กอิน Simple Custom CSS ทำสิ่งที่ดูเหมือน: ช่วยให้คุณเพิ่ม CSS ที่กำหนดเองให้กับธีมของคุณได้อย่างง่ายดาย CSS ที่กำหนดเองที่เพิ่มลงในปลั๊กอินจะแทนที่ CSS ของธีมของคุณเอง
เมื่อคุณเปิดใช้งานปลั๊กอิน Simple Custom CSS แล้ว คุณจะเห็นแท็บ "CSS ที่กำหนดเอง" ใหม่ใต้ "ลักษณะที่ปรากฏ" ในแดชบอร์ด WordPress นี่คือที่ที่คุณสามารถเพิ่ม CSS ที่กำหนดเองได้ เมื่อคุณอัปเดตธีม CSS ที่กำหนดเองจะยังคงอยู่ การอัปเดตธีมของคุณจะแทนที่ไฟล์ style.css ของธีม แต่ปลั๊กอินจะแทนที่ไฟล์ style.css ใหม่ด้วย CSS ที่คุณกำหนดเอง
นอกจากนี้ยังมีปลั๊กอิน Simple Custom CSS และ JS ซึ่งรองรับทั้ง CSS ที่กำหนดเองและ JavaScript ที่กำหนดเอง คุณสามารถใช้เพื่อสร้าง CSS ที่กำหนดเองซึ่งจะแทนที่ CSS ของธีมของคุณเอง หากคุณไม่ต้องการยุ่งกับการสร้างธีมลูก คุณอาจต้องการใช้ปลั๊กอิน CSS ที่กำหนดเอง การดาวน์โหลดปลั๊กอิน CSS ที่กำหนดเองเป็นวิธีที่ง่ายในการรักษา CSS ที่กำหนดเองระหว่างการอัปเดตธีม
บทสรุป
เป็นเรื่องน่าผิดหวังเมื่อคุณสูญเสีย CSS ที่กำหนดเองหลังจากอัปเดตธีม แม้ว่าคุณจะบันทึก CSS ที่กำหนดเองไว้ในคอมพิวเตอร์ของคุณแล้ว คุณจะต้องย้อนกลับและเพิ่มเข้าไป คุณสามารถคง CSS ที่กำหนดเองของธีมไว้ได้โดยใช้เครื่องมือปรับแต่งในแดชบอร์ด WordPress สร้างธีมย่อย หรือใช้ปลั๊กอิน CSS ที่กำหนดเอง
