วิธีสร้างเทมเพลตหน้าผลการค้นหา Divi (สำหรับมือใหม่)

เผยแพร่แล้ว: 2022-06-17

คุณสงสัยหรือไม่ว่าจะสร้างเทมเพลตหน้าผลการค้นหา Divi ได้อย่างไร?

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

วิธีที่ง่ายที่สุดวิธีหนึ่งคือใช้ Divi ปลั๊กอินตัวสร้างหน้า WordPress อันทรงพลังนี้ช่วยให้คุณสร้างหน้าผลการค้นหาที่กำหนดเองได้โดยไม่ต้องมีความรู้ด้านเทคนิค

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

คุณสามารถใช้สารบัญนี้เพื่อไปยังส่วนต่างๆ ได้อย่างรวดเร็ว:

  • เหตุใดจึงต้องสร้างเทมเพลตหน้าผลการค้นหาที่กำหนดเองของ Divi
  • วิธีสร้างหน้าผลการค้นหา
    • ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งาน SearchWP
    • ขั้นตอนที่ 2: สร้างเทมเพลตหน้าผลการค้นหาที่กำหนดเองของคุณ
    • ขั้นตอนที่ 3: ปรับแต่งหน้าผลการค้นหาของคุณ
    • ขั้นตอนที่ 4: ตรวจสอบหน้าผลการค้นหาใหม่ของคุณ

มาเริ่มกันเลย!

เหตุใดจึงต้องสร้างเทมเพลตหน้าผลการค้นหาที่กำหนดเองของ Divi

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

หากพวกเขาเห็นหน้าว่างหลังจากป้อนคำค้นหา มีโอกาสสูงที่พวกเขาจะออกจากไซต์ของคุณทันที

โชคดีที่คุณสามารถหลีกเลี่ยงสถานการณ์ดังกล่าวได้อย่างง่ายดายด้วยการปรับแต่งหน้าผลการค้นหาของคุณ

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

สิ่งที่ได้รับความนิยมมากที่สุดคือการเพิ่มบล็อกที่มีโพสต์ที่เกี่ยวข้องและเสนอว่า “คุณหมายถึงมันหรือเปล่า” ข้อเสนอแนะ

how to create a Divi search results page template

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

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

ตัวอย่างเช่น คุณสามารถจัดการจำนวนผลลัพธ์บนเพจ ระบุข้อมูลเกี่ยวกับผู้เขียนโพสต์ เพิ่มแบบฟอร์มสมัครรับจดหมายข่าว และอื่นๆ อีกมากมาย

custom search results page

นอกจากนั้น การสร้างหน้าผลการค้นหาที่กำหนดเองยังช่วยให้คุณ:

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

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

วิธีสร้างหน้าผลการค้นหาด้วย Divi และ SearchWP

วิธีที่ง่ายที่สุดในการสร้างหน้าผลการค้นหาเฉพาะของคุณเองคือการใช้ปลั๊กอินตัวสร้างหน้า WordPress เช่น Divi

และหากคุณต้องการทำให้การค้นหาในไซต์ของคุณฉลาดขึ้นด้วย คุณสามารถใช้ Divi ร่วมกับ SearchWP

SearchWP คืออะไรและทำไมจึงใช้

SearchWP เป็นปลั๊กอินการค้นหา WordPress ที่ทรงพลังและใช้งานง่ายที่สุดในตลาด

SearchWP logo

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

ตัวอย่างเช่น ด้วย SearchWP คุณสามารถแยกหน้าใดๆ ออกจากผลการค้นหา ทำให้แท็กโพสต์สามารถค้นหาได้ และอื่นๆ อีกมากมาย

ด้วยวิธีนี้ คุณสามารถให้ผลการค้นหาที่เกี่ยวข้องมากขึ้นแก่ผู้เข้าชมและเพิ่มความสามารถในการค้นพบเนื้อหาของคุณ

สิ่งที่ดีที่สุดคือ SearchWP เข้ากันได้กับ Divi และรวมเข้ากับธีมของคุณโดยอัตโนมัติ

หลังจากติดตั้งปลั๊กอินแล้ว คุณสามารถเริ่มปรับแต่งการค้นหาของคุณเพื่อให้ดีขึ้นได้ทันที

นี่คือสิ่งที่น่าอัศจรรย์อีกสองสามอย่างที่คุณสามารถทำได้ด้วย SearchWP:

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

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

ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งาน SearchWP

ในการเริ่มต้น คุณจะต้องหยิบสำเนาของ SearchWP ที่นี่

จากนั้นลงชื่อเข้าใช้บัญชี SearchWP ของคุณแล้วคลิก ดาวน์โหลด

go to the Downloads tab

เมื่ออยู่ในหน้า ดาวน์โหลด ให้คลิก ดาวน์โหลด SearchWP และบันทึกไฟล์ ZIP ที่มีไฟล์ปลั๊กอินลงในคอมพิวเตอร์ของคุณ

download SearchWP

