สุดยอดคู่มือการสร้างปลั๊กอิน WordPress

ปลั๊กอินเป็นส่วนสำคัญของเว็บไซต์ WordPress ที่ต้องการฟังก์ชันเฉพาะ

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

เพียงเพราะปลั๊กอินอยู่ในที่เก็บไม่ได้หมายความว่าจะไม่ขัดขวางประสิทธิภาพการทำงานหรือทำให้ความปลอดภัยลดลง

แล้วคุณทำอะไรได้บ้าง? คุณสามารถสร้างของคุณเองได้

การสร้างปลั๊กอิน WordPress ที่ยอดเยี่ยมเริ่มต้นด้วยการวางแผนอย่างรอบคอบ

ไม่ว่าคุณจะสร้างตั้งแต่เริ่มต้นหรือสร้างจากต้นแบบ การปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดที่มีเอกสารประกอบมาอย่างดีเป็นสิ่งสำคัญอย่างยิ่ง

ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีสร้างปลั๊กอิน WordPress อย่างง่ายอย่างถูกวิธี

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

เริ่มต้นด้วยแผน

ขั้นแรก ให้แสดงรายการคุณลักษณะที่ปลั๊กอินของเราจะมีและสรุปสิ่งที่จำเป็นต้องทำ

ปลั๊กอินที่เรากำลังสร้างจะช่วยให้ผู้เยี่ยมชมไซต์สามารถบันทึกเนื้อหาเพื่ออ่านในภายหลัง

สำหรับผู้ใช้ที่ลงทะเบียน เราจะจัดเก็บรายการไว้ในฐานข้อมูล และสำหรับผู้ใช้ที่ไม่ระบุชื่อ เราจะบันทึกรายการโดยใช้คุกกี้

ด้านล่างนี้คือโครงร่างของคุณลักษณะและฟังก์ชันต่างๆ ที่ปลั๊กอินของเราจะมีให้

หน้าจอการตั้งค่า

• ความสามารถของผู้ดูแลระบบในการเพิ่มปุ่ม "บันทึกรายการ" ที่ส่วนท้ายของเนื้อหา
• ความสามารถในการเลือกประเภทของโพสต์ที่เราต้องการให้ปุ่มนี้เพิ่ม
• เสนอตัวเลือกให้ผู้ใช้ตัดสินใจว่าพวกเขาต้องการใช้สไตล์ที่กำหนดไว้ล่วงหน้าของเราหรือไม่
• ให้ตัวเลือกเพื่อเปิดใช้งานฟังก์ชันนี้เฉพาะสำหรับผู้ใช้ที่เข้าสู่ระบบเท่านั้น
• ให้ตัวเลือกในการเปลี่ยนข้อความที่ปรากฏในส่วนที่ผู้เยี่ยมชมต้องเผชิญของปลั๊กอิน

การบันทึกเนื้อหา

• หากผู้ใช้เข้าสู่ระบบ บันทึกเนื้อหาลงในช่องผู้ใช้ที่กำหนดเอง
• หากผู้ใช้ไม่ได้เข้าสู่ระบบ ให้บันทึกเนื้อหาลงในคุกกี้

ข้อความ

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

• “บันทึกรายการ”
• “ยกเลิกการบันทึกรายการ”
• “บันทึกไว้ ดูรายการที่บันทึกไว้”
• “คุณไม่มีรายการที่บันทึกไว้”

หน้าจอที่บันทึกไว้

นี่คือที่ที่ผู้เยี่ยมชมดูรายการโพสต์ที่พวกเขาบันทึกไว้

• แสดงรายการของรายการที่บันทึกไว้
• สร้างหน้าที่บันทึกไว้เมื่อเปิดใช้งานปลั๊กอิน
• ลบหน้าที่บันทึกไว้เมื่อปิดใช้งานปลั๊กอิน

รหัสย่อ

ด้วยรหัสย่อ หน้าบันทึกสามารถแสดงผลได้ทุกที่ที่เพิ่ม

ใช้แผ่นต้นแบบ

นี่คือต้นแบบที่ดีที่สุดที่ฉันพบ มีโครงสร้างที่ดี เน้นวัตถุ และมีประสิทธิภาพ เป็นไปตามแนวปฏิบัติที่ดีที่สุดทุกประการ และรวดเร็วและเบา

คุณสามารถใช้หน้านี้เพื่อสร้างฐานโค้ดของปลั๊กอินตามนี้ WordPress Plugin Boilerplate:

คุณควรได้รับไฟล์ .zip

