วิธีสร้าง Sticky Header ใน WordPress

ในช่วงทศวรรษที่ผ่านมา มีการเน้นที่การนำทางเว็บไซต์เพิ่มมากขึ้นเรื่อยๆ สิ่งนี้เกิดขึ้นพร้อมกับการใช้สมาร์ทโฟนอย่างแพร่หลายซึ่งมีตัวเลือกการนำทางที่จำกัดเมื่อเทียบกับอินเทอร์เฟซเดสก์ท็อปแบบเดิม ความแตกต่างในการออกแบบเว็บไซต์มีมากกว่าที่เห็นได้ชัดเจนหากคุณดูการเปรียบเทียบระหว่างไซต์จากปี 2011 กับไซต์ที่สร้างขึ้นในขณะนี้

วิธีหลักวิธีหนึ่งที่ใช้ในการกำหนดค่าเค้าโครงไซต์ใหม่คือองค์ประกอบที่ติดหนึบ ตั้งชื่ออย่างเหมาะสม องค์ประกอบเหล่านี้จะติดอยู่ที่หน้ากระดาษเมื่อคุณเคลื่อนที่ไปรอบๆ หน้านั้น กล่าวคือ องค์ประกอบเหล่านี้คงตำแหน่งเดิมไว้ (ลองนึกถึงบานหน้าต่างการตรึงใน Excel แล้วคุณจะรู้ว่ามันทำงานอย่างไร)

บน ล่าง ซ้าย ขวา

องค์ประกอบที่ติดหนึบมักจะถูกสงวนไว้สำหรับเมนู ส่วนหัว และ/หรือแถบสถานะ สิ่งเหล่านี้นำความยืดหยุ่นมาสู่ผู้เยี่ยมชมอย่างมาก เพราะเขาสามารถเปลี่ยนจากหน้าหนึ่งไปยังหน้าถัดไปได้ทันทีโดยไม่ต้องย้อนกลับเลย นอกจากนี้ สิ่งเหล่านี้ยังถูกจัดวางที่ขอบด้านบนและด้านล่างของหน้าเพื่อเริ่มต้น ซึ่งทำงานได้ดีกับสถานที่ตั้งทั้งหมด การสร้างหน้ารอบๆ องค์ประกอบที่ติดหนึบซึ่งอยู่ตรงกลางหน้าจะเป็นเรื่องยากมาก

นอกจากนี้ยังพบได้ไม่บ่อยนักในขอบด้านซ้ายและขวาด้วยฟังก์ชันเดียวกัน มีเพียงรูปแบบที่แตกต่างกัน ในกรณีเหล่านี้ พวกมันจะถูกซ่อนไว้จนกว่าคุณจะวางเคอร์เซอร์ไว้เหนือพวกมันหรือแตะพวกมันบนหน้าจอ

ประหยัดพื้นที่

สิ่งที่น่าสนใจเกี่ยวกับองค์ประกอบที่เหนียวเหนอะหนะคือช่วยให้คุณประหยัดพื้นที่บนหน้าและบนไซต์โดยรวม – สามารถใช้แทนที่ทั้งหน้าได้จริง นี่เป็นเพราะพวกเขาปล่อยให้เนื้อหาหลักของไซต์ไม่เสียหายและทำให้เครื่องมือมัลติฟังก์ชั่นของเส้นขอบที่ใช้กับหน้าที่มากมายของหน้าด้วยตัวเอง ลองนึกถึงการจัดวางไซต์โดยเฉลี่ยของคุณสักครู่

ด้านบนสงวนไว้สำหรับเมนูที่เกี่ยวข้องกับหน้าที่จัดเรียงตามหมวดหมู่ที่กำหนดและแถบค้นหา สิ่งเหล่านี้ซ่อนอยู่หลังแถบขณะเลื่อนและขยายเมื่อจำเป็น หากไม่เป็นเช่นนั้น เฉพาะแผนผังเมนูเท่านั้นที่จะครอบคลุมส่วนบนทั้งหมดของหน้าและจะไม่ "ติดตาม" เมื่อเลื่อนลงมา ดังนั้นผู้เยี่ยมชมของคุณจะต้องเลื่อนขึ้นและลงอย่างต่อเนื่องเพื่อไปยังส่วนต่างๆ ของหน้า .

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

การสร้างองค์ประกอบเหนียว

