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

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

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

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

WordPress plugin มาตรฐานในเชิงโครงสร้างคือโฟลเดอร์ที่มีไฟล์ PHP หลัก ไฟล์หลักนี้ประกาศการมีอยู่ของตัวเองต่อระบบ WordPress ผ่านข้อมูลส่วนหัวความคิดเห็นเฉพาะ ลอจิกทางธุรกิจทั้งหมด ไม่ว่าจะเป็นการเพิ่มวิดเจ็ตใหม่ สร้างประเภทบทความที่กำหนดเอง หรือประมวลผลข้อมูลฟอร์ม ล้วนถูกติดตั้งและดำเนินการผ่าน “ฮุค” ต่างๆ ที่ WordPress จัดให้

แนะนำให้อ่าน WordPress Plugin Development from Beginner to Expert: Step-by-Step Guide to Creating Your Own Custom Features。

สร้างโครงสร้างโปรเจกต์ปลั๊กอินแรกของคุณ

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

UltaHost WordPress โฮสติ้ง

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

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

สร้างโครงสร้างไฟล์พื้นฐานสำหรับปลั๊กอิน

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

เขียนส่วนหัวข้อมูลเมตาของปลั๊กอิน

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

<?php
/**
 * Plugin Name:       我的第一个插件
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       这是一个用于学习 WordPress 插件开发的自定义插件。
 * Version:           1.0.0
 * Author:            你的名字
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       my-first-plugin
 * Domain Path:       /languages
 */

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

สำรวจกลไกหลักของ WordPress: Hook และ Filter

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

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

ทำความเข้าใจวิธีการทำงานของ Action Hook

Action Hook อนุญาตให้คุณเรียกใช้ฟังก์ชันของคุณในช่วงเวลาที่กำหนดในกระบวนการทำงานของ WordPress เช่น เมื่อหน้าโหลดเสร็จสิ้น หรือเมื่อมีการเผยแพร่โพสต์ การใช้งาน add_action() ฟังก์ชันสามารถเชื่อมต่อฟังก์ชันที่กำหนดเองของคุณเข้ากับฮุคได้ ไวยากรณ์พื้นฐานคือ:add_action( ‘hook_name’， ‘your_function_name’ );。

มาลองสร้างฟังก์ชัน: แสดงข้อความที่กำหนดเองที่ด้านล่างของหน้าเว็บไซต์ด้านหน้า เราจะใช้ wp_footer Action Hook นี้

function my_custom_footer_message() {
    echo '<p style="text-align: center; color: #666;">ขอบคุณที่เยี่ยมชมเว็บไซต์ของเรา! นี่คือข้อมูลส่วนท้ายที่เพิ่มโดยปลั๊กอินที่กำหนดเอง</p>';
}
add_action( 'wp_footer’, 'my_custom_footer_message’ );

เพิ่มโค้ดนี้ลงในไฟล์หลักของปลั๊กอินของคุณ my-first-plugin.php บันทึกและรีเฟรชหน้าเว็บไซต์ด้านหน้า คุณจะเห็นข้อความนี้ที่ส่วนท้ายของหน้า

hosting.com 共享主机

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

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

ใช้ตัวกรองเพื่อแก้ไขเนื้อหาเริ่มต้น

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

function modify_post_title( $title ) {
    if ( is_single() ) {
        return '【精选】’ . $title;
    }
    return $title;
}
add_filter( ‘the_title’, 'modify_post_title’ );

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

สร้างหน้าเว็บการจัดการหลังบ้านที่ใช้งานได้จริง

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

แนะนำให้อ่าน WordPress Plugin Development from Beginner to Expert: A Complete Guide to Building Highly Customizable Function Modules。

เพิ่มรายการเมนูการจัดการใหม่

ใช้ add_menu_page() 或 add_options_page() ฟังก์ชันเหล่านี้สามารถเพิ่มหน้าใหม่ไปยังเมนูด้านซ้ายของหลังบ้าน WordPress ได้ เราจะยกตัวอย่างการเพิ่มหน้าเว็บภายใต้เมนูย่อย “การตั้งค่า”

ก่อนอื่น สร้างฟังก์ชันเพื่อแสดงเนื้อหา HTML สำหรับหน้าจัดการ

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

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

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

function my_plugin_settings_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( ‘my_plugin_settings’ );
            do_settings_sections( ‘my_plugin_settings’ );
            submit_button( ‘保存设置’ );
            ?>
        <input type="hidden" name="trp-form-language" value="th"/></form>
    </div>
    &lt;?php
}

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

