คู่มือเริ่มต้นการพัฒนาปลั๊กอิน WordPress: สร้างปลั๊กอินแรกของคุณตั้งแต่เริ่มต้น

เหตุใดจึงเลือกพัฒนา WordPress Plugin

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

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

สร้างสภาพแวดล้อมการพัฒนาปลั๊กอินของคุณ

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

แนะนำให้อ่าน WordPress Plugin Development Ultimate Guide: สร้างปลั๊กอินระดับมืออาชีพตั้งแต่เริ่มต้น。

การตั้งค่าสภาพแวดล้อมเซิร์ฟเวอร์ท้องถิ่น

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

UltaHost WordPress โฮสติ้ง

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

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

ติดตั้งและตั้งค่า WordPress

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

define( 'WP_DEBUG', true );

เตรียมตัวแก้ไขโค้ด

เลือกตัวแก้ไขโค้ดที่มีประสิทธิภาพ เช่น Visual Studio Code, PhpStorm หรือ Sublime Text ติดตั้งส่วนขยายที่เกี่ยวข้อง เช่น PHP IntelliSense, WordPress code snippets เป็นต้น ซึ่งสามารถเพิ่มประสิทธิภาพการเข้ารหัสของคุณได้อย่างมาก

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

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

เขียนส่วนหัวความคิดเห็นของปลั๊กอิน

ทุกปลั๊กอินจะต้องมีส่วนหัวข้อความที่อยู่ในรูปแบบมาตรฐาน ซึ่ง WordPress ใช้เพื่อระบุข้อมูลของปลั๊กอิน ในไดเรกทอรีของปลั๊กอินของคุณ (ตัวอย่างเช่น/wp-content/plugins/my-first-plugin/) ในการสร้างชื่อmy-first-plugin.phpไฟล์หลัก

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

<?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
 * Domain Path:       /languages
 */

ส่วนหัวข้อความนี้กำหนดชื่อ คำอธิบาย และข้อมูลอื่นๆ ของปลั๊กอินที่ปรากฏในแผงควบคุมหลังบ้านของ WordPress โดยที่Text Domainใช้สำหรับการแปลภาษาแบบสากล

กรอบความปลอดภัยพื้นฐานสำหรับการสร้างปลั๊กอิน

เพื่อป้องกันการเข้าถึงไฟล์ปลั๊กอินของคุณโดยตรง คุณสามารถเพิ่มโค้ดป้องกันความปลอดภัยที่ด้านบนของไฟล์ นี่คือแนวทางปฏิบัติที่ดีที่สุดในการพัฒนา WordPress Plugins

// 防止直接访问
if ( ! defined( 'ABSPATH' ) ) {
	exit; // 如果未定义ABSPATH（WordPress根目录的绝对路径），则退出
}

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

hosting.com 共享主机

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

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

การนำฟังก์ชันหลักไปใช้: เพิ่มเมนูการจัดการและการตั้งค่า

ปลั๊กอินที่สมบูรณ์มักต้องมีหน้าติดตั้งการตั้งค่าในแอดมิน WordPress เราจะใช้ API ที่ WordPress จัดให้เพื่อเพิ่มหน้าเมนูการจัดการแบบง่าย

ใช้ฟังก์ชันเพื่อเพิ่มเมนูการจัดการระดับบนสุด

เราจะใช้add_action()ฟังก์ชันถูกติดตั้งบนadmin_menuบนฮุค เพื่อเพิ่มรายการเมนูในแอดมิน เพิ่มโค้ดต่อไปนี้ในไฟล์ปลั๊กอินหลักของคุณต่อไป

// 添加管理菜单
function mfp_add_admin_menu() {
    add_menu_page(
        '我的第一个插件设置', // 页面标题
        '我的插件',           // 菜单标题
        'manage_options',    // 所需权限（管理员）
        'my-first-plugin',   // 菜单slug
        'mfp_settings_page', // 显示页面内容的回调函数
        'dashicons-admin-generic', // 图标（使用Dashicons）
        80                    // 菜单位置
    );
}
add_action( 'admin_menu', 'mfp_add_admin_menu' );

ที่นี่add_menu_page()ฟังก์ชันใช้สำหรับสร้างเมนูระดับบนสุด พารามิเตอร์กำหนดชื่อหน้า ชื่อเมนู สิทธิ์การเข้าถึง ตัวระบุเฉพาะ (slug) ฟังก์ชันคอลแบ็กสำหรับแสดงเนื้อหาหน้า ไอคอน และตำแหน่งของเมนูในแถบด้านข้าง