เมื่อเราพูดถึง WordPress มีหลายวิธีที่จะช่วยให้คุณคิดได้ และที่นี่ก็เช่นเดียวกัน คุณสามารถสร้างองค์ประกอบที่ติดหนึบได้ด้วยตนเองภายในตัวแก้ไขเริ่มต้น หรือคุณสามารถใช้ปลั๊กอินที่แทนที่ความจำเป็นในการเขียนโค้ดด้วยอินเทอร์เฟซที่เป็นมิตรกับผู้เริ่มต้น ความแตกต่างระหว่างผลลัพธ์ที่ได้นั้นน้อยมาก แต่วิธีที่คุณได้รับทำให้เกิดความแตกต่าง ตัวอย่างเช่น เราจะใช้ Sticky Headers เนื่องจากเป็นองค์ประกอบทั่วไปที่มักสร้างขึ้นเพื่อติด

การสร้างส่วนหัวแบบติดหนึบ .ด้วยตนเอง

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

เมื่อคุณมีส่วนหัวที่จะใช้งานได้แล้ว คุณจะต้องเข้าถึงคอนโซล เพียงไปที่ส่วนลักษณะที่ปรากฏทางด้านซ้ายของแดชบอร์ด เลือก "ปรับแต่ง" แล้วคลิก " CSS เพิ่มเติม" เมื่อเปิดคอนโซลแล้ว คุณต้องป้อนรหัสที่ทำให้ส่วนหัวของคุณติดหนึบ:

 #website-navigation { background:#fff; height:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; text-align: center; }

โค้ดด้านบนเป็นเพียงตัวอย่างว่าโดยทั่วไปแล้วควรมีลักษณะอย่างไร ไม่ใช่คำสั่งที่สรุปได้แบบ be-all-end-all โปรดทราบว่าบรรทัดแรกจะเจาะจงสำหรับแต่ละไซต์เสมอ - แทนที่ #website-navigation ด้วยคลาส CSS หรือ ID ของส่วนหัวการนำทางของคุณก่อนที่จะกลับไปที่ตัวแก้ไขเพจ

หลังจากที่คุณได้ตรวจสอบฟังก์ชันการทำงานภายในหน้าต่างแสดงตัวอย่างหน้า/โพสต์แล้ว เพียงแค่เผยแพร่ คุณก็จะมีส่วนหัวที่ติดหนึบ เราต้องชี้ให้เห็นว่าคุณอาจต้องการขยายโค้ด CSS ให้ครอบคลุมมากกว่าแอตทริบิวต์ "เหนียว" สำหรับส่วนหัวเช่นนี้ ขอแนะนำให้เพิ่มสิ่งที่จะเน้นที่ส่วนหัวด้วยสายตา เช่น แบบอักษรสี ขนาด การเยื้อง ฯลฯ เนื่องจากเป็นกระดาษถาวรบนหน้าจึงมองข้ามได้ง่าย ดังนั้นคุณควรพยายามทำให้โดดเด่น

การสร้างส่วนหัวติดหนึบด้วยปลั๊กอิน

มีความเหลื่อมล้ำกันอย่างมากระหว่างผู้ที่ต้องการเว็บไซต์สำหรับธุรกิจหรือบล็อกของตน กับผู้ที่ไม่มีความรู้ในการสร้างสิ่งที่ดูเป็นมืออาชีพ โชคดีที่ WordPress มีปลั๊กอินมากมายที่ทำให้ชีวิตง่ายขึ้นสำหรับทุกคน แทบไม่จำเป็นต้องมีอะไรมากไปกว่าความรู้พื้นฐานด้านซอฟต์แวร์เพื่อบรรลุเป้าหมายของคุณ WP Sticky เป็นตัวอย่างที่ยอดเยี่ยมของปลั๊กอินที่แทนที่การเข้ารหัสทั้งหมดที่เรากล่าวถึงข้างต้นด้วยอินเทอร์เฟซที่ใช้งานง่ายซึ่งใครๆ ก็สามารถเข้าถึงได้อย่างรวดเร็ว ในเวลาเดียวกัน มันมีฟังก์ชันการทำงานจำนวนเท่าๆ กับที่คุณจะมีในขณะที่สร้างหัวกระดาษติดหนึบด้วยตนเอง มาทำลายมันกันเถอะ

การสร้างองค์ประกอบ

