เรียนรู้การพัฒนา WordPress Plugin: สร้างโมดูลฟังก์ชันที่กำหนดเองชิ้นแรกของคุณตั้งแต่เริ่มต้น

ทำไมต้องเริ่มเรียนรู้การพัฒนา WordPress จากปลั๊กอิน

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

จากมุมมองทางเทคนิค ปลั๊กอินโดยพื้นฐานแล้วคือไฟล์ PHP หนึ่งไฟล์ขึ้นไป ที่เป็นไปตามมาตรฐานเฉพาะของ WordPress และถูกวางไว้ใน/wp-content/plugins/ในไดเรกทอรี เมื่อ WordPress เริ่มต้นทำงาน มันจะสแกนไดเรกทอรีนี้และโหลดโค้ดของปลั๊กอินที่ใช้งานทั้งหมด ซึ่งหมายความว่าผ่านปลั๊กอิน คุณสามารถปรับเปลี่ยนหรือเพิ่มประสิทธิภาพเกือบทุกด้านของ WordPress ได้อย่างไม่จำกัด ตั้งแต่การเพิ่ม shortcode ง่ายๆ ไปจนถึงการสร้างแผงจัดการที่ซับซ้อน

สร้างโครงสร้างพื้นฐานสำหรับปลั๊กอินแรกของคุณ

ขั้นตอนแรกในการสร้างปลั๊กอิน WordPress คือการสร้างโครงสร้างไฟล์พื้นฐาน แม้ว่าปลั๊กอินจะมีไฟล์เดียวได้ แต่โครงสร้างที่ดีจะช่วยในการบำรุงรักษาในระยะยาว

แนะนำให้อ่าน คู่มือเริ่มต้นการพัฒนาปลั๊กอิน WordPress: สร้างส่วนขยายฟังก์ชันที่กำหนดเองชิ้นแรกของคุณตั้งแต่เริ่มต้น。

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

ทุกปลั๊กอินต้องมีไฟล์หลัก ซึ่งประกอบด้วยข้อมูลเมตาของปลั๊กอิน ก่อนอื่นเราจะสร้างในสภาพแวดล้อมการพัฒนาท้องถิ่นของเรา/wp-content/plugins/สร้างโฟลเดอร์ใหม่ในไดเรกทอรี เช่นmy-first-pluginจากนั้น ในโฟลเดอร์นั้น ให้สร้างไฟล์ PHP หลัก ซึ่งมักจะมีชื่อเดียวกับโฟลเดอร์:my-first-plugin.php。

UltaHost WordPress โฮสติ้ง

การรับประกันคืนเงินภายใน 30 วัน, แบนด์วิธและฐานข้อมูลไม่จำกัด, การป้องกัน DDoS ฟรี, ซื้อ 3 ปีลดราคา 50%

เข้าถึงหน้าเว็บ

ที่ส่วนหัวของไฟล์หลักนี้ เราจำเป็นต้องเพิ่มบล็อกคอมเมนต์ข้อมูลปลั๊กอินมาตรฐาน บล็อกคอมเมนต์นี้เป็นสิ่งสำคัญที่ WordPress ใช้ในการระบุปลั๊กอินและแสดงผลในส่วนหลังของระบบจัดการ

<?php
/**
 * Plugin Name:       我的第一个自定义插件
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       这是一个学习WordPress插件开发的入门示例，用于在文章末尾添加自定义版权信息。
 * Version:           1.0.0
 * Author:            你的名字
 * Author URI:        https://example.com
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 */

กำหนดคลาสหลักของปลั๊กอิน

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

if ( ! class_exists( 'My_First_Plugin' ) ) {

class My_First_Plugin {

/**
         * 构造方法，用于初始化插件
         */
        public function __construct() {
            // 初始化钩子
            $this->init_hooks();
        }

/**
         * 初始化WordPress动作和过滤器钩子
         */
        private function init_hooks() {
            // 钩子将在这里添加
        }
    }

// 实例化插件类
    new My_First_Plugin();
}

if ( ! class_exists( 'My_First_Plugin' ) )เป็นการตรวจสอบความปลอดภัยเพื่อป้องกันไม่ให้คลาสถูกกำหนดซ้ำ__construct()เป็นคอนสตรัคเตอร์ของคลาสซึ่งจะถูกเรียกอัตโนมัติเมื่อคลาสถูกสร้างอินสแตนซ์ เราได้เรียกใช้เมธอดส่วนตัวภายในนั้นinit_hooks()เพื่อจัดการการลงทะเบียนของฮุคทั้งหมดอย่างเป็นศูนย์กลาง

ใช้ระบบฮุคเพื่อเพิ่มฟังก์ชันการทำงาน

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

แนะนำให้อ่าน การพัฒนา WordPress Plugin จากเริ่มต้นจนเชี่ยวชาญ: สอนคุณสร้างฟังก์ชันที่กำหนดเองแบบทีละขั้นตอน。

เพิ่มลิขสิทธิ์ที่กำหนดเองให้กับเนื้อหาบทความ

ความต้องการทั่วไปหนึ่งคือการเพิ่มข้อมูลลิขสิทธิ์อัตโนมัติที่ท้ายบทความทุกบทความ ซึ่งสามารถทำได้ผ่านthe_contentตัวกรองเพื่อดำเนินการ เราเพิ่มตัวกรองนี้ในinit_hooks()วิธีการ เพิ่มตัวกรองนี้

ขั้นแรก อัปเดตinit_hooks()วิธีการ:

private function init_hooks() {
    // 使用过滤器在文章内容后追加版权信息
    add_filter( 'the_content', array( $this, 'append_copyright_notice' ) );
}

ที่นี่add_filter()ฟังก์ชันจะติดตั้งappend_copyright_noticeเมธอดจากคลาสของเราthe_contentไปยังตัวกรอง ตอนนี้เราจำเป็นต้องกำหนดเมธอดคอลแบ็คนี้

hosting.com 共享主机

高性能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候24小时、全天候的专家内部支持，高级安全措施，包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 73%

เข้าถึงหน้าเว็บ

/**
 * 在文章内容后追加版权信息的回调函数
 *
 * @param string $content 原始文章内容。
 * @return string 追加了版权信息后的内容。
 */
public function append_copyright_notice( $content ) {
    // 仅在主查询的单篇文章页面显示
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $copyright_text = sprintf(
            '<p><small>© ข้อความประกาศลิขสิทธิ์: บทความนี้เผยแพร่ครั้งแรกที่ %s โปรดระบุแหล่งที่มาด้วย</small></p>',
            get_bloginfo( 'name' )
        );
        $content .= $copyright_text;
    }
    return $content;
}

เมธอดนี้รับข้อมูลต้นฉบับ$contentผ่านการตรวจสอบเงื่อนไขis_single()、in_the_loop()和is_main_query()เรามั่นใจว่าข้อมูลลิขสิทธิ์จะปรากฏเฉพาะในเนื้อหาหลักของหน้ารายการบทความด้านหน้าเท่านั้น และจะไม่ส่งผลต่อหน้า, บทสรุป หรือแผงควบคุมหลังบ้าน จากนั้นเราสร้างข้อความลิขสิทธิ์ และใช้ตัวดำเนินการเชื่อมต่อสตริง.=เพื่อเพิ่มเข้าไปหลังเนื้อหาดั้งเดิม สุดท้ายส่งคืนเนื้อหาที่แก้ไขแล้ว

สร้างหน้ารายการเมนูการจัดการ

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

在init_hooks()ต่อไปให้เพิ่มแอ็กชันใน

แนะนำให้อ่าน คู่มือเริ่มต้นการพัฒนา WordPress Plugin: สร้างโมดูลฟังก์ชันแรกของคุณจากศูนย์ถึงหนึ่ง。

private function init_hooks() {
    add_filter( 'the_content', array( $this, 'append_copyright_notice' ) );
    // 添加管理菜单
    add_action( 'admin_menu', array( $this, 'add_admin_menu_page' ) );
}

เมื่อ WordPress สร้างเมนูผู้ดูแลระบบ มันจะทริกเกอร์admin_menuแอ็กชัน เราจะกำหนดต่อไปadd_admin_menu_page()วิธีการ

/**
 * 向WordPress管理后台添加一个自定义菜单页面
 */
public function add_admin_menu_page() {
    add_menu_page(
        '我的第一个插件',          // 页面标题
        '我的插件',               // 菜单标题
        'manage_options',         // 权限要求
        'my-first-plugin-page',   // 菜单别名
        array( $this, 'render_admin_page' ), // 回调函数，用于输出页面内容
        'dashicons-admin-plugins', // 图标
        80                         // 菜单位置
    );
}

add_menu_page()ฟังก์ชันนี้เป็น API หลักของ WordPress สำหรับการลงทะเบียนเมนูระดับบนสุดmanage_optionsเป็นตัวระบุสิทธิ์ ซึ่งหมายความว่ามีเพียงผู้ดูแลระบบเท่านั้นที่สามารถเห็นเมนูนี้ได้ เราได้ระบุrender_admin_pageวิธีการสำหรับการแสดงผลเนื้อหาของหน้า

โฮสติ้งแบบแชร์ของ InterServer

共享主机每月 $2.50 USD , 首月 $0.1 USD 优惠码 tryinterserver, 461个云应用脚本，一键安装。

เข้าถึงหน้าเว็บ

/**
 * 渲染管理页面内容的回调函数
 */
public function render_admin_page() {
    ?>
    <div class="wrap">
        <h1>หน้าจัดการปลั๊กอินแรกของฉัน</h1>
        <p>ยินดีด้วย! คุณได้สร้างปลั๊กอิน WordPress ที่มีหน้าจัดการสำเร็จแล้ว</p>
        <p>นี่คือหน้าแบบง่ายๆ ที่คุณสามารถเพิ่มฟอร์ม ตัวเลือกการตั้งค่า และอื่นๆ ได้ที่นี่</p>
        <p>ชื่อไซต์ปัจจุบันคือ:<strong><?php echo esc_html( get_bloginfo( 'name' ) ); ?></strong></p>
    </div>
    &lt;?php
}

เพื่อการปฏิบัติตามมาตรฐานสากลและความปลอดภัยที่ดีที่สุด

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

ทำให้ปลั๊กอินรองรับหลายภาษา

ความเป็นสากล (i18n) ช่วยให้ข้อความในปลั๊กอินสามารถแปลได้ เราได้ประกาศไว้ในความคิดเห็นส่วนหัวของปลั๊กอินแล้วText Domain: my-first-pluginตอนนี้จำเป็นต้องใช้__()或_e()ฟังก์ชันเพื่อห่อหุ้มสตริงทั้งหมดที่ส่งออก

ก่อนอื่นใน__construct()或init_hooks()เพิ่มการดำเนินการเพื่อโหลดไฟล์การแปล:

add_action( 'plugins_loaded', array( $this, 'load_textdomain' ) );

กำหนดวิธีการโหลดการแปล:

public function load_textdomain() {
    load_plugin_textdomain(
        'my-first-plugin',
        false,
        dirname( plugin_basename( __FILE__ ) ) . '/languages/'
    );
}

จากนั้นแก้ไขตำแหน่งที่ส่งออกข้อความก่อนหน้านี้ ตัวอย่างเช่น อัปเดตappend_copyright_noticeข้อความในวิธีการ:

$copyright_text = sprintf(
    '<p><small>© %s：%s，%s。</small></p>',
    __( '版权声明', 'my-first-plugin' ),
    sprintf( __( '本文首发于%s', 'my-first-plugin' ), get_bloginfo( 'name' ) ),
    __( '转载请注明出处', 'my-first-plugin' )
);

ในทำนองเดียวกัน อัปเดตสตริงในหน้าการจัดการ:

<h1><?php esc_html_e( '我的第一个插件管理页面', 'my-first-plugin' ); ?></h1>
<p><?php esc_html_e( '恭喜！你已经成功创建了一个带有管理页面的WordPress插件。', 'my-first-plugin' ); ?></p>

esc_html_e()ฟังก์ชันไม่เพียงแต่แสดงข้อความที่แปลแล้ว แต่ยังทำการหนี HTML เพื่อเพิ่มความปลอดภัยอีกด้วย

การหนีผลลัพธ์และการตรวจสอบอินพุต

ในการพัฒนาโปรแกรมเสริม ข้อมูลทั้งหมดที่ส่งออกไปยังส่วนหน้าหรือเบราว์เซอร์ต้องได้รับการหน่วงตัวอักษร และข้อมูลทั้งหมดที่มาจากผู้ใช้หรือแหล่งภายนอกต้องได้รับการตรวจสอบและทำความสะอาด

เมื่อแสดงผลชื่อเว็บไซต์ เราได้ใช้esc_html()。这是防止跨站脚本（XSS）攻击的关键步骤。如果一个函数名称以“_e”结尾（意为“echo”），它通常会直接输出转义后的内容。而“__”开头的函数则返回翻译后的字符串，需要你手动进行转义输出。

หากหน้าแอดมินของเราต้องการจัดการการส่งแบบฟอร์มในอนาคต เราต้องใช้wp_verify_nonce()เพื่อตรวจสอบคำขอ และใช้sanitize_text_field()、intval()ใช้ฟังก์ชันเช่น `sanitize_text_field()` เพื่อทำความสะอาดข้อมูลที่ผู้ใช้ป้อน ก่อนที่จะบันทึกลงในฐานข้อมูลหรือดำเนินการอื่น ๆ นี่เป็นขั้นตอนที่ขาดไม่ได้ในการปกป้องความปลอดภัยของเว็บไซต์

สรุป

ผ่านคู่มือนี้ เราเริ่มต้นจากการสร้างโครงสร้างไฟล์พื้นฐานของปลั๊กอิน แล้วค่อย ๆ ดำเนินการฟังก์ชันหลักของปลั๊กอิน เราได้เรียนรู้วิธีการจัดระเบียบโค้ดโดยใช้แนวทางเชิงวัตถุ วิธีการใช้ WordPress Hooks (Actions และ Filters) ที่ทรงพลังเพื่อเข้าไปมีส่วนร่วมในกระบวนการทำงานของระบบ เพิ่มฟังก์ชันที่กำหนดเองให้กับเนื้อหาโพสต์ และสร้างหน้าแอดมินในส่วนหลังบ้าน พร้อมกันนี้ เรายังได้พูดคุยถึงสองหัวข้อสำคัญในการพัฒนาปลั๊กอินระดับมืออาชีพ นั่นคือ การทำให้เป็นสากล (i18n) และการแสดงผล/รับข้อมูลที่ปลอดภัย

นี่เป็นเพียงจุดเริ่มต้นเท่านั้น จากกรอบงานนี้ คุณสามารถสำรวจความเป็นไปได้อื่น ๆ ต่อไปได้: เพิ่มตัวเลือกการตั้งค่า สร้างประเภทโพสต์และหมวดหมู่ที่กำหนดเอง (Custom Post Types และ Taxonomies) เขียนวิดเจ็ต (Widget) นำการโต้ตอบ AJAX มาใช้ จัดการชอร์ตโค้ด (Shortcode) เป็นต้น โปรดจำไว้ว่า การอ่านคู่มือปลั๊กอินอย่างเป็นทางการของ WordPress และโค้ดหลักเป็นวิธีที่ดีที่สุดในการเรียนรู้เชิงลึก ตอนนี้ คุณได้ทักษะพื้นฐานในการสร้างปลั๊กอิน WordPress จากศูนย์ถึงหนึ่งแล้ว และสามารถเริ่มต้นเปลี่ยนความคิดของคุณให้เป็นจริงได้แล้ว

คำถามที่พบบ่อย (FAQ)

จำเป็นต้องใช้คลาสในการพัฒนาปลั๊กอินหรือไม่?

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

จะดีบั๊กปลั๊กอินของฉันได้อย่างไร?

วิธีการดีบักที่ใช้บ่อยในการพัฒนา WordPress คือการเปิดใช้งาน WP_DEBUG ในไฟล์wp-config.phpในรากของเว็บไซต์ของคุณ ให้ค้นหาและแก้ไขบรรทัดต่อไปนี้:define( 'WP_DEBUG', true );คุณยังสามารถตั้งค่าdefine( 'WP_DEBUG_LOG', true );ด้วยวิธีนี้ ข้อมูลข้อผิดพลาดจะถูกบันทึกลงใน/wp-content/debug.logในไฟล์ โดยจะไม่แสดงบนหน้าเว็บ นอกจากนี้ การใช้คอนโซล (Console) และแท็บเครือข่าย (Network) ในเครื่องมือนักพัฒนาของเบราว์เซอร์ รวมถึงบันทึกข้อผิดพลาดของ PHP ก็เป็นวิธีการที่มีประสิทธิภาพในการระบุปัญหา

ฉันสามารถใช้ jQuery โดยตรงในปลั๊กอินได้หรือไม่?

ใช่ สามารถทำได้ WordPress core มีไลบรารี jQuery ในตัวอยู่แล้ว เพื่อแนะนำไฟล์ JavaScript ที่กำหนดเองหรือการพึ่งพาของคุณอย่างถูกต้องและปลอดภัย คุณควรใช้wp_enqueue_script()ฟังก์ชัน และประกาศในอาร์เรย์การพึ่งพาarray( 'jquery' )วิธีนี้ WordPress จะทำให้แน่ใจว่า jQuery โหลดก่อนสคริปต์ของคุณ อย่าใช้ลิงก์ CDN jQuery จากระยะไกลในปลั๊กอินโดยตรง เพราะอาจทำให้เกิดความขัดแย้งหรือปัญหาด้านความปลอดภัย

ต้องตรวจสอบอะไรบ้างก่อนเผยแพร่ปลั๊กอิน?

ก่อนเผยแพร่ปลั๊กอิน แนะนำให้ตรวจสอบดังนี้: ตรวจสอบว่าโค้ดเป็นไปตามมาตรฐานการเข้ารหัสของ WordPress; เตรียมความพร้อมสำหรับการแปลระหว่างประเทศ โดยสตริงทั้งหมดที่ผู้ใช้เห็นต้องถูกห่อหุ้มด้วยฟังก์ชันการแปล; ทดสอบความเข้ากันได้ในหลายเวอร์ชันของ WordPress และ PHP; ตรวจสอบว่าผลลัพธ์ทั้งหมดถูกหนีอย่างถูกต้อง และอินพุตทั้งหมดได้รับการตรวจสอบและทำความสะอาดอย่างเหมาะสม; จัดเตรียมวิธีการถอนการติดตั้งที่ชัดเจน ซึ่งสามารถลบตัวเลือกและตารางฐานข้อมูลทั้งหมดที่สร้างโดยปลั๊กอิน (หากจำเป็น); เขียนไฟล์ README.md ให้ละเอียดreadme.txtขั้นตอนเหล่านี้จะช่วยเพิ่มความเชี่ยวชาญและความน่าเชื่อถือของปลั๊กอิน