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

ก่อนเริ่มต้น โปรดตรวจสอบว่าคุณมีสภาพแวดล้อม WordPress ในเครื่องหรือออนไลน์สำหรับการพัฒนาและทดสอบ สภาพแวดล้อมแบบรวมเช่น Local, XAMPP หรือ MAMP เป็นตัวเลือกที่ดี นอกจากนี้ คุณต้องการคอมพิวเตอร์ที่ติดตั้งโปรแกรมแก้ไขโค้ด (เช่น Visual Studio Code, PhpStorm) และมีความรู้พื้นฐานเกี่ยวกับ PHP, HTML, CSS และ JavaScript

การมีสภาพแวดล้อมการพัฒนาที่ชัดเจนเป็นพื้นฐานสำหรับงานทั้งหมดต่อไปนี้ ช่วยให้คุณสามารถมุ่งเน้นไปที่ตรรกะของโค้ด แทนที่จะเป็นการกำหนดค่าสภาพแวดล้อม

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

ปลั๊กอิน WordPress อย่างน้อยต้องมีไฟล์ PHP หลักหนึ่งไฟล์ และไฟล์นั้นต้องมีคำอธิบายส่วนหัวปลั๊กอินเฉพาะ เพื่อให้ข้อมูลเมตาแก่ระบบ WordPress

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

คำอธิบายส่วนหัวปลั๊กอินและไฟล์หลัก

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

UltaHost WordPress โฮสติ้ง

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

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

<?php
/**
 * Plugin Name:       我的第一个功能插件
 * Plugin URI:        https://yourwebsite.com/my-first-plugin
 * Description:       这是一个学习 WordPress 插件开发的示例插件，用于在前端页面底部添加自定义文本。
 * Version:           1.0.0
 * Author:            你的名字
 * Author URI:        https://yourwebsite.com
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 */

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

การใช้งานฟังก์ชัน: เพิ่ม Action Hook

ตรรกะของปลั๊กอินจะเชื่อมต่อผ่านระบบ Hook ของ WordPress เราจะใช้ wp_footer การกระทำนี้ hook จะแสดงข้อความที่ส่วนท้ายของเว็บไซต์

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

// 在网站页脚添加自定义文本
function mfp_add_footer_text() {
    echo '<p style="text-align: center; color: #666;">ขอบคุณที่อ่าน! ส่วนท้ายหน้านี้ถูกสร้างขึ้นโดย “ปลั๊กอินฟังก์ชันแรกของฉัน”</p>';
}
add_action( 'wp_footer', 'mfp_add_footer_text' );

ที่นี่ เราได้สร้างฟังก์ชันที่กำหนดเองชื่อ mfp_add_footer_text จากนั้นใช้ add_action() ฟังก์ชันนี้จะ “ติดตั้ง” ฟังก์ชันนี้ wp_footer บนฮุคนี้ เมื่อ WordPress ดำเนินการไปถึงตำแหน่งส่วนท้ายของหน้า มันจะเรียกใช้ฟังก์ชันของเราอัตโนมัติ เพื่อแสดงผลย่อหน้า HTML นั้น

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

เพิ่มหน้าการตั้งค่าการจัดการให้กับปลั๊กอิน

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

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

ก่อนอื่น เราต้องใช้ add_action( ‘admin_menu’, … ) เพื่อเพิ่มรายการเมนูใหม่ในแอดมิน ต่อจากโค้ดในไฟล์ปลั๊กอินหลักของคุณด้วยโค้ดต่อไปนี้:

// 添加管理菜单
function mfp_add_admin_menu() {
    add_menu_page(
        '我的插件设置',          // 页面标题
        '我的插件',             // 菜单标题
        'manage_options',       // 权限要求
        'mfp-settings',         // 菜单slug
        'mfp_settings_page',    // 显示页面内容的回调函数
        'dashicons-admin-generic', // 图标（使用Dashicons）
        30                      // 菜单位置
    );
}
add_action( 'admin_menu', 'mfp_add_admin_menu' );

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

hosting.com 共享主机

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

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

สร้างหน้าตั้งค่าและแบบฟอร์ม

ถัดไป เราจำเป็นต้องกำหนดฟังก์ชัน callback ข้างต้น mfp_settings_page เพื่อแสดงผลเนื้อหา HTML ของหน้าตั้งค่า และจัดการการบันทึกข้อมูลแบบฟอร์ม

