คู่มือการพัฒนา WordPress Plugin ฉบับสมบูรณ์: ตั้งแต่พื้นฐานสู่การปฏิบัติจริงอย่างละเอียด

ทำไมต้องเรียนรู้การพัฒนา WordPress Plugin

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

WordPress Plugin มาตรฐานคือไฟล์ PHP แยกเดี่ยวหรือไดเรกทอรีที่ประกอบด้วยหลายไฟล์ ซึ่งทำงานร่วมกับ WordPress Core ผ่านชุดอินเทอร์เฟซที่กำหนดไว้ล่วงหน้า กระบวนการพัฒนาส่วนใหญ่เกี่ยวข้องกับการทำความเข้าใจระบบHooks(Hooks) ของ WordPress การปฏิบัติตามมาตรฐานการเขียนโค้ด และแนวทางปฏิบัติด้านความปลอดภัย

สร้าง Plugin แรกของคุณ

ก่อนเริ่มเขียนโค้ด คุณต้องมีสภาพแวดล้อมการพัฒนาในเครื่อง เราแนะนำให้ใช้ XAMPP, MAMP หรือ Local by Flywheel เมื่อสภาพแวดล้อมพร้อมแล้ว คุณสามารถสร้างปลั๊กอินแรกของคุณในwp-content/pluginsไดเรกทอรี

แนะนำให้อ่าน เริ่มต้นจากศูนย์สู่การเชี่ยวชาญการพัฒนา WordPress Plugin: คู่มือฉบับสมบูรณ์และการฝึกปฏิบัติจริง。

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

ทุกปลั๊กอินต้องมีไฟล์ PHP หลักและรวมความคิดเห็นข้อมูลมาตรฐานของปลั๊กอินในส่วนหัวของไฟล์ ไฟล์นี้เป็นจุดเริ่มต้นของปลั๊กอิน และชื่อของมันมักจะตรงกับชื่อไดเรกทอรีของปลั๊กอิน ตัวอย่างเช่น สร้างไดเรกทอรีชื่อmy-first-pluginและสร้างไฟล์ชื่อเดียวกันภายในนั้นmy-first-plugin.phpไฟล์สำหรับภาษาต่างๆ ได้

UltaHost WordPress โฮสติ้ง

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

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

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

<?php
/**
 * Plugin Name:       我的第一个插件
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       这是一个用于学习插件开发的简单示例插件。
 * Version:           1.0.0
 * Author:            你的名字
 * Author URI:        https://example.com
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 */

หลังจากบันทึกไฟล์แล้ว ให้เข้าสู่ระบบในแผงควบคุม WordPress ของคุณ ไปที่หน้า “ปลั๊กอิน” คุณจะเห็นปลั๊กอินใหม่นี้ปรากฏในรายการปลั๊กอินและสามารถเปิดใช้งานได้ ปัจจุบันมันยังไม่มีฟังก์ชันการทำงานใด ๆ

เพิ่มฟังก์ชันแรก

ตอนนี้ ให้เราเพิ่มฟังก์ชันง่าย ๆ ให้กับปลั๊กอินนี้: เพิ่มข้อความที่กำหนดเองโดยอัตโนมัติที่ส่วนท้ายของเนื้อหาบทความ ซึ่งจำเป็นต้องใช้ WordPressthe_contentฟิลเตอร์ฮุค

ในไฟล์หลักของปลั๊กอิน เพิ่มโค้ดต่อไปนี้ด้านล่างข้อมูลความคิดเห็น:

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

// 在文章内容后添加自定义文本
function myfp_add_footer_text($content) {
    // 确保只在主循环的单篇文章中显示
    if (is_single() && in_the_loop() && is_main_query()) {
        $custom_text = '<p><em>ขอบคุณสำหรับการอ่าน! บทความนี้สนับสนุนโดย “ปลั๊กอินแรกของฉัน”</em></p>';
        $content .= $custom_text;
    }
    return $content;
}
// 将函数挂载到‘the_content’过滤器
add_filter('the_content', 'myfp_add_footer_text');