เช่นเดียวกับที่คุณจำเป็นต้องมีส่วนหัวเมื่อคุณใช้ CSS คุณต้องสร้างองค์ประกอบที่คุณเพิ่มแอตทริบิวต์ที่ติดหนึบ

มีสองวิธีที่แตกต่างกันในการแยกแยะองค์ประกอบ – คุณสามารถป้อนการกำหนดในฟิลด์ที่จำเป็น หรือคุณสามารถเลือกองค์ประกอบผ่านหน้าต่างแสดงตัวอย่างโดยคลิกที่องค์ประกอบนั้น (วิธีนี้ใช้งานได้ดีหากคุณมีปัญหาในการหาการกำหนด) . เมื่อเลือกองค์ประกอบของคุณในหน้าต่างแสดงตัวอย่าง คุณจะเห็นการกำหนดที่เปลี่ยนแปลงอยู่ด้านบนของหน้าจอ

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

ทำให้ดูดี

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

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

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

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

ดัชนี Z เป็นการตั้งค่าทางเลือกที่อาจสร้างความสับสนหลายอย่างในแวบแรก ด้วยเหตุนี้และด้วยเหตุนี้จึงเป็นคุณลักษณะเสริม หลายคนอาจจะเลิกใช้และเพิกเฉยต่อคุณลักษณะนี้ หากทุกอย่างได้ผล คุณอาจจะไม่มีวันหันหลังกลับ อย่างไรก็ตาม หากมีปัญหากับจอแสดงผล ดัชนี Z อาจเป็นวิธีแก้ปัญหาอย่างรวดเร็ว โดยพื้นฐานแล้ว ให้คิดว่าหน้าหนึ่งเป็นชุดของสแต็คที่สแต็คด้านบนมีตัวเลขที่สูงกว่าด้านล่าง ดังนั้น หากมีบางอย่างบดบังส่วนหัวที่ติดหนึบของคุณ ให้พยายามยกระดับดัชนี Z (แนะนำ 99999 เป็นค่าที่ได้ผล)

ด้วยส่วนหัวที่ติดหนึบของคุณ "บนสุดของสแต็ค" ถึงเวลาที่จะสร้างสรรค์ยิ่งขึ้นด้วยการเพิ่มเอฟเฟกต์ขณะเลื่อนลง เมื่อปิดใช้งานตัวเลือกทั้งสอง ส่วนหัวจะรักษาตำแหน่งไว้ด้านบนเหมือนชิ้นส่วนตัดของหน้าเดิม คุณสามารถเพิ่มแสงแฟลร์ได้มากขึ้นด้วยเอฟเฟกต์ เช่น เฟดอินหรือเลื่อนลง พิจารณาการออกแบบโดยรวมของไซต์ของคุณก่อนที่คุณจะเลือกใช้เอฟเฟกต์ประเภทนี้ อย่างไรก็ตาม – บ่อยครั้ง น้อยแต่มาก

วิชวลเอฟเฟกต์ไม่ได้จำกัดเฉพาะส่วนที่เชื่อมต่อกับการเคลื่อนไหวเท่านั้น คุณยังสามารถปรับแต่งส่วนหัวได้เอง (นอกเหนือจากการเคลื่อนไหวที่คุณทำขณะสร้างส่วนหัว) ความทึบมีประโยชน์ถ้าคุณไม่ต้องการให้ส่วนหัวปิดบังเนื้อหาอื่นๆ บนหน้า การตั้งค่าไว้ที่ประมาณ 50% จะทำให้ทั้งส่วนหัวและเนื้อหาด้านล่างมองเห็นได้ชัดเจน

คุณลักษณะที่มีประโยชน์มากกว่าความทึบคือการปรับช่วงการเลื่อน ในกรณีที่คุณมีหน้าเว็บที่ยาวมาก เช่น บล็อกปกติ มีจุดหนึ่งในการเลื่อนลงมาซึ่งการมีส่วนหัวที่ติดหนึบไม่สมเหตุสมผลอีกต่อไป นี่เป็นช่วงเวลาที่ควรแก้ไขส่วนหัวหลังจากที่ผู้เยี่ยมชมของคุณเลื่อนลงมามากพอแล้ว

สุดท้าย มีตัวเลือกในการเปลี่ยนสีพื้นหลังของส่วนหัวเมื่อมีความเหนียว ทำให้ดูโดดเด่นยิ่งขึ้น แต่ให้กลับเป็นค่าเดิมเมื่อส่วนหัวไม่เหนียวอีกต่อไป