หลังจากดาวน์โหลดปลั๊กอินแล้ว ให้คัดลอกคีย์ใบอนุญาต SearchWP ของคุณในหน้าเดียวกัน

copy your license key

ขั้นตอนต่อไปคือการติดตั้ง SearchWP บนไซต์ของคุณ ในการทำเช่นนั้น คุณจะต้องอัปโหลดไฟล์ ZIP ที่ดาวน์โหลดมา

หากคุณต้องการความช่วยเหลือ คุณสามารถดูวิธีการติดตั้งปลั๊กอิน WordPress คำแนะนำทีละขั้นตอนได้

เมื่อคุณติดตั้ง SearchWP แล้ว คุณจะต้องเปิดใช้งานการคัดลอกปลั๊กอินด้วยรหัสสัญญาอนุญาตของคุณ

ในการเริ่มต้น ไปที่แดชบอร์ด WordPress ของคุณ ชี้เคอร์เซอร์ไปที่ปุ่ม SearchWP ที่แผงด้านบน และคลิก เปิดใช้งานใบอนุญาต

press Activate License

จากนั้นวางคีย์ใบอนุญาต SearchWP ของคุณลงในช่องใบอนุญาตแล้วคลิก เปิดใช้งาน

click Activate

หลังจากเปิดใช้งานปลั๊กอินแล้ว SearchWP จะรวมเข้ากับช่องค้นหาใดๆ บนไซต์ของคุณโดยอัตโนมัติ

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

ตอนนี้ มาดูกันว่าคุณสามารถสร้างหน้าผลการค้นหาโดยใช้เครื่องมือสร้างหน้า Divi ได้อย่างไร

ขั้นตอนที่ 2: สร้างเทมเพลตหน้าผลการค้นหาที่กำหนดเองของคุณ

ในการเริ่มต้น ให้ไปที่ Divi » Theme Builder ในแดชบอร์ด WordPress ของคุณ

go to the theme builder

สร้างเทมเพลตใหม่

เมื่อคุณไปที่หน้าตัวสร้างธีม ให้คลิก เพิ่มเทมเพลตใหม่

click Add New Template

จากนั้น ทำเครื่องหมายที่ช่องถัดจากตัวเลือก ผลการค้นหา ที่ด้านล่างของเมนูแบบเลื่อนลง แล้วคลิก สร้างเทมเพลต

create a search results template

อย่างที่คุณเห็น เทมเพลตหน้า ผลการค้นหา ใหม่ของเราได้ปรากฏขึ้นท่ามกลางเทมเพลตอื่นๆ

here is your search results pages template

หากต้องการเริ่มปรับแต่ง ให้คลิก เพิ่มเนื้อหาที่กำหนดเอง

click Add Custom Body

จากนั้นเลือกตัวเลือก Build Custom Body

click Build Custom Body

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

ในบทช่วยสอนนี้ เราจะสร้างหน้าผลการค้นหาตั้งแต่ต้น ดังนั้นให้คลิกปุ่ม เริ่มสร้าง

press Start Building

เพิ่มโมดูลบล็อก

หลังจากนั้น คุณสามารถเลือกแถวสำหรับหน้าในอนาคตของคุณได้ ตัวอย่างเช่น เราจะเลือกอันแรก

insert a row

จากนั้น เราสามารถเพิ่มโมดูลแรกในหน้าใหม่ของเราได้

insert module

หากต้องการแสดงผลการค้นหาในหน้านี้ เราจำเป็นต้องเพิ่มโมดูล บล็อก

ในการเริ่มต้น ให้ป้อน "บล็อก" ในช่องค้นหาและคลิกที่โมดูล บล็อก

choose the Blog module

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

switch the toggle

ขั้นตอนที่ 3: ปรับแต่งเค้าโครงผลการค้นหา

ตอนนี้คุณสามารถปรับแต่งหน้าผลการค้นหาของคุณเหมือนกับหน้า Divi อื่น ๆ

ตัวอย่างเช่น ให้เปลี่ยนรูปแบบผลการค้นหาเป็น Grid โดยไปที่แท็บ ออกแบบ ในการตั้งค่าโมดูล บล็อก

go over to the Design tab

จากนั้นคลิกที่รายการ เค้าโครง เพื่อขยายการตั้งค่า

click Layout

หลังจากนั้น เปลี่ยนโครงร่างโมดูลจาก Fullwidth เป็น Grid

change the layout

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

click the checkmark icon

เพิ่มหัวเรื่อง

ตอนนี้ เรามาเพิ่มหัวข้อในหน้าผลการค้นหาของเรากัน

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

click Plus

จากนั้นค้นหาโมดูล ข้อความ และคลิกเพื่อเพิ่มลงในหน้า

click on the text module

หากต้องการเปลี่ยนข้อความภายในโมดูล ให้คลิกที่ข้อความนั้นแล้วพิมพ์สิ่งที่คุณต้องการในหน้าต่างการตั้งค่าที่ปรากฏ

edit your text

ตัวอย่างเช่น เราจะเปลี่ยนเป็น "ผลการค้นหา"

