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

การเตรียมการและการตั้งค่าสภาพแวดล้อม

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

คุณต้องเข้าใจโครงสร้างพื้นฐานของปลั๊กอิน WordPress ปลั๊กอินขั้นต่ำต้องมีไฟล์หลักอย่างน้อยหนึ่งไฟล์ ซึ่งเป็นไฟล์ PHP ที่มีส่วนหัวความคิดเห็นเฉพาะ ไฟล์นี้มักมีชื่อว่า your-plugin-name.phpซึ่งบอก WordPress ว่ามันเป็นปลั๊กอิน และให้ข้อมูลเช่น ชื่อ คำอธิบาย เวอร์ชัน และผู้เขียน

ในโปรแกรมแก้ไขโค้ด สร้างโฟลเดอร์ใหม่สำหรับโปรเจกต์ปลั๊กอินของคุณ เช่น my-first-pluginในโฟลเดอร์นี้ ให้สร้างไฟล์ PHP หลัก

แนะนำให้อ่าน เริ่มต้นจากศูนย์: คู่มือและบทเรียนปฏิบัติการขั้นสูงสุดสำหรับการพัฒนา WordPress Plugin。

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

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

UltaHost WordPress โฮสติ้ง

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

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

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

ในไฟล์ PHP ที่เพิ่งสร้างขึ้น คุณต้องเพิ่มส่วนหัวไฟล์ปลั๊กอินมาตรฐาน ตัวอย่างเช่น ปลั๊กอินชื่อ “คำทักทายเว็บไซต์” สามารถเริ่มต้นได้ดังนี้:

<?php
/**
 * Plugin Name:       站点问候语
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       一个简单的插件，用于在网站前台显示自定义问候语。
 * Version:           1.0.0
 * Author:            你的名字
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 * Domain Path:       /languages
 */

WordPress จะทำการสแกน wp-content/plugins อ่านไฟล์ PHP ทั้งหมดในไดเรกทอรี อ่านข้อมูลความคิดเห็นเฉพาะเหล่านี้ และแสดงบนหน้าแดชบอร์ดการจัดการปลั๊กอิน Text Domain สำหรับการทำให้เป็นสากล (Internationalization)Domain Path ระบุตำแหน่งของไฟล์ภาษาที่นี่

ใช้โค้ดฟังก์ชันหลัก

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

ก่อนอื่น เราต้องสร้างฟังก์ชันเพื่อแสดงคำทักทาย จากนั้นใช้ add_action ฟังก์ชันเพื่อเชื่อมต่อผลลัพธ์นี้กับแอ็กชันบางอย่างใน WordPress เช่น wp_footer。

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

// 定义一个函数来输出问候语
function my_first_plugin_display_greeting() {
    echo '<p style="position: fixed; bottom: 10px; left: 10px; background: #f1f1f1; padding: 10px; border-radius: 5px;">สวัสดีค่ะ ยินดีต้อนรับสู่เว็บไซต์ของฉัน</p>';
}

// 使用 add_action 钩子将函数挂载到 wp_footer 动作
add_action( 'wp_footer', 'my_first_plugin_display_greeting' );

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

เพิ่มตัวเลือกการจัดการสำหรับปลั๊กอิน

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

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

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

hosting.com 共享主机

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

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

ก่อนอื่น สร้างฟังก์ชันเพื่อแสดงเนื้อหา HTML ของหน้าการตั้งค่า

// 渲染插件设置页面的函数
function my_first_plugin_settings_page() {
    ?>
    <div class="wrap">
        <h1>การตั้งค่าคำทักทายของเว็บไซต์</h1>
        <form method="post" action="/th/options.php/" data-trp-original-action="options.php">
            <?php
            settings_fields( 'my_first_plugin_settings_group' );
            do_settings_sections( 'my-first-plugin' );
            submit_button();
            ?>
        <input type="hidden" name="trp-form-language" value="th"/></form>
    </div>
    &lt;?php
}

จากนั้น ใช้ add_action ฮุคที่ admin_menu ลงทะเบียนหน้านี้ในขั้นตอน

// 将设置页面添加到后台菜单
function my_first_plugin_add_admin_menu() {
    add_options_page(
        '问候语设置',          // 页面标题
        '站点问候语',          // 菜单标题
        'manage_options',      // 权限要求
        'my-first-plugin',     // 菜单别名
        'my_first_plugin_settings_page' // 渲染函数
    );
}
add_action( 'admin_menu', 'my_first_plugin_add_admin_menu' );

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

เพียงแค่หน้ายังไม่เพียงพอ เราจำเป็นต้องกำหนดฟิลด์ตั้งค่าเฉพาะ (เช่น ช่องป้อนข้อมูล, ช่องเลือก) และจัดการการบันทึกข้อมูล ซึ่งต้องใช้ API การตั้งค่าใน WordPress ของ register_setting、add_settings_section 和 add_settings_field ฟังก์ชันต่างๆ

แนะนำให้อ่าน จากศูนย์ถึงหนึ่ง: คู่มือและบทเรียนการพัฒนา WordPress Plugin ที่ครอบคลุม。

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

// 初始化插件的设置
function my_first_plugin_settings_init() {
    // 注册一个设置，将其保存到 `options` 表的 `my_first_plugin_greeting_text` 字段中
    register_setting( 'my_first_plugin_settings_group', 'my_first_plugin_greeting_text' );

// 在页面中添加一个设置区域
    add_settings_section(
        'my_first_plugin_section',
        '自定义问候语',
        null,
        'my-first-plugin'
    );

// 在设置区域中添加一个文本字段
    add_settings_field(
        'my_first_plugin_field',
        '问候语文本',
        'my_first_plugin_field_render',
        'my-first-plugin',
        'my_first_plugin_section'
    );
}
add_action( 'admin_init', 'my_first_plugin_settings_init' );

// 渲染文本输入框的函数
function my_first_plugin_field_render() {
    $option = get_option( 'my_first_plugin_greeting_text', '你好，欢迎来到我的网站！' );
    echo '<input type="text" name="my_first_plugin_greeting_text" value="' . esc_attr( $option ) . '" style="width: 300px;" />';
}

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

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

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

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

function my_first_plugin_display_greeting() {
    $greeting_text = get_option( 'my_first_plugin_greeting_text', '你好，欢迎来到我的网站！' );
    echo '<p style="position: fixed; bottom: 10px; left: 10px; background: #f1f1f1; padding: 10px; border-radius: 5px;">' . esc_html( $ข้อความทักทาย ) . '</p>';
}

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

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

การตรวจสอบและทำความสะอาดข้อมูล

ทุกครั้งที่คุณรับข้อมูลจากผู้ใช้ (เช่น $_POST, $_GET) หรือจากฐานข้อมูล คุณต้องสมมติว่าข้อมูลนั้นไม่น่าเชื่อถือ ก่อนที่จะแสดงผลในเบราว์เซอร์หรือบันทึกลงในฐานข้อมูล ต้องทำการตรวจสอบและทำความสะอาดข้อมูลเสมอ

สำหรับเนื้อหาที่ส่งออกไปยังหน้า HTML ใช้ฟังก์ชันเช่น esc_html()、esc_attr() 或 wp_kses_post() เพื่อหลีกเลี่ยงการโจมตีแบบ Cross-Site Scripting
สำหรับตัวแปรที่ใช้ในการสืบค้นฐานข้อมูล ควรใช้คำสั่งที่คอมไพล์ล่วงหน้าหรือวิธีการเช่น $wpdb->prepare() เพื่อป้องกันการโจมตีแบบ SQL Injection

ในตัวอย่างของเรา เมื่อบันทึกการตั้งค่า ฟังก์ชันของ WordPress register_setting จะทำการทำความสะอาดพื้นฐานโดยอัตโนมัติ เมื่อแสดงผล เราใช้ esc_html() เพื่อให้แน่ใจว่าแท็ก HTML ในข้อความทักทายจะถูกแปลงเป็นข้อความธรรมดาอย่างปลอดภัย

ใช้ nonce และการตรวจสอบสิทธิ์

เมื่อจัดการกับแบบฟอร์มที่ส่งมาจากหน้าการจัดการ ต้องตรวจสอบความถูกต้องของคำขอ ซึ่งรวมถึงการตรวจสอบสิทธิ์ผู้ใช้และการตรวจสอบ nonce

ในแบบฟอร์มของหน้าการตั้งค่า,settings_fields() ฟังก์ชันได้รวมการตรวจสอบ nonce โดยอัตโนมัติแล้ว แต่ถ้าคุณสร้างการจัดการ AJAX ที่กำหนดเองหรือแบบฟอร์มที่ไม่เป็นมาตรฐาน คุณต้องตรวจสอบด้วยตนเอง โดยทั่วไปจะใช้ current_user_can() เพื่อตรวจสอบสิทธิ์ และใช้ check_admin_referer() 或 wp_verify_nonce() เพื่อตรวจสอบ nonce

ตัวอย่างเช่น ในฟังก์ชันการจัดการการส่งแบบกำหนดเอง:

function my_plugin_handle_form_submit() {
    // 检查权限
    if ( ! current_user_can( 'manage_options' ) ) {
        wp_die( '权限不足' );
    }
    // 验证随机数
    if ( ! isset( $_POST['my_nonce_field'] ) || ! wp_verify_nonce( $_POST['my_nonce_field'], 'my_action' ) ) {
        wp_die( '安全校验失败' );
    }
    // ... 处理安全的数据 ...
}

สรุป

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

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

วิธีการเพิ่มการสนับสนุนหลายภาษาสำหรับปลั๊กอิน?

การเพิ่มการสนับสนุนสากล (i18n) ให้กับปลั๊กอิน ส่วนใหญ่เกี่ยวข้องกับการใช้ text domain และฟังก์ชันการแปล ขั้นแรก ตรวจสอบให้แน่ใจว่าได้ตั้งค่า Text Domain 和 Domain Path。ในโค้ด ให้ห่อสตริงทั้งหมดที่ต้องแปลด้วยฟังก์ชันแปล เช่น __() 或 _e() ใช้ฟังก์ชัน เช่น __() หรือ _e() เพื่อห่อหุ้มสตริง จากนั้นใช้เครื่องมือเช่น Poedit เพื่อสร้างไฟล์เทมเพลต POT และสร้างไฟล์แปล .mo และ .po ที่สอดคล้องกัน วางไว้ในไดเรกทอรีภาษาที่กำหนดไว้ในปลั๊กอิน

ตัวอย่างเช่น:echo esc_html( __( ‘Hello, World!’, ‘my-first-plugin’ ) );เมื่อผู้ใช้เปลี่ยนเป็นภาษาที่เกี่ยวข้อง WordPress จะโหลดไฟล์แปลที่สอดคล้องกันโดยอัตโนมัติ

ชื่อฟังก์ชันในปลั๊กอินควรหลีกเลี่ยงการขัดแย้งกับปลั๊กอินอื่นได้อย่างไร?

แนวทางปฏิบัติที่ดีที่สุดในการหลีกเลี่ยงความขัดแย้งของชื่อฟังก์ชันคือการใช้เนมสเปซ (PHP 5.3+) หรือเพิ่มคำนำหน้าที่ไม่ซ้ำกันให้กับฟังก์ชัน คลาส และค่าคงที่ทั้งหมด คำนำหน้าควรมีความเฉพาะตัวเพียงพอ โดยทั่วไปจะใช้ตัวย่อหรือชื่อเต็มของปลั๊กอิน

ตัวอย่างเช่น อย่าใช้ display_greeting()และควรใช้ my_first_plugin_display_greeting(). หากใช้ PHP namespace คุณสามารถประกาศที่ด้านบนของไฟล์ namespace MyFirstPlugin;จากนั้นใช้ชื่อฟังก์ชันแบบสั้นภายใน และเรียกใช้ภายนอกผ่านการแก้ไข namespace

หลังจากพัฒนาสำเร็จแล้วจะเผยแพร่ปลั๊กอินไปยังไดเรกทอรีทางการได้อย่างไร?

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

ปลั๊กอินจะรองรับความเข้ากันได้ย้อนหลังกับเวอร์ชัน WordPress เก่าอย่างไร?

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