วิธีการสร้างปลั๊กอินเครื่องมือสำหรับ WordPress

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


ขั้นตอนที่ 1: สร้างวิดเจ็ตปลั๊กอินของคุณ

ฉันเพิ่งสร้างปลั๊กอินที่ชื่อว่า“ Freelancer Widgets Bundle” และบางคนถามฉันถึงวิธีการสร้างปลั๊กอินดังกล่าวดังนั้นฉันจึงตัดสินใจเขียนโพสต์นี้ ขั้นตอนแรกคือการสร้างปลั๊กอิน และอย่างที่คุณเห็นมันไม่ใช่ส่วนที่ยากที่สุด ปลั๊กอินคือรหัสพิเศษที่ถูกเพิ่มไปยัง WordPress เมื่อคุณเปิดใช้งาน WordPress สร้างลูปผ่านโฟลเดอร์เพื่อดึงข้อมูลปลั๊กอินที่มีอยู่ทั้งหมดและแสดงรายการไว้ใน back office ในการสร้างปลั๊กอินคุณจะต้องมีโปรแกรมแก้ไขเช่น Coda (Mac) หรือ Dreamweaver (PC & Mac) ฉันขอแนะนำให้คุณสร้างปลั๊กอินของคุณในการติดตั้ง WordPress ในท้องถิ่นทำให้มันบนเซิร์ฟเวอร์ที่ใช้งานอยู่อาจทำให้เกิดปัญหาถ้าคุณทำผิดพลาด ดังนั้นโปรดรอการทดสอบปลั๊กอินของเราก่อนที่จะวางบนโฮสต์ของคุณ.

เปิดตอนนี้โฟลเดอร์ wp-content / plugins ที่นี่คุณจะเพิ่มปลั๊กอินของคุณ สร้างไดเรกทอรีใหม่และเรียกมันว่า “widget-plugin” (อันที่จริงชื่อนี้สามารถเป็นอะไรก็ได้ที่คุณต้องการ) แม้ว่าปลั๊กอินของเราจะมีไฟล์เดียวเท่านั้น แต่ก็ควรใช้โฟลเดอร์สำหรับแต่ละปลั๊กอิน ในไดเรกทอรีของคุณสร้างไฟล์ใหม่ที่ชื่อว่า“ widget-plugin.php” (ชื่อนี้สามารถเปลี่ยนแปลงได้เช่นกัน) และเปิดมัน ตอนนี้เรากำลังจะเพิ่มรหัสบรรทัดแรกของเรา คำจำกัดความของปลั๊กอินภายใต้ WordPress เป็นไปตามกฎบางอย่างที่คุณสามารถอ่านได้ ที่นี่ใน Codex. นี่คือวิธีที่ WordPress กำหนดปลั๊กอิน:

ดังนั้นเราต้องแก้ไขรหัสนี้เพื่อให้เหมาะสมกับความต้องการของเรา:

บันทึกไฟล์ของคุณ เพียงเพิ่มรหัสไปยังไฟล์ widget-plugin.php ของเราเราได้สร้างปลั๊กอิน! ทีนี้ตอนนี้ปลั๊กอินไม่ได้ทำอะไร แต่ WordPress รู้จักมันแล้ว เพื่อให้แน่ใจว่าเป็นกรณีนี้ให้ไปที่การบริหารของคุณและไปที่เมนู“ ปลั๊กอิน” หากปลั๊กอินของคุณปรากฏในรายการปลั๊กอินคุณดีไม่เช่นนั้นคุณต้องปฏิบัติตามคำแนะนำของฉันแล้วลองอีกครั้ง ตอนนี้คุณสามารถเปิดใช้งานปลั๊กอิน.

ขั้นตอนที่ 2: สร้างวิดเจ็ต

ตอนนี้เรากำลังจะสร้างเครื่องมือเอง วิดเจ็ตนี้จะเป็นคลาส PHP ที่ขยายคลาส WordPress หลัก WP_Widget. โดยทั่วไปวิดเจ็ตของเราจะถูกกำหนดด้วยวิธีนี้:

// คลาสวิดเจ็ต
คลาส My_Custom_Widget ขยาย WP_Widget {

// ตัวสร้างหลัก
ฟังก์ชั่นสาธารณะ __ โครงสร้าง () {
/ * ... * /
}

// รูปแบบวิดเจ็ต (สำหรับแบ็กเอนด์)
แบบฟอร์มฟังก์ชันสาธารณะ ($ อินสแตนซ์) {
/ * ... * /
}

// อัปเดตการตั้งค่าวิดเจ็ต
การปรับปรุงฟังก์ชั่นสาธารณะ ($ new_instance, $ old_instance) {
/ * ... * /
}

// แสดงวิดเจ็ต
วิดเจ็ตฟังก์ชันสาธารณะ ($ args, $ instance) {
/ * ... * /
}

}

