เรียนรู้การพัฒนา WordPress Plugins: สร้างโมดูลส่วนขยายแรกของคุณตั้งแต่เริ่มต้น

ทำความเข้าใจโครงสร้างพื้นฐานของปลั๊กอิน WordPress

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

ปลั๊กอินที่ง่ายที่สุดต้องการเพียงไฟล์หลักหนึ่งไฟล์และส่วนหัวความคิดเห็นของปลั๊กอิน ส่วนหัวความคิดเห็นของปลั๊กอินเป็นสิ่งสำคัญที่ WordPress ใช้ระบุปลั๊กอิน ซึ่งต้องอยู่ที่ด้านบนสุดของไฟล์ PHP หลัก ตัวอย่างเช่น ปลั๊กอินที่มีชื่อmy-first-plugin.phpไฟล์ เนื้อหาส่วนเริ่มต้นควรมีลักษณะดังนี้:

<?php
/**
 * Plugin Name:       我的第一个插件
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       这是一个用于演示的简单WordPress插件。
 * Version:           1.0.0
 * Author:            你的名字
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 */

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

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

หลักการทำงานหลักของปลั๊กอินเกี่ยวข้องกับ “ฮุค” ฮุคแบ่งออกเป็นสองประเภท: แอ็กชัน (Action) และฟิลเตอร์ (Filter) ฮุคแอ็กชันอนุญาตให้คุณรันโค้ดที่กำหนดเองในช่วงเวลาที่เฉพาะเจาะจง (เช่น เมื่อเผยแพร่โพสต์ โหลดหน้า) ฮุคฟิลเตอร์อนุญาตให้คุณปรับเปลี่ยนข้อมูลที่ถูกสร้างขึ้นในระหว่างกระบวนการ (เช่น เนื้อหาโพสต์ หัวเรื่อง) โค้ดปลั๊กอินของคุณส่วนใหญ่ทำงานผ่านadd_action()和add_filter()สองฟังก์ชันนี้ “ถูกติดตั้ง” ไว้บนฮุคเหล่านี้

UltaHost WordPress โฮสติ้ง

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

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

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

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

เลือกเครื่องมือเซิร์ฟเวอร์ท้องถิ่นที่เหมาะสม

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

เริ่มต้นไดเรกทอรีและไฟล์ปลั๊กอิน

ในเว็บไซต์ WordPress ท้องถิ่นของคุณwp-content/plugins/ไดเรกทอรี สร้างโฟลเดอร์แยกสำหรับปลั๊กอินของคุณ ชื่อโฟลเดอร์ควรใช้อักษรพิมพ์เล็ก ตัวเลข และยัติภังค์ และควรตรงกับชื่อไฟล์หลักของปลั๊กอินให้มากที่สุด เช่น สร้างโฟลเดอร์greeting-pluginและสร้างไฟล์หลักภายในgreeting-plugin.php。

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

แนะนำให้อ่าน การวิเคราะห์เชิงลึกเกี่ยวกับการพัฒนา WordPress Plugins: จากเริ่มต้นสู่การปรับแต่งที่มีประสิทธิภาพ。

greeting-plugin/
├── greeting-plugin.php      // 主文件，包含插件头部注释和核心逻辑
├── includes/                // 存放核心功能类或函数文件
├── admin/                   // 存放后台管理界面相关文件
├── public/                  // 存放前端功能相关文件
├── assets/                  // 存放CSS、JavaScript和图片资源
│   ├── css/
│   ├── js/
│   └── images/
└── languages/               // 存放国际化翻译文件（可选）

การใช้งานฟังก์ชันหลักและการจัดการหลังบ้าน

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

สร้างฟังก์ชันพื้นฐาน

ขั้นแรก ในไฟล์หลักgreeting-plugin.phpใต้ความคิดเห็นส่วนหัว เราเขียนฟังก์ชันหลักdisplay_greeting()ใช้สำหรับดึงข้อความทักทายและเตรียมผลลัพธ์

function display_greeting() {
    // 从WordPress选项中获取存储的问候语，默认为“欢迎光临！”
    $greeting_text = get_option('my_greeting_text', '欢迎光临！');
    // 将问候语进行安全转义后返回
    return '<p class="custom-greeting">' . esc_html($ข้อความทักทาย) . '</p>';
}

เพื่อให้ข้อความทักทายนี้แสดงหลังเนื้อหาบทความ เราจำเป็นต้องใช้ action hookthe_contentเราสร้างฟังก์ชันใหม่append_greeting_to_content()และเชื่อมโยงมันเข้ากับ hook นั้น

hosting.com 共享主机

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

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

function append_greeting_to_content( $content ) {
    // 只在单篇文章和页面中追加问候语
    if ( is_single() || is_page() ) {
        $content .= display_greeting();
    }
    return $content;
}
// 将函数挂载到‘the_content’过滤器
add_filter( 'the_content', 'append_greeting_to_content' );

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

เพื่อให้ผู้ใช้สามารถกำหนดคำทักทายเองได้ เราจำเป็นต้องเพิ่มหน้าการตั้งค่าในแอดมินของ WordPress โดยทั่วไปแล้วadmin/สร้างไฟล์แยกต่างหากในไดเรกทอรีย่อยเพื่อจัดการ เช่นadmin/settings-page.php。

เริ่มต้นด้วยการใช้ในไฟล์หลักadd_action()ติดตั้งฟังก์ชันสำหรับสร้างเมนูการจัดการ

// 仅在后台加载时引入管理页面代码
if ( is_admin() ) {
    require_once plugin_dir_path( __FILE__ ) . 'admin/settings-page.php';
}

在admin/settings-page.phpในไฟล์ เราเขียนตรรกะสำหรับการสร้างเมนูและการจัดการฟอร์ม ฟังก์ชันหลักคือadd_options_page()。

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

function my_greeting_add_admin_menu() {
    add_options_page(
        '问候语设置',          // 页面标题
        '自定义问候语',        // 菜单标题
        'manage_options',      // 所需权限
        'greeting-settings',   // 菜单slug
        'my_greeting_settings_page' // 用于显示页面内容的回调函数
    );
}
add_action( 'admin_menu', 'my_greeting_add_admin_menu' );

function my_greeting_settings_page() {
    ?>
    <div class="wrap">
        <h1>การตั้งค่าคำทักทาย</h1>
        <form method="post" action="/th/options.php/" data-trp-original-action="options.php">
            <?php
            settings_fields( 'greeting_settings_group' ); // 设置组名
            do_settings_sections( 'greeting-settings' ); // 页面slug
            submit_button();
            ?>
        <input type="hidden" name="trp-form-language" value="th"/></form>
    </div>
    &lt;?php
}

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

function my_greeting_settings_init() {
    register_setting( 'greeting_settings_group', 'my_greeting_text' );

add_settings_section(
        'greeting_settings_section',
        '编辑问候文本',
        null,
        'greeting-settings'
    );

add_settings_field(
        'my_greeting_field',
        '问候语内容',
        'my_greeting_field_render',
        'greeting-settings',
        'greeting_settings_section'
    );
}
function my_greeting_field_render() {
    $value = get_option( 'my_greeting_text', '欢迎光临！' );
    echo '<input type="text" name="my_greeting_text" value="' . esc_attr( $value ) . '" class="regular-text">';
}
add_action( 'admin_init', 'my_greeting_settings_init' );

ตอนนี้ผู้ใช้สามารถแก้ไขข้อความได้ในหน้า “การตั้งค่า” -> “คำทักทายแบบกำหนดเอง” และคำทักทายที่อัปเดตแล้วจะปรากฏที่ส่วนท้ายของเนื้อหาบทความและหน้าในส่วนหน้าเว็บ

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

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

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

ความปลอดภัยของปลั๊กอิน การปรับปรุง และการเตรียมการเผยแพร่

ปลั๊กอินที่มีคุณภาพไม่เพียงแต่ต้องทำงานได้ แต่ยังต้องปลอดภัย มีประสิทธิภาพ และบำรุงรักษาได้ง่าย

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

ความปลอดภัยเป็นปัจจัยสำคัญอันดับแรก ข้อมูลทั้งหมดที่ได้รับจากผู้ใช้หรือฐานข้อมูลและแสดงผลไปยังส่วนหน้าต้องได้รับการหลีกเลี่ยงอักขระพิเศษ ใช้ฟังก์ชันที่ WordPress จัดเตรียมไว้ เช่นesc_html()、esc_attr()、wp_kses_post()เป็นต้น ในการจัดการการส่งแบบฟอร์มและคำขอที่ไม่ใช่ AJAX ต้องใช้wp_verify_nonce()和check_admin_referer()เพื่อตรวจสอบความถูกต้องของคำขอ ป้องกันการโจมตีแบบข้ามไซต์ (CSRF)

สำหรับสคริปต์หรือสไตล์ชีตส่วนหน้าที่ปลั๊กอินนำเข้ามา ต้องใช้wp_enqueue_script()和wp_enqueue_style()เพื่อลงทะเบียนและโหลดอย่างถูกต้อง ซึ่งจะช่วยให้การอ้างอิงถูกต้องและหลีกเลี่ยงความขัดแย้ง พร้อมกันนี้ ให้ใช้กับวัตถุสคริปต์ของคุณwp_localize_script()เพื่อส่งตัวแปร PHP ไปยัง JavaScript อย่างปลอดภัย

ดำเนินการระหว่างประเทศและท้องถิ่น

เพื่อให้ปลั๊กอินสามารถใช้งานได้ทั่วโลก จำเป็นต้องรองรับการใช้งานระหว่างประเทศ ซึ่งหมายความว่าคุณต้องห่อหุ้มสตริงข้อความทั้งหมดที่ผู้ใช้เห็นในปลั๊กอินด้วย__()或_e()ฟังก์ชันการแปล ในส่วนความคิดเห็นหัวของไฟล์หลักText Domainต้องตรงกับชื่อไดเรกทอรีปลั๊กอิน ตัวอย่างเช่น:
Text Domain: greeting-plugin

จากนั้นคุณสามารถใช้เครื่องมือแปล (เช่น Poedit) เพื่อสร้าง.potไฟล์เทมเพลตที่นักแปลสามารถใช้สร้าง.po和.moไฟล์ และเก็บไว้ในไดเรกทอรีปลั๊กอินlanguages/ในโฟลเดอร์

เตรียมเผยแพร่ไปยังไดเรกทอรีอย่างเป็นทางการของ WordPress

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

สรุป

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

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

การพัฒนา Plugin ต้องเชี่ยวชาญ PHP หรือไม่?

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

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

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

ปลั๊กอินของฉันจะขัดแย้งกับธีมหรือปลั๊กอินอื่นหรือไม่?

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

ฉันจำเป็นต้องสร้างตารางข้อมูลแยกต่างหากสำหรับปลั๊กอินของฉันหรือไม่?

ในกรณีส่วนใหญ่ ไม่จำเป็นและไม่แนะนำให้สร้างตารางฐานข้อมูลใหม่โดยตรง WordPress มี Options API (สำหรับจัดเก็บข้อมูลคู่คีย์-ค่า) และ Post Meta/User Meta API (สำหรับจัดเก็บข้อมูลที่เกี่ยวข้องกับโพสต์และผู้ใช้) ที่ครอบคลุมความต้องการในการจัดเก็บข้อมูลมากกว่า 90% ขึ้นไป ควรพิจารณาใช้เฉพาะเมื่อจำเป็นต้องจัดเก็บข้อมูลจำนวนมากที่มีความสัมพันธ์ซับซ้อนและต้องการการสืบค้นที่มีประสิทธิภาพ$wpdbการสร้างตารางที่กำหนดเองด้วยคลาส แต่จะเพิ่มความซับซ้อนของปลั๊กอินอย่างมาก

วิธีการเพิ่มตัวเลือกการตั้งค่าสำหรับปลั๊กอินของฉัน

ตามที่กล่าวไว้ก่อนหน้านี้ วิธีมาตรฐานคือการใช้ WordPress Settings API ชุด API นี้จัดการด้านความปลอดภัย (เช่น การตรวจสอบ nonce) การตรวจสอบสิทธิ์ผู้ใช้ และการแสดงผลอินเทอร์เฟซให้คุณ ขั้นตอนรวมถึง: การใช้add_menu_page()หรือฟังก์ชันที่ได้มา (เช่นadd_options_page()) เพิ่มเมนูและหน้า จากนั้นใช้register_setting()、add_settings_section()和add_settings_field()เพื่อกำหนดและแสดงฟิลด์การตั้งค่าเฉพาะ ซึ่งปลอดภัยและเป็นมาตรฐานมากกว่าการสร้างแบบฟอร์มด้วยตนเองและการจัดการการส่ง