// 设置页面的HTML内容
function mfp_settings_page() {
    // 检查用户权限
    if ( !current_user_can( ‘manage_options’ ) ) {
        return;
    }

// 处理表单提交
    if ( isset( $_POST[‘mfp_footer_text’] ) ) {
        // 验证和清理输入数据
        $new_text = sanitize_text_field( $_POST[‘mfp_footer_text’] );
        // 使用 update_option 将数据保存到数据库
        update_option( ‘mfp_footer_text’, $new_text );
        echo ‘<div class="“notice" notice-success is-dismissible”><p>ตั้งค่าเรียบร้อยแล้ว</p></div>’;
    }

// 从数据库获取现有值，用于填充表单
    $current_text = get_option( ‘mfp_footer_text’, ‘这是默认的页脚文本。’ );
    ?&gt;
    <div class="“wrap”">
        <h1>การตั้งค่าปลั๊กอินของฉัน</h1>
        <form method="“post”" action="/th/“”/" data-trp-original-action="“”">
            <?php wp_nonce_field( ‘mfp_save_settings’, ‘mfp_settings_nonce’ ); ?>
            <table class="“form-table”">
                <tr>
                    <th scope="“row”"><label for="“mfp_footer_text”">ข้อความส่วนท้ายที่กำหนดเอง</label></th>
                    <td>
                        <input name="“mfp_footer_text”" type="“text”" id="“mfp_footer_text”" value="“NO NUMERIC NOISE KEY" 1001” class="“regular-text”">
                        <p class="“description”">ข้อความนี้จะปรากฏที่ด้านล่างของทุกหน้าในเว็บไซต์</p>
                    </td>
                </tr>
            </table>
            <?php submit_button(); ?>
        <input type="hidden" name="trp-form-language" value="th"/></form>
    </div>
    &lt;?php
}

ฟังก์ชันนี้ทำหน้าที่สำคัญหลายอย่าง: การตรวจสอบสิทธิ์ การจัดการการส่งฟอร์ม (ใช้ update_option จัดเก็บ) และการแสดงผลอินเทอร์เฟซฟอร์ม โปรดทราบว่ามีการใช้ sanitize_text_field() 和 esc_attr() และฟังก์ชันความปลอดภัยอื่น ๆ เพื่อป้องกันการโจมตีแบบ XSS

ทำให้ฟังก์ชันสามารถกำหนดค่าได้

ตอนนี้ เราจำเป็นต้องแก้ไขฟังก์ชันที่แสดงข้อความส่วนท้าย (footer) ก่อนหน้านี้ โดยให้อ่านการตั้งค่าจากฐานข้อมูล แทนที่จะแสดงข้อความที่เขียนตายตัว (hard-coded)

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

// 更新页脚文本函数，使其可配置
function mfp_add_footer_text() {
    // 从数据库获取保存的文本，如果没有则使用默认值
    $footer_text = get_option( ‘mfp_footer_text’, ‘感谢阅读！本页脚由“我的第一个功能插件”生成。’ );
    if ( !empty( $footer_text ) ) {
        echo ‘<p style="“text-align:" center; color: #666;”>’ . esc_html( $footer_text ) . ‘</p>’;
    }
}
add_action( ‘wp_footer’, ‘mfp_add_footer_text’ );

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

แนวปฏิบัติที่ดีที่สุดในการพัฒนาและความปลอดภัยของปลั๊กอิน

การปฏิบัติตามแนวปฏิบัติที่ดีที่สุดไม่เพียงแต่ช่วยปรับปรุงคุณภาพโค้ด แต่ยังช่วยรับประกันความปลอดภัยและความเข้ากันได้ของปลั๊กอินด้วย

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

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

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

ใช้คำนำหน้าและเนมสเปซ

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

การตรวจสอบข้อมูล การทำความสะอาด และการหลีกเลี่ยงอักขระพิเศษ

นี่คือหัวใจหลักของความปลอดภัยของปลั๊กอิน อินพุตทั้งหมดจากผู้ใช้ (รวมถึงผู้ดูแลระบบ) ต้องถือว่าไม่น่าเชื่อถือ
* 验证 (Validation): 检查数据是否符合预期格式（如是否为邮箱、数字）。
* 清理 (Sanitization): 在将数据存入数据库或用于其他操作前，移除其中的非法或危险字符。我们使用了 sanitize_text_field()。
* 转义 (Escaping): 在将数据从数据库输出到 HTML、JavaScript 或 URL 时，进行转义以防止 XSS 攻击。我们使用了 esc_html() 和 esc_attr()。

การเตรียมความพร้อมสำหรับสากล

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

echo ‘<p style="“text-align:" center; color: #666;”>’ . esc_html__( ‘感谢阅读！本页脚由“我的第一个功能插件”生成。’, ‘my-first-plugin’ ) . ‘</p>’;

และตรวจสอบให้แน่ใจว่าได้ตั้งค่าไว้อย่างถูกต้องในส่วนหัวความคิดเห็นของปลั๊กอิน Text Domainจากนั้นใช้เครื่องมือเช่น Poedit เพื่อสร้างไฟล์เทมเพลตการแปล .pot

