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

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

การเตรียมการและการตั้งค่าสภาพแวดล้อม

ก่อนที่จะเขียนโค้ดบรรทัดแรก คุณต้องมีสภาพแวดล้อมการพัฒนาที่เหมาะสม สิ่งนี้ไม่เพียงแต่เพิ่มประสิทธิภาพ แต่ยังหลีกเลี่ยงความเสี่ยงที่อาจเกิดขึ้นจากการดีบักบนเว็บไซต์จริงอีกด้วย

สร้างสภาพแวดล้อมการพัฒนาท้องถิ่น

แนะนำให้ใช้ชุดซอฟต์แวร์เซิร์ฟเวอร์ท้องถิ่น เช่น XAMPP, MAMP หรือ Laragon ซึ่งสามารถติดตั้ง Apache, MySQL และ PHP ได้ในคลิกเดียว เพื่อจำลองสภาพแวดล้อมออนไลน์ได้อย่างสมบูรณ์ ตรวจสอบให้แน่ใจว่าเวอร์ชัน PHP ของคุณเข้ากันได้กับเวอร์ชัน WordPress ที่ต้องการ โดยปกติเว็บไซต์ WordPress.org จะให้ข้อกำหนดเวอร์ชันล่าสุด

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

ติดตั้ง WordPress และโปรแกรมแก้ไขโค้ด

ติดตั้งเวิร์ดเพรสใหม่ในเซิร์ฟเวอร์ท้องถิ่น สำหรับการพัฒนาและทดสอบปลั๊กอิน พร้อมทั้งเลือกโปรแกรมแก้ไขโค้ดที่มีประสิทธิภาพ เช่น Visual Studio Code หรือ PhpStorm ตัวแก้ไขเหล่านี้รองรับการเน้นไวยากรณ์ PHP การแนะนำโค้ด และการดีบั๊กได้ดี ช่วยยกระดับประสบการณ์การเขียนโค้ดได้อย่างมาก

UltaHost WordPress โฮสติ้ง

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

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

สร้างไฟล์ปลั๊กอินแรกของคุณ

ปลั๊กอิน WordPress ที่พื้นฐานที่สุดสามารถประกอบด้วยไฟล์เดียว เราจะเริ่มจากปลั๊กอิน “Hello World” ง่ายๆ เพื่อทำความเข้าใจโครงสร้างของปลั๊กอิน

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

ก่อนอื่น ใน WordPress wp-content/plugins ไดเรกทอรี ให้สร้างโฟลเดอร์ใหม่ เช่น my-first-plugin. ภายในโฟลเดอร์นั้น ให้สร้างไฟล์หลักของปลั๊กอิน ซึ่งมักตั้งชื่อตามชื่อปลั๊กอิน เช่น my-first-plugin.php。

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

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

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

แนะนำให้อ่าน สอนทีละขั้นตอนตั้งแต่เริ่มต้นเพื่อเชี่ยวชาญการพัฒนา WordPress Plugin。

เพิ่มฟังก์ชันพื้นฐานให้กับปลั๊กอิน

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

ใต้คำอธิบายข้อมูลปลั๊กอิน ให้เพิ่มโค้ดต่อไปนี้:

// 在网站页脚输出自定义文本
function myfp_add_footer_text() {
    echo '<p style="text-align: center;">ขอบคุณที่ใช้ปลั๊กอินแรกของฉัน!</p>';
}
add_action( 'wp_footer', 'myfp_add_footer_text' );

บันทึกไฟล์และรีเฟรชส่วนหน้าของเว็บไซต์ คุณจะเห็นข้อความที่จัดกึ่งกลางที่ด้านล่างของหน้า ตัวอย่างนี้แสดงวิธีใช้ add_action() ฟังก์ชันเพื่อ “เชื่อมต่อ” ฟังก์ชันที่คุณกำหนดเองเข้ากับจุดดำเนินการหลักของ WordPress

hosting.com 共享主机

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

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

นำไปใช้กับฟังก์ชันการจัดการที่มีประโยชน์

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

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

เราต้องเพิ่มหน้าเมนูย่อยภายใต้เมนู “การตั้งค่า” ในแผงควบคุม ซึ่งจะต้องใช้ add_options_page() ฟังก์ชัน

ขั้นแรก สร้างฟังก์ชันเพื่อแสดงผลเนื้อหา HTML ของหน้าการตั้งค่า และติดตั้งลงใน admin_menu บนฮุค

แนะนำให้อ่าน เริ่มต้นจากศูนย์: ทำไมต้องเลือกพัฒนา WordPress Plugin。

// 添加插件设置页面到后台菜单
function myfp_add_admin_menu() {
    add_options_page(
        '我的插件设置',          // 页面标题
        '我的插件',              // 菜单标题
        'manage_options',       // 权限（管理员）
        'my-first-plugin',      // 菜单slug
        'myfp_settings_page'    // 用于输出页面内容的回调函数
    );
}
add_action( 'admin_menu', 'myfp_add_admin_menu' );

// 设置页面的HTML内容
function myfp_settings_page() {
    ?>
    <div class="wrap">
        <h1>การตั้งค่าปลั๊กอินแรกของฉัน</h1>
        <form method="post" action="/th/options.php/" data-trp-original-action="options.php">
            <?php
            settings_fields( 'myfp_settings_group' ); // 设置字段组
            do_settings_sections( 'my-first-plugin' ); // 设置区域
            submit_button(); // 提交按钮
            ?>
        <input type="hidden" name="trp-form-language" value="th"/></form>
    </div>
    &lt;?php
}