แนะนำให้อ่าน คู่มือการพัฒนา WordPress Plugins ฉบับสมบูรณ์: จากพื้นฐานสู่การเผยแพร่จริง。

สร้างฟังก์ชัน callback สำหรับหน้าตั้งค่า

ตอนนี้ เราต้องกำหนดmfp_settings_page()ฟังก์ชันที่กล่าวถึงข้างต้น ซึ่งจะแสดงเนื้อหา HTML ของหน้าจัดการ

// 设置页面回调函数
function mfp_settings_page() {
    // 检查用户权限
    if ( ! current_user_can( 'manage_options' ) ) {
        return;
    }
    ?>
    <div class="wrap">
        <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
        <p>ยินดีต้อนรับสู่หน้าการตั้งค่าปลั๊กอินแรกของฉัน! นี่คือที่ที่จะเพิ่มฟอร์มและตัวเลือกในอนาคต</p>
        <form action="/th/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            // 输出设置字段、非ce等（后续扩展）
            settings_fields( 'mfp_options_group' );
            do_settings_sections( 'my-first-plugin' );
            submit_button( '保存设置' );
            ?>
        <input type="hidden" name="trp-form-language" value="th"/></form>
    </div>
    &lt;?php
}

ฟังก์ชันนี้จะตรวจสอบก่อนว่าผู้ใช้ปัจจุบันมีmanage_optionsสิทธิ์ (มักจะเป็นผู้ดูแลระบบ) จากนั้นแสดงโครงสร้างหน้าเว็บการตั้งค่าอย่างง่าย ซึ่งsettings_fields()和do_settings_sections()สงวนไว้สำหรับการลงทะเบียนตัวเลือกโดยใช้ WordPress Settings API ในภายหลัง

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

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

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

เพิ่มฟังก์ชันส่วนหน้า (Frontend) อย่างง่ายให้กับปลั๊กอิน

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

ใช้ฟังก์ชันลงทะเบียน shortcode

shortcode อนุญาตให้ผู้ใช้แทรกฟังก์ชันไดนามิกในเนื้อหาผ่านแท็กง่ายๆ เช่น[shortcode]ฟังก์ชันadd_shortcode()ฟังก์ชันเพื่อจดทะเบียน

// 注册一个短代码
function mfp_hello_world_shortcode( $atts ) {
    // 短码属性，设置默认值
    $atts = shortcode_atts(
        array(
            'name' => '访客',
        ),
        $atts,
        'mfp_hello'
    );

// 安全地输出内容
    return '<p>สวัสดี, ' . esc_html( $atts['name'] ) . '! นี่คือคำทักทายที่สร้างจากปลั๊กอินของฉัน</p>';
}
add_shortcode( 'mfp_hello', 'mfp_hello_world_shortcode' );

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

ทดสอบโค้ดสั้นๆ ในส่วนหน้าเว็บไซต์

หลังจากบันทึกไฟล์ปลั๊กอินแล้ว ไปที่หน้า “ปลั๊กอิน” ในแผงควบคุม WordPress และเปิดใช้งาน “ปลั๊กอินแรกของฉัน” จากนั้น สร้างหรือแก้ไขบทความ และป้อนโดยตรงในตัวแก้ไขเนื้อหา[mfp_hello name="小明"]หลังจากเผยแพร่บทความ หน้าเว็บไซต์ส่วนหน้าจะแสดง “สวัสดี, เซียวหมิง! นี่คือคำทักทายที่สร้างโดยปลั๊กอินของฉัน” หากไม่ระบุแอตทริบิวต์ name เช่น[mfp_hello]หากไม่มีการตั้งค่า จะแสดงข้อความเริ่มต้น “สวัสดี, ผู้เยี่ยมชม!”

สรุป

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

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

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

การพัฒนา WordPress Plugin ต้องมีความรู้อะไรบ้างเป็นพื้นฐาน?

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

ชื่อไฟล์หลักของปลั๊กอินต้องเหมือนกับชื่อโฟลเดอร์หรือไม่?

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

ฉันจะดีบั๊กโค้ดปลั๊กอินของฉันได้อย่างไร?

นอกจากเปิดWP_DEBUGคุณยังสามารถใช้error_log()ฟังก์ชันจะเขียนข้อมูลการดีบักไปยังบันทึกข้อผิดพลาดของเซิร์ฟเวอร์ หรือใช้var_dump()和wp_die()เพื่อตรวจสอบผลลัพธ์ (ใช้สำหรับสภาพแวดล้อมการพัฒนาเท่านั้น) การใช้ปลั๊กอินดีบักเช่น Query Monitor ก็เป็นทางเลือกที่มีประสิทธิภาพเช่นกัน

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

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