บทเรียนการพัฒนา WordPress Plugin: สร้างปลั๊กอินแรกของคุณตั้งแต่เริ่มต้น

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

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

ขั้นแรก คุณต้องติดตั้งสภาพแวดล้อมเซิร์ฟเวอร์เว็บบนคอมพิวเตอร์ท้องถิ่นของคุณ ซึ่งมักเรียกว่า “สภาพแวดล้อมเซิร์ฟเวอร์ท้องถิ่น” หนึ่งในตัวเลือกที่ได้รับความนิยมมากที่สุดคือ XAMPP หรือ MAMP ซึ่งรวม Apache, MySQL/MariaDB และ PHP เข้าด้วยกัน อีกทางเลือกหนึ่งที่ทรงพลังคือการใช้ Docker เพื่อตั้งค่าสภาพแวดล้อมที่ใกล้เคียงกับสภาพแวดล้อมการผลิต ไม่ว่าคุณจะเลือกวิธีใด โปรดตรวจสอบให้แน่ใจว่าบอร์ด PHP (แนะนำ 7.4 หรือสูงกว่า) และบอร์ด MySQL ของคุณเข้ากันได้กับสภาพแวดล้อมโฮสต์ WordPress ส่วนใหญ่

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

แนะนำให้อ่าน เรียนรู้อย่างลึกซึ้ง: คู่มือฉบับสมบูรณ์ในการพัฒนา WordPress Plug-in ตั้งแต่เริ่มต้น。

สุดท้ายและเป็นขั้นตอนที่สำคัญที่สุด: เตรียมตัวแก้ไขโค้ด แนะนำให้ใช้ Visual Studio Code, PhpStorm หรือ Sublime Text ซึ่งมีคุณสมบัติเช่นการเน้นสีโค้ด การแนะนำอัจฉริยะ และการดีบัก โดยเฉพาะสำหรับการพัฒนา PHP คุณสมบัติเหล่านี้จะช่วยให้คุณหลีกเลี่ยงข้อผิดพลาดทางไวยากรณ์ระดับพื้นฐานได้มากมาย

UltaHost WordPress โฮสติ้ง

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

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

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

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

สร้างไฟล์หลักของปลั๊กอิน

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

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

<?php
/**
 * Plugin Name:       我的第一个插件
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       这是一个学习WordPress插件开发的示例插件，用于展示“Hello World”。
 * Version:           1.0.0
 * Author:            你的名字
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 * Domain Path:       /languages
 */

ในโค้ดด้านบน,Plugin Name เป็นฟิลด์ที่จำเป็นต้องกรอก ส่วนอื่นๆ เป็นทางเลือกแต่แนะนำให้กรอก ข้อมูลนี้จะแสดงในหน้า “ปลั๊กอิน” ของการจัดการ WordPressText Domain ใช้สำหรับการสนับสนุนหลายภาษา (Internationalization) ต้องตรงกับข้อความที่ใช้ในการเรียกฟังก์ชันแปลภาษาในภายหลัง

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

กำหนดค่าคงที่พื้นฐานของโปรแกรมเสริม

นิสัยที่ดีในการพัฒนา plugin คือการกำหนดค่าคงที่มีประโยชน์ตั้งแต่เริ่มต้น เช่น เส้นทางไฟล์และ URL ของ plugin เพื่อให้สามารถอ้างอิงได้สะดวกในโค้ดต่อไป สิ่งนี้สามารถหลีกเลี่ยงการเข้ารหัสเส้นทางแบบแข็ง (hardcode path) ทำให้โค้ดบำรุงรักษาและย้ายได้ง่ายขึ้น

คุณสามารถเพิ่มโค้ดต่อไปนี้ในไฟล์หลัก หลังจากข้อมูลหัว plugin เพื่อกำหนดค่าคงที่:

// 防止直接访问
if ( ! defined( 'ABSPATH' ) ) {
    exit; // 如果 ABSPATH 未定义，则退出
}

// 定义插件路径和URL常量
define( 'MFP_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
define( 'MFP_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
define( 'MFP_PLUGIN_VERSION', '1.0.0' );

ที่นี่plugin_dir_path( FILE ) 和 plugin_dir_url( FILE ) เป็นฟังก์ชันหลักที่ WordPress มอบให้ สามารถรับเส้นทางไดเรกทอรีและ URL ของไฟล์ plugin ปัจจุบันได้อย่างปลอดภัยMFP_PLUGIN_VERSION ค่าคงที่ใช้สำหรับเก็บหมายเลขเวอร์ชันของ plugin เพื่อความสะดวกในการนำเข้า script, style หรือการเปรียบเทียบเวอร์ชัน

hosting.com 共享主机

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

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

การใช้งานฟังก์ชันหลักและการใช้งานฮุค

แก่นแท้ของการพัฒนา WordPress Plugin คือการใช้ระบบ “ฮุค” (Hooks) ฮุคแบ่งออกเป็นสองประเภท: แอ็กชัน (Actions) และฟิลเตอร์ (Filters) ฮุคเหล่านี้ช่วยให้คุณสามารถแทรกโค้ดของคุณในเวลาที่เฉพาะเจาะจงของ WordPress (เช่น การโหลดหน้าเว็บ, การบันทึกโพสต์) หรือปรับเปลี่ยนข้อมูลที่ฟังก์ชันอื่นส่งออกมา

เพิ่มแอ็กชันฮุคง่ายๆ

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

เพิ่มฟังก์ชันในไฟล์หลัก แล้วเชื่อมต่อผ่าน add_action เพื่อเชื่อมต่อมันเข้ากับ wp_footer ฮุกนี้

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

/**
 * 在网站页脚输出自定义文本
 */
function mfp_display_footer_text() {
    echo '<p style="text-align: center; color: #666;">ขอบคุณที่ใช้ปลั๊กอิน WordPress ตัวแรกของฉัน!</p>';
}
add_action( 'wp_footer', 'mfp_display_footer_text' );

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

ใช้ Filter Hook เพื่อปรับเปลี่ยนเนื้อหา

ตัวกรองใช้สำหรับการปรับเปลี่ยนค่าที่มีอยู่เดิม ตัวอย่างเช่น เราต้องการแก้ไขหัวข้อบทความ โดยเพิ่มข้อความ “【แนะนำ】” ไว้หน้าทุกหัวข้อ ซึ่งสามารถทำได้ผ่าน the_title ตัวกรอง

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

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

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

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

/**
 * 在所有文章标题前添加前缀
 * @param string $title 原始标题
 * @return string 修改后的标题
 */
function mfp_add_prefix_to_title( $title ) {
    // 确保只在主循环中修改，避免影响后台列表等其他地方
    if ( is_single() && in_the_loop() ) {
        $title = '【推荐】' . $title;
    }
    return $title;
}
add_filter( 'the_title', 'mfp_add_prefix_to_title' );

ตัวอย่างง่ายๆ นี้แสดงให้เห็นถึงพลังของตัวกรอง: คุณสามารถตรวจสอบเงื่อนไข (เช่น is_single() ตรวจสอบว่าเป็นหน้าบทความเดี่ยวหรือไม่) และปรับเปลี่ยนเนื้อหาเฉพาะในบริบทที่กำหนดเท่านั้น

เพิ่มหน้าจัดการและการปฏิบัติด้านความปลอดภัย

ปลั๊กอินที่มีฟังก์ชันสมบูรณ์มักต้องการหน้าตั้งค่าสำหรับผู้ดูแลเว็บไซต์ และการรักษาความปลอดภัยของโค้ดเป็นสิ่งสำคัญอย่างยิ่ง

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

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

ขั้นแรก สร้างฟังก์ชันเพื่อสร้างเนื้อหา HTML ของหน้าตั้งค่า จากนั้นลงทะเบียนเมนูนี้ผ่านฟังก์ชันที่ติดตั้งกับ admin_menu ฮุคแอ็กชัน

/**
 * 渲染插件设置页面的HTML内容
 */
function mfp_render_settings_page() {
    // 检查用户权限
    if ( ! current_user_can( 'manage_options' ) ) {
        wp_die( __( '你没有足够的权限访问此页面。', 'my-first-plugin' ) );
    }
    ?>
    <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
            // 后续可以在这里添加设置字段
            // settings_fields( 'mfp_options_group' );
            // do_settings_sections( 'mfp-settings-page' );
            // submit_button( '保存设置' );
            ?>
        <input type="hidden" name="trp-form-language" value="th"/></form>
    </div>
    &lt;?php
}

/**
 * 注册插件管理菜单
 */
function mfp_add_admin_menu() {
    add_menu_page(
        &#039;我的第一个插件设置&#039;, // 页面标题
        &#039;我的插件&#039;,          // 菜单标题
        &#039;manage_options&#039;,    // 所需权限 (manage_options)
        &#039;mfp-settings-page&#039;, // 菜单slug
        &#039;mfp_render_settings_page&#039;, // 回调函数
        &#039;dashicons-admin-plugins&#039;, // 图标 (Dashicons)
        80                   // 菜单位置
    );
}
add_action( &#039;admin_menu&#039;, &#039;mfp_add_admin_menu&#039; );

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

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

ข้อมูลใดๆ ที่ได้รับจากผู้ใช้หรือส่งออกไปยังเบราว์เซอร์ต้องถูกประมวลผลเพื่อป้องกันการโจมตี Cross-Site Scripting (XSS) และ SQL Injection WordPress มีฟังก์ชันความปลอดภัยที่หลากหลาย:

• การหนีผลลัพธ์: ใช้ฟังก์ชันเช่น esc_html()、esc_attr()、esc_url() 和 wp_kses_post() เพื่อทำความสะอาดเนื้อหาที่ส่งออกไปยัง HTML
• การตรวจสอบข้อมูล: ใช้ ฟังก์ชันเช่น เพื่อทำความสะอาดข้อมูล sanitize_text_field()、sanitize_email() ใช้ฟังก์ชันเช่น `sanitize_text_field()` เพื่อทำความสะอาดข้อมูลที่ส่งมาจากฟอร์ม
• Nonce key: สำหรับการดำเนินการฟอร์มที่เกี่ยวข้องกับการแก้ไขข้อมูล ต้องใช้ nonce wp_nonce_field() 和 wp_verify_nonce() เพื่อตรวจสอบความถูกต้องของคำขอ

ความปลอดภัยคือเส้นชีวิตของการพัฒนา plugin ต้องสร้างนิสัยที่ดีตั้งแต่เริ่มต้น

สรุป

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

ปลั๊กอินง่ายๆ ระดับ “Hello World” นี้ ได้รวมองค์ประกอบหลักที่จำเป็นสำหรับปลั๊กอินเชิงพาณิชย์ไว้แล้ว: โครงสร้างมาตรฐาน การใช้งาน hooks หน้าจัดการหลังบ้าน และการคำนึงถึงความปลอดภัย จากจุดเริ่มต้นนี้ คุณสามารถลองผสานรวม Settings API ของ WordPress เพื่อสร้างตัวเลือกที่แท้จริง เขียนตารางฐานข้อมูลที่กำหนดเอง หรือสร้าง shortcodes และวิดเจ็ตที่ซับซ้อนมากขึ้น จำไว้ว่า การเรียนรู้คู่มือนักพัฒนาอย่างต่อเนื่องและอ้างอิงโค้ดจากปลั๊กอินโอเพนซอร์สคุณภาพสูง เป็นวิธีที่ดีที่สุดในการพัฒนาทักษะ

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

### วิธีดีบั๊กปลั๊กอิน WordPress ของฉัน?
การเปิดโหมดดีบั๊กของ WordPress เป็นขั้นตอนแรก ในของคุณ wp-config.php ในไฟล์, ตั้งค่า WP_DEBUG ค่าของค่าคงที่เป็น trueคุณยังสามารถตั้งค่า WP_DEBUG_LOG เป็น trueเพื่อบันทึกข้อผิดพลาดลงใน /wp-content/debug.log ไฟล์ เพื่อหลีกเลี่ยงไม่ให้ข้อผิดพลาดแสดงบนหน้าเว็บและส่งผลต่อผู้ใช้

นอกจากนี้ การใช้เครื่องมือนักพัฒนาของเบราว์เซอร์ (F12) ในแผง Console และ Network เพื่อดูข้อผิดพลาด JavaScript และคำขอ API รวมถึงการใช้เครื่องมือดีบัก PHP เช่น Xdebug ที่ผสานรวมกับโปรแกรมแก้ไขโค้ดของคุณ (เช่น VS Code) สำหรับการดีบักแบบเบรกพอยต์ ล้วนเป็นวิธีการดีบักระดับมืออาชีพที่มีประสิทธิภาพสูง

ทำไมปลั๊กอินของฉันถึงแสดงข้อผิดพลาดร้ายแรง (Fatal Error) เมื่อเปิดใช้งาน?

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

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

จะทำให้ปลั๊กอินของฉันรองรับหลายภาษา (สากลนิยม) ได้อย่างไร?

WordPress ใช้เฟรมเวิร์ก GNU gettext เพื่อการทำให้เป็นสากล (i18n) และการทำให้เป็นท้องถิ่น (l10n) ก่อนอื่น ตามที่บทเรียนแสดง ให้ตั้งค่าข้อมูลส่วนหัวของไฟล์หลักให้ถูกต้อง Text Domain（เช่น my-first-plugin）และ Domain Path。

ในโค้ดปลั๊กอิน สำหรับสตริงทั้งหมดที่ต้องการแปล ใช้ฟังก์ชันการแปลเพื่อห่อหุ้ม เช่น:__( ‘文本’, ‘my-first-plugin’ ) 或 _e( ‘文本’, ‘my-first-plugin’ )จากนั้น ใช้เครื่องมือเช่น Poedit เพื่อสแกนสตริงเหล่านี้ในโค้ด สร้างไฟล์เทมเพลต .pot และสร้างไฟล์ .po และ .mo สำหรับภาษาที่เกี่ยวข้อง (เช่น ภาษาจีน zh_CN) วางไว้ใน /languages/ ไดเรกทอรีอย่างถูกต้องหรือไม่

การพัฒนาปลั๊กอินควรโต้ตอบกับฐานข้อมูลอย่างปลอดภัยอย่างไร?

อย่าเขียนคำสั่ง SQL โดยตรงเพื่อรวมข้อมูลที่ผู้ใช้ป้อนเข้า ต้องใช้คลาสดำเนินการฐานข้อมูลที่ WordPress จัดให้ $wpdbซึ่งมีวิธีการเช่น $wpdb->prepare() ที่สามารถประมวลผลคำสั่ง SQL ด้วยการเตรียมคำสั่งอย่างปลอดภัย เพื่อป้องกันการโจมตีแบบ SQL Injection ได้อย่างมีประสิทธิภาพ

ตัวอย่างเช่น การเขียนคำสั่งเพื่อดึงข้อมูลควรเป็นดังนี้:

global $wpdb;
$user_input = $_POST['some_input'];
$safe_query = $wpdb->prepare( "SELECT * FROM {$wpdb->prefix}table WHERE column = %s", $user_input );
$results = $wpdb->get_results( $safe_query );

ในขณะเดียวกัน ควรมีการตรวจสอบและทำความสะอาดข้อมูลที่ผู้ใช้ป้อนอย่างเข้มงวด เช่น การใช้ sanitize_text_field() ฟังก์ชันต่างๆ