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

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

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

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

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

แนะนำให้อ่าน การพัฒนา WordPress Plugin จากเริ่มต้นสู่ระดับสูง: คู่มือฉบับสมบูรณ์ในการสร้างเว็บไซต์แบบเฉพาะบุคคล。

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

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

UltaHost WordPress โฮสติ้ง

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

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

ภายในโฟลเดอร์นั้น ให้สร้างไฟล์ PHP หลัก โดยปกติแล้ว ไฟล์หลักนี้จะมีชื่อเดียวกับโฟลเดอร์ของ 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
 * Domain Path:       /languages
 */

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

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

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

ใต้ส่วนหัวความคิดเห็นของไฟล์หลักปลั๊กอินmy-first-plugin.phpเพิ่มโค้ดต่อไปนี้:

แนะนำให้อ่าน เริ่มต้นจากศูนย์: เรียนรู้การพัฒนา WordPress Plugin: สร้างฟังก์ชันและส่วนขยายที่กำหนดเอง。

// 在网站页脚输出自定义文本
function myfp_add_footer_text() {
    echo '<p style="text-align: center; color: #666;">ขอบคุณที่ใช้เว็บไซต์นี้! สนับสนุนโดย “My First Plugin”</p>';
}
add_action( 'wp_footer', 'mfp_add_footer_text' );

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

ใช้ shortcode เพื่อขยายการแก้ไขเนื้อหา

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

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

hosting.com 共享主机

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

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

// 创建一个显示当前日期的短代码
function mfp_show_current_date( $atts ) {
    // 定义短码的默认属性
    $attributes = shortcode_atts(
        array(
            'format' => 'Y年m月d日',
        ),
        $atts
    );

// 根据属性中的格式返回日期
    return date( $attributes['format'] );
}
add_shortcode( 'show_date', 'mfp_show_current_date' );

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

ตอนนี้ คุณสามารถป้อน[show_date]ในบทความ หน้า หรือตัวแก้ไขข้อความของวิดเจ็ตใดก็ได้เพื่อแสดงวันที่ในรูปแบบเริ่มต้น หรือใช้[show_date format="F j, Y"]เพื่อแสดงวันที่ในรูปแบบภาษาอังกฤษ

ทำความเข้าใจกับ Hook และ Filter อย่างลึกซึ้ง

ปรัชญาหลักของการพัฒนา WordPress Plugin คือ “Hook” ซึ่ง Hook แบ่งออกเป็นสองประเภท: Action และ Filter ที่เราใช้ก่อนหน้านี้add_action()คือการเพิ่ม Action Hook

แนะนำให้อ่าน เริ่มต้นจากศูนย์: สร้างปลั๊กอิน WordPress แรกของคุณ。

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

ใช้ Filter เพื่อปรับเปลี่ยนหัวข้อบทความ

มาสร้าง Filter ที่จะเพิ่มคำนำหน้าให้กับหัวข้อบทความทั้งหมดโดยอัตโนมัติ ในไฟล์หลักของปลั๊กอิน เพิ่ม:

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

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

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

// 使用过滤器为文章标题添加前缀
function mfp_add_title_prefix( $title, $id = null ) {
    // 确保只在主循环且是文章页面的标题上生效
    if ( in_the_loop() && is_single() && get_post_type( $id ) === 'post' ) {
        $title = '【推荐阅读】' . $title;
    }
    return $title;
}
add_filter( 'the_title', 'mfp_add_title_prefix', 10, 2 );

ที่นี่the_titleเป็นฮุคตัวกรองadd_filter()พารามิเตอร์ที่สาม “10” คือลำดับความสำคัญ (ตัวเลขน้อยกว่าจะทำงานก่อน) พารามิเตอร์ที่สี่ “2” หมายถึงฟังก์ชันประมวลผลของเรารับพารามิเตอร์สองตัว (ต้นฉบับ$titleและรหัสบทความ) ฟังก์ชันนี้จะตรวจสอบเงื่อนไข เฉพาะในหน้าบทความเดี่ยวและอยู่ในลูปหลักเท่านั้น จะเพิ่มคำนำหน้าหน้าชื่อเรื่อง

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

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

การตรวจสอบและหลีกเลี่ยงข้อมูล

เมื่อปลั๊กอินต้องจัดการข้อมูลจากแบบฟอร์มหรือ URL ต้องใช้ฟังก์ชันความปลอดภัยที่ WordPress จัดให้ ตัวอย่างเช่น ใช้sanitize_text_field()เพื่อทำความสะอาดการป้อนข้อความ ใช้esc_html()或esc_attr()เพื่อแสดงผล HTML หรือแอตทริบิวต์ เพื่อป้องกันการโจมตีแบบ Cross-Site Scripting (XSS)

สร้างหน้าเพจตั้งค่าอย่างง่าย

ปลั๊กอินที่สมบูรณ์มักต้องการหน้าเพจตั้งค่าสำหรับผู้ดูแลระบบ ตัวอย่างนี้แสดงวิธีสร้างหน้าเพจตัวเลือกอย่างง่าย และบันทึกการตั้งค่าอย่างปลอดภัย

// 在后台管理菜单中添加一个选项页面
function mfp_add_admin_menu() {
    add_options_page(
        '我的第一个插件设置', // 页面标题
        '我的插件设置',       // 菜单标题
        'manage_options',     // 权限要求
        'my-first-plugin',    // 菜单slug
        'mfp_options_page_html' // 用于显示页面内容的回调函数
    );
}
add_action( 'admin_menu', 'mfp_add_admin_menu' );