ส่วนสุดท้ายของการแก้ไขภาพทำให้เรากลับมาเต็มวงอีกครั้งเพื่อแก้ไขส่วนหัวที่ติดหนึบผ่าน CSS ด้วยตนเอง

แม้ว่าคุณไม่จำเป็นต้องมีความรู้ด้านการเขียนโค้ดใดๆ มาก่อนเพื่อใช้ WP Sticky ให้ประสบความสำเร็จ แต่ก็สามารถยกระดับงานของคุณได้หากคุณใช้งาน คุณลักษณะนี้เป็นทางเลือก ดังนั้นมันขึ้นอยู่กับคุณทั้งหมดว่าคุณต้องการใช้คุณลักษณะนี้และมากน้อยเพียงใด

ตัวเลือกขั้นสูง

ส่วนตัวเลือกขั้นสูงแทบทั้งหมดเกี่ยวกับการยกเว้น กล่าวคือ ในกรณีใดส่วนหัวที่ติดหนึบจะหยุดเหนียวและเปลี่ยนกลับเป็น "การเขียนโปรแกรมดั้งเดิม"

การตั้งค่าขนาดหน้าจอด้วยตนเองโดยที่ส่วนหัวไม่เหนียวเหนอะหนะเป็นการเพิ่มขนาดเริ่มต้นสี่ขนาดที่คุณแสดงไว้ในส่วนการตั้งค่าภาพ ที่นี่ คุณจะต้องเจาะจงเท่าที่คุณต้องการ ดังนั้นหากมีหน้าจอเสริมในอนาคตที่ไม่พอดีกับขนาดที่กำหนดไว้ล่วงหน้า คุณสามารถสร้างกฎที่จะใช้งานได้

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

เช่นเดียวกับวิธีที่คุณเลือกองค์ประกอบแบบติดหนึบ (ในกรณีของเรา ส่วนหัว) ย้อนกลับไปในตอนเริ่มต้น คุณยังสามารถเลือกองค์ประกอบแบบดันขึ้นที่ด้านล่างในหน้าที่คุณต้องการให้ดันส่วนหัวขึ้นได้ โดยพื้นฐานแล้วจะทำให้ส่วนหัวของคุณย้ายไปที่ขอบขององค์ประกอบนี้โดยไม่มีช่องว่างภายในหรือช่องว่างระหว่างกัน

เพื่อจบทุกอย่าง เมื่อคุณเบื่อหน่ายและไม่ต้องการองค์ประกอบที่เหนียวเหนอะหนะอีกต่อไป มีตัวเลือกสุดท้ายเสมอที่จะลบออกทั้งหมด ขอเตือนว่านี่เป็นการกระทำแบบถาวร และการปรับแต่งทั้งหมดที่คุณทำกับองค์ประกอบ (ในกรณีนี้คือส่วนหัว) จะสูญหายไป

สรุป

เป็นการยากที่จะบอกว่าวิธีไหนดีกว่ากัน แน่นอนว่าคุณมีตัวเลือกมากขึ้นโดยใช้ CSS แต่นั่นเป็นวิธีแก้ปัญหาสำหรับคนเพียงไม่กี่คนโดยรวม ในทางกลับกัน ปลั๊กอินอย่าง WP Sticky ได้รวมการใช้งานง่ายเข้ากับฟังก์ชันการทำงานที่แข็งแกร่งซึ่งทำให้เป็นตัวเลือกที่สมบูรณ์แบบสำหรับผู้เริ่มต้นหรือผู้ที่ยังไม่แน่ใจเกี่ยวกับการเข้ารหัสตั้งแต่เริ่มต้น วิธีที่ดีที่สุดในการสร้างหัวข้อที่เหนียวแน่นและใช้งานได้จริงคือการเริ่มต้นด้วยส่วนหลังและปรับตัวเองให้เป็นแบบเดิม

ผู้เขียน : มาเทจ มิโลโนจา

ใช้เพื่อเขียนเกี่ยวกับเกมและการเล่นเกมโดยทั่วไป แต่หลังจากนั้นได้เปลี่ยนไปใช้การทดสอบและเขียนเกี่ยวกับซอฟต์แวร์พัฒนาเว็บ ยังคงเล่นเกมมากมายเพียงเพื่อความสนุกของมัน