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

การเตรียมการก่อนเริ่มพัฒนา

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

การติดตั้งสภาพแวดล้อมการพัฒนาท้องถิ่น

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

ทำความเข้าใจไฟล์หลักของปลั๊กอิน

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

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

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

ตอนนี้ เริ่มจากส่วนพื้นฐานที่สุด มาสร้างปลั๊กอินง่ายๆ ที่มีฟังก์ชันการทำงานจริงกัน

UltaHost WordPress โฮสติ้ง

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

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

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

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

<?php
/**
 * Plugin Name:       我的第一个插件
 * Plugin URI:        https://yourwebsite.com/my-first-plugin
 * Description:       这是一个用于学习的简单插件，用于在文章末尾添加自定义文本。
 * Version:           1.0.0
 * Author:            你的名字
 * Author URI:        https://yourwebsite.com
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 */

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

การใช้งานพื้นฐาน: กรองเนื้อหาบทความ

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

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

แนะนำให้อ่าน วิธีสร้างธีม WordPress มืออาชีพ: คู่มือฉบับสมบูรณ์ตั้งแต่เริ่มต้นจนถึงการเปิดตัว。

// 在文章内容末尾添加自定义文本
function myfp_add_custom_text_to_content( $content ) {
    // 确保只在主循环的单篇文章页面添加
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $custom_text = '<p><strong>ขอบคุณสำหรับการอ่าน! บทความนี้สนับสนุนโดย “ปลั๊กอินแรกของฉัน”</strong></p>';
        $content .= $custom_text;
    }
    return $content;
}
// 将我们的函数挂载到 ‘the_content’ 过滤器上
add_filter( 'the_content', 'myfp_add_custom_text_to_content' );

โค้ดนี้กำหนดชื่อที่เรียกว่า myfp_add_custom_text_to_content ของฟังก์ชัน มันรับเนื้อหาบทความ $content เป็นพารามิเตอร์ ผ่านการตรวจสอบเงื่อนไขเพื่อให้แน่ใจว่าจะเพิ่มข้อความเฉพาะในหน้าโพสต์เดียวของเว็บไซต์ด้านหน้าเท่านั้น และหลีกเลี่ยงการทำงานในหน้าอื่นๆ (เช่น หน้ารายการ) จากนั้น มันจะเพิ่มย่อหน้า HTML ที่กำหนดเองต่อท้ายเนื้อหาต้นฉบับ และส่งคืนเนื้อหาที่แก้ไขแล้ว สุดท้าย ใช้ add_filter() ฟังก์ชันเพื่อ “เชื่อม” ฟังก์ชันที่กำหนดเองเข้ากับตัวกรองหลักของ WordPress the_content ดังนั้น ทุกครั้งที่ WordPress เตรียมแสดงเนื้อหาบทความ ฟังก์ชันของเราจะถูกดำเนินการก่อน

หลังจากบันทึกไฟล์แล้ว ไปที่หน้าเว็บไซต์ด้านหน้าเพื่อดูบทความใด ๆ คุณจะพบว่าข้อความขอบคุณที่เราเพิ่มไว้ปรากฏที่ด้านล่างของหน้าแล้ว

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

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

hosting.com 共享主机

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

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

สร้างเมนูการจัดการปลั๊กอิน

ก่อนอื่น เราต้องเพิ่มเมนูใหม่ในแถบด้านข้างการจัดการของ WordPress หลังบ้าน ซึ่งต้องใช้ฟังก์ชัน add_action() ฟังก์ชันและ admin_menu ฮุก

// 添加管理菜单
function myfp_add_admin_menu() {
    add_options_page(
        '我的第一个插件设置', // 页面标题
        '我的插件设置',       // 菜单标题
        'manage_options',    // 权限要求
        'my-first-plugin',   // 菜单 slug
        'myfp_options_page_html' // 显示设置页面的回调函数
    );
}
add_action( ‘admin_menu’， ‘myfp_add_admin_menu’ );

add_options_page() จะสร้างเมนูย่อยภายใต้เมนูหลัก “การตั้งค่า” ฟังก์ชันนี้ต้องการพารามิเตอร์หลายตัว: ชื่อหน้า, ชื่อเมนู, สิทธิ์ผู้ใช้, ตัวระบุเมนูเฉพาะ (slug) และชื่อฟังก์ชัน callback สำหรับแสดงเนื้อหา HTML ของหน้าการตั้งค่า myfp_options_page_html。

การสร้างหน้าการตั้งค่าและการบันทึกข้อมูล

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

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

// 渲染设置页面的HTML
function myfp_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( ‘myfp_settings’ );
            // 输出设置区域
            do_settings_sections( ‘my-first-plugin’ );
            // 输出提交按钮
            submit_button( ‘保存设置’ );
            ?>
        <input type="hidden" name="trp-form-language" value="th"/></form>
    </div>
    ‘myfp_field_custom_text’ ]
    );
}
add_action( ‘admin_init’， ‘myfp_settings_init’ );