ลงทะเบียนการตั้งค่า ฟิลด์ และการจัดเก็บข้อมูล

แค่มีหน้ายังไม่พอ เราต้องใช้ WordPress Settings API เพื่อลงทะเบียน ตรวจสอบ และบันทึกตัวเลือกอย่างปลอดภัย ซึ่งเกี่ยวข้องกับฟังก์ชันหลักสามอย่าง:register_setting(), add_settings_section() 和 add_settings_field()。

// 初始化插件设置
function myfp_settings_init() {
    // 注册一个新的设置项到数据库的 `wp_options` 表
    register_setting( 'myfp_settings_group', 'myfp_footer_text' );

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

// 在刚添加的区域里创建一个字段
    add_settings_field(
        'myfp_field_footer',
        '显示的文本',
        'myfp_field_footer_cb', // 用于输出字段HTML的回调函数
        'my-first-plugin',
        'myfp_section'
    );
}
add_action( 'admin_init', 'myfp_settings_init' );

// 渲染文本输入字段的回调函数
function myfp_field_footer_cb() {
    $text = get_option( 'myfp_footer_text', '感谢使用我的第一个插件！' ); // 获取已保存的值
    echo '<input type="text" name="myfp_footer_text" value="' . esc_attr( $text ) . '" class="regular-text">';
    echo '<p class="description">ข้อความที่ป้อนที่นี่จะปรากฏในส่วนท้ายของเว็บไซต์</p>';
}

อัปเดตฟังก์ชันเพื่อใช้การตั้งค่าที่บันทึกไว้

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

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

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

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

function myfp_add_footer_text() {
    $footer_text = get_option( 'myfp_footer_text', '感谢使用我的第一个插件！' );
    if ( ! empty( $footer_text ) ) {
        echo '<p style="text-align: center;">' . esc_html( $footer_text ) . '</p>';
    }
}
add_action( 'wp_footer', 'myfp_add_footer_text' );

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

ความปลอดภัยของปลั๊กอิน การปรับปรุง และการเตรียมการเผยแพร่

ปลั๊กอินที่เหมาะสมต้องคำนึงถึงแนวปฏิบัติที่ดีที่สุดด้านความปลอดภัย ประสิทธิภาพ และความเป็นสากล

การตรวจสอบและแปลงข้อมูล

ไม่ควรเชื่อถือข้อมูลที่ผู้ใช้ป้อนหรือข้อมูลที่ส่งออกจากฐานข้อมูลโดยตรง ในตัวอย่างข้างต้น เราใช้ esc_attr() การหนีคุณสมบัติในช่องป้อนข้อมูล ใช้ esc_html() การหนีข้อมูลที่ส่งออกที่ส่วนหน้า สำหรับสถานการณ์ที่ซับซ้อนมากขึ้น ควรใช้ sanitize_text_field() เพื่อทำความสะอาดอินพุต ใช้ wp_kses_post() เพื่ออนุญาตให้แสดง HTML ที่ปลอดภัย

เพิ่มการสนับสนุนสากล

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

อัปเดตความคิดเห็นส่วนหัวของปลั๊กอินเพื่อให้แน่ใจว่า Text Domain สอดคล้องกับการเรียกใช้ในภายหลัง จากนั้นแก้ไขสตริงในโค้ด เช่น:

// 在设置字段描述中使用国际化函数
echo '<p class="description">' . esc_html__( '这里输入的文字将显示在网站页脚。', 'my-first-plugin' ) . '</p>';

// 在输出函数中使用
$default_text = __( '感谢使用我的第一个插件！', 'my-first-plugin' );
$footer_text = get_option( 'myfp_footer_text', $default_text );

หลังจากนั้น คุณสามารถใช้เครื่องมือเช่น Poedit เพื่อสร้าง .pot ไฟล์เทมเพลตสำหรับผู้แปลในการสร้าง .po 和 .mo ไฟล์แปล

ทำการทดสอบขั้นสุดท้ายและแพ็คเกจ

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

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

สรุป

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

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

การพัฒนา WordPress ปลั๊กอินจำเป็นต้องเชี่ยวชาญ PHP หรือไม่?

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

ชื่อไฟล์หลักของปลั๊กอินสามารถตั้งชื่อได้ตามต้องการหรือไม่?

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

ทำไมการตั้งค่าปลั๊กอินของฉันถึงไม่ทำงานหลังจากบันทึก?

กรุณาตรวจสอบตามขั้นตอนต่อไปนี้: ก่อนอื่น ตรวจสอบให้แน่ใจว่าฟิลด์ตั้งค่าของคุณได้ผ่าน register_setting() ลงทะเบียนอย่างถูกต้อง และ settings_fields() ชื่อกลุ่มการตั้งค่าในการเรียกใช้ฟังก์ชันตรงกัน ต่อมา ตรวจสอบว่า action คุณสมบัติของฟอร์มชี้ไปที่ options.phpหรือไม่ สุดท้าย เมื่อแสดงผลที่ส่วนหน้า ตรวจสอบให้แน่ใจว่าคุณใช้ get_option() ฟังก์ชัน และชื่อตัวเลือกที่ส่งเข้ามาต้องตรงกับที่ลงทะเบียนไว้ทุกประการ

จะให้ปลั๊กอินของฉันล้างข้อมูลเมื่อหยุดการทำงานได้อย่างไร

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

สามารถส่งปลั๊กอินฟรีไปยังไดเรกทอรี WordPress อย่างเป็นทางการได้หรือไม่?

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