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

บทความที่เขียนโดย:
  • WordPress
  • อัปเดตเมื่อ: Feb 09, 2017

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

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

สาธิต

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

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

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

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

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

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

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

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

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

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

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

ตอนนี้สำหรับ metadad แล้วให้เพิ่มข้อมูลบางอย่างเช่นนี้ในตอนเริ่มต้นของไฟล์ปลั๊กอิน (หลังจาก <? php):

meta_01

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

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

01 ปลั๊กอินที่สร้างขึ้น

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

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

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

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

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

CPT

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

  • $ labels - เป็นอาร์เรย์ที่มีป้ายกำกับและข้อความสำหรับส่วนต่างๆของพื้นที่ wp-admin ของคุณ ดังนั้น WP จะรู้วิธีที่เหมาะสมในการเรียกรายการสินค้าของเรา
  • รองรับ - อันนี้บอกสิ่งที่คุณสามารถเห็นได้ใน wp-admin> คำถามที่พบบ่อย> หน้าจอใหม่ ในกรณีของเราเราจะมีชื่อผู้แก้ไข (ช่องเนื้อหาหลัก) ผู้แต่งการแก้ไขและฟิลด์ที่กำหนดเอง (ในกรณีที่คุณต้องการ)
  • taxonomies - ที่นี่คุณบอก WP ว่าสามารถใช้ taxonomies ได้ (ประเภทแท็กหรือ taxonomies แบบกำหนดเอง)
  • 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. แท็ก <script> / <style> ที่ไม่บริสุทธิ์ใน wp_head ของคุณ
  2. wp_enqueue ที่ดี

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

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

enqueue_02

รหัสย่อ

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

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

  1. [แนบตัวเอง] - เช่นแท็ก <hr /> หรือ <br /> รหัสย่อประเภทนี้เพียงแค่เรียกฟังก์ชันในบางจุด - นี่คือคนที่แต่งตัวประหลาดของเรา
  2. [wrapped] เนื้อหา [/ wrapped] - แท็กนี้เหมือนกับแท็ก <p> </ p> หรือ <div> </ div> และสามารถแปลงเนื้อหาของเนื้อหาหรือใช้เนื้อหาเป็นอาร์กิวเมนต์

ลองดูวิธีการทำงานแล้ว สร้างหน้าใหม่ใน 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 - category ID (เพิ่มเป็น array) [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 ฉันชอบเขียนเกี่ยวกับหัวข้อที่คลุมเครือและทำสิ่งดีๆ