เหตุผลประการหนึ่งที่ทำให้เว็บไซต์ของเรามีความสวยงามคือการออกแบบที่สวยงามและธีม WordPress ต่างๆ ที่ช่วยให้เราปรับปรุงความงามนั้นได้ อย่างไรก็ตาม เพื่อรักษาเอกลักษณ์ของเว็บไซต์ หลายคนปรับแต่งธีมที่นักพัฒนาละเว้นสิ่งต่าง ๆ จากหน้าหนึ่งไปยังอีกหน้าหนึ่ง ตัวอย่างเช่น - ละเว้นแถบด้านข้างหรือกล่องข้อความ ในการทำเช่นนั้น เราจำเป็นต้องมีแนวคิดเกี่ยวกับคุณสมบัติ CSS เฉพาะสองอย่าง - การมองเห็นและการแสดงผล ด้วยคุณสมบัติทั้งสองนี้ ทุกคนสามารถซ่อนองค์ประกอบของหน้าได้อย่างง่ายดาย และนั่นคือสิ่งที่เราจะเห็นในการกวดวิชาวันนี้
เหตุผลเบื้องหลังการซ่อนองค์ประกอบ
เมื่อนักพัฒนาสร้างธีม WordPress เขานึกถึงความชอบและความต้องการของผู้คนทุกประเภท อย่างไรก็ตาม แต่ละคนไม่เหมือนกัน ดังนั้นจึงจำเป็นต้องมีการปรับแต่ง โดยปกติ สิ่งที่ผู้คนละเว้นจากเว็บไซต์คือส่วนหัวหรือเมนูนำทาง
โดยปกติ เราต้องการการดำเนินการประเภทนี้เมื่อเราต้องการลบบางสิ่งออกจากหน้าใดหน้าหนึ่ง ถ้าจะให้พูดตรงๆ กว่านี้ สมมติว่าคุณต้องการลบส่วนบทวิจารณ์หรือคะแนนออกจากโพสต์ในบล็อก ตอนนี้ หากคุณลบส่วนบทวิจารณ์ออกจากการตั้งค่าธีมทั้งหมด ส่วนนั้นจะถูกลบออกจากหน้าโพสต์ทั้งหมด เนื่องจากเราต้องการลบออกจากหน้าใดหน้าหนึ่ง - เราสามารถซ่อนองค์ประกอบนั้นของหน้าโดยใช้ CSS
การกำหนดเป้าหมายองค์ประกอบเพื่อซ่อน
คุณรู้ว่าองค์ประกอบหน้าใดที่คุณต้องการซ่อน แต่สิ่งที่คุณไม่รู้คือสิ่งที่มันพูดในภาษาของการเขียนโค้ดหรือวิธีที่นักพัฒนาระบุไว้
เราสามารถหาได้ง่าย คลิกขวาที่องค์ประกอบที่คุณต้องการซ่อน จากนั้นเลือก ตรวจสอบ
สร้างเว็บไซต์ที่น่าทึ่ง
ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด
เริ่มเลย
จากนั้นไปที่ส่วน Elements ใน Dev Tools คุณจะเห็น CSS ID ขององค์ประกอบที่คุณเลือก ตอนนี้เลื่อนเมาส์ไปที่โค้ดองค์ประกอบ แล้วจะมีส่วนที่ไฮไลต์บนหน้า คลิกที่บรรทัดที่ถูกต้องเพื่อล็อคการเลือกของคุณ
ตอนนี้เราต้องเปลี่ยนเป็น CSS โดยใช้ตัวเลือกนี้
การใช้ CSS แบบดิสเพลย์
วิธีที่ง่ายที่สุดในการซ่อนองค์ประกอบใด ๆ คือการลบล้าง เราสามารถทำได้ง่ายๆ ผ่านคุณสมบัติ " display:none " เป็นผลให้องค์ประกอบนั้นจะไม่ปรากฏบนหน้านั้นอีกต่อไป และส่วนที่ครอบคลุมองค์ประกอบนั้นจะถูกลบออกและเติมโดยอัตโนมัติ นอกจากนี้จะไม่มีปัญหากับการตอบสนอง
ในภาพนี้ คุณจะเห็นว่าเราต้องการลบส่วนหัวหลัก ตอนแรกเราได้คลิกที่องค์ประกอบ id จากนั้นเราย้ายไปที่แผงลักษณะสำหรับการปรับ CSS และเพิ่มโค้ดที่ระบุด้านล่าง
display:noneและเราได้ทำวิธีที่ง่ายที่สุดในการลบองค์ประกอบออกจากทั้งเว็บไซต์
การใช้การมองเห็น CSS
เช่นเดียวกับ CSS ที่แสดง เรายังสามารถใช้ CSS การมองเห็นเพื่อซ่อนองค์ประกอบใดๆ ก็ได้ ในทางทฤษฎี ทั้งคู่ทำงานเหมือนกัน แต่ในทางปฏิบัติ เราแค่ซ่อนองค์ประกอบ ไม่ใช่ลบออก การมองเห็น CSS ช่วยให้คุณทำให้องค์ประกอบที่มองไม่เห็นและจะเก็บพื้นที่ที่จัดสรรไว้
visibility:hidden;
การมองเห็นหรือการแสดงผล: ควรใช้ในสถานการณ์ใด?
เรารู้แล้วว่าโค้ด CSS ใดทำหน้าที่อะไร หากเราต้องการลบองค์ประกอบออกจากหน้าอย่างสมบูรณ์ เราจะใช้ Display CSS และถ้าเราต้องการทำให้องค์ประกอบหายไปโดยมีเงื่อนไขในการดำรงตำแหน่ง เราจะใช้ CSS การมองเห็น
ตัวอย่างเช่น หากเราต้องการลบพื้นหลังของแถวคอลัมน์เดียว เราจะใช้ "visibility:hidden" เพราะจะลบเฉพาะพื้นหลัง แต่จะปล่อยให้แถวคอลัมน์เดียวและเนื้อหาอยู่ในนั้น และถ้าเราใช้ "display:none;" เนื้อหา แถวและคอลัมน์ในนั้นพร้อมกับพื้นหลังจะถูกลบออกและหน้าจะถูกจัดระเบียบอัตโนมัติในรูปแบบใหม่
ซ่อนองค์ประกอบในหน้าเฉพาะ
หากมีการเปลี่ยนแปลงใด ๆ จากสิ่งที่เราได้เห็นจนถึงขณะนี้ ผลกระทบจะเกิดกับทั้งเว็บไซต์ ตอนนี้เราจะมาดูกันว่าเราจะทำให้องค์ประกอบหายไปในหน้าใดหน้าหนึ่งได้อย่างไร สำหรับสิ่งนี้ เราจำเป็นต้องค้นหา Page ID Class เฉพาะ โปรดจำไว้ว่า มันเป็น หมายเลข ID ของเพจ อย่างง่าย ไม่ใช่ CSS ID
คุณสามารถค้นหา ID นี้ได้โดยวางเมาส์ไว้บนหน้า ที่นี่เรากำลังโพสต์เป็นตัวอย่าง คุณสามารถดู "post=3" ในรูปสี่เหลี่ยมผืนผ้าที่มีเครื่องหมายตำแหน่งในลิงก์ และนั่นคือรหัสเพจสำหรับหน้า " นโยบายความเป็นส่วนตัว " ของเว็บไซต์
คุณสามารถตรวจสอบ ID นี้ได้จากหน้า แก้ไข หรือหน้า ตัวอย่าง
ตอนนี้เราจะเพิ่ม Display CSS ในหน้านี้เพื่อซ่อนแถบด้านข้าง เราสามารถทำได้จากเครื่องมือปรับแต่งธีม
.page-id-3 div#sidebar {
display:none;
}
โค้ดที่เขียนด้านบนนี้เป็นเพียงการลบแถบด้านข้างออกจากหน้าเฉพาะซึ่งโค้ดที่เขียนไว้ด้านล่างจะลบองค์ประกอบออกจากทุกที่
dev#sidebar {
visibility:hidden;
}คำพูดสุดท้าย
ในบทช่วยสอนวันนี้ เราต้องการอธิบายความแตกต่างระหว่างคุณสมบัติ CSS การแสดงผลและการมองเห็น และคุณสมบัติที่คุณควรใช้เมื่อปรับแต่งไซต์ WordPress ของคุณ เราหวังว่าคุณจะพบว่าโพสต์บล็อกนี้มีประโยชน์ ถ้าใช่ การแบ่งปันจะเป็นปรากฎการณ์!
