คุณต้องการเรียนรู้วิธีสร้างหน้าผลการค้นหาด้วย Elementor หรือไม่?
ไม่ว่าคุณจะมีบล็อกส่วนตัว เว็บไซต์อีคอมเมิร์ซ หรือเว็บไซต์ขนาดใหญ่ที่มีผู้ใช้หลายคน การเพิ่มคุณลักษณะการค้นหาก็มีความสำคัญเพียงพอ ช่วยให้ผู้เยี่ยมชมของคุณพบเนื้อหาที่ต้องการได้ง่ายขึ้น แทนที่จะคลิกที่นี่และที่นั่นในเมนูการนำทาง
ใน WordPress ลักษณะ (เค้าโครง) ของหน้าผลการค้นหาจะถูกควบคุมโดยเทมเพลตในธีมที่คุณใช้ (ไฟล์ ค้นหา.php ในกรณีส่วนใหญ่) หากเค้าโครงเริ่มต้นไม่เหมาะกับคุณ คุณสามารถสร้างเทมเพลตแบบกำหนดเองเพื่อแทนที่ได้
หากคุณไม่มีทักษะ PHP คุณสามารถใช้ Elementor (หรือปลั๊กอินตัวสร้างเพจอื่นๆ ที่มีฟังก์ชันตัวสร้างธีม เช่น เครื่องมือสร้าง Divi et WPBakery) เพื่อสร้างเทมเพลตหน้าผลการค้นหาที่กำหนดเองใน WordPress
เพื่อให้สามารถสร้างเทมเพลตหน้าผลการค้นหาโดยใช้ Elementor คุณต้องใช้ Elementor เวอร์ชัน Pro เนื่องจากคุณลักษณะ Theme Builder มีให้ใน Elementor Pro เท่านั้น
วิธีสร้างหน้าผลการค้นหาด้วย Elementor
เมื่อคุณสร้างหน้าผลการค้นหาที่กำหนดเองโดยใช้ Elementor คุณสามารถเพิ่มองค์ประกอบใดก็ได้ที่คุณชอบเมื่อสร้างหน้า มีมากกว่า 90 รายการ (เรียกว่าวิดเจ็ต) ที่คุณสามารถเพิ่มได้
อ่าน: วิธีจัดการการส่งแบบฟอร์มใน Elementor
Elementor มีเทมเพลตหน้าผลการค้นหาที่สร้างไว้ล่วงหน้าเพื่อปรับปรุงเวิร์กโฟลว์ของคุณ หรือหากคุณมีแนวคิดการออกแบบของคุณเอง คุณสามารถสร้างหน้าผลการค้นหาด้วยตนเองได้เช่นกัน
ในบทความนี้ เราจะแสดงวิธีสร้างเทมเพลตหน้าผลการค้นหาตั้งแต่ต้น นี่คือภาพหน้าจอของหน้าผลการค้นหาที่เราต้องการสร้าง
เราจะใช้สองส่วนเพื่อสร้างหน้าผลการค้นหาด้านบน:
- 1 มาตรา: เพื่อวางส่วนหัว (คำอธิบายของผลการค้นหา)
- ส่วนที่ 2: เพื่อวางแบบฟอร์มการค้นหาและผลการค้นหา
ก่อนที่คุณจะเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณได้อัปเกรด Elementor เวอร์ชันของคุณเป็นเวอร์ชัน Pro ในกรณีที่คุณยังไม่ได้อัปเกรด เมื่อคุณพร้อมแล้ว ไปที่ เทมเพลต -> ตัวสร้างธีม บนแดชบอร์ด WordPress ของคุณ
ดูเพิ่มเติม: วิธีใช้ Elementor: คู่มือฉบับสมบูรณ์
คลิกที่ปุ่ม เพิ่มเกี่ยวกับ เพื่อสร้างเทมเพลตใหม่ (หรือคุณสามารถคลิกปุ่ม ลองใช้เดี๋ยวนี้ เพื่อลองใช้ตัวสร้างธีมของ Elementor)
ตั้งค่าประเภทรุ่นเป็น ผลการค้นหา, ตั้งชื่อโมเดลของคุณและคลิกที่ปุ่ม สร้างแบบจำลอง เพื่อเริ่มสร้างหลัง
เนื่องจากเราต้องการสร้างหน้าผลการค้นหาตั้งแต่เริ่มต้น คุณเพียงแค่ปิดหน้าต่างไลบรารีเทมเพลตที่ปรากฏขึ้น
อ่าน: วิธีเพิ่มเอฟเฟกต์จุดให้กับคอลัมน์ใน Elementor
ก่อนที่คุณจะเริ่มเพิ่มวิดเจ็ต คุณต้องตั้งค่าเค้าโครงหน้าก่อน โดยคลิกที่ไอคอนรูปเฟืองที่ด้านล่างของแผงการตั้งค่า (แผงด้านซ้าย) คุณสามารถตั้งค่าเลย์เอาต์ใน ตัวเลือกเค้าโครงหน้า จากบล็อก การตั้งค่าทั่วไป ใต้แท็บ การตั้งค่า
1 มาตรา
ดังที่แสดงไว้ด้านบน เราจะใช้ส่วนนี้เพื่อวางส่วนหัวเพื่อแสดงคำอธิบายของหน้าผลการค้นหา เพียงคลิกปุ่มบวกในกล่องแก้ไขของ Elementor เพื่อเพิ่มส่วนใหม่ คุณสามารถเลือกโครงสร้างคอลัมน์เดียว เมื่อเพิ่มส่วนแล้ว ให้ลากวิดเจ็ตชื่อเข้าไป
ไปที่แผงด้านซ้าย ในบล็อค ชื่อเรื่อง ใต้แท็บ เนื้อหา, คลิกที่ไอคอนฐานข้อมูลในฟิลด์ ชื่อเรื่อง และเลือก ชื่อเรื่องที่เก็บถาวร.
จากนั้นคุณสามารถเข้าถึงแท็บ สไตล์ เพื่อปรับแต่งส่วนหัว คุณสามารถตั้งค่าต่างๆ เช่น สีข้อความ รูปแบบตัวอักษร (ตระกูลแบบอักษร ขนาดแบบอักษร ลักษณะแบบอักษร ฯลฯ) คุณยังสามารถใช้โหมดผสมผสานและเงาข้อความได้หากต้องการ
ถ้าคุณต้องการตั้งค่าพื้นหลังของส่วน เพิ่มตัวคั่น หรือตั้งค่าระยะขอบ คุณสามารถคลิกที่จุดจับส่วนเพื่อสลับไปยังโหมดแก้ไข
2 มาตรา
คลิกที่ปุ่ม Plus เพื่อเพิ่มส่วนใหม่เหมือนที่คุณทำในส่วนที่ 1 ด้านบน คุณยังสามารถเลือกโครงสร้างคอลัมน์เดียวได้ เมื่อเพิ่มส่วนแล้ว ให้ลากวิดเจ็ตแบบฟอร์มการค้นหา
จากนั้นคุณสามารถเข้าถึงแผงการตั้งค่าเพื่อทำการตั้งค่าได้ ในบล็อค แบบฟอร์มการค้นหา ภายใต้ แท็บเนื้อหา คุณสามารถกำหนดสกิน ตัวยึดตำแหน่ง ไอคอน ขนาดของไอคอน ฯลฯ ...
หากต้องการปรับแต่งแบบฟอร์ม คุณสามารถเปิดแท็บ สไตล์ มีสองบล็อกพารามิเตอร์ที่คุณสามารถเปิดได้: อินพุต et ปุ่ม. จากบล็อก การป้อนข้อมูล คุณสามารถตั้งค่าการพิมพ์ สีข้อความ สีพื้นหลัง สีเส้นขอบ ขนาดเส้นขอบ และรัศมีเส้นขอบ
จากบล็อก ปุ่ม, คุณสามารถตั้งค่าสีข้อความของปุ่ม สีพื้นหลัง การพิมพ์ ขนาดไอคอน และความกว้างของปุ่ม
เมื่อจัดรูปแบบของวิดเจ็ต Search Form แล้ว คุณสามารถเพิ่มวิดเจ็ตของ Archive Posts ได้ คุณสามารถวางไว้ใต้วิดเจ็ตแบบฟอร์มการค้นหาได้
เมื่อวิดเจ็ตนี้เข้าที่แล้ว ให้ไปที่แผงด้านซ้าย ภายใต้บล็อก เค้าโครง แท็บ เนื้อหา, คุณสามารถกำหนดสกิน จำนวนคอลัมน์ ตำแหน่งของรูปภาพ ความยาวของการแยก ข้อมูลเมตา ฯลฯ ...
บนบล็อก เพจจิ้ง คุณสามารถกำหนดประเภทการแบ่งหน้า การจำกัดหน้า และการจัดตำแหน่งได้
บนบล็อก ขั้นสูง คุณสามารถตั้งค่าให้ข้อความแสดงเมื่อ WordPress ไม่พบคำค้นหาที่ให้ไว้
เมื่อการตั้งค่าพื้นฐานของแท็บ เนื้อหา เสร็จแล้วก็สลับไปที่ tab . ได้ สไตล์ เพื่อปรับแต่งรูปลักษณ์ของวิดเจ็ตโพสต์ที่เก็บถาวร มี 6 บล็อกที่คุณสามารถเปิดได้ในแท็บนี้
- แบบ
คุณสามารถเปิดบล็อกนี้เพื่อกำหนดการจัดแนวข้อความของโพสต์ (ชื่อโพสต์และเมตา) คุณยังสามารถกำหนดช่องว่างระหว่างคอลัมน์และแถวได้
- ภาพ
คุณสามารถเปิดบล็อกนี้เพื่อกำหนดรัศมีเส้นขอบของภาพขนาดย่อของโพสต์ คุณยังกำหนดระยะห่างและใช้ตัวกรอง CSS ได้อีกด้วย
- คอนเทนต์
คุณสามารถเปิดบล็อกนี้เพื่อกำหนดรูปแบบตัวอักษร สีข้อความ และระยะห่างของเนื้อหาข้อความสำหรับโพสต์
- การให้เลขหน้า
หากคุณเปิดใช้งานการแบ่งหน้า คุณสามารถเปิดบล็อกนี้เพื่อปรับแต่งการแบ่งหน้า คุณตั้งค่าต่างๆ เช่น ตัวพิมพ์ สีข้อความ และช่องว่างระหว่างตัวเลขได้
- ไม่พบข้อความ
คุณสามารถเปิดบล็อกนี้เพื่อปรับแต่งข้อความแสดงข้อผิดพลาดเมื่อ WordPress ไม่พบเนื้อหาตามคำค้นหาที่ให้ไว้ คุณสามารถกำหนดรูปแบบตัวอักษรและสีของข้อความบนบล็อกนี้ได้
คุณสามารถเพิ่มวิดเจ็ตเพิ่มเติมได้หากต้องการ เมื่อคุณแก้ไขหน้าเสร็จแล้ว คุณสามารถคลิกปุ่ม เผยแพร่หรืออัปเดต ที่ด้านล่างของแผงการตั้งค่า
หากคุณได้รับแจ้งให้เพิ่มเงื่อนไขการแสดงผล เพียงเพิ่มเงื่อนไขโดยคลิกที่ปุ่ม เพิ่มเงื่อนไข เนื่องจากคุณกำลังสร้างหน้าผลการค้นหา ให้ตั้งค่าเงื่อนไขการแสดงผลเป็น ผลการค้นหา. คลิกที่ปุ่ม บันทึกและปิด เพื่อใช้การเปลี่ยนแปลง
แล้วไปกันเถอะ !
เว็บไซต์ที่ใช้ WordPress ทุกแห่งมีหน้าผลการค้นหาที่ไม่ซ้ำกัน ขึ้นอยู่กับธีมที่เว็บไซต์ใช้ หากเลย์เอาต์ของหน้าผลการค้นหาที่นำเสนอโดยธีมที่คุณใช้อยู่นั้นดูไม่น่าสนใจสำหรับคุณ คุณสามารถปรับแต่งได้
ถ้าคุณไม่มีทักษะ PHP คุณสามารถใช้ Elementor เพื่อสร้างหน้าผลการค้นหาที่กำหนดเองบนเว็บไซต์ WordPress ของคุณได้ ทุกอย่างลากและวาง ไม่จำเป็นต้องจัดการโค้ด PHP
นอกจากนี้ คุณยังสามารถใช้ Elementor เพื่อสร้างส่วนหัวแบบกำหนดเอง ส่วนท้ายแบบกำหนดเอง หน้า 404 แบบกำหนดเอง และส่วนอื่น ๆ ของคุณ ธีม WordPress.
รับ Elementor Pro ทันที!
ค้นพบปลั๊กอิน WordPress พรีเมียมบางอย่าง
คุณสามารถใช้อื่นๆ ปลั๊กอิน WordPress เพื่อให้ดูทันสมัยและเพิ่มประสิทธิภาพการจัดการบล็อกหรือเว็บไซต์ของคุณ
เราเสนอปลั๊กอิน WordPress พรีเมี่ยมให้คุณที่นี่ซึ่งจะช่วยคุณได้
1 WooCommerce ตอบรับอัตโนมัติ
ระบบตอบกลับอัตโนมัติของ WooCommerce เป็น WordPress ปลั๊กอิน ซึ่งช่วยให้คุณสามารถสมัครรับลูกค้าของคุณกับระบบตอบรับอัตโนมัติของคุณ นี้ WordPress ปลั๊กอิน ยังแสดงกล่องการสมัครรับจดหมายข่าวเพื่อรวมเข้าด้วยกันอย่างง่ายดาย WooCommerce ไปยังระบบตอบกลับอัตโนมัติ
ในฐานะที่เป็นคุณสมบัติที่คุณจะพบในคุณสมบัติอื่น ๆ : การผสานรวมกับ WooCommerce อย่างสมบูรณ์การสนับสนุนสำหรับการตอบกลับอัตโนมัติ 9 ตัวไม่จำเป็นต้องมีความรู้ด้านการเข้ารหัสติดตั้งง่ายและอื่น ๆ อีกมากมาย
อ่าน: กวดวิชา MailChimp ในภาษาฝรั่งเศส: คู่มือที่สมบูรณ์เพื่อสร้างจดหมายข่าว
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
2 ปลั๊กอิน Rating Plugin WordPress
มันเป็นเรื่องของ ระบบประเมินความคิดเห็น. อนุญาตให้ผู้ใช้ให้คะแนนความคิดเห็นต่างๆ พวกเขาจะต้องคลิกที่ปุ่มแสดงตัวอย่างและเลื่อนลงไปที่ส่วนความคิดเห็นเพื่อดู WordPress ปลั๊กอิน พรีเมี่ยมในการดำเนินการ
ในคุณสมบัติที่เราพบส่วนใหญ่: ใช้งานง่ายรองรับ cเครื่องมือไอคอนที่กำหนดเอง การจัดอันดับความคิดเห็น ตามบันทึกย่อส่วนบุคคลของ tไปที่ไอคอน การสนับสนุน CSS ที่กำหนดเองคการเข้ารหัส IP (สำหรับผู้ใช้ในยุโรป) ความเป็นไปได้ในการแปลปลั๊กอินนี้ และอื่น ๆ
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
3 แผนที่ความคืบหน้า
Progress Map เป็นปลั๊กอิน WordPress ที่ออกแบบมาสำหรับตำแหน่งทางภูมิศาสตร์ จุดมุ่งหมายคือเพื่อช่วยให้ผู้ใช้มีเว็บไซต์เกี่ยวกับรายชื่อโรงแรม โฆษณาอสังหาริมทรัพย์รายชื่อร้านอาหาร ข้อเสนองานจัดเก็บประกาศและอื่น ๆ ... เพื่อจัดระเบียบสถานที่บน แผนที่ Google และนำทางได้อย่างง่ายดายผ่านแผนที่โดยใช้ม้าหมุน
กล่าวอีกนัยหนึ่งเมื่อใช้ปลั๊กอินนี้ตำแหน่งของคุณจะได้รับการเผยแพร่ทั้งบน แผนที่ Google (เครื่องหมาย) และบนม้าหมุน ภาพหมุนเชื่อมต่อกับแผนที่ซึ่งหมายความว่ารายการที่เลือกในภาพหมุนจะกำหนดเป้าหมายตำแหน่งบนแผนที่และในทางกลับกัน
ลองดูที่ วิธีแสดงตำแหน่งของสมาชิก WP community ของคุณบน Google Map
หากต้องการเพิ่มตำแหน่งที่ตั้งของคุณ Progress Map จะมีพื้นที่แบบฟอร์มในหน้า "เพิ่มรายการใหม่" เพื่อให้คุณสามารถเพิ่มพิกัดตำแหน่งของคุณได้อย่างง่ายดาย
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
แหล่งข้อมูลอื่น ๆ ที่แนะนำ
นอกจากนี้เรายังขอเชิญคุณให้ศึกษาข้อมูลด้านล่างเพื่อเพิ่มเติมในส่วนที่จับและควบคุมของเว็บไซต์และบล็อกของคุณ
- ปลั๊กอิน 9 WordPress เพื่อส่งอีเมลผ่าน SMTP
- ปลั๊กอิน 7 WordPress เพื่อฝัง Google แผนที่ไว้ในเว็บไซต์ของคุณ
- วิธีตั้งค่าเครือข่ายหลายไซต์บน WordPress
- วิธีเพิ่มส่วนเมตาในโพสต์และเพจ
สรุป
ที่นี่คือ ! เพียงเท่านี้สำหรับบทช่วยสอนนี้ เราหวังว่าจะแสดงวิธีสร้างหน้าผลการค้นหาด้วย Elementor เราอยากได้ยินความคิดเห็นของคุณเกี่ยวกับเรื่องนี้ใน ส่วนความเห็น.
อย่างไรก็ตามคุณยังจะสามารถปรึกษาเราได้ บริการสารสนเทศหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
