เทคโนโลยี

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ข้อความ

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

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

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

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

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

ย่อ

ด้วยรหัสย่อคุณสามารถแสดงเพจที่บันทึกไว้ได้ทุกที่ที่เพิ่มเข้าไป

ใช้หม้อไอน้ำ.

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

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

Wordpress สำเร็จรูป

คุณควรได้รับไฟล์ .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() .

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

การเปิดใช้งานโมดูล Wordpress

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

เนื่องจากเราใช้ 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 ถ้าเราเปิดมันใช้งานได้ แต่เราเห็นหน้าจอว่างเปล่าเพราะไม่มีอะไรอยู่บนนั้น

หน้าเครื่องมือ Wordpress

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

เรากำลังจะเริ่มสร้างช่องและนั่นคือสิ่งที่เรากำลังจะทำด้วยความช่วยเหลือของ 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() ฟังก์ชัน

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

ตัวอย่างหน้า Wordpress ที่สมบูรณ์

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

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

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

  • ฟังก์ชันที่จะแสดงปุ่ม“ บันทึกรายการ” สิ่งนี้ต้องตรวจสอบว่าผู้ใช้ปัจจุบันได้บันทึกรายการนั้นไว้แล้วหรือไม่โดยขึ้นอยู่กับว่าเราจะแสดงข้อความและสีที่แตกต่างกัน
  • ฟังก์ชันที่จะบันทึก / ยกเลิกการบันทึกรายการ (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() : สร้างโทเค็นการเข้ารหัสที่เชื่อมโยงกับการดำเนินการเฉพาะผู้ใช้เซสชันของผู้ใช้และช่วงเวลา

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

  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 ตะขอ.

ทำไม? เพราะ 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' ); }

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

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

จากที่นี่เราควรดำเนินการต่อและจัดรูปแบบปุ่มนั้น

เราสามารถทำได้ใน สาธารณะ / 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 ได้ในปลั๊กอิน ที่นี่ .

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

  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 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 ที่จำเป็น ที่นี่ .

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

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

การสาธิตปลั๊กอิน Wordpress เสร็จสมบูรณ์

ต่อไปเราต้องสร้างรหัสย่อเพื่อให้ผู้ใช้แทรกได้ทุกที่ที่ต้องการ

เราสามารถทำได้ใน สาธารณะ / 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' ); }

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

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

สำหรับงานแรกคุณจะพบโค้ด 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 , การวางแผนและการติดตาม ปฏิบัติที่ดีที่สุด เป็นกุญแจสำคัญในการสร้างปลั๊กอินที่มีประสิทธิภาพ

คำแนะนำทีละขั้นตอนในการออกแบบภาพประกอบที่กำหนดเองโดยไม่เคยมีประสบการณ์มาก่อน

เครื่องมือและบทช่วยสอน

คำแนะนำทีละขั้นตอนในการออกแบบภาพประกอบที่กำหนดเองโดยไม่เคยมีประสบการณ์มาก่อน
วิธีลดความซับซ้อนของการทำงานพร้อมกันด้วย Reactive Modeling บน Android

วิธีลดความซับซ้อนของการทำงานพร้อมกันด้วย Reactive Modeling บน Android

มือถือ