วิธีเพิ่มช่องค้นหาในเมนูรองของ Divi

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

ผลลัพธ์

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

ทำไมต้องเพิ่มช่องค้นหาลงในเมนูรองของคุณ

การเพิ่มความเป็นไปได้ในการค้นหาลงในเมนูรองของคุณเป็นหนึ่งในสิ่งที่คุณอาจลองทำไปแล้ว แต่แตกต่างจากเมนูหลัก ส่วนหัวไม่มีหน้าแยกต่างหากใน WordPress ที่ช่วยให้คุณเพิ่มสิ่งต่างๆ ด้วยตนเอง โดยไม่ต้องเพิ่มบรรทัดโค้ด PHP ลงในไฟล์ header.php ของเว็บไซต์ของคุณ

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

เสนอความเป็นไปได้ในการค้นหาแก่ผู้เยี่ยมชมของคุณตั้งแต่เริ่มต้น

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

การบันทึกเมนูหลักของคุณจากช่องค้นหา

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

เน้นช่องค้นหาโดยไม่ต้องมีเมนูหลักที่ฉูดฉาด

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

วิธีเพิ่มช่องค้นหาในเมนูรองของ Divi

สมัครสมาชิกช่อง Youtube ของเรา

เพิ่มช่องค้นหาในไฟล์ PHP ของส่วนหัว

ตอนนี้ ในการเพิ่มช่องค้นหาในส่วนหัวของคุณจริง ๆ ตามที่แสดงในภาพด้านล่าง คุณจะต้องเพิ่มบางอย่างในไฟล์ header.php ของเว็บไซต์ของคุณเป็นหลัก บรรทัดรหัสที่คุณต้องการมีดังต่อไปนี้:

<?php get_search_form(); ?>

ไปข้างหน้าและคัดลอกบรรทัดโค้ด PHP นี้และไปที่แดชบอร์ด WordPress ของคุณ ภายใน แดชบอร์ด WordPress ของคุณ ให้ไปที่ ลักษณะที่ปรากฏ > ตัวแก้ไข > header.php

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

จัดรูปแบบช่องค้นหาของคุณ

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

หากคุณไม่ได้แก้ไข CSS ในช่องค้นหา โดยค่าเริ่มต้นจะมีลักษณะดังนี้ในเมนูรองของคุณ:

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

ลบ/แก้ไขป้ายกำกับการค้นหา

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

ชั้นเรียนที่คุณจะต้องแก้ไขป้ายกำกับการค้นหาคือ “.screen-reader-text” ดังที่แสดงในตัวอย่างด้านล่าง คุณสามารถปิดการใช้งานไม่ให้ปรากฏ

.screen-reader-text {
display: none;
}

จัดรูปแบบการป้อนข้อมูลการค้นหาของคุณ

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

 input#s
{

}

จัดรูปแบบอินพุตปุ่มของคุณ

และสุดท้าย เราก็มีรูปแบบปุ่มด้วยเช่นกัน หากต้องการแก้ไขส่วนนี้ของช่องค้นหา ให้วางบรรทัดโค้ด CSS ระหว่างวงเล็บต่อไปนี้:

input#searchsubmit
{
}

โค้ด CSS ที่จำเป็นสำหรับตัวอย่างของเรา

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

.screen-reader-text {
display: none;
}

input#s {
border-radius: 5px;
}

input#searchsubmit {
border: 1px solid #000000;
color: #FFFFFF;
background-color: #000000;
border-radius: 5px;
}

form#searchform {
float: right;
}
@media screen and (min-width: 480px) {
#top-header .container {
padding-bottom: 5px;
}

#et-secondary-menu .et-social-icons {
margin-top: 6px;
}}

ผลลัพธ์

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูอีกครั้งว่าส่วนหัวของคุณควรมีลักษณะอย่างไร:

ความคิดสุดท้าย

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

อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!

ภาพเด่นโดย D Line / shutterstock.com