// 渲染文本框的HTML
function myfp_field_custom_text_html() {
    // 从数据库获取已保存的值
    $options = get_option( ‘myfp_options’ );
    $value = $options[‘myfp_field_custom_text’] ?? ‘’； // 使用空合并运算符，如果不存在则赋空值
    ?&gt;
    <input type="“text”"
           id="“myfp_field_custom_text”"
           name="“myfp_options[myfp_field_custom_text]”"
           value="“NO NUMERIC NOISE KEY" 1000”
 class="“regular-text”">
    &lt;?php
}

โค้ดนี้ทำงานผ่าน register_setting、add_settings_section 和 add_settings_field และฟังก์ชันอื่น ๆ อีกมากมาย ใช้ WordPress Settings API เพื่อสร้างหน้าตั้งค่าที่มีช่องป้อนข้อความอย่างถูกต้องตามมาตรฐาน เนื้อหาที่ผู้ใช้ป้อนจะถูกบันทึกอย่างปลอดภัยใน wp_options ตารางข้อมูล myfp_options บันทึก

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

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

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

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

function myfp_add_custom_text_to_content( $content ) {
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $options = get_option( ‘myfp_options’ );
        $custom_text = $options[‘myfp_field_custom_text’] ?? ‘’；
        if ( ! empty( $custom_text ) ) {
            $content .= ‘<p><strong>’ . esc_html( $custom_text ) . ‘</strong></p>’；
        }
    }
    return $content;
}

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

การปฏิบัติขั้นสูงในการพัฒนาและเตรียมปล่อยปลั๊กอิน

เมื่อฟังก์ชันพื้นฐานเสร็จสิ้น เราจำเป็นต้องพิจารณาความแข็งแรง ความสามารถในการบำรุงรักษาของปลั๊กอิน และวิธีการแบ่งปันให้ผู้อื่นใช้งาน

เพิ่มความปลอดภัยและการสนับสนุนสากล

ความปลอดภัยเป็นสิ่งสำคัญที่สุดในการพัฒนาปลั๊กอิน ในตัวอย่างด้านบน เราได้ใช้ esc_html() 和 esc_attr() ฟังก์ชันเพื่อหลีกหนีการส่งออก ป้องกันการโจมตี XSS เมื่อจัดการข้อมูลนำเข้าจากผู้ใช้ ดำเนินการสืบค้นฐานข้อมูล หรือนำเข้าไฟล์ภายนอก ต้องใช้ฟังก์ชันความปลอดภัยที่ WordPress จัดให้เสมอ เช่น wpdb->prepare()、sanitize_text_field() 和 check_admin_referer() เป็นต้น

นอกจากนี้ เพื่อให้ปลั๊กอินสามารถใช้งานได้โดยผู้ใช้ทั่วโลก การทำให้เป็นสากล (i18n) เป็นสิ่งจำเป็น เราต้องห่อหุ้มสตริงทั้งหมดที่หันหน้าไปทางผู้ใช้ในปลั๊กอินด้วยฟังก์ชันการแปลของ WordPress ซึ่งต้องแก้ไขโค้ดก่อนหน้าของเรา:

1. 在插件头部注释中已指定 Text Domain: my-first-plugin。
2. 加载文本域。通常在主文件底部添加：add_action( ‘plugins_loaded’， function() { load_plugin_textdomain( ‘my-first-plugin’， false， dirname( plugin_basename( FILE ) ) . ‘/languages/’ ); } );。
3. 包裹字符串。例如，将设置区域的标题改为 ( ‘自定义文本设置’， ‘my-first-plugin’ )เปลี่ยนชื่อเมนูเป็น ( ‘我的插件设置’， ‘my-first-plugin’ )ด้วยวิธีนี้ ผู้แปลสามารถทำได้ผ่าน .po/.mo ไฟล์ให้เวอร์ชันภาษาอื่นสำหรับสตริงเหล่านี้

เตรียมปลั๊กอินสำหรับเผยแพร่ในไดเรกทอรีทางการ

หากคุณต้องการส่งปลั๊กอินไปยังไดเรกทอรีปลั๊กอินทางการของ WordPress.org คุณต้องปฏิบัติตามมาตรฐานต่าง ๆ:
1. 代码规范：遵守 WordPress 编码标准。
2. 文件结构：除主文件外，通常还需要 README.txt(อธิบายปลั๊กอิน สำหรับหน้าดัชนี)uninstall.php(จัดการการล้างข้อมูลเมื่อถอนการติดตั้งปลั๊กอิน) เป็นต้น
3. SVN 仓库：官方目录使用 Subversion (SVN) 进行版本管理，你需要将你的插件代码提交到指定的 SVN 仓库。
4. 元数据：README.txt จำเป็นต้องเขียนตามรูปแบบเฉพาะ ซึ่งรวมถึงชื่อปลั๊กอิน คำอธิบาย วิธีการติดตั้ง คำถามที่พบบ่อย บันทึกการอัปเดต เป็นต้น

สรุป

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

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

ไฟล์หลักของปลั๊กอินต้องมีชื่ออะไร?

การตั้งชื่อไฟล์หลักของปลั๊กอินไม่มีข้อกำหนดบังคับ แต่ต้องลงท้ายด้วย .php โดยทั่วไป เพื่อความชัดเจนและไม่ซ้ำกัน เราจะใช้ชื่อเดียวกับโฟลเดอร์ปลั๊กอินหรือชื่อที่อธิบายฟังก์ชันการทำงานของปลั๊กอิน เช่น my-awesome-plugin.phpWordPress รู้จักปลั๊กอินโดยการอ่านบล็อกความคิดเห็นเฉพาะในส่วนหัวของไฟล์นี้

ทำไมปลั๊กอินของฉันจึงไม่แสดงในเมนูหลังบ้าน?

นี่มักเกิดจากหลายสาเหตุ ประการแรก โปรดตรวจสอบว่าปลั๊กอินถูกเปิดใช้งานสำเร็จหรือไม่ ประการที่สอง ตรวจสอบ add_menu_page() พารามิเตอร์สิทธิ์ผู้ใช้ (capability) ในฟังก์ชันหรือฟังก์ชันที่คล้ายกัน เพื่อให้แน่ใจว่าผู้ใช้ที่เข้าสู่ระบบในปัจจุบันมีสิทธิ์ที่เกี่ยวข้อง (เช่น manage_options). สุดท้าย ตรวจสอบว่าฟังก์ชันของคุณถูกติดตั้งอย่างถูกต้องผ่าน add_action(‘admin_menu’， …) หรือไม่ ข้อผิดพลาดทางไวยากรณ์ PHP ใดๆ อาจทำให้การเริ่มต้นปลั๊กอินล้มเหลวทั้งหมด

วิธีดีบั๊กข้อผิดพลาด PHP ในปลั๊กอิน?

ในขั้นตอนการพัฒนา แนะนำให้เปิดโหมดดีบักของ WordPress เปิดไฟล์ wp-config.php ในไดเรกทอรีรากของเว็บไซต์ ตรวจสอบให้แน่ใจว่าการตั้งค่าต่อไปนี้เปิดใช้งานแล้ว:
define( ‘WP_DEBUG’， true );
define( ‘WP_DEBUG_LOG’， true ); // 将错误记录到 /wp-content/debug.log
define( ‘WP_DEBUG_DISPLAY’， false ); // 不建议在页面上显示，以免破坏布局
ดังนั้น ข้อมูลข้อผิดพลาดจะถูกบันทึกลงในไฟล์บันทึก เพื่อให้สะดวกในการค้นหาปัญหา ก่อนเผยแพร่ปลั๊กอิน โปรดปิดโหมดดีบักให้เรียบร้อย

ข้อมูลตัวเลือกปลั๊กอินถูกบันทึกไว้ที่ไหน?

การใช้ปลั๊กอิน add_option() 或 update_option() ข้อมูลที่บันทึกโดยฟังก์ชันจะถูกเก็บไว้ในฐานข้อมูล WordPress โดยค่าเริ่มต้นในตาราง wp_options (คำนำหน้าตารางอาจแตกต่างกัน) ใช้ฟังก์ชัน get_option() เพื่ออ่านข้อมูลเหล่านี้ สำหรับโครงสร้างข้อมูลที่ซับซ้อนมากขึ้น บางครั้งอาจมีการสร้างตารางฐานข้อมูลแบบกำหนดเอง แต่ต้องจัดการด้วยความระมัดระวังมากขึ้น

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

คุณต้องใช้ฟังก์ชันการแปลของ WordPress เพื่อห่อหุ้มสตริงทั้งหมดที่เผยให้ผู้ใช้เห็น ที่ใช้บ่อยที่สุดคือ __(‘字符串’， ‘text-domain’) 和 _e(‘字符串’， ‘text-domain’)จากนั้น ใช้เครื่องมือเช่น Poedit เพื่อแยกสตริงเหล่านี้ออกมา สร้างไฟล์แปล .pot และสร้างภาษาที่เกี่ยวข้อง（เช่น zh_CN.po 和 .moของไฟล์แปล สุดท้าย วางไฟล์ภาษาภายในไดเรกทอรีปลั๊กอิน /languages/ และใช้ในระหว่างการเริ่มต้นปลั๊กอิน load_plugin_textdomain() ในระหว่างการเริ่มต้นปลั๊กอิน