// ลงทะเบียนวิดเจ็ต
ฟังก์ชัน my_register_custom_widget () {
register_widget ('My_Custom_Widget');
}
add_action ('widgets_init', 'my_register_custom_widget');

รหัสนี้ให้ข้อมูลทั้งหมดแก่ WordPress ที่ระบบจำเป็นต้องใช้ในการใช้วิดเจ็ต:

  1. นวกรรมิก, เพื่อเริ่มต้นวิดเจ็ต
  2.  ฟังก์ชั่นแบบฟอร์ม () เพื่อสร้างรูปแบบวิดเจ็ตในการบริหาร
  3. ฟังก์ชั่น update (), เพื่อบันทึกข้อมูลวิดเจ็ตระหว่างรุ่น
  4. และ ฟังก์ชั่น widget () เพื่อแสดงเนื้อหาวิดเจ็ตในส่วนหน้า

1 - ตัวสร้าง

ตัวสร้างเป็นส่วนหนึ่งของรหัสที่กำหนดชื่อวิดเจ็ตและอาร์กิวเมนต์หลักด้านล่างเป็นตัวอย่างของสิ่งที่มันอาจดูเหมือน.

// ตัวสร้างหลัก
ฟังก์ชั่นสาธารณะ __ โครงสร้าง () {
ผู้ปกครอง :: __ สร้าง (
'my_custom_widget',
__ ('My Custom Widget', 'text_domain'),
array (
'Customize_selective_refresh' => จริง,
)
);
}

โปรดอย่าใช้ชื่อวิดเจ็ต __ () รอบ ๆ ฟังก์ชั่นนี้ใช้โดย WordPress สำหรับการแปล ฉันแนะนำให้คุณใช้เสมอ ฟังก์ชั่นเหล่านี้, เพื่อทำให้ธีมของคุณแปลได้อย่างสมบูรณ์ และการใช้พารามิเตอร์ ‘Customize_selective_refresh’ ช่วยให้สามารถรีเฟรชวิดเจ็ตใต้ ลักษณะ> ปรับแต่ง เมื่อแก้ไขวิดเจ็ตดังนั้นแทนที่จะรีเฟรชทั้งหน้าเฉพาะวิดเจ็ตเท่านั้นที่จะถูกรีเฟรชเมื่อทำการเปลี่ยนแปลง.

2 - ฟังก์ชั่น form ()

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