enter your text

ในการแปลงข้อความเป็นส่วนหัว ให้คลิก ย่อหน้า แล้วเลือกรายการ หัวเรื่อง 1 จากเมนูแบบเลื่อนลง

change the text type

มาระยะขอบหัวเรื่องให้อยู่ตรงกลางด้วย โดยคลิกที่ปุ่มตรง กลาง

align text to the center

อย่าลืมบันทึกการเปลี่ยนแปลงเมื่อคุณแก้ไขส่วนหัวเสร็จแล้ว

press the checkmark icon

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

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

move your module

นี่คือผลลัพธ์ที่ออกมาในไซต์ทดสอบของเรา:

the search results on our test site

เพิ่มแถบค้นหา

มาเพิ่มแถบค้นหาในหน้าของเราด้วย เพื่อให้ผู้เยี่ยมชมสามารถค้นหาอีกครั้งหากไม่มีผลลัพธ์สำหรับข้อความค้นหาของพวกเขา

ในการเริ่มต้น ให้คลิกที่ปุ่มเครื่องหมาย บวก ที่ปรากฏขึ้นเมื่อคุณวางเคอร์เซอร์ไว้เหนือหัวเรื่องของคุณ

click Plus to add a new module

จากนั้น ค้นหาโมดูลการค้นหา และคลิกเพื่อเพิ่มลงในหน้า

add the Search module

คุณสามารถเพิ่มข้อความลงในแบบฟอร์มการค้นหาได้โดยป้อนลงในช่อง Input Placeholder

enter the placeholder text

ตัวอย่างเช่น เราจะป้อน "ลองค้นหาอีกครั้ง"

we set the custom placeholder

เมื่อคุณพอใจกับรูปลักษณ์ของแบบฟอร์มการค้นหาแล้ว ให้คลิกปุ่มเครื่องหมายถูกสีเขียวเพื่อบันทึกการเปลี่ยนแปลงที่คุณทำไว้

click Save

นี่คือผลลัพธ์สุดท้ายของหน้าผลการค้นหา Divi ในเว็บไซต์ทดสอบของเรา:

that's how our search page looks

บันทึกหน้าผลการค้นหาใหม่ของคุณ

เมื่อคุณปรับแต่งหน้าผลการค้นหาเสร็จแล้ว คุณจะต้องบันทึก

ในการเริ่มต้น ให้คลิกปุ่มสามจุดสีม่วงที่ด้านล่างของเครื่องมือแก้ไขเพจ Divi

click the three dots icon

จากนั้นกดปุ่ม บันทึก ที่มุมล่างขวาเพื่อบันทึกหน้าผลการค้นหาใหม่ของคุณ

press Save to save your changes

ขั้นตอนต่อไปคือการปิดตัวแก้ไขหน้าและกลับไปที่หน้าตัว สร้างธีม โดยคลิกที่กากบาทที่มุมขวาบน

click the cross icon at the top right

เมื่อถึงแล้ว คลิก บันทึกการเปลี่ยนแปลง ที่มุมบนซ้ายเพื่อบันทึกเทมเพลตใหม่ของคุณ

press the Save Changes button

ขั้นตอนสุดท้ายคือการตรวจสอบว่าหน้าผลการค้นหาของคุณมีลักษณะอย่างไรในไซต์ของคุณ

ขั้นตอนที่ 4: ตรวจสอบหน้าผลการค้นหาใหม่ของคุณ

วิธีที่เร็วที่สุดในการทำเช่นนั้นคือการกดปุ่ม เยี่ยมชมไซต์ ใต้ชื่อไซต์ของคุณที่มุมบนซ้ายของแดชบอร์ด WordPress ของคุณ

click Visit Site

เมื่อคุณไปที่ไซต์ของคุณแล้ว ให้ป้อนคำค้นหาในช่องค้นหาเพื่อดูผลการค้นหา

ตัวอย่างเช่น เราจะค้นหา “WooCommerce”

click Search

อย่างที่คุณเห็น หน้าค้นหาบนไซต์ของเราดูเหมือนกับที่เราปรับแต่งด้วย Divi

the final results of our search page

ในบทความนี้ คุณได้เรียนรู้วิธีสร้างเทมเพลตหน้าผลการค้นหา Divi และทำให้การค้นหาของคุณฉลาดขึ้นด้วย SearchWP

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

หากคุณพร้อมที่จะเพิ่มการค้นหาบนไซต์ของคุณ คุณสามารถคว้าสำเนาของ SearchWP ได้ที่นี่

ไม่พบโพสต์ของคุณตามแท็ก? ดูวิธีแก้ไขแท็ก WordPress แบบละเอียดที่ไม่สามารถค้นหาได้

กำลังมองหาวิธีซ่อนหมวดหมู่เฉพาะจากการค้นหาอยู่ใช่ไหม ปฏิบัติตามวิธีแยกหมวดหมู่ออกจากการค้นหา WordPress คำแนะนำทีละขั้นตอน