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

การเตรียมสภาพแวดล้อมการพัฒนา WordPress Plugin

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

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

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

หลังจากตั้งค่าด้วยวิธีนี้ ข้อมูลข้อผิดพลาดและคำเตือนทั้งหมดจะถูกบันทึกลงใน /wp-content/debug.log ในไฟล์ โดยจะไม่แสดงผลโดยตรงบนหน้ากระทบผู้ใช้ส่วนหน้า

แนะนำให้อ่าน WordPress Plugin Development Beginner's Guide: Creating Your First Custom Plugin from Scratch。

สุดท้าย คุณต้องการโปรแกรมแก้ไขโค้ด Visual Studio Code, PhpStorm หรือ Sublime Text เป็นตัวเลือกที่ยอดเยี่ยม ทั้งหมดนี้รองรับการเน้นไวยากรณ์และคำแนะนำโค้ดสำหรับการพัฒนา PHP และ WordPress ได้ดี ตรวจสอบให้แน่ใจว่าโปรแกรมแก้ไขของคุณสามารถเข้าถึงไฟล์โปรเจกต์บนเซิร์ฟเวอร์ท้องถิ่นได้อย่างสะดวก

UltaHost WordPress โฮสติ้ง

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

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

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

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

เขียนข้อมูลหัวปลั๊กอิน

ในของคุณ wp-content/plugins ไดเรกทอรี ให้สร้างโฟลเดอร์ใหม่ เช่น my-first-pluginภายในโฟลเดอร์นั้น สร้างไฟล์หลัก my-first-plugin.php. เริ่มต้นของไฟล์ต้องมีความคิดเห็นในรูปแบบต่อไปนี้:

<?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
 */

ข้อความในคอมเมนต์นี้ “Plugin Name” เป็นข้อมูลที่จำเป็นต้องระบุ ส่วนอื่นๆ เป็นตัวเลือก WordPress จะอ่านข้อมูลเหล่านี้และแสดงในหน้า “ปลั๊กอิน” ในการจัดการหลังบ้าน

การใช้งานฟังก์ชันพื้นฐาน

ตอนนี้ ให้เราเพิ่มฟังก์ชันการทำงานจริงแรกให้กับปลั๊กอินนี้: เพิ่มข้อความที่กำหนดเองโดยอัตโนมัติที่ส่วนท้ายของเนื้อหาบทความ เราจะใช้ the_content ตัวฟิลเตอร์ฮุค (Filter Hook) นี้

แนะนำให้อ่าน WordPress Plugin Development from Beginner to Expert: Sharing Practical Experience and Core Techniques。

ใต้คอมเมนต์ส่วนหัว ให้เพิ่มโค้ดต่อไปนี้:

function myfp_add_text_to_content( $content ) {
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $custom_text = '<p><em>ขอบคุณที่อ่านบทความนี้ นำเสนอโดย “ปลั๊กอินแรกของฉัน”</em></p>';
        $content .= $custom_text;
    }
    return $content;
}
add_filter( 'the_content', 'myfp_add_text_to_content' );

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

เข้าใจกลไกหลักของปลั๊กอิน WordPress

WordPress ปลั๊กอินมีพื้นฐานที่แข็งแกร่งและยืดหยุ่นคือกลไกฮุค (Hooks) ฮุคอนุญาตให้คุณแทรกโค้ดของคุณเองลงในจุดเฉพาะของการทำงานของโค้ดหลัก WordPress เพื่อเปลี่ยนแปลงหรือเพิ่มประสิทธิภาพการทำงานเริ่มต้น ฮุคหลักแบ่งออกเป็นสองประเภท: ฮุคแอ็กชัน (Action Hooks) และฮุคตัวกรอง (Filter Hooks)

hosting.com 共享主机

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

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

Action hooks และ Filter hooks

ฮุคแอ็กชัน (Action) อนุญาตให้คุณดำเนินการโค้ดที่กำหนดเองเมื่อเหตุการณ์เฉพาะเกิดขึ้น เช่น หลังจากเผยแพร่บทความ ขณะโหลดหน้าจัดการ เป็นต้น ไม่จำเป็นต้องส่งคืนค่า ใช้ add_action() ฟังก์ชันเพื่อติดตั้ง ตัวอย่างเช่น ดำเนินการเมื่อเปิดใช้งานปลั๊กอิน:

function myfp_plugin_activation_task() {
    // 创建数据库表、初始化选项等
    update_option( 'myfp_plugin_installed', '2026-01-01' );
}
register_activation_hook( __FILE__, 'myfp_plugin_activation_task' );

ที่นี่ใช้ register_activation_hookซึ่งเป็นฮุคแอ็กชันพิเศษที่ออกแบบมาสำหรับการเปิดใช้งานปลั๊กอินโดยเฉพาะ

ฟิลเตอร์ฮุค (Filter) อนุญาตให้คุณแก้ไขข้อมูลที่ส่งผ่านเข้ามา ฟังก์ชันต้องรับค่าและต้องส่งคืนค่าที่แก้ไขแล้ว ตัวอย่างที่เราเคยแก้ไขเนื้อหาบทความเป็นตัวอย่างคลาสสิกของฟิลเตอร์ อีกตัวอย่างหนึ่งคือการแก้ไขความยาวของบทคัดย่อบทความ:

แนะนำให้อ่าน Master WordPress Plugin Development: Complete Practical Guide from Zero to One。

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

ใช้ชอร์ตโค้ดเพื่อเพิ่มเนื้อหาแบบไดนามิก

นอกจากฮุคแล้ว ชอร์ตโค้ด (Shortcode) เป็นเครื่องมืออันทรงพลังอีกอย่างสำหรับปลั๊กอินในการโต้ตอบกับเนื้อหา มันอนุญาตให้ผู้ใช้เรียกเนื้อหาที่ซับซ้อนที่สร้างโดยปลั๊กอินได้โดยการแทรกแท็กง่ายๆ (เช่น [my_shortcode]) ในบทความหรือหน้า

การสร้าง shortcode นั้นง่ายดายมาก ใช้ฟังก์ชัน add_shortcode() ตัวอย่างเช่น สร้าง shortcode เพื่อแสดงเวลาปัจจุบัน:

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

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

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

function myfp_current_time_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'format' => 'Y-m-d H:i:s',
    ), $atts, 'current_time' );

return date( $atts['format'] );
}
add_shortcode( 'current_time', 'myfp_current_time_shortcode' );

ผู้ใช้สามารถป้อนข้อมูลในตัวแก้ไขได้ [current_time format="H:i"] เพื่อแสดงเฉพาะชั่วโมงและนาที

เพิ่มหน้าแอดมินสำหรับปลั๊กอิน

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

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

เราจะเพิ่มหน้าตั้งค่าอย่างง่ายสำหรับปลั๊กอิน เพื่อจัดการข้อความที่เราได้เพิ่มไปที่ท้ายบทความก่อนหน้านี้ ขั้นแรก ใช้ add_menu_page() 或 add_options_page() ฟังก์ชันเพื่อลงทะเบียนหน้า โดยปกติแล้ว ปลั๊กอินแบบง่ายจะเพิ่มหน้าไปยังเมนูย่อย “การตั้งค่า”

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

function myfp_add_admin_menu() {
    add_options_page(
        '我的第一个插件设置', // 页面标题
        '我的插件设置',       // 菜单标题
        'manage_options',     // 所需权限
        'myfp-settings',      // 菜单slug
        'myfp_settings_page_html' // 用于输出页面内容的回调函数
    );
}
add_action( 'admin_menu', 'myfp_add_admin_menu' );