// รูปแบบวิดเจ็ต (สำหรับแบ็กเอนด์)
แบบฟอร์มฟังก์ชันสาธารณะ ($ อินสแตนซ์) {

// ตั้งค่าเริ่มต้นวิดเจ็ต
$ defaults = array (
'title' => '',
'text' => '',
'textarea' => '',
'checkbox' => '',
'select' => '',
);

// แยกวิเคราะห์การตั้งค่าปัจจุบันด้วยค่าเริ่มต้น
แยก (wp_parse_args ((อาร์เรย์) $ อินสแตนซ์, $ ค่าเริ่มต้น)); ?>


/>

รหัสนี้เป็นเพียงการเพิ่ม 5 ช่องไปยังวิดเจ็ต (ชื่อ, ข้อความ, textarea เลือกและช่องทำเครื่องหมาย) ดังนั้นก่อนอื่นคุณต้องกำหนดค่าปริยายสำหรับวิดเจ็ตของคุณจากนั้นฟังก์ชั่นถัดไปจะแยกวิเคราะห์การตั้งค่าปัจจุบันที่กำหนด / บันทึกไว้สำหรับวิดเจ็ตของคุณด้วยค่าเริ่มต้น (ดังนั้นการตั้งค่าใด ๆ ที่ไม่มีอยู่ แถบข้างของคุณ) และสุดท้ายคือ html สำหรับแต่ละฟิลด์ แจ้งให้ทราบการใช้ esc_attr () เมื่อเพิ่มเขตข้อมูลแบบฟอร์มนี้จะทำเพื่อเหตุผลด้านความปลอดภัย เมื่อใดก็ตามที่คุณสะท้อนตัวแปรที่ผู้ใช้กำหนดบนเว็บไซต์ของคุณคุณควรตรวจสอบให้แน่ใจว่ามันถูกทำให้สะอาดเป็นครั้งแรก.

3 - ฟังก์ชัน update ()

ฟังก์ชั่น update () นั้นง่ายมาก ในฐานะที่เป็นนักพัฒนาแกน WordPress เพิ่ม API เครื่องมือที่มีประสิทธิภาพจริงๆเราเพียงแค่ต้องเพิ่มรหัสนี้เพื่ออัปเดตแต่ละเขตข้อมูล:

// อัปเดตการตั้งค่าวิดเจ็ต
การปรับปรุงฟังก์ชั่นสาธารณะ ($ new_instance, $ old_instance) {
$ instance = $ old_instance;
$ instance ['title'] = isset ($ new_instance ['title'])? wp_strip_all_tags ($ new_instance ['ชื่อ']): '';
$ instance ['text'] = isset ($ new_instance ['text'])? wp_strip_all_tags ($ new_instance ['text']): '';
$ instance ['textarea'] = isset ($ new_instance ['textarea'])? wp_kses_post ($ new_instance ['textarea']): '';
$ instance ['checkbox'] = isset ($ new_instance ['checkbox'])? 1: เท็จ;
$ instance ['select'] = isset ($ new_instance ['select'])? wp_strip_all_tags ($ new_instance ['select']): '';
ส่งกลับ $ อินสแตนซ์;
}

ในขณะที่คุณสามารถเห็นสิ่งที่เราต้องทำคือตรวจสอบการตั้งค่าแต่ละรายการและหากยังไม่ว่างให้บันทึกลงในฐานข้อมูล สังเกตการใช้ฟังก์ชั่น wp_strip_all_tags () และ wp_kses_post () สิ่งเหล่านี้จะใช้ในการฆ่าเชื้อข้อมูลก่อนที่จะถูกเพิ่มลงในฐานข้อมูล เมื่อใดก็ตามที่คุณแทรกผู้ใช้ใด ๆ ที่ส่งเนื้อหาลงในฐานข้อมูลคุณต้องแน่ใจว่าไม่มีรหัสที่เป็นอันตราย ฟังก์ชั่นแรก wp_strip_all_tags ลบทุกอย่างยกเว้นข้อความพื้นฐานเพื่อให้คุณสามารถใช้มันสำหรับเขตข้อมูลใด ๆ ที่ค่าสิ้นสุดเป็นสตริงและฟังก์ชั่นที่สอง wp_kses_post () เป็นฟังก์ชั่นเดียวกับที่ใช้สำหรับเนื้อหาโพสต์และมันจะลบแท็กทั้งหมด , ช่วง, divs, รูปภาพ ฯลฯ.

4 - ฟังก์ชั่นวิดเจ็ต ()

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

// แสดงวิดเจ็ต
วิดเจ็ตฟังก์ชันสาธารณะ ($ args, $ instance) {

แยก ($ args);

// ตรวจสอบตัวเลือกวิดเจ็ต
$ title = isset ($ instance ['title'])? Apply_filters ('widget_title', $ instance ['title']): '';
$ text = isset ($ instance ['text'])? $ อินสแตนซ์ ['text']: '';
$ textarea = isset ($ อินสแตนซ์ ['textarea'])? $ อินสแตนซ์ ['textarea']: '';
$ select = isset ($ instance ['select'])? $ instance ['select']: '';
$ checkbox =! ว่างเปล่า ($ อินสแตนซ์ ['checkbox'])? $ instance ['checkbox']: false;

// WordPress core before_widget hook (รวมไว้เสมอ)
echo $ before_widget;

// แสดงวิดเจ็ต
echo '
'; // แสดงหัวเรื่องวิดเจ็ตหากกำหนดไว้ ถ้า ($ title) { echo $ before_title $ title $ after_title; } // แสดงฟิลด์ข้อความ ถ้า ($ text) { echo '

' ข้อความ $ '

'; } // แสดงฟิลด์ textarea ถ้า ($ textarea) { echo '

' $ textarea '

'; } // แสดงเขตข้อมูลที่เลือก ถ้า ($ เลือก) { echo '

' $ เลือก '

'; } // แสดงบางอย่างหากช่องทำเครื่องหมายเป็นจริง ถ้า ($ ช่องทำเครื่องหมาย) { echo '

สิ่งที่ยอดเยี่ยม

'; } echo '
'; // WordPress core after_widget hook (รวมไว้เสมอ) echo $ after_widget; }

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

รหัสปลั๊กอินเครื่องมือสมบูรณ์

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

ดูรหัสเต็มบน Github

ข้อสรุป

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map