โค้ดนี้กำหนดฟังก์ชันmyfp_add_footer_textซึ่งรับเนื้อหาของโพสต์$contentเป็นพารามิเตอร์ ภายในฟังก์ชัน ใช้การตรวจสอบเงื่อนไขเพื่อให้แน่ใจว่ามีผลเฉพาะในหน้าโพสต์เดี่ยวและอยู่ในลูปหลักของคำค้นหาหลักเท่านั้น จากนั้นเชื่อมต่อกับข้อความ HTML ที่กำหนดเอง ส่วนสุดท้าย ใช้add_filter()ฟังก์ชันนี้จะติดตั้งฟังก์ชันที่กำหนดเองนี้ไปยังthe_contentบนตัวกรอง หลังจากเปิดใช้งานปลั๊กอิน ดูโพสต์ใด ๆ คุณจะเห็นข้อความที่เพิ่มที่ด้านล่างของเนื้อหา

เจาะลึกแกนหลัก: ฮุคและ API

การพัฒนาปลั๊กอิน WordPress อยู่ที่การเข้าใจและใช้ระบบ Hook (ฮุค) และ API ที่หลากหลายอย่างคล่องแคล่ว นี่คือสะพานที่ปลั๊กอินสื่อสารกับแกนกลางอย่างปลอดภัยและเป็นมาตรฐาน

ทำความเข้าใจกับ Action Hooks และ Filter Hooks

ฮุคแบ่งออกเป็นสองประเภทหลัก: Action (แอคชัน) และ Filter (ฟิลเตอร์) ฮุค Action ช่วยให้คุณ “ดำเนินการ” รหัสที่กำหนดเองได้ในจุดเวลาเฉพาะ ตัวอย่างเช่นwp_footerAction จะทำงานก่อนปิดแท็ก body ของหน้า คุณสามารถใช้add_action('wp_footer', 'your_function')เพื่อแทรกรหัสติดตามหรือ HTML ที่กำหนดเอง

hosting.com 共享主机

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

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

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

// 修改摘要长度为20个单词
function myfp_custom_excerpt_length($length) {
    return 20;
}
add_filter('excerpt_length', 'myfp_custom_excerpt_length');

การใช้ WordPress Database API

ปลั๊กอินมักจำเป็นต้องเก็บและอ่านข้อมูล WordPress มีให้wpdbคลาสเพื่อโต้ตอบกับฐานข้อมูลอย่างปลอดภัย สำหรับข้อมูลคู่คีย์-ค่าที่เรียบง่าย ขอแนะนำให้ใช้ API ตัวเลือก (Options)

ตัวอย่างเช่น เพื่อให้ผู้ใช้สามารถกำหนดข้อความส่วนท้ายที่เราเพิ่มก่อนหน้านี้ได้ เราสามารถสร้างตัวเลือก

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

// 1. 创建可配置的页脚文本
function myfp_add_footer_text_v2($content) {
    if (is_single() && in_the_loop() && is_main_query()) {
        // 从数据库获取选项值，如果不存在则使用默认值
        $footer_text = get_option('myfp_footer_text', '感谢阅读！本文由“我的第一个插件”提供支持。');
        $custom_text = '<p><em>' . esc_html($footer_text) . '</em></p>';
        $content .= $custom_text;
    }
    return $content;
}
add_filter('the_content', 'myfp_add_footer_text_v2');

ตอนนี้ เนื้อหาข้อความสามารถอ่านได้จากฐานข้อมูลผ่านฟังก์ชันget_option()ต่อไป เราต้องการหน้าจัดการเพื่อให้ผู้ใช้สามารถแก้ไขค่านี้ได้

สร้างหน้าเว็บจัดการปลั๊กอิน

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

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

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

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

เพิ่มเมนูการจัดการและหน้าย่อย

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

ก่อนอื่น ใช้add_action()เชื่อมโยงฟังก์ชันไปยังadmin_menuฮุก, ภายในฟังก์ชันนี้ให้เพิ่มรายการเมนู