แตกไฟล์และใส่ลงในโฟลเดอร์การติดตั้ง WordPress ของคุณ: wp-content/plugins/

หากคุณเปิดแดชบอร์ด WordPress และไปที่ปลั๊กอิน คุณจะเห็นว่าปลั๊กอินของคุณแสดงอยู่ที่นั่น อย่าเพิ่งเปิดใช้งาน

จัดการการเปิดใช้งานและปิดใช้งาน

เป็นสิ่งสำคัญสำหรับปลั๊กอินของเราในการจัดการการเปิดใช้งานและการปิดใช้งานอย่างเหมาะสม

เมื่อปลั๊กอินของเราเปิดใช้งาน เราจะสร้างหน้าที่ชื่อ "บันทึก" ซึ่งจะเก็บรายการที่ผู้ใช้บันทึกไว้ในนั้น

ขณะสร้างหน้านั้น เราจะเพิ่มรหัสย่อสำหรับรายการที่บันทึกไว้ในเนื้อหาของหน้านั้น

ในตอนท้าย เราจะบันทึกหน้านั้นไว้ รับ ID; และเก็บไว้ในฐานข้อมูล เพื่อให้เราสามารถเข้าถึงได้ในภายหลังเมื่อปิดใช้งานปลั๊กอิน

เมื่อปลั๊กอินของเราถูกปิดใช้งาน เราจะได้รับ ID หน้า "บันทึก" จากฐานข้อมูล จากนั้นลบหน้า "ที่บันทึกไว้" เพื่อลบร่องรอยของปลั๊กอินเอง

เราสามารถทำได้ทั้งหมดนี้ใน include/class-toptal-save-activator.php และ including/class-toptal-save-deactivator.php

เริ่มต้นด้วยกระบวนการเปิดใช้งาน:

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Activator { /** * On activation create a page and remember it. * * Create a page named "Saved", add a shortcode that will show the saved items * and remember page id in our database. * * @since 1.0.0 */ public static function activate() { // Saved Page Arguments $saved_page_args = array( 'post_title' => __( 'Saved', 'toptal-save' ), 'post_content' => '[toptal-saved]', 'post_status' => 'publish', 'post_type' => 'page' ); // Insert the page and get its id. $saved_page_id = wp_insert_post( $saved_page_args ); // Save page id to the database. add_option( 'toptal_save_saved_page_id', $saved_page_id ); } }

ฟังก์ชัน activate() ถูกเรียกเมื่อเปิดใช้งานปลั๊กอิน

มันสร้างหน้าใหม่โดยใช้ wp_insert_post() และบันทึก ID หน้าไปยังฐานข้อมูลโดยใช้ add_option()

ตอนนี้ มาดำเนินการปิดการใช้งานปลั๊กอินต่อ

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Deactivator { /** * On deactivation delete the "Saved" page. * * Get the "Saved" page id, check if it exists and delete the page that has that id. * * @since 1.0.0 */ public static function deactivate() { // Get Saved page id. $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Check if the saved page id exists. if ( $saved_page_id ) { // Delete saved page. wp_delete_post( $saved_page_id, true ); // Delete saved page id record in the database. delete_option( 'toptal_save_saved_page_id' ); } } }

ฟังก์ชัน deactivate() ซึ่งถูกเรียกเมื่อปลั๊กอินถูกปิดใช้งาน ดึงหน้าโดยใช้ get_option() ลบเพจที่เกี่ยวข้องออกจากฐานข้อมูลโดยใช้ wp_delete_post() และลบ ID ที่บันทึกไว้ออกจากตารางตัวเลือกโดยใช้ delete_option() .

หากเราเปิดใช้งานปลั๊กอินของเรา และไปที่หน้า เราควรเห็นหน้าที่เรียกว่า "บันทึก" พร้อมรหัสย่ออยู่

หากเราต้องปิดการใช้งานปลั๊กอิน หน้านั้นจะถูกลบออก

เนื่องจากเราใช้ true เป็นอาร์กิวเมนต์ใน wp_delete_post() ของเรา หน้านี้จะไม่ไปในถังขยะ แต่จะถูกลบออกอย่างสมบูรณ์

สร้างหน้าการตั้งค่าปลั๊กอิน

เราสามารถสร้างหน้าการตั้งค่าของเราในไฟล์ admin/class-toptal-save-admin.php ได้ และสิ่งแรกที่เราต้องทำในไฟล์นั้นคือ ลบหรือแสดงความคิดเห็นในการเรียก wp_enqueue_style() ภายใน enqueue_styles() และ เรียกใช้ wp_enqueue_script() ภายใน enqueue_scripts() หากเราจะไม่เพิ่ม CSS/JS ลงในหน้าจอผู้ดูแลระบบ

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

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-admin.css', array(), $this->version, 'all' );

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-admin.js', array( 'jquery' ), $this->version, false );

หากคุณสงสัยว่าฉันไปเอาส่วน 'tools_page_toptal-save' นั้นมาจากไหน

นี่คือสิ่งที่ ฉันรู้ว่าฉันกำลังจะสร้างหน้าการตั้งค่าด้วย slug toptal-save และฉันก็รู้ด้วยว่าฉันกำลังจะเพิ่มไปที่หน้าจอ Tools ( tools.php ) ดังนั้น เมื่อนำทั้งสองมารวมกัน เราบอกได้ว่าค่าของตัวแปร $hook จะเป็น 'tools_page_toptal-save' ซึ่งเป็นการต่อกันของค่าทั้งสอง

หากเราไม่ได้อยู่ในหน้าการตั้งค่าปลั๊กอิน เราใช้ return เพื่อยุติการทำงานของฟังก์ชันที่เราอยู่ทันที

เนื่องจากฉันจะไม่เพิ่มรูปแบบที่กำหนดเองใดๆ ลงในหน้าจอผู้ดูแลระบบของฉัน – เพราะฉันต้องการให้หน้าจอปลั๊กอินของฉันดูเหมือนหน้าจอ WordPress ดั้งเดิม – ฉันจะไม่เพิ่มโค้ดนั้น

ตอนนี้ เราสามารถดำเนินการสร้างหน้าการตั้งค่าของเราได้

เราจะเริ่มต้นด้วยการเพิ่มวิธีการง่ายๆ ให้กับคลาส Toptal_Save_Admin ซึ่งจะเรียกใช้ add_submenu_page()

 /** * Register the settings page for the admin area. * * @since 1.0.0 */ public function register_settings_page() { // Create our settings page as a submenu page. add_submenu_page( 'tools.php', // parent slug __( 'Toptal Save', 'toptal-save' ), // page title __( 'Toptal Save', 'toptal-save' ), // menu title 'manage_options', // capability 'toptal-save', // menu_slug array( $this, 'display_settings_page' ) // callable function ); }

นั่นเป็นข้อโต้แย้งไม่กี่ข้อที่เรากำลังส่งต่อไปยัง add_submenu_page() นี่คือสิ่งที่แต่ละคนหมายถึง

• ทากหลัก: ชื่อกระสุนสำหรับเมนูหลัก (หรือชื่อไฟล์ของหน้าผู้ดูแลระบบ WordPress มาตรฐาน) คุณสามารถดูรายชื่อทากผู้ปกครองทั้งหมดได้ที่นี่

• ชื่อหน้า: ข้อความที่จะแสดงในแท็กชื่อของหน้าเมื่อเลือกเมนู

• ชื่อเมนู: ข้อความที่จะใช้สำหรับชื่อเมนู

• ความสามารถ: ความสามารถที่ผู้ใช้ต้องการสำหรับการแสดงเมนูนี้ เราใช้ “manage_options” ซึ่งอนุญาตให้เข้าถึงตัวเลือกแผงการดูแลระบบ คุณสามารถอ่านเพิ่มเติมเกี่ยวกับบทบาทและความสามารถได้ที่นี่

• Menu slug: ชื่อกระสุนที่ใช้อ้างอิงถึงเมนูนี้

• ฟังก์ชันที่เรียกได้ : ฟังก์ชันที่จะเรียกใช้เพื่อส่งออกเนื้อหาสำหรับหน้านี้ เนื่องจากเราได้กำหนดชื่อของฟังก์ชันที่เรียกได้ เราจึงต้องสร้างมันขึ้นมา แต่ก่อนที่เราจะทำ เราใช้ $this เพื่ออ้างอิงอินสแตนซ์ของคลาสจากภายในตัวมันเอง นี่คือสิ่งที่เอกสาร PHP ได้กล่าวเกี่ยวกับมัน:

ตัวแปรหลอก $this จะพร้อมใช้งานเมื่อมีการเรียกเมธอดจากภายในบริบทของอ็อบเจ็กต์ $นี่คือการอ้างอิงถึงวัตถุที่เรียก (โดยปกติคือวัตถุที่เป็นของวิธีการ แต่อาจเป็นวัตถุอื่นหากวิธีการนั้นถูกเรียกแบบคงที่จากบริบทของวัตถุรอง)

ต่อไปเราจะเพิ่มวิธีการอื่นในชั้นเรียน:

 /** * Display the settings page content for the page we have created. * * @since 1.0.0 */ public function display_settings_page() { require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/partials/toptal-save-admin-display.php'; }

ฟังก์ชันที่เรียกได้นี้รวมเทมเพลตของเราที่จะแสดงหน้าการตั้งค่าของเรา คุณจะเห็นว่าเรากำลังอ้างอิงไฟล์ที่อยู่ใน admin/partials ที่เรียกว่า toptal-save-admin-display.php

ตอนนี้ ถ้าคุณไปที่เครื่องมือ คุณจะไม่เห็นหน้าจอนั้น ทำไม? เนื่องจากเราไม่ได้เชื่อมต่อเมธอด register_admin_page() ของเรากับ admin_menu

เราสามารถทำได้โดยเปิดไฟล์ include/class-toptal-save.php และเพิ่มโค้ดก้อนนี้ภายใน define_admin_hooks() ด้านล่างตรงที่ $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); ส่วนหนึ่งคือ

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

อย่ากังวลกับการเรียก add_action() เพราะนั่นคือสิ่งที่เราจะพูดถึงในภายหลัง

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

เรากำลังดำเนินการอยู่ แต่เดี๋ยวก่อน เราต้องแสดงการตั้งค่าบางอย่างที่นี่ มาทำกัน

เรากำลังจะเริ่มสร้างฟิลด์ และนั่นคือสิ่งที่เราจะทำโดยใช้ WordPress Settings API

หากคุณไม่คุ้นเคย ฟิลด์นี้จะช่วยให้เราสามารถสร้างฟิลด์ของฟอร์มที่เราสามารถใช้บันทึกข้อมูลของเราได้

 /** * Register the settings for our settings page. * * @since 1.0.0 */ public function register_settings() { // Here we are going to register our setting. register_setting( $this->plugin_name . '-settings', $this->plugin_name . '-settings', array( $this, 'sandbox_register_setting' ) ); // Here we are going to add a section for our setting. add_settings_section( $this->plugin_name . '-settings-section', __( 'Settings', 'toptal-save' ), array( $this, 'sandbox_add_settings_section' ), $this->plugin_name . '-settings' ); // Here we are going to add fields to our section. add_settings_field( 'post-types', __( 'Post Types', 'toptal-save' ), array( $this, 'sandbox_add_settings_field_multiple_checkbox' ), $this->plugin_name . '-settings', $this->plugin_name . '-settings-section', array( 'label_for' => 'post-types', 'description' => __( 'Save button will be added only to the checked post types.', 'toptal-save' ) ) ); // ... }

ภายในฟังก์ชัน register_settings() เราสามารถเพิ่มและกำหนดค่าฟิลด์ทั้งหมดได้ คุณสามารถค้นหาการใช้งานฟังก์ชันทั้งหมดได้ที่นี่ เราใช้สิ่งต่อไปนี้ในฟังก์ชันที่แสดงด้านบน:

• register_setting() : ลงทะเบียนการตั้งค่าและการเรียกกลับของการล้างข้อมูล
• add_settings_section() : เพิ่มส่วนใหม่ในหน้าการตั้งค่า
• add_settings_field() : เพิ่มฟิลด์ใหม่ให้กับส่วนของหน้าการตั้งค่า

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

นอกจากนี้เรายังได้ส่งผ่านอาร์เรย์ของข้อมูลไปยังการเรียกกลับเหล่านั้น เช่น label_for คำอธิบายหรือค่าเริ่มต้นตามความจำเป็น

ตอนนี้ เราสามารถสร้างการเรียกกลับการฆ่าเชื้อเหล่านั้นได้ คุณสามารถค้นหารหัสสำหรับการโทรกลับเหล่านั้นได้ที่นี่

ทั้งหมดนี้เป็นเรื่องปกติ แต่เราจำเป็นต้องขอฟิลด์ใน admin_init hook แล้วแสดง

เราจะใช้ add_action ซึ่งเป็นตะขอที่แกนหลักของ WordPress เริ่มต้นที่จุดใดจุดหนึ่งระหว่างการดำเนินการหรือเมื่อมีเหตุการณ์เฉพาะเกิดขึ้น admin_init ถูกทริกเกอร์ก่อน hook อื่น ๆ เมื่อผู้ใช้เข้าถึงพื้นที่ผู้ดูแลระบบ

ขั้นแรก เราต้องเพิ่มการดำเนินการในไฟล์ include/class-toptal-save.php

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); // Hook our settings page $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); // Hook our settings $this->loader->add_action( 'admin_init', $plugin_admin, 'register_settings' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

ถัดไป ใน admin/partials/topal-save-admin-display.php เราจำเป็นต้องจัดเตรียมมุมมองสำหรับพื้นที่ผู้ดูแลระบบของปลั๊กอินของเรา:

 <?php /** * Provide a admin area view for the plugin * * This file is used to markup the admin-facing aspects of the plugin. * * @link https://www.toptal.com/resume/ratko-solaja * @since 1.0.0 * * @package Toptal_Save * @subpackage Toptal_Save/admin/partials */ ?> <!-- This file should primarily consist of HTML with a little bit of PHP. --> <div> <form method="post" action="options.php"> <?php settings_fields( 'toptal-save-settings' ); do_settings_sections( 'toptal-save-settings' ); submit_button(); ?> </form> </div>

ฟังก์ชัน settings_fields() ใช้เพื่อส่งออกฟิลด์ nonce, action และ option_page สำหรับหน้าการตั้งค่า

ตามด้วย do_settings_sections() ซึ่งพิมพ์ส่วนการตั้งค่าทั้งหมดที่เพิ่มในหน้าการตั้งค่าเฉพาะ

สุดท้าย เพิ่มปุ่มส่งโดยใช้ข้อความที่ให้มาและคลาสที่เหมาะสมโดยใช้ submit_button()

ทีนี้ถ้าเราดูที่หน้าของเรา มันจะมีลักษณะดังนี้:

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

สร้างฟังก์ชันปลั๊กอิน

มาถึงส่วนที่น่าสนใจ เราจำเป็นต้องสร้างหลายฟังก์ชันเพื่อแยกการทำงานของเรา:

• ฟังก์ชั่นที่จะแสดงปุ่ม “บันทึกรายการ” สิ่งนี้จำเป็นต้องตรวจสอบว่าผู้ใช้ปัจจุบันได้บันทึกรายการนั้นแล้วหรือไม่ ขึ้นอยู่กับว่าเราจะแสดงข้อความและสีต่างกัน
• ฟังก์ชันที่จะบันทึก/ยกเลิกการบันทึกรายการ (AJAX)
• ฟังก์ชั่นที่จะแสดงรายการที่บันทึกไว้ทั้งหมด
• ฟังก์ชั่นที่จะสร้างรหัสย่อของเรา

มาเริ่มกันเลยกับการแสดงปุ่ม เราจะทำทั้งหมดนี้ใน public/class-toptal-save-public.php

ขณะทำเช่นนี้ เราจะต้องสร้างฟังก์ชันตัวช่วยเพิ่มเติมเพื่อดูแลสิ่งต่อไปนี้

• การสร้างชื่อคุกกี้เฉพาะสำหรับเว็บไซต์
• การสร้างคุกกี้
• รับค่าคุกกี้
• รับสถานะสมาชิกจากการตั้งค่า

รหัสสำหรับฟังก์ชันตัวช่วยเหล่านี้สามารถพบได้ที่นี่

get_unique_cookie_name() จะช่วยให้เราสร้างชื่อคุกกี้ที่ไม่ซ้ำจาก URL ของเว็บไซต์ ชื่อเว็บไซต์ และส่วนต่อท้ายที่กำหนดขึ้นเองของเรา เพื่อให้ชื่อคุกกี้ที่สร้างขึ้นจะไม่ขัดแย้งกันเมื่อใช้ในเว็บไซต์ WordPress หลายแห่งภายใต้โดเมนเดียวกัน

ฟังก์ชั่น toptal_set_cookie() และ toptal_get_cookie() จะสร้างและรับค่าของคุกกี้ของเราตามลำดับ

get_user_status() จะได้รับสถานะของช่องทำเครื่องหมายการเป็นสมาชิกของเราในการตั้งค่า (คืนค่า 1 เมื่อทำเครื่องหมาย มิฉะนั้น 0 )

ตอนนี้ส่วนฉ่ำสร้างฟังก์ชั่นที่จะรับผิดชอบในการแสดงปุ่มบันทึก การใช้งาน show_save_button() ของเราสามารถพบได้ที่นี่ และเราได้ใช้ฟังก์ชันใหม่บางอย่างจาก WordPress API ที่นี่:

• get_queried_object_id() : ดึง ID ของวัตถุที่สอบถามปัจจุบัน
• is_user_logged_in() : ตรวจสอบว่าผู้เยี่ยมชมปัจจุบันเป็นผู้ใช้ที่เข้าสู่ระบบหรือไม่
• get_user_meta() : ดึงข้อมูลฟิลด์ข้อมูลเมตาของผู้ใช้สำหรับผู้ใช้
• wp_create_nonce() : สร้างโทเค็นการเข้ารหัสที่เชื่อมโยงกับการดำเนินการเฉพาะ ผู้ใช้ เซสชันผู้ใช้ และกรอบเวลา

ตอนนี้ มาสร้างฟังก์ชันที่จะผนวกปุ่มของเราต่อท้ายเนื้อหา ที่นี่ เรามีข้อกำหนดสำคัญสองประการ

1. ตรวจสอบให้แน่ใจว่าปุ่มแสดงเฉพาะในประเภทโพสต์ที่เลือกในการตั้งค่า
2. ตรวจสอบให้แน่ใจว่าได้เลือกช่องทำเครื่องหมายสำหรับการต่อท้ายปุ่ม

 /** * Append the button to the end of the content. * * @since 1.0.0 */ public function append_the_button( $content ) { // Get our item ID $item_id = get_queried_object_id(); // Get current item post type $current_post_type = get_post_type( $item_id ); // Get our saved page ID, so we can make sure that this button isn't being shown there $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Set default values for options that we are going to call below $post_types = array(); $override = 0; // Get our options $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['post-types'] ) ) { $post_types = $options['post-types']; } if ( ! empty( $options['toggle-content-override'] ) ) { $override = $options['toggle-content-override']; } // Let's check if all conditions are ok if ( $override == 1 && ! empty( $post_types ) && ! is_page( $saved_page_id ) && in_array( $current_post_type, $post_types ) ) { // Append the button $custom_content = ''; ob_start(); echo $this->show_save_button(); $custom_content .= ob_get_contents(); ob_end_clean(); $content = $content . $custom_content; } return $content; }

ตอนนี้ เราต้องขอฟังก์ชันนี้กับ the_content hook

ทำไม? เนื่องจาก the_content ใช้เพื่อกรองเนื้อหาของโพสต์หลังจากดึงข้อมูลจากฐานข้อมูลและก่อนที่จะพิมพ์ไปยังหน้าจอ

ด้วยวิธีนี้ เราสามารถเพิ่มปุ่มบันทึกของเราได้ทุกที่ในเนื้อหา เราสามารถทำได้ใน include/class-toptal-save.php ในวิธี define_public_hooks() ดังนี้:

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

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

จากที่นี่ เราควรไปข้างหน้าและจัดรูปแบบปุ่มนั้น

เราสามารถทำได้ใน public/css/toptal-save-public.css ค้นหาไฟล์ CSS ที่อัปเดตที่นี่

ตอนนี้ มาสร้างฟังก์ชันที่จะบันทึกรายการกัน

เราจะทำสิ่งนี้ในชั้นเรียนสาธารณะของเรา และเราจะทำมันด้วย AJAX รหัสอยู่ที่นี่

มาเชื่อมต่อฟังก์ชันนี้กับ WordPress AJAX กันเถอะ

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ AJAX ในปลั๊กอินได้ที่นี่

ก่อนที่เราจะจบส่วนนี้ เราต้องทำอีกสองสิ่ง

1. โลคัลไลซ์สคริปต์
2. สร้างการโทร AJAX ของเราใน public/js/toptal-save-public.js

การแปลสคริปต์จะทำผ่าน wp_localize_script() ภายในไฟล์ public/class-toptal-save-public.php ของเรา

นอกจากนี้ ในขณะที่เรากำลังดำเนินการอยู่ เราจะตรวจสอบให้แน่ใจว่าได้ปรับใช้การแสดงไฟล์ CSS และ JS โดยขึ้นอยู่กับสถานะของช่องกาเครื่องหมาย “ใช้สไตล์ของเรา”

 /** * Register the stylesheets for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_styles() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['toggle-css-override'] ) && $options['toggle-css-override'] == 1 ) { wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-public.css', array(), $this->version, 'all' ); } } /** * Register the JavaScript for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_scripts() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-public.js', array( 'jquery' ), $this->version, false ); // Get our options $options = get_option( $this->plugin_name . '-settings' ); // Get our text $item_save_text = $options['text-save']; $item_unsave_text = $options['text-unsave']; $item_saved_text = $options['text-saved']; $item_no_saved = $options['text-no-saved']; $saved_page_id = get_option( 'toptal_save_saved_page_id' ); $saved_page_url = get_permalink( $saved_page_id ); wp_localize_script( $this->plugin_name, 'toptal_save_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'item_save_text' => $item_save_text, 'item_unsave_text' => $item_unsave_text, 'item_saved_text' => $item_saved_text, 'item_no_saved' => $item_no_saved, 'saved_page_url' => $saved_page_url ) ); }

ตอนนี้ เราสามารถดำเนินการเรียก AJAX ต่อได้

สคริปต์ส่วนหน้าของเราจะค้นหาองค์ประกอบที่มีคลาส "ปุ่มบันทึกด้านบน"

ตัวจัดการการคลิกจะถูกลงทะเบียนกับองค์ประกอบที่ตรงกันทั้งหมด ซึ่งจะดำเนินการเรียก API และอัปเดต UI ตามนั้น

คุณสามารถหาโค้ดได้ที่นี่และ CSS ที่จำเป็นที่นี่

ฉันได้เพิ่มฟังก์ชันที่จะจัดการกับการแจ้งเตือนเมื่อมีการเพิ่มรายการ

นี่คือวิธีการทำงานทั้งหมด

ต่อไป เราต้องสร้างชอร์ตโค้ดให้ผู้ใช้แทรกได้ทุกที่ที่ต้องการ

เราสามารถทำได้ใน public/class-toptal-save-public.php :

 /** * Create Shortcode for Users to add the button. * * @since 1.0.0 */ public function register_save_unsave_shortcode() { return $this->show_save_button(); }

เราต้องลงทะเบียนมันด้วย เนื่องจากฟังก์ชันโดยตัวมันเองจะไม่ทำอะไรเลย

ใน include/class-toptal-save.php เพิ่มรหัสนี้หลังจากบรรทัดที่เราต่อท้ายปุ่มของเรา

 // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' );

ตอนนี้ วิธีนี้ใช้ไม่ได้ผลเพราะเรายังไม่ได้โหลด add_shortcode() ในคลาสตัวโหลดของเรา

นี่คือรหัสเต็มของไฟล์ include/class-toptal-save-loader.php

ฉันได้เพิ่มตัวแปรที่ได้รับการป้องกันใหม่ที่เรียกว่า shortcodes จากนั้นในวิธี Constructor ของคลาส ฉันได้เปลี่ยนเป็นอาร์เรย์

ในบรรทัดที่ 104 ฉันได้เพิ่มฟังก์ชันที่จะรับผิดชอบในการสร้างรหัสย่อของเรา คุณจะเห็นว่ามันค่อนข้างเหมือนกับฟังก์ชันด้านบน ( add_filter() ) ยกเว้นว่าฉันเปลี่ยน "ตัวกรอง" เป็น "รหัสย่อ" และ "ตัวกรอง" เป็น "รหัสย่อ"

นอกจากนี้ ในเมธอด run() ฉันได้เพิ่ม foreach อีกอันที่จะผ่านอาร์เรย์ shortcodes ของเรา และลงทะเบียนกับ WordPress

นั่นเป็นเรื่องง่าย

จำไว้ว่าในตอนเริ่มต้น เราใช้รหัสสั้น [toptal-saved] ดังนั้น มาสร้างวิธีการที่จะแสดงรายการที่บันทึกไว้ทั้งหมดของเรา

ค้นหารหัสเต็มสำหรับวิธีนี้ที่นี่

ตอนนี้เช่นเคย เราต้องลงทะเบียน รหัสย่อใน include/class-toptal-save.php :

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' ); $this->loader->add_shortcode( 'toptal-saved', $plugin_public, 'register_saved_shortcode' ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

เรามีอีกสองสิ่งที่ต้องทำที่นี่

1. จัดรูปแบบหน้ารายการที่บันทึกไว้ของเรา
2. ตรวจสอบให้แน่ใจว่าเมื่อผู้ใช้ลบรายการที่บันทึกไว้ รายการนั้นจะหายไปจากหน้ารายการที่บันทึกไว้

สำหรับงานแรก คุณสามารถค้นหาโค้ด CSS ที่จำเป็นได้ที่นี่

สำหรับอันที่สอง มันเกี่ยวข้องกับการเขียนสคริปต์ส่วนหน้าเล็กน้อย

รหัส JavaScript แบบเต็มสำหรับที่สามารถพบได้ที่นี่

ดังที่คุณเห็นในบรรทัดที่ 52 ฉันค้นหา div ที่มีคลาส "toptal-saved-item"

จากนั้น ในบรรทัดที่ 70-75 เราตรวจสอบว่า div parent มีคลาส toptal-saved-item หรือไม่

หากเป็นเช่นนั้น เราจะซ่อนรายการของเราด้วย fadeOut จากนั้นหลังจากภาพเคลื่อนไหวจบลง เราจะลบรายการออกจากหน้าจอโดยสมบูรณ์

ตอนนี้ มาดูส่วนที่ยากขึ้นกันดีกว่า – ทำให้เป็นแบบแยกส่วน

ทำให้ปลั๊กอินเป็นแบบโมดูลาร์

คำจำกัดความพื้นฐานของปลั๊กอินโมดูลาร์คือ:

รหัสขยายหรือโมดูลาร์คือรหัสที่สามารถแก้ไข โต้ตอบ เพิ่มหรือจัดการ ทั้งหมดนี้โดยไม่ต้องแก้ไขฐานรหัสหลัก

เมื่อพูดถึงปลั๊กอินนี้ ฉันต้องแน่ใจว่าผู้ใช้สามารถเปลี่ยน HTML ภายในรายการที่บันทึกไว้บนหน้ารายการที่บันทึกไว้ได้

ดังนั้น เราจะต้องทำการเปลี่ยนแปลงเล็กน้อยในเมธอด register_saved_shortcode() ของเรา:

• เปลี่ยน html_to_return เป็น inner_html_to_return ทุกที่ที่เราต้องการให้ผู้ใช้เปลี่ยน HTML ได้ ตรวจสอบให้แน่ใจว่าการประกาศตัวแปร inner_html_to_return ครั้งแรกมี "=" โดยไม่มีจุดนำหน้า
• ใช้ apply_filters() เพื่อลงทะเบียนตัวกรองของเรา

ด้วยการเปลี่ยนแปลงทั้งสองนี้ คุณควรลงเอยด้วยสิ่งนี้

ตอนนี้ หากผู้ใช้ต้องการโต้ตอบกับโค้ดของเรา พวกเขาสามารถเพิ่มสิ่งนี้ลงในไฟล์ functions.php ของพวกเขาได้:

 <?php add_filter( 'toptal_saved_item_html', 'change_toptal_saved_item_html'); function change_toptal_saved_item_html( $inner_html_to_return ) { // Some custom code return $inner_html_to_return; }

สร้างไฟล์การแปล

การแปลมีความสำคัญมากเพราะช่วยให้สมาชิกในชุมชน WordPress และกลุ่มภาษาหลายภาษาสามารถแปลปลั๊กอินของคุณ ทำให้สามารถเข้าถึงไซต์ที่ไม่ใช่ภาษาอังกฤษได้

อย่างที่กล่าวไปแล้ว มาดูรายละเอียดทางเทคนิคเกี่ยวกับวิธีที่ WordPress จัดการกับการแปลกัน

WordPress ใช้เฟรมเวิร์กการแปล GNU gettext สำหรับการแปล ในกรอบนี้มีไฟล์สามประเภท:

• เทมเพลตออบเจ็กต์แบบพกพา (POT)
• วัตถุพกพา (PO)
• วัตถุเครื่องจักร (MO)

แต่ละไฟล์เหล่านี้แสดงถึงขั้นตอนในกระบวนการแปล

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

ที่นี่ เราแปลข้อความจากไฟล์ POT บันทึกทั้งภาษาอังกฤษและการแปลของเราในไฟล์ PO และเราแปลงไฟล์ PO เป็นไฟล์ MO

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

เมื่อคุณติดตั้งและเปิดใช้งานแล้ว ให้ไปที่ Loco Translate > Plugins > Toptal Save

จากนั้นคลิกแก้ไขเทมเพลต จากนั้นคลิกซิงค์และบันทึก การดำเนินการนี้จะแก้ไขไฟล์ toptal-save.pot ภายในโฟลเดอร์ภาษาของเรา

ตอนนี้ปลั๊กอินพร้อมสำหรับการแปลแล้ว

สร้างปลั๊กอิน WordPress ของคุณทันที

เราได้สร้างปลั๊กอินที่ค่อนข้างง่ายในบทความนี้ แต่ในกระบวนการนี้ เราปฏิบัติตามแนวทางปฏิบัติและมาตรฐานที่จะช่วยให้เราสามารถบำรุงรักษาและขยายปลั๊กอินนี้ได้อย่างง่ายดาย

เราใช้ฟังก์ชันการทำงานของ WordPress ในลักษณะที่ไม่ขัดขวางประสิทธิภาพโดยรวมของแพลตฟอร์ม

ไม่ว่าจะเป็นปลั๊กอินธรรมดาหรือปลั๊กอินที่ซับซ้อน ไม่ว่าคุณจะเป็นนักพัฒนาซอฟต์แวร์รายบุคคลหรือบริษัทพัฒนา WordPress การวางแผนและปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดคือกุญแจสำคัญในการสร้างปลั๊กอินที่มีประสิทธิภาพ