โค้ดนี้บอก WordPress ว่าเมื่อสร้างเมนูแอดมิน (admin_menu การดำเนินการ），ดำเนินการ myfp_add_admin_menu ฟังก์ชันเพื่อเพิ่มหน้า

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

ต่อไปเราต้องกำหนด myfp_settings_page_html ฟังก์ชันเพื่อสร้างเนื้อหา HTML ของหน้าและจัดการการบันทึกแบบฟอร์ม เพื่อการจัดเก็บการตั้งค่าอย่างปลอดภัย เราใช้ options API ของ WordPress

function myfp_settings_page_html() {
    // 检查用户权限
    if ( !current_user_can( 'manage_options' ) ) {
        return;
    }

// 处理表单提交
    if ( isset( $_POST['myfp_footer_text'] ) ) {
        update_option( 'myfp_footer_text', sanitize_textarea_field( $_POST['myfp_footer_text'] ) );
        echo '<div class="notice notice-success"><p>ตั้งค่าเรียบร้อยแล้ว</p></div>';
    }

// 获取现有值
    $current_text = get_option( 'myfp_footer_text', '感谢阅读本文，由“我的第一个插件”为您呈现。' );
    ?&gt;
    <div class="wrap">
        <h1>การตั้งค่าปลั๊กอินแรกของฉัน</h1>
        <form method="post" action="">
            <?php wp_nonce_field( 'myfp_settings_action', 'myfp_settings_nonce' ); ?>
            <table class="form-table">
                <tr>
                    <th scope="row"><label for="footer_text">ข้อความส่วนท้ายของบทความ</label></th>
                    <td>
                        <textarea name="myfp_footer_text" id="footer_text" rows="4" cols="50" class="large-text"><?php echo esc_textarea( $current_text ); ?></textarea>
                        <p class="description">ข้อความนี้จะปรากฏที่ท้ายบทความทุกบทความ</p>
                    </td>
                </tr>
            </table>
            <?php submit_button(); ?>
        <input type="hidden" name="trp-form-language" value="th"/></form>
    </div>
    &lt;?php
}

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

สรุป

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

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

ปลั๊กอินต้องมีไฟล์ PHP เพียงไฟล์เดียวเท่านั้นหรือไม่

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

จะจัดการข้อมูลอินพุตจากผู้ใช้ในปลั๊กอินอย่างปลอดภัยได้อย่างไร

การจัดการข้อมูลที่ผู้ใช้ป้อน (เช่น ข้อมูลแบบฟอร์ม พารามิเตอร์ URL) ต้องมีการตรวจสอบความถูกต้อง (Validation), การทำความสะอาด (Sanitization) และการหนี (Escaping) สำหรับข้อมูลที่จะเก็บในฐานข้อมูล ให้ใช้ฟังก์ชัน sanitize_text_field()、sanitize_textarea_field()、intval() ในการทำความสะอาด เมื่อจะแสดงข้อมูลไปยังหน้า HTML ให้ใช้ esc_html()、esc_attr()、esc_url() 或 wp_kses() ในการหนี เพื่อป้องกันการโจมตีแบบ Cross-Site Scripting (XSS)

ในระหว่างการพัฒนา Plugin ควรทำการดีบักโค้ดอย่างไร?

นอกจากใช้ WP_DEBUG แล้ว คุณยังสามารถใช้ error_log() ฟังก์ชันเพื่อบันทึกข้อมูลที่กำหนดเองลงในบันทึกการดีบัก สำหรับการตรวจสอบค่าตัวแปรvar_dump() 或 print_r() การรวม die() เป็นวิธีที่รวดเร็วแต่หยาบ ควรใช้ WordPress ที่มีอยู่ภายในแทน wp_die() 和 wp_send_json()(ใช้สำหรับการดีบัก AJAX) นอกจากนี้ การใช้ปลั๊กอินดีบักมืออาชีพ เช่น Query Monitor สามารถดูข้อมูลรันไทม์ เช่น การสืบค้นฐานข้อมูล, ฮุค, สคริปต์ ฯลฯ ได้อย่างชัดเจนยิ่งขึ้น

จะทำให้ปลั๊กอินของฉันรองรับหลายภาษาได้อย่างไร?

การทำให้ปลั๊กอินรองรับความเป็นสากล (i18n) จำเป็นต้องใช้ฟังก์ชันการแปลของ WordPress ก่อนอื่น ต้องตั้งค่าให้ถูกต้องในส่วนความคิดเห็นส่วนหัวของปลั๊กอิน Text Domain(เช่น ‘my-first-plugin’) ในโค้ด ใช้สำหรับสตริงทั้งหมดที่มุ่งเน้นผู้ใช้ () 或 _e() ห่อด้วยฟังก์ชั่น เช่น ( ‘Hello World’, ‘my-first-plugin’ )จากนั้นใช้เครื่องมือเช่น Poedit เพื่อสร้าง .pot ไฟล์เทมเพลต ซึ่งนักแปลสามารถใช้สร้าง .po 和 .mo ไฟล์ และเก็บไว้ในไดเรกทอรีปลั๊กอิน languages/ ในโฟลเดอร์