การดีบัก การทดสอบ และการเตรียมการเผยแพร่

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

เปิดใช้งานโหมดดีบัก

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

define( ‘WP_DEBUG’, true );
define( ‘WP_DEBUG_LOG’, true ); // 将错误记录到 wp-content/debug.log 文件
define( ‘WP_DEBUG_DISPLAY’, false ); // 不在页面上直接显示错误

ดำเนินการทดสอบฟังก์ชันและการเข้ากันได้

• การทดสอบฟังก์ชัน: ทดสอบฟังก์ชันทั้งหมดของปลั๊กอินทีละอย่าง: การเปิดใช้งาน/ปิดใช้งาน, การบันทึกการตั้งค่า, ผลลัพธ์ด้านหน้าสุดถูกต้องหรือไม่
• การทดสอบความเข้ากันได้: ทดสอบปลั๊กอินของคุณในสภาพแวดล้อมของ WordPress เวอร์ชันต่างๆ (โดยเฉพาะเวอร์ชันเก่า), PHP เวอร์ชัน (7.4+ และ 8.x), รวมถึงธีมยอดนิยมและปลั๊กอินอื่นๆ ที่ใช้กันทั่วไป
• การตรวจสอบความปลอดภัย: สามารถใช้เครื่องมืออัตโนมัติหรือตรวจสอบโค้ดด้วยตนเองเพื่อให้แน่ใจว่าไม่มีช่องโหว่ เช่น SQL injection, XSS, CSRF เป็นต้น Nonce field ที่เราเพิ่มก่อนหน้านี้มีไว้เพื่อป้องกัน CSRF

เตรียมไฟล์สำหรับเผยแพร่

หากแผนจะเผยแพร่ จำเป็นต้องมีโครงสร้างไฟล์มาตรฐาน โดยทั่วไปประกอบด้วย:
* 主插件文件 (如 my-first-plugin.php)
* readme.txt: ต้องเขียนตามรูปแบบของ WordPress.org เพื่อใช้ในการแสดงผลบนหน้าไดเรกทอรีของปลั๊กอิน
* assets โฟลเดอร์: สำหรับเก็บไอคอน, ภาพหน้าจอ ฯลฯ
* languages โฟลเดอร์: สำหรับเก็บไฟล์แปลภาษา (.po/.mo)
* includes โฟลเดอร์: สำหรับเก็บไฟล์คลาส PHP อื่นๆ
* uninstall.php: กำหนดการดำเนินการทำความสะอาดเมื่อปลั๊กอินถูกลบ (เช่น ลบตัวเลือกในฐานข้อมูล)

สรุป

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

จำไว้ว่าแก่นแท้ของการพัฒนา plugin คือการเข้าใจและใช้ระบบ Hook และ Filter อันกว้างใหญ่ของ WordPress อย่างชาญฉลาด จาก plugin เล็กๆ นี้ คุณสามารถสำรวจต่อไปได้ว่าจะเพิ่ม Shortcode, Widget, ประเภทบทความที่กำหนดเอง (CPT) หรือ REST API endpoint อย่างไร เพื่อสร้าง plugin ระดับธุรกิจที่มีประสิทธิภาพ ยืดหยุ่น และเป็นไปตามมาตรฐาน

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

Plugin ต้องวางไว้ในไดเรกทอรีใด?

WordPress plugin ต้องวางไว้ใน wp-content/plugins/ ไดเรกทอรี แต่ละ plugin อาจเป็นไฟล์ PHP อิสระ (สำหรับ plugin ที่เรียบง่ายมาก) แต่โดยทั่วไปแล้วมักจะสร้างโฟลเดอร์ที่ตั้งชื่อตาม plugin และใส่ไฟล์หลักพร้อมกับไฟล์ทรัพยากรอื่นๆ ไว้ในนั้น

จะลบข้อมูลที่ปลั๊กอินสร้างขึ้นได้อย่างไร?

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

ฮุค (Hooks) แตกต่างกันระหว่างแอ็กชันและฟิลเตอร์อย่างไร?

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

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

ทำไมปลั๊กอินของฉันไม่แสดงในส่วนหลัง?

ก่อนอื่น โปรดตรวจสอบว่าไฟล์ PHP หลักของปลั๊กอินของคุณอยู่ในไดเรกทอรีที่ถูกต้องหรือไม่ และหัวข้อความคิดเห็นของปลั๊กอิน (โดยเฉพาะ Plugin Name:) มีรูปแบบถูกต้องและไม่มีข้อผิดพลาดหรือไม่ ประการที่สอง ตรวจสอบว่าไฟล์มีข้อผิดพลาดทางไวยากรณ์หรือไม่ คุณสามารถทำได้ใน wp-config.php ใน WP_DEBUG ไปดูข้อความผิดพลาดที่เป็นไปได้