WordPress มีฟังก์ชัน register_setting(), add_settings_section() 和 add_settings_field() ชุด API นี้จะจัดการการตั้งค่าอย่างเป็นมาตรฐาน ซึ่งจะจัดการการตรวจสอบความปลอดภัย (Nonce) และการบันทึก/อ่านค่าอัตโนมัติ

ต่อไป เราต้องการฟังก์ชันเพื่อเริ่มต้นการตั้งค่าเหล่านี้ ฟังก์ชันนี้ควรถูกติดตั้งไปยัง admin_init บนฮุค

function my_plugin_settings_init() {
    // 注册一个新的设置选项组
    register_setting( ‘my_plugin_settings’, ‘my_plugin_options’ );

// 在页面中添加一个新的区块
    add_settings_section(
        ‘my_plugin_section_1’,
        ‘基础设置’,
        null, // 回调函数，用于输出区块描述，可为空
        ‘my_plugin_settings’
    );

// 在区块内添加一个字段
    add_settings_field(
        ‘my_plugin_field_text’,
        ‘欢迎语’,
        ‘my_plugin_field_text_cb’,
        ‘my_plugin_settings’,
        ‘my_plugin_section_1’,
        [
            ‘label_for’ => ‘my_plugin_field_text’,
            ‘class’ => ‘my_plugin_row’,
        ]
    );
}
add_action( ‘admin_init’, ‘my_plugin_settings_init’ );

// 字段的回调函数，用于输出字段的 HTML
function my_plugin_field_text_cb( $args ) {
    $options = get_option( ‘my_plugin_options’ );
    ?>
    <input type="text" id="<?php echo esc_attr( $args[‘label_for’] ); ?>"
           name="my_plugin_options[<?php echo esc_attr( $args[‘label_for’] ); ?>]"
           value="<?php echo esc_attr( $options[ $args[‘label_for’] ] ?? ‘’ ); ?>">
    <p class="“description”">ข้อความนี้จะแสดงบนหน้าแรกของเว็บไซต์</p>
    &lt;?php
}

เพิ่มลิงก์หน้าไปยังเมนู

สุดท้าย ใช้ add_options_page() เพิ่มหน้าที่เราสร้างไว้ในเมนู “การตั้งค่า”

function my_plugin_add_settings_page() {
    add_options_page(
        ‘我的插件设置’, // 页面标题
        ‘我的插件’, // 菜单标题
        ‘manage_options’, // 所需能力
        ‘my-plugin-settings’, // 菜单别名
        ‘my_plugin_settings_page_html’ // 渲染页面的回调函数
    );
}
add_action( ‘admin_menu’, ‘my_plugin_add_settings_page’ );

ตอนนี้ หลังจากเปิดใช้งานปลั๊กอินแล้ว คุณสามารถค้นหาตัวเลือก “ปลั๊กอินของฉัน” ในเมนู “การตั้งค่า” ของ WordPress แผงควบคุม คลิกเข้าไปเพื่อดูหน้าการตั้งค่าที่มีฟิลด์ข้อความหนึ่งฟิลด์ คุณสามารถป้อนและบันทึกข้อความต้อนรับได้ หลังจากนั้น คุณสามารถใช้ get_option( ‘my_plugin_options’ ) ในส่วนหน้าสาธารณะเพื่อรับและใช้ค่านี้

การนำฟังก์ชันการทำงานส่วนหน้าไปใช้ในปลั๊กอินและการพิจารณาด้านความปลอดภัย

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

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

