วิธีการสร้างปลั๊กอินคำถามที่พบบ่อยแบบง่ายสำหรับ WordPress

อัปเดต: 20 ม.ค. 2020 / บทความโดย: Rochester Oliveira

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

ความคิดการสาธิต & ดาวน์โหลด

สาธิต

เป้าหมายของเราคือการสร้างปลั๊กอินที่สามารถใช้ได้กับสิ่งต่างๆมากมาย แต่เหมาะกับหน้าคำถามที่พบบ่อย

แต่นอกเหนือจากที่ความสำเร็จหลักของเราจะเป็น ความเข้าใจของ WordPress ประเภทโพสต์ที่กำหนดเอง, รหัสย่อ, การโต้ตอบกับปลั๊กอิน JS / jQuery ภายนอก ด้วยแนวคิดนี้คุณสามารถสร้างสิ่งต่างๆมากมายจากปลั๊กอินอื่น ๆ ที่คุณอาจพบได้นี่เป็นเพียงจุดเริ่มต้นสำหรับคุณ Padawan ที่รัก

So ที่นี่คุณสามารถดูการสาธิต jQuery API สำหรับส่วนประกอบที่เราจะใช้ - แต่สิ่งที่ยอดเยี่ยมจริงๆคือรหัสที่ใช้สร้างส่วนประกอบนั้น (PHP)

ร้อนขึ้น - ไฟล์ปลั๊กอินและ Custom Post Type

ก่อนอื่นเราต้องสร้างประเภทโพสต์ที่กำหนดเองเพื่อเก็บข้อมูลของเรา

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

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

ในการสร้างปลั๊กอินในลักษณะที่ WP รู้ว่าคุณต้องมี 2:

  1. สร้างไฟล์ภายในส่วน wp-content / plugins /
  2. เพิ่มข้อมูลเมตาในส่วนต้นของไฟล์เพื่อให้ WP สามารถเข้าใจสิ่งที่อยู่

โปรดจำไว้ว่าชื่อไฟล์ต้องไม่ซ้ำกันดังนั้นเมื่อมีคนติดตั้งปลั๊กอินของคุณ (แม้แต่ตัวคุณเอง) จะไม่มีความขัดแย้งกับปลั๊กอินปัจจุบัน ในกรณีของเราสำหรับองค์กรที่ดีกว่าเราจะเพิ่มโฟลเดอร์ใหม่ที่มีชื่อว่า faq-whsr และภายในไฟล์ชื่อ faq-whsr.php