// 注册一个设置项
function mfp_settings_init() {
    register_setting( 'mfpPlugin', 'mfp_settings' ); // 设置组，选项名

add_settings_section(
        'mfp_plugin_section', // 区块ID
        '基础设置',           // 区块标题
        null,                 // 区块介绍的回调函数（此处为null）
        'my-first-plugin'     // 所属页面slug
    );

add_settings_field(
        'custom_text',        // 字段ID
        '自定义显示文本',     // 字段标签
        'mfp_custom_text_field_html', // 用于输出字段HTML的回调函数
        'my-first-plugin',    // 页面slug
        'mfp_plugin_section'  // 所属区块ID
    );
}
add_action( 'admin_init', 'mfp_settings_init' );

// 渲染设置字段的HTML
function mfp_custom_text_field_html() {
    $options = get_option( 'mfp_settings' );
    $value = isset( $options['custom_text'] ) ? esc_attr( $options['custom_text'] ) : '';
    ?>
    <input type='text' name='mfp_settings[custom_text]' value='<?php echo $value; ?>'>
    <p class="description">ข้อความที่ป้อนที่นี่จะแสดงที่ส่วนท้ายของหน้า</p>
    <?php
}

// 渲染整个选项页面的HTML
function mfp_options_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( 'mfpPlugin' ); // 输出安全字段
            do_settings_sections( 'my-first-plugin' ); // 输出设置区块和字段
            submit_button( '保存设置' );
            ?>
        <input type="hidden" name="trp-form-language" value="th"/></form>
    </div>
    &lt;?php
}

โค้ดนี้สร้างหน้าเพจย่อยภายใต้เมนู “การตั้งค่า” สำหรับบันทึกข้อความที่กำหนดเอง โปรดสังเกตการตรวจสอบสิทธิ์ผู้ใช้ (current_user_can) และการหนีข้อมูลที่ส่งออก (esc_html, esc_attr），ทั้งหมดนี้เป็นส่วนหนึ่งของการปฏิบัติด้านความปลอดภัย หลังจากนั้น คุณสามารถแก้ไขฟังก์ชันที่แสดงผลในส่วนท้ายของหน้าเดิม เพื่ออ่านค่านี้จากget_option( 'mfp_settings' )เพื่อแสดงผลแบบไดนามิก

สรุป

ผ่านบทช่วยสอนนี้ คุณได้ทำการสร้างปลั๊กอิน WordPress ที่มีฟังก์ชันสมบูรณ์ตั้งแต่เริ่มต้นจนจบ คุณได้เรียนรู้วิธีการสร้างโครงสร้างไฟล์พื้นฐานของปลั๊กอิน ใช้ฮุคแอ็กชันadd_actionเพิ่มเนื้อหาในส่วนท้ายของหน้าผ่านadd_shortcodeการสร้าง shortcode ที่กำหนดเอง และการใช้ hook ตัวกรองadd_filterการปรับเปลี่ยนข้อมูลบทความ ที่สำคัญกว่านั้น คุณได้สัมผัสกับแนวคิดหลักของความปลอดภัยปลั๊กอิน และได้ฝึกปฏิบัติวิธีการสร้างหน้าการตั้งค่าหลังบ้านที่ปลอดภัยเพื่อจัดการตัวเลือกปลั๊กอิน

การพัฒนาปลั๊กอินเป็นกระบวนการเรียนรู้และฝึกฝนอย่างต่อเนื่อง ขั้นตอนต่อไป คุณสามารถลองเพิ่มการสนับสนุนสากล (i18n) ให้กับปลั๊กอิน (ใช้ฟังก์ชัน__()和_e()), นำเข้าแหล่งข้อมูล JavaScript และ CSS หรือใช้การเขียนโปรแกรมเชิงวัตถุ (OOP) เพื่อปรับโครงสร้างโค้ดใหม่ให้บำรุงรักษาและขยายได้ง่ายขึ้น จำไว้ว่า การอ่านคู่มือปลั๊กอินอย่างเป็นทางการของ WordPress และโค้ดหลักเป็นวิธีที่ดีที่สุดในการพัฒนาทักษะ

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

วิธีดีบัก WordPress Plugin ของฉัน?

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

ปลั๊กอินของฉันจะเข้ากันได้กับเวอร์ชัน WordPress ที่แตกต่างกันได้อย่างไร

ในโค้ดปลั๊กอิน คุณควรใช้เงื่อนไขเพื่อตรวจสอบการมีอยู่ของฟังก์ชัน คลาส หรือค่าคงที่หลักของ WordPress ก่อนใช้งาน คุณสามารถใช้function_exists()、class_exists()或defined()เพื่อตรวจสอบได้ พร้อมกันนี้ ในไฟล์readme.txtของปลั๊กอิน ระบุเวอร์ชันขั้นต่ำของ WordPress ที่ปลั๊กอินรองรับ (ผ่านฟิลด์Requires at least) ให้ชัดเจน ซึ่งจะช่วยให้ผู้ใช้ทราบเกี่ยวกับความเข้ากันได้

จำเป็นต้องใช้การเขียนโปรแกรมเชิงวัตถุในการพัฒนาปลั๊กอินหรือไม่?

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

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

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