function display_frontend_greeting() {
    // 1. 获取数据
    $options = get_option( ‘my_plugin_options’ );
    $greeting = $options[‘my_plugin_field_text’] ?? ‘’;

// 2. 如果内容为空，则不输出任何东西
    if ( empty( $greeting ) ) {
        return;
    }

// 3. 在输出前进行清理和转义
    $safe_greeting = esc_html( $greeting );

// 4. 输出到前端（这里假设只在首页显示）
    if ( is_front_page() ) {
        echo ‘<div class="“my-plugin-greeting”"><p>’ . $safe_greeting . ‘</p></div>’;
    }
}
add_action( ‘wp_body_open’, ‘display_frontend_greeting’ );

ที่นี่เราใช้ esc_html() ฟังก์ชันสำหรับหนีอักขระ HTML เพื่อป้องกันการโจมตีแบบ Cross-Site Scripting (XSS) นอกจากนี้เรายังตรวจสอบว่าข้อมูลว่างเปล่าหรือไม่ และใช้แท็กเงื่อนไข is_front_page() เพื่อควบคุมตำแหน่งที่แสดงผล การเชื่อมฟังก์ชันกับ wp_body_open ฮุก จะช่วยให้มั่นใจได้ว่าเนื้อหาจะแสดงทันทีหลังจากเริ่มแท็ก body ของหน้า

นอกจากนี้ในการพัฒนาปลั๊กอิน การทำให้เป็นสากลก็เป็นแนวปฏิบัติที่สำคัญ โดยการใช้ __() 和 _e() ฟังก์ชันการแปล และการตั้งค่าโดเมนข้อความ (Text Domain) ของปลั๊กอินให้ถูกต้อง สามารถทำให้ปลั๊กอินของคุณถูกแปลเป็นภาษาใดก็ได้ ในส่วนหัวข้อมูลเมตาของปลั๊กอินก่อนหน้านี้ เราได้กำหนดไว้แล้ว Text Domain: my-first-pluginในโค้ด ควรใช้งานดังนี้:

echo esc_html__( ‘Hello, World!’, ‘my-first-plugin’ );

สรุป

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

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

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

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

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

จะดีบัก plugin ที่พัฒนาขึ้นเองได้อย่างไร?

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

มีข้อกำหนดความปลอดภัยใดบ้างที่ต้องปฏิบัติตามเมื่อพัฒนาปลั๊กอิน?

หลักการแรกคือ: อย่าไว้ใจข้อมูลที่ผู้ใช้ป้อนเข้ามาเลย ตรวจสอบและทำความสะอาดข้อมูลทั้งหมดจาก $_GET、$_POST、$_COOKIE ใช้เมื่อส่งออกข้อมูลไปยัง HTML esc_html()、esc_attr()、esc_url() ให้ใช้ฟังก์ชันต่างๆ ในการหนีอักขระ เมื่อสร้างคำสั่งค้นหาฐานข้อมูล ต้องใช้ $wpdb->prepare() เพื่อป้องกันการโจมตีแบบ SQL injection นอกจากนี้ ตรวจสอบสิทธิ์ของผู้ใช้ปัจจุบัน (เช่น current_user_can()ก็เป็นขั้นตอนที่จำเป็นอย่างยิ่ง

จะส่งปลั๊กอินของฉันไปยังไดเรกทอรีปลั๊กอิน WordPress อย่างเป็นทางการได้อย่างไร

ก่อนอื่น ตรวจสอบให้แน่ใจว่าปลั๊กอินของคุณปฏิบัติตามมาตรฐานการเข้ารหัสของ WordPress และใบอนุญาต GPL อย่างสมบูรณ์ คุณต้องเข้าไปที่ WordPress.org และสร้างบัญชี จากนั้นส่งไฟล์บีบอัดปลั๊กอินของคุณในหน้าการส่งปลั๊กอิน ทีมงานอย่างเป็นทางการจะตรวจสอบด้วยตนเอง ตรวจสอบคุณภาพโค้ด ความปลอดภัย เอกสาร และการปฏิบัติตามกฎเกณฑ์ หลังจากผ่านการตรวจสอบแล้ว ปลั๊กอินของคุณจะถูกเพิ่มลงในไดเรกทอรีอย่างเป็นทางการ ได้รับการสนับสนุนการอัปเดตอัตโนมัติ และสามารถให้ผู้ใช้ทั่วโลกค้นหาและติดตั้งได้