// 添加管理菜单
function myfp_add_admin_menu() {
    add_options_page(
        '我的第一个插件设置', // 页面标题
        '我的插件设置',       // 菜单标题
        'manage_options',     // 所需权限
        'my-first-plugin',    // 菜单slug
        'myfp_options_page_html' // 用于渲染页面的回调函数
    );
}
add_action('admin_menu', 'myfp_add_admin_menu');

add_options_page()ฟังก์ชันจะสร้างหน้าย่อยภายใต้เมนู “การตั้งค่า” เมื่อผู้ใช้คลิกที่เมนูนี้ WordPress จะเรียกใช้ฟังก์ชัน callback ที่เรากำหนดmyfp_options_page_htmlเพื่อแสดงเนื้อหาของหน้า

สร้างฟอร์มหน้าการตั้งค่า

ต่อไปนี้ กำหนดฟังก์ชัน callback เพื่อเรนเดอร์ฟอร์มตั้งค่าอย่างง่าย ฟอร์มนี้จะส่งไปยังoptions.phpซึ่งเป็นวิธีมาตรฐานของ WordPress ในการจัดการการตั้งค่า

// 渲染设置页面
function myfp_options_page_html() {
    // 检查用户权限
    if (!current_user_can('manage_options')) {
        return;
    }
    ?>
    <div class="wrap">
        <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
        <form action="/th/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            // 输出必要的安全字段
            settings_fields('myfp_settings');
            // 输出设置章节和字段
            do_settings_sections('my-first-plugin');
            // 提交按钮
            submit_button('保存设置');
            ?>
        <input type="hidden" name="trp-form-language" value="th"/></form>
    </div>
    &lt;?php
}

ลงทะเบียนการตั้งค่า ส่วน และฟิลด์

แค่ฟอร์มอย่างเดียวไม่พอ เราจำเป็นต้องใช้register_setting(), add_settings_section()和add_settings_field()ใช้ฟังก์ชันเช่น `add_settings_field()` เพื่อบอก WordPress ว่ามีการตั้งค่าอะไรบ้าง

// 初始化插件设置
function myfp_settings_init() {
    // 注册一个设置项‘myfp_settings’，它包含一个字段‘myfp_footer_text’
    register_setting('myfp_settings', 'myfp_footer_text');

// 在页面‘my-first-plugin’上添加一个设置章节
    add_settings_section(
        'myfp_section',
        '页脚文本设置',
        null, // 章节描述回调函数，这里不需要
        'my-first-plugin'
    );

// 在上述章节中添加一个字段
    add_settings_field(
        'myfp_field_footer_text',
        '自定义页脚文本',
        'myfp_field_footer_text_html', // 渲染字段HTML的回调函数
        'my-first-plugin',
        'myfp_section',
        ['label_for' => 'myfp_footer_text']
    );
}
add_action('admin_init', 'myfp_settings_init');

// 渲染文本输入字段
function myfp_field_footer_text_html() {
    // 获取数据库中保存的值
    $value = get_option('myfp_footer_text');
    ?>
    <input type="text" id="myfp_footer_text" name="myfp_footer_text" value="<?php echo esc_attr($value); ?>" class="regular-text">
    <p class="description">ข้อความนี้จะปรากฏที่ท้ายบทความทุกบทความ</p>
    &lt;?php
}

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

สรุป