ตอนนี้สำหรับเมทาดาเพียงเพิ่มสิ่งนี้ในส่วนเริ่มต้นของไฟล์ปลั๊กอินของคุณ (หลังจากนั้น

meta_01

ซึ่งหมายความว่า:

  • ชื่อปลั๊กอิน: ชื่อที่ดีที่จะแสดงในอินเทอร์เฟซปลั๊กอิน wp-admin> plugins ของคุณ
  • ปลั๊กอิน URI: หากคุณต้องการเพิ่มลิงค์ไปยังหน้าปลั๊กอินของคุณ (เอกสารตัวอย่างหน้าขาย)
  • คำอธิบาย: อันนี้คือย่อหน้าเล็ก ๆ ที่แสดงในอินเทอร์เฟซปลั๊กอิน wp-admin> plugins ทำให้ง่ายเพื่อให้ผู้ใช้จำได้ว่ามีไว้เพื่ออะไร
  • ผู้แต่ง / ผู้เขียน URI: บุคคล / บริษัท ที่สร้างปลั๊กอินและลิงค์สำหรับสินเชื่อ
  • สิทธิ์ใช้งาน: ดังนั้นผู้ใช้จะรู้ว่าปลั๊กอินของคุณสามารถทำอะไรได้บ้าง

ตกลงตอนนี้เราได้สร้างปลั๊กอินของเราแล้วเพิ่มข้อมูลเมตาที่เกี่ยวข้อง ทันทีที่คุณบันทึกไฟล์ปลั๊กอินคุณควรเห็นไฟล์นั้นในอินเทอร์เฟซ wp-admin ของคุณ

ลองเปิดใช้งานและดูว่าเกิดอะไรขึ้น

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

ในกรณีของเรา CPT คือรายการคำถามที่พบบ่อย แต่คุณสามารถสร้างหนังสือวิดีโอข้อความรับรองและอื่น ๆ ได้ สิ่งสำคัญที่ต้องจำไว้คือนี่คือชื่อฟังก์ชันควรมีเอกลักษณ์ ทำซ้ำกับฉันเดี๋ยวนี้: ชื่อของฟังก์ชันต้องไม่ซ้ำกันชื่อของฟังก์ชันต้องไม่ซ้ำกัน ได้หรือไม่? ดีนี้จะช่วยให้คุณประหยัดมากปัญหาจนกว่าเราจะสามารถใช้ OOP (อาจจะในการกวดวิชาต่อไป)

การเล่นกลจะทำด้วยรหัสนี้:

CPT

และนี่คือสิ่งที่ส่วนที่เกี่ยวข้องหมายถึง:

  • $ label - เป็นอาร์เรย์ที่มีป้ายกำกับและข้อความสำหรับส่วนต่างๆของพื้นที่ wp-admin ของคุณ ดังนั้น WP จะรู้วิธีเรียกไอเทมของเราอย่างเหมาะสม
  • รองรับ - อันนี้บอกสิ่งที่คุณเห็นใน wp-admin> FAQ> หน้าจอใหม่ ในกรณีของเราเราจะมีชื่อเรื่องตัวแก้ไข (กล่องเนื้อหาหลัก) ผู้แต่งการแก้ไขและฟิลด์ที่กำหนดเอง (ในกรณีที่คุณต้องการ)
  • อนุกรมวิธาน - ที่นี่คุณจะบอก WP ว่าการจัดหมวดหมู่ใดที่ได้รับอนุญาต (หมวดหมู่แท็กหรือการจัดหมวดหมู่ที่กำหนดเอง)
  • register_post_type ('faq_whsr', $ args) - สิ่งนี้บอก WP “ เฮ้สร้างโพสต์แบบกำหนดเองใหม่โดยมี ID เป็น faq_whsr โดยใช้อาร์กิวเมนต์จาก $ args”.

บันทึกและระงับลมหายใจ ตอนนี้คุณจะเห็นส่วนใหม่ในเมนูหลักของ wp-admin

รออยู่ใช่ไหม ใช่. ข้อมูลโค้ดดังกล่าวสร้างฟังก์ชัน CPT ทั้งหมด หากไม่พบปัญหานี้ให้รอสักครู่ก่อนจะเย็นลงในส่วนถัดไป

ก่อนที่เราจะออกจาก wp-admin ให้เพิ่มข้อมูล dummy (faqs ไม่กี่ที่มีอย่างน้อย 2 categories)

การโต้ตอบแบบ Front-End - WP x jQuery

ถึงเวลาแล้วที่เราจะเห็นการกระทำบางอย่างและเราจะใช้ ส่วนประกอบหีบเพลง jQuery UI สำหรับสิ่งนี้.

jQuery UI มีประโยชน์มากมายเช่นเดียวกับ jQuery:

  • นักพัฒนาซอฟต์แวร์จำนวนมากกำลังทำงานอยู่
  • โค้ดข้ามเบราว์เซอร์และรหัสสำหรับมือถือ
  • เอกสารที่ดี
  • เล่นดีกับ WP (WP ตัวเองใช้พวกเขา)

คำถามตอนนี้คือ: เราจะเรียกได้อย่างไร?

มีแนวทาง 2 นี้:

  1. คนเลวบริสุทธิ์ / tags in your wp_head
  2. wp_enqueue ที่ดี

เราจะไม่เสียเวลามากเกินไปกับแนวทางที่ไม่ถูกต้องในวันนี้ แต่สิ่งที่ดีคือบอก WP "hey buddy เราจำเป็นต้องใช้ UI jQuery ในบางจุดในโค้ดของเราโปรดรวมไว้ในหน้า". ด้วยวิธีนี้ WP สามารถตรวจสอบว่ามีบุคคลอื่นรวมอยู่ด้วยหรือรวมเวอร์ชันอื่นแล้วหลีกเลี่ยงปัญหากับห้องสมุดที่ซ้ำซ้อน ตกลงวิธีแปลว่าแชทที่ดีในรหัส?

การใช้ฟังก์ชัน Enqueue:

enqueue_02

รหัสย่อ

และตอนนี้เรากลับไปที่ wp-admin แล้ว เรามีรายการคำถามที่พบบ่อยและเรามีไลบรารีเพื่อจัดเรียงรายการตามที่เราต้องการสิ่งที่ขาดหายไป? ดีเราจำเป็นต้องเรียกรายการ!

เรามีทางเลือกมากมายสำหรับเรื่องนี้ แต่วิธีที่ง่ายที่สุดสำหรับกรณีนี้คือการสร้างรหัสย่อ รหัสย่อคือสิ่งที่คุณเพิ่มลงในฟิลด์ข้อมูล (สำหรับหน้าบทความ CPTs ... ) และ WP จะค้นหาฟังก์ชันที่จะเรียกใช้งาน มีประเภทของรหัสย่อ 2:

  1. [ปิดตัวเอง] - ชอบแท็ก หรือ รหัสย่อประเภทนี้เรียกใช้ฟังก์ชัน ณ จุดหนึ่ง - นี่คือผู้ชายของเรา
  2. [ห่อ] เนื้อหา [/ ห่อ] - อันนี้เหมือนแท็ก หรือ และสามารถแปลงเนื้อหาได้จริงหรือใช้เนื้อหาเป็นอาร์กิวเมนต์

ลองดูวิธีการทำงานแล้ว สร้างหน้าใหม่ใน wp-admin ของคุณและเพิ่มโค้ดนี้ที่นี่:

[คำถามที่พบบ่อย-whsr]

บันทึกและไปที่หน้านั้นและดูว่าเกิดอะไรขึ้น ...

แค่ล้อเล่นมันจะไม่ทำในสิ่งที่ถูกต้อง? เป็นเพราะเรายังไม่ได้สร้างฟังก์ชั่นให้กับมัน

เพิ่มไฟล์นี้ในไฟล์ปลั๊กอิน:

shortcode_02

ตอนนี้รีเฟรชหน้าของคุณและฉันสัญญาว่าจะมีอะไรเจ๋งมาก

เย็นเหรอ? ตอนนี้คุณสามารถเห็นได้ว่ากำลังทำงานอยู่และท้องฟ้าเป็นขีด จำกัด สำหรับคุณตอนนี้ สิ่งที่รหัสไม่เป็นเพียงบอก WP ว่ามีรหัสสั้นที่เรียกว่า [faq-whsr] และถ้า WP พบว่า WP ควรเรียกใช้ฟังก์ชันในจุดนั้นของหน้า

ในกรณีของเราเราจะต้องบรรลุโครงสร้างนี้เพื่อสร้างแผง UI jQuery:

api_02

และสำหรับการที่เราจะสร้าง a คำค้นหา WP, โหลดรายการคำถามที่พบบ่อยของเราและเนื้อหาของพวกเขา แทนที่ฟังก์ชัน shortcode ด้วยฟังก์ชันนี้:

รหัส-basic_02

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

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

รหัส-final_02

ด้วยวิธีนี้คุณสามารถเรียกรายการโดยใช้อาร์กิวเมนต์ต่อไปนี้ (คุณสามารถรวมได้มากเท่าที่คุณต้องการ):

  • cat - รหัสหมวดหมู่ (เพิ่มหลายรายการในอาร์เรย์) [faq-whsr cat = 1]
  • category_name - ชื่อหมวดหมู่ [faq-whsr category_name =” food”]
  • คำสั่ง - ASC หรือ DESC (DESC เป็นค่าเริ่มต้น) [faq-whsr order =” ASC”]
  • orderby - เปลี่ยนเกณฑ์ในการสั่งซื้อสินค้า [faq-whsr orderby =” title”]
  • posts_per_page - เปลี่ยนจำนวนรายการที่โหลด [faq-whsr posts_per_page = 5]

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

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

ตอนนี้ถึงตาคุณแล้ว

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

  • การออกแบบที่ตอบสนอง
  • การสร้างวิดเจ็ต
  • ปลั๊กอินเปิด / ปิดใช้งาน hooks
  • สากล
  • OOP
  • กำลังเปิดเฉพาะเมื่อจำเป็นเท่านั้น (สำหรับบางหน้า)

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

เกี่ยวกับ Rochester Oliveira

ฉันเป็นนักออกแบบเว็บไซต์และผู้ประกอบการจากItajubá (MG), Brasil ฉันชอบเขียนเกี่ยวกับหัวข้อที่คลุมเครือและทำสิ่งดีๆ

เชื่อมต่อ: