ปลั๊กอินเป็นส่วนสำคัญของเว็บไซต์ WordPress ที่ต้องการฟังก์ชันเฉพาะ
ในขณะที่พื้นที่เก็บข้อมูล WordPress อย่างเป็นทางการมีปลั๊กอินมากกว่า 45,000 รายการให้คุณเลือกใช้ แต่ปลั๊กอินเหล่านี้จำนวนมากไม่ได้ทำเครื่องหมาย
เพียงเพราะปลั๊กอินอยู่ในที่เก็บไม่ได้หมายความว่าปลั๊กอินจะไม่ขัดขวางประสิทธิภาพหรือลดทอนความปลอดภัย
แล้วคุณจะทำอะไรได้บ้าง? คุณสามารถสร้างของคุณเองได้
สร้างปลั๊กอิน WordPress ที่ยอดเยี่ยม เริ่มต้นด้วยการวางแผนอย่างรอบคอบ
ไม่ว่าคุณจะสร้างขึ้นมาใหม่ตั้งแต่ต้นหรือสร้างจากต้นแบบการปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดที่มีการจัดทำเป็นเอกสารไว้เป็นสิ่งสำคัญอย่างยิ่ง
ในบทช่วยสอนนี้คุณจะได้เรียนรู้วิธีสร้างปลั๊กอิน WordPress อย่างง่ายอย่างถูกวิธี
หากคุณต้องการตรวจสอบซอร์สโค้ดสุดท้ายในขณะที่คุณอ่านคุณสามารถค้นหาได้ ที่นี่ .
ก่อนอื่นมาดูคุณสมบัติที่ปลั๊กอินของเราจะมีและสรุปสิ่งที่จำเป็นต้องทำ
ปลั๊กอินที่เรากำลังสร้างจะช่วยให้ผู้เยี่ยมชมไซต์บันทึกเนื้อหาเพื่ออ่านในภายหลัง
สำหรับผู้ใช้ที่ลงทะเบียนเราจะจัดเก็บรายชื่อไว้ในฐานข้อมูลและสำหรับผู้ใช้ที่ไม่ระบุชื่อเราจะบันทึกรายการโดยใช้คุกกี้
ด้านล่างนี้เป็นโครงร่างของคุณสมบัติและฟังก์ชันการทำงานที่ปลั๊กอินของเราจะมีให้
ข้อความด้านล่างนี้จะปรากฏบนหน้าจอเพื่อตอบสนองต่อการโต้ตอบของผู้เข้าชมกับปลั๊กอินหรือเป็นป้ายกำกับของรายการที่ดำเนินการได้:
นี่คือที่ที่ผู้เยี่ยมชมดูรายการโพสต์ที่พวกเขาบันทึกไว้
ด้วยรหัสย่อคุณสามารถแสดงเพจที่บันทึกไว้ได้ทุกที่ที่เพิ่มเข้าไป
นี่คือแผ่นสำเร็จรูปที่ดีที่สุด ฉันพบแล้ว มีโครงสร้างที่ดีเชิงวัตถุและมีประสิทธิภาพ เป็นไปตามแนวทางปฏิบัติที่ดีที่สุดทุกประการ เร็วและเบา
คุณสามารถใช้ได้ หน้านี้ ในการสร้างโค้ดเบสปลั๊กอินตามปลั๊กอิน WordPress Plugin Boilerplate นี้:
คุณควรได้รับไฟล์ .zip ไฟล์.
แตกไฟล์และวางไว้ในโฟลเดอร์การติดตั้ง WordPress ของคุณ: wp-content / ปลั๊กอิน / .
หากคุณเปิดแดชบอร์ด WordPress และไปที่ปลั๊กอินคุณจะเห็นว่าปลั๊กอินของคุณแสดงอยู่ที่นั่น อย่าเพิ่งเปิดใช้งาน
สิ่งสำคัญสำหรับปลั๊กอินของเราในการจัดการการเปิดใช้งานและการปิดใช้งานอย่างเหมาะสม
เมื่อปลั๊กอินของเราเปิดใช้งานเราจะสร้างเพจชื่อ 'บันทึกไว้' ซึ่งจะเก็บรายการที่บันทึกไว้ของผู้ใช้ไว้ในนั้น
ในขณะที่สร้างเพจนั้นเราจะเพิ่มรหัสย่อสำหรับรายการที่บันทึกไว้ของเราลงในเนื้อหาของเพจนั้น
ในตอนท้ายเราจะบันทึกหน้านั้น รับ ID; และเก็บไว้ในฐานข้อมูลเพื่อให้เราสามารถเข้าถึงได้ในภายหลังเมื่อปิดใช้งานปลั๊กอิน
เมื่อปลั๊กอินของเราถูกปิดใช้งานเราจะได้รับ ID เพจ 'ที่บันทึกไว้' จากฐานข้อมูลจากนั้นจึงลบเพจ 'บันทึก' ออกโดยจะลบร่องรอยของปลั๊กอินนั้นเอง
เราสามารถทำทั้งหมดนี้ได้ใน รวมถึง / class-toptal-save-activator.php และ รวมถึง / class-toptal-save-deactivator.php .
เริ่มต้นด้วยขั้นตอนการเปิดใช้งาน:
__( '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()
.
ตอนนี้เรามาดำเนินการปิดใช้งานปลั๊กอินกัน
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’
ส่วนหนึ่งจาก.
นี่คือสิ่งที่ฉันรู้ว่าฉันกำลังจะสร้างหน้าการตั้งค่าที่มีการบันทึก toptal ของกระสุนและฉันก็รู้ว่าฉันจะเพิ่มลงในเครื่องมือ ( tools.php ) หน้าจอ ดังนั้นเมื่อรวมทั้งสองเข้าด้วยกันเราสามารถบอกได้ว่าค่าของตัวแปร $hook
จะเป็น ‘tools_page_toptal-save’
- การรวมสองค่าเข้าด้วยกัน
หากเราไม่ได้อยู่ในหน้าการตั้งค่าปลั๊กอินเราจะใช้ return
เพื่อยุติการทำงานของฟังก์ชันที่เราอยู่ในทันที
เนื่องจากฉันจะไม่เพิ่มรูปแบบที่กำหนดเองลงในหน้าจอผู้ดูแลระบบของฉัน - เพราะฉันต้องการให้หน้าจอปลั๊กอินของฉันดูเหมือนหน้าจอ WordPress ทั่วไปฉันจะไม่เพิ่มโค้ดนั้น
ตอนนี้เราสามารถดำเนินการสร้างหน้าการตั้งค่าของเราได้
เราจะเริ่มต้นด้วยการเพิ่มวิธีง่ายๆใน ApeeScape_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 __( 'ApeeScape Save', 'toptal-save' ), // page title __( 'ApeeScape 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” ซึ่งอนุญาตให้เข้าถึงตัวเลือก Administration Panel คุณสามารถอ่านเพิ่มเติมเกี่ยวกับบทบาทและความสามารถได้ ที่นี่ .
-
กระสุนเมนู: ชื่อกระสุนที่จะอ้างถึงเมนูนี้
-
ฟังก์ชันโทรได้: ฟังก์ชันที่จะเรียกใช้เพื่อแสดงเนื้อหาสำหรับเพจนี้ เนื่องจากเราได้กำหนดชื่อของฟังก์ชันที่เรียกได้เราจึงต้องสร้างมันขึ้นมา แต่ก่อนที่เราจะทำเราใช้ $this
เพื่ออ้างอิงอินสแตนซ์ของคลาสจากภายในตัวมันเอง นี่คือสิ่งที่เอกสาร PHP กล่าวถึง:
ตัวแปรหลอก $ นี้จะพร้อมใช้งานเมื่อมีการเรียกเมธอดจากภายในบริบทวัตถุ $ นี่คือการอ้างอิงถึงอ็อบเจ็กต์การเรียก (โดยปกติจะเป็นอ็อบเจ็กต์ที่เมธอดอยู่ แต่อาจเป็นอ็อบเจ็กต์อื่นหากเมธอดถูกเรียกแบบคงที่จากบริบทของอ็อบเจ็กต์รอง)
ต่อไปเราจะเพิ่มวิธีการอื่นในคลาส:
/** * 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'; }
ฟังก์ชันที่เรียกได้นี้รวมถึงเทมเพลตของเราที่จะแสดงหน้าการตั้งค่าของเรา คุณจะเห็นได้ว่าเรากำลังอ้างอิงไฟล์ที่อยู่ในไฟล์ ผู้ดูแลระบบ / บางส่วน เรียกว่า toptal-save-admin-display.php .
ตอนนี้ถ้าคุณไปที่ Tools คุณจะไม่เห็นหน้าจอนั้น ทำไม? เพราะเราไม่ได้ติด register_admin_page()
ของเรา วิธีการ admin_menu
ตะขอ.
เราสามารถทำได้โดยเปิดไฟล์ รวมถึง / class-toptal-save.php ไฟล์และเพิ่มโค้ดกลุ่มนี้ใน define_admin_hooks()
วิธีการด้านล่างโดยที่ $plugin_admin = new ApeeScape_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 ApeeScape_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()
เนื่องจากเป็นสิ่งที่เราจะกล่าวถึงในภายหลัง
ในตอนนี้เพียงแค่เปิดหน้าเครื่องมือคุณจะสามารถเห็นหน้าบันทึก ApeeScape ถ้าเราเปิดมันใช้งานได้ แต่เราเห็นหน้าจอว่างเปล่าเพราะไม่มีอะไรอยู่บนนั้น

เรากำลังดำเนินการบางอย่าง แต่เดี๋ยวก่อนเราจำเป็นต้องแสดงการตั้งค่าบางอย่างที่นี่ดังนั้นเรามาดูกันดีกว่า
เรากำลังจะเริ่มสร้างช่องและนั่นคือสิ่งที่เรากำลังจะทำด้วยความช่วยเหลือของ API การตั้งค่า WordPress .
หากคุณไม่คุ้นเคยจะช่วยให้เราสามารถสร้างฟิลด์แบบฟอร์มที่เราสามารถใช้เพื่อบันทึกข้อมูลของเราได้
/** * 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
ขอเกี่ยวแล้วแสดง
เราจะใช้ add_action
ซึ่งเป็นตะขอที่แกนของ WordPress เริ่มต้นที่จุดเฉพาะระหว่างการดำเนินการหรือเมื่อมีเหตุการณ์เฉพาะเกิดขึ้น admin_init
ถูกทริกเกอร์ก่อน hook อื่น ๆ เมื่อผู้ใช้เข้าถึงพื้นที่ผู้ดูแลระบบ
ขั้นแรกเราต้องเพิ่มการดำเนินการใน รวมถึง / 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 ApeeScape_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 เราจำเป็นต้องให้มุมมองสำหรับพื้นที่ผู้ดูแลระบบของปลั๊กอินของเรา:
settings_fields()
ฟังก์ชันใช้เพื่อแสดงฟิลด์ nonce, action และ option_page สำหรับเพจการตั้งค่า
ตามด้วย do_settings_sections()
ซึ่งจะพิมพ์ส่วนการตั้งค่าทั้งหมดที่เพิ่มลงในหน้าการตั้งค่าเฉพาะ
ในที่สุดปุ่มส่งจะถูกเพิ่มโดยใช้ข้อความที่ให้มาและคลาสที่เหมาะสมโดยใช้ submit_button()
ฟังก์ชัน
ตอนนี้ถ้าเราดูที่หน้าของเรามันจะมีลักษณะดังนี้:

นี่คือทั้งหมดที่เราต้องทำในพื้นที่ผู้ดูแลระบบของเรา มาเริ่มทำงานในส่วนสาธารณะของปลั๊กอินของเรา
สร้างฟังก์ชันปลั๊กอิน
นี่คือส่วนที่น่าสนใจ เราจำเป็นต้องสร้างหลายฟังก์ชันเพื่อแยกฟังก์ชันการทำงานของเรา:
- ฟังก์ชันที่จะแสดงปุ่ม“ บันทึกรายการ” สิ่งนี้ต้องตรวจสอบว่าผู้ใช้ปัจจุบันได้บันทึกรายการนั้นไว้แล้วหรือไม่โดยขึ้นอยู่กับว่าเราจะแสดงข้อความและสีที่แตกต่างกัน
- ฟังก์ชันที่จะบันทึก / ยกเลิกการบันทึกรายการ (AJAX)
- ฟังก์ชันที่จะแสดงรายการที่บันทึกไว้ทั้งหมด
- ฟังก์ชันที่จะสร้างรหัสย่อของเรา
มาเริ่มต้นด้วยการแสดงปุ่ม เราจะดำเนินการทั้งหมดนี้ใน สาธารณะ / 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()
: สร้างโทเค็นการเข้ารหัสที่เชื่อมโยงกับการดำเนินการเฉพาะผู้ใช้เซสชันของผู้ใช้และช่วงเวลา
ตอนนี้เรามาสร้างฟังก์ชันที่จะต่อท้ายปุ่มของเราที่ส่วนท้ายของเนื้อหา ที่นี่เรามีข้อกำหนดหลักสองประการ
- ตรวจสอบให้แน่ใจว่าปุ่มนั้นแสดงเฉพาะในประเภทโพสต์ที่ / ถูกเลือกไว้ในการตั้งค่า
- ตรวจสอบให้แน่ใจว่าได้เลือกช่องทำเครื่องหมายสำหรับการต่อท้ายปุ่มแล้ว
/** * 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
ตะขอ.
ทำไม? เพราะ the_content
ใช้เพื่อกรองเนื้อหาของโพสต์หลังจากดึงข้อมูลจากฐานข้อมูลและก่อนที่จะพิมพ์ไปยังหน้าจอ
ด้วยสิ่งนี้เราสามารถเพิ่มปุ่มบันทึกของเราได้ทุกที่ในเนื้อหา เราสามารถทำได้ใน รวมถึง / 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 ApeeScape_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' ); }
ตอนนี้ถ้าไปที่การตั้งค่าปลั๊กอินตรวจสอบโพสต์และเพจรวมถึงต่อท้ายปุ่มเราจะเห็นในบล็อกโพสต์ที่แสดงปุ่ม

จากที่นี่เราควรดำเนินการต่อและจัดรูปแบบปุ่มนั้น
เราสามารถทำได้ใน สาธารณะ / 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 ApeeScape_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 ได้ในปลั๊กอิน ที่นี่ .
ก่อนจะจบส่วนนี้เราต้องทำอีกสองอย่าง
- แปลสคริปต์
- สร้างการโทร 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 ApeeScape_Save_Loader as all of the hooks are defined * in that particular class. * * The ApeeScape_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 ApeeScape_Save_Loader as all of the hooks are defined * in that particular class. * * The ApeeScape_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 ของเราได้
สคริปต์ส่วนหน้าของเราจะค้นหาองค์ประกอบที่มีคลาส 'toptal-save-button'
ตัวจัดการคลิกจะลงทะเบียนกับองค์ประกอบที่ตรงกันทั้งหมดซึ่งจะทำการเรียก API และอัปเดต UI ตามนั้น
คุณสามารถค้นหารหัส ที่นี่ และ CSS ที่จำเป็น ที่นี่ .
ฉันยังได้เพิ่มฟังก์ชั่นที่จะจัดการการแจ้งเตือนเมื่อมีการเพิ่มรายการ
นี่คือวิธีการทำงานทั้งหมด

ต่อไปเราต้องสร้างรหัสย่อเพื่อให้ผู้ใช้แทรกได้ทุกที่ที่ต้องการ
เราสามารถทำได้ใน สาธารณะ / 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(); }
เราจำเป็นต้องลงทะเบียนด้วยเนื่องจากฟังก์ชันนั้นจะไม่ทำอะไรเลย
ใน รวมถึง / class-toptal-save.php เพิ่มรหัสนี้หลังจากบรรทัดที่เราต่อท้ายปุ่มของเรา
// Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' );
ตอนนี้วิธีนี้ใช้ไม่ได้เพราะเรายังไม่ได้โหลด add_shortcode()
วิธีการภายในคลาสตัวโหลดของเรา
ที่นี่ คือรหัสเต็มของไฟล์ รวมถึง / class-toptal-save-loader.php ไฟล์.
ฉันได้เพิ่มตัวแปรที่มีการป้องกันใหม่ชื่อ shortcodes
จากนั้นในวิธีการสร้างของคลาสฉันได้เปลี่ยนเป็นอาร์เรย์
ในบรรทัดที่ 104 ฉันได้เพิ่มฟังก์ชันที่จะรับผิดชอบในการสร้างรหัสย่อของเรา คุณจะเห็นว่ามันค่อนข้างเหมือนกับฟังก์ชันด้านบน (add_filter()
) ยกเว้นฉันเปลี่ยน 'ตัวกรอง' เป็น 'รหัสย่อ' และ 'ตัวกรอง' เป็น 'รหัสย่อ'
นอกจากนี้ใน run()
ฉันได้เพิ่มวิธีอื่นแล้ว foreach
ที่จะเข้าสู่อาร์เรย์รหัสย่อของเราและลงทะเบียนกับ WordPress
นั่นเป็นเรื่องง่าย
จำไว้ว่าในตอนแรกเราใช้รหัสย่อ [toptal-saved]
ดังนั้นเรามาสร้างวิธีการที่จะแสดงรายการที่บันทึกไว้ทั้งหมดของเรา
ค้นหารหัสเต็มสำหรับวิธีนี้ ที่นี่ .
ตอนนี้เช่นเคยเราต้องลงทะเบียนรหัสย่อใน รวมถึง / 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 ApeeScape_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' ); }
เรามีอีกสองสิ่งที่ต้องทำที่นี่
- จัดรูปแบบหน้ารายการที่บันทึกไว้ของเรา
- ตรวจสอบให้แน่ใจว่าเมื่อผู้ใช้ลบรายการที่บันทึกไว้รายการนั้นจะหายไปจากหน้ารายการที่บันทึกไว้
สำหรับงานแรกคุณจะพบโค้ด CSS ที่จำเป็น ที่นี่ .
สำหรับข้อที่สองจะเกี่ยวข้องกับการเขียนสคริปต์ส่วนหน้าเล็กน้อย
โค้ด JavaScript แบบเต็มสามารถพบได้ ที่นี่ .
ดังที่คุณจะเห็นในบรรทัด 52 ฉันค้นหา div ด้วยคลาส“ toptal-saved-item”
จากนั้นในบรรทัด 70-75 เราจะตรวจสอบว่า div พาเรนต์นั้นมีคลาส toptal-saved-item หรือไม่
หากเป็นเช่นนั้นเราจะซ่อนรายการของเราด้วย fadeOut จากนั้นหลังจากภาพเคลื่อนไหวจบลงเราจะนำรายการออกจากหน้าจอโดยสมบูรณ์
ตอนนี้เรามาดูส่วนที่ยากขึ้นโดยทำเป็นโมดูล
สร้างปลั๊กอินแบบแยกส่วน
คำจำกัดความพื้นฐานของปลั๊กอินโมดูลาร์คือ:
โค้ดที่ขยายได้หรือโมดูลาร์คือโค้ดที่สามารถแก้ไขโต้ตอบเพิ่มหรือปรับแต่งได้ทั้งหมดนี้โดยไม่ต้องแก้ไขฐานรหัสหลัก
ตอนนี้เมื่อพูดถึงปลั๊กอินนี้ฉันจะตรวจสอบให้แน่ใจว่าผู้ใช้สามารถเปลี่ยน HTML ภายในรายการที่บันทึกไว้ในหน้ารายการที่บันทึกไว้
ดังนั้นเราจำเป็นต้องทำการเปลี่ยนแปลงบางอย่างใน register_saved_shortcode()
ของเรา วิธี:
- เปลี่ยน
html_to_return
ถึง inner_html_to_return
ทุกที่ที่เราต้องการให้ผู้ใช้สามารถเปลี่ยน HTML ได้ ตรวจสอบให้แน่ใจว่าคำประกาศแรกของ inner_html_to_return
ของเรา ตัวแปรมี“ =” โดยไม่มีจุดนำหน้า - ใช้
apply_filters()
วิธีการลงทะเบียนตัวกรองของเรา
ด้วยการเปลี่ยนแปลงทั้งสองนี้คุณควรได้รับสิ่งที่ต้องการ นี้ .
ตอนนี้หากผู้ใช้ต้องการโต้ตอบกับโค้ดของเราพวกเขาสามารถเพิ่มสิ่งนี้ใน functions.php
ได้ ไฟล์:
สร้างไฟล์แปล
การแปลมีความสำคัญมากเนื่องจากช่วยให้สมาชิกชุมชน WordPress และคนพูดหลายภาษาสามารถแปลปลั๊กอินของคุณได้ทำให้สามารถเข้าถึงไซต์ที่ไม่ใช่ภาษาอังกฤษได้
ดังที่กล่าวมาเรามาดูรายละเอียดทางเทคนิคเกี่ยวกับวิธีที่ WordPress จัดการกับการแปล
WordPress ใช้ GNU gettext
กรอบการแปลภาษาสำหรับการแปล ในเฟรมเวิร์กนี้มีไฟล์สามประเภท:
- เทมเพลตวัตถุพกพา (POT)
- วัตถุพกพา (PO)
- วัตถุเครื่องจักร (MO)
ไฟล์แต่ละไฟล์เหล่านี้แสดงถึงขั้นตอนในกระบวนการแปล
ในการสร้างไฟล์ POT เราจำเป็นต้องมีโปรแกรมที่จะค้นหาด้วยรหัส WordPress และส่งข้อความทั้งหมดไปยังฟังก์ชันการแปลของเราเช่น __e()
และ _e()
. คุณสามารถอ่านเพิ่มเติมเกี่ยวกับฟังก์ชันการแปล ที่นี่ .
ที่นี่เราแปลข้อความจากไฟล์ POT บันทึกทั้งภาษาอังกฤษและการแปลของเราในไฟล์ PO และเราแปลงไฟล์ PO เป็นไฟล์ MO
การทำเช่นนี้ด้วยตนเองจะใช้เวลานานเนื่องจากคุณจะต้องเขียนโค้ดสองสามบรรทัดสำหรับไฟล์ที่แปลได้แต่ละไฟล์ที่คุณมีในปลั๊กอินของคุณ โชคดีที่มีวิธีที่ดีกว่าคือการใช้ปลั๊กอินเล็ก ๆ ที่มีประโยชน์ที่เรียกว่า Loco Translate
เมื่อคุณติดตั้งและเปิดใช้งานแล้วให้ไปที่ บ้าแปล > ปลั๊กอิน> บันทึก ApeeScape
จากนั้นคลิกแก้ไขเทมเพลตจากนั้นคลิกซิงค์และบันทึก สิ่งนี้จะแก้ไข toptal-save.pot
ของเรา ไฟล์ภายในโฟลเดอร์ภาษาของเรา
ตอนนี้ปลั๊กอินพร้อมใช้งานสำหรับการแปลแล้ว
สร้างปลั๊กอิน WordPress ของคุณตอนนี้
เราได้สร้างปลั๊กอินที่ค่อนข้างเรียบง่ายในบทความนี้ แต่ในขั้นตอนนี้เราปฏิบัติตามแนวทางปฏิบัติและมาตรฐานที่จะช่วยให้เราสามารถรักษาและขยายปลั๊กอินนี้ได้อย่างง่ายดาย
เราได้ใช้ฟังก์ชันของ WordPress ในรูปแบบที่ไม่ขัดขวางประสิทธิภาพโดยรวมของแพลตฟอร์ม
ไม่ว่าจะเป็นปลั๊กอินที่เรียบง่ายหรือซับซ้อนไม่ว่าคุณจะเป็นนักพัฒนารายบุคคลหรือไฟล์ บริษัท พัฒนา WordPress , การวางแผนและการติดตาม ปฏิบัติที่ดีที่สุด เป็นกุญแจสำคัญในการสร้างปลั๊กอินที่มีประสิทธิภาพ