คู่มือนี้ได้พาคุณเดินทางผ่านเส้นทางหลักของการพัฒนา WordPress plugin: เริ่มจากการสร้างไฟล์ปลั๊กอินพื้นฐานที่มีส่วนหัวมาตรฐาน ไปจนถึงการใช้ฮุกแอ็กชันและฟิลเตอร์เพื่อเพิ่มฟังก์ชันการทำงานให้ WordPress จากนั้นใช้ Options API ในการจัดเก็บข้อมูล และสุดท้ายสร้างอินเทอร์เฟซการจัดการหลังบ้านที่สมบูรณ์ กระบวนการทั้งหมดสะท้อนถึงปรัชญาการพัฒนาแบบโมดูลาร์และขับเคลื่อนด้วยฮุกของ WordPress เมื่อเข้าใจพื้นฐานเหล่านี้แล้ว คุณสามารถสำรวจหัวข้อขั้นสูงเพิ่มเติมได้ เช่น ประเภทบทความที่กำหนดเอง (custom post types), shortcodes, การผสานรวม REST API, การจัดการ AJAX และการทำให้ปลั๊กอินเป็นสากล (internationalization) จำไว้ว่า โครงสร้างโค้ดที่ดี การประมวลผลข้อมูลที่ปลอดภัย และอินเทอร์เฟซผู้ใช้ที่ชัดเจนคือกุญแจสำคัญในการสร้างปลั๊กอินคุณภาพสูง

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

การพัฒนา plugin ต้องมีความรู้พื้นฐานใดบ้างก่อน

คุณจำเป็นต้องมีความรู้พื้นฐานเกี่ยวกับภาษาโปรแกรม PHP รวมถึงแนวคิดต่าง ๆ เช่น ตัวแปร ฟังก์ชัน การตัดสินใจแบบเงื่อนไข และลูป นอกจากนี้ควรมีความเข้าใจพื้นฐานเกี่ยวกับ HTML และ CSS เพื่อจัดการกับเอาต์พุตและสไตล์ของส่วนหน้า การคุ้นเคยกับการทำงานพื้นฐานของ MySQL จะช่วยในการทำความเข้าใจการจัดเก็บข้อมูล แต่ API ของ WordPress ได้ห่อหุ้มการโต้ตอบกับฐานข้อมูลส่วนใหญ่ไว้แล้ว

วิธีดีบั๊กปลั๊กอินที่กำลังพัฒนา

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

ปลั๊กอินจะรองรับหลายภาษาได้อย่างไร

WordPress ใช้กระบวนการ “นานาชาติ (i18n)” และ “การปรับให้เป็นท้องถิ่น (l10n)” เพื่อรองรับหลายภาษา ในโค้ดปลั๊กอิน ข้อความสตริงทั้งหมดที่ต้องการแปลควรถูกห่อหุ้มด้วยฟังก์ชันแปลเช่น__()或_e()จากนั้น ใช้เครื่องมือเช่น Poedit เพื่อแยกสตริงเหล่านี้จากซอร์สโค้ด สร้าง.potไฟล์เทมเพลต และใช้มันเพื่อสร้างไฟล์แปลสำหรับภาษาต่าง ๆ (เช่นzh_CN.po) ไฟล์แปล หลังจากนั้น ในส่วนหัวของไฟล์หลักปลั๊กอิน ในช่อง “Text Domain” ให้ประกาศโดเมนข้อความของคุณ และใช้เมื่อเริ่มต้นทำงานload_plugin_textdomain()ฟังก์ชันโหลดการแปล

ปลั๊กอินที่พัฒนาสำเร็จแล้วจะเผยแพร่ในไดเรกทอรีทางการได้อย่างไร

ก่อนอื่น คุณต้องแน่ใจว่าปลั๊กอินปฏิบัติตามมาตรฐานการเข้ารหัสของ WordPress นโยบายความเป็นส่วนตัว และข้อกำหนดความเข้ากันได้ของ GPL อย่างสมบูรณ์ จากนั้น ขอที่เก็บ SVN บน WordPress.org ส่งโค้ดปลั๊กอินของคุณ (รวมถึงไฟล์หลัก ไฟล์ทรัพยากร และไฟล์แปล) ไปยังที่เก็บ SVN นี้/trunkไดเรกทอรี ปล่อยเวอร์ชันใหม่ผ่านแท็ก SVN (tag) ไดเรกทอรีอย่างเป็นทางการจะซิงค์โค้ดจากที่เก็บ SVN ของคุณโดยอัตโนมัติ และแสดงผลหลังจากตรวจสอบโดยมนุษย์