การเริ่มต้นใช้งานแบบไม่มีพื้นฐาน: สอนคุณทีละขั้นตอนในการพัฒนา WordPress Plugin

สภาพแวดล้อมการพัฒนาและพื้นฐานการเตรียมตัวสำหรับปลั๊กอิน WordPress

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

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

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

เริ่มต้นจากการสร้างปลั๊กอินที่ง่ายที่สุด ปลั๊กอินนี้จะแสดงข้อความต้อนรับในแผงควบคุมของเว็บไซต์

แนะนำให้อ่าน คู่มือการวิเคราะห์ปลั๊กอิน WooCommerce อย่างลึกซึ้ง: ตั้งแต่การตั้งค่าขั้นพื้นฐานไปจนถึงการปรับแต่งขั้นสูง。

การเขียนหัวข้อความเห็นของปลั๊กอิน

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

UltaHost WordPress โฮสติ้ง

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

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

<?php
/**
 * Plugin Name: 我的第一个WordPress插件
 * 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
 */

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

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

ตอนนี้ มาลองเพิ่มฟังก์ชันง่ายๆ ให้กับปลั๊กอินนี้: แสดงการแจ้งเตือนแบบกำหนดเองที่ด้านบนของแถบจัดการ เราจะใช้ฟังก์ชันadmin_noticesฮุก

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

// 在管理后台添加一个欢迎提示
function my_first_plugin_admin_notice() {
    ?>
    <div class="notice notice-success is-dismissible">
        <p>ยินดีต้อนรับสู่ “ปลั๊กอิน WordPress แรกของฉัน”! คุณได้เปิดใช้งานปลั๊กอินนี้สำเร็จแล้ว</p>
    </div>
    &lt;?php
}
add_action( &#039;admin_notices&#039;, &#039;my_first_plugin_admin_notice&#039; );

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

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

ทำความเข้าใจกลไกหลักของปลั๊กอิน WordPress: ฮุคและตัวกรอง

การพัฒนาปลั๊กอิน WordPress อยู่ที่การโต้ตอบกับแกนหลักของ WordPress ซึ่งส่วนใหญ่ทำผ่านกลไก “ฮุค” ฮุคแบ่งออกเป็นสองประเภท: แอ็กชันและตัวกรอง

การใช้ฮุคแอ็กชัน

แอ็กชันฮุคอนุญาตให้คุณแทรกโค้ดที่กำหนดเองในช่วงเวลาที่เฉพาะเจาะจงของการดำเนินการของ WordPress เช่นเดียวกับที่เราเพิ่งใช้admin_noticesอีกตัวอย่างทั่วไปคือinitฮุค ซึ่งจะทำงานเมื่อ WordPress เริ่มต้น มักใช้ในการลงทะเบียน custom post types หรือ taxonomy

ตัวอย่างเช่น เราสามารถตั้งค่าตัวเลือกในระหว่างการเริ่มปลั๊กอินได้:

hosting.com 共享主机

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

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

function my_first_plugin_set_default_option() {
    // 如果选项不存在，则添加它
    if ( false === get_option( 'my_first_plugin_greeting' ) ) {
        add_option( 'my_first_plugin_greeting', 'Hello from my plugin!' );
    }
}
add_action( 'init', 'my_first_plugin_set_default_option' );

การใช้งานฟิลเตอร์ฮุค

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

function my_first_plugin_add_copyright( $content ) {
    // 仅对主循环中的单篇文章生效
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $copyright = '<p><em>บทความนี้อยู่ภายใต้การคุ้มครองลิขสิทธิ์ โปรดระบุแหล่งที่มาเมื่อนำไปใช้ต่อ</em></p>';
        $content .= $copyright;
    }
    return $content;
}
add_filter( 'the_content', 'my_first_plugin_add_copyright' );

ในตัวอย่างนี้ ฟังก์ชันmy_first_plugin_add_copyrightรับต้นฉบับ$contentหลังจากผ่านการตรวจสอบเงื่อนไข (เพื่อให้แน่ใจว่ามีผลเฉพาะในหน้าบทความเดี่ยว) แล้ว ได้เพิ่ม HTML ต่อท้าย และสุดท้ายต้องส่งคืนค่าที่ถูกแก้ไขแล้ว$contentกลับไป

สร้างปลั๊กอินที่ซับซ้อนยิ่งขึ้น: ชอร์ตโค้ดและหน้าตั้งค่า

ปลั๊กอินที่สมบูรณ์มักต้องมีส่วนติดต่อผู้ใช้ด้านหน้า (เช่น ชอร์ตโค้ด) และการตั้งค่าด้านหลัง (เช่น หน้าตั้งค่า)

แนะนำให้อ่าน เครื่องมืออันทรงพลังของการทำ SEO: สร้างกลยุทธ์ SEO สำหรับเว็บไซต์ WordPress ตั้งแต่เริ่มต้น。

สร้างชอร์ตโค้ดแบบกำหนดเอง

shortcode ช่วยให้ผู้ใช้สามารถแทรกเนื้อหาแบบไดนามิกของปลั๊กอินในบทความหรือหน้าเว็บได้โดยใช้แท็กง่ายๆ (เช่น[my_greeting]) แทรกฟังก์ชันปลั๊กอินในบทความหรือหน้า ลงทะเบียนชอร์ตโค้ดโดยใช้add_shortcode()ฟังก์ชัน

// 注册一个简单的问候短代码
function my_first_plugin_greeting_shortcode( $atts ) {
    // 使用 shortcode_atts 定义默认属性并合并用户输入
    $attributes = shortcode_atts( array(
        'name' => '访客',
    ), $atts );

// 获取我们之前设置的选项
    $greeting_text = get_option( 'my_first_plugin_greeting', 'Hello' );

// 生成输出
    $output = '<div class="my-plugin-greeting">';
    $output .= esc_html( $greeting_text ) . ', ' . esc_html( $attributes['name'] ) . '!';
    $output .= '</div>';

return $output;
}
add_shortcode( 'my_greeting', 'my_first_plugin_greeting_shortcode' );

ตอนนี้ผู้ใช้สามารถป้อนข้อมูลในตัวแก้ไข[my_greeting name="张三"]ส่วนหน้าแสดงผล “Hello from my plugin! สวัสดีคุณจางซาน!”

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

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

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

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

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

// 在后台“设置”菜单下添加子菜单页
function my_first_plugin_add_settings_page() {
    add_options_page(
        '我的插件设置',          // 页面标题
        '我的第一个插件',        // 菜单标题
        'manage_options',       // 所需权限
        'my-first-plugin',      // 菜单slug
        'my_first_plugin_render_settings_page' // 回调函数，用于输出页面内容
    );
}
add_action( 'admin_menu', 'my_first_plugin_add_settings_page' );

// 渲染设置页面的HTML
function my_first_plugin_render_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
}

// 注册设置、区域和字段
function my_first_plugin_register_settings() {
    register_setting(
        &#039;my_first_plugin_settings_group&#039;, // 设置组名
        &#039;my_first_plugin_greeting&#039;        // 选项名
    );

add_settings_section(
        &#039;my_first_plugin_main_section&#039;,    // 区域ID
        &#039;问候语设置&#039;,                     // 区域标题
        null,                            // 区域回调函数（可为空）
        &#039;my-first-plugin&#039;                // 页面slug
    );

add_settings_field(
        &#039;greeting_text_field&#039;,            // 字段ID
        &#039;问候语文本&#039;,                     // 字段标题
        &#039;my_first_plugin_greeting_field_callback&#039;, // 字段HTML的回调函数
        &#039;my-first-plugin&#039;,                // 页面slug
        &#039;my_first_plugin_main_section&#039;    // 所属区域ID
    );
}
add_action( &#039;admin_init&#039;, &#039;my_first_plugin_register_settings&#039; );

// 渲染问候语输入字段
function my_first_plugin_greeting_field_callback() {
    $greeting = get_option( &#039;my_first_plugin_greeting&#039; );
    echo &#039;<input type="text" name="my_first_plugin_greeting" value="' . esc_attr( $greeting ) . '" class="regular-text" />';
}

โค้ดนี้สร้างหน้าตั้งค่า WordPress มาตรฐาน เมื่อผู้ใช้แก้ไขคำทักทายในหน้าการตั้งค่าและบันทึก shortcode ที่สร้างไว้ก่อนหน้านี้จะใช้ข้อความคำทักทายใหม่

สรุป

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

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

การพัฒนาปลั๊กอิน WordPress ต้องใช้ความรู้ภาษาโปรแกรมใดบ้าง

การพัฒนาปลั๊กอิน WordPress จำเป็นต้องมีความรู้ภาษา PHP เป็นหลัก เนื่องจากตัว核心ของ WordPress ถูกเขียนด้วย PHP นอกจากนี้ คุณยังต้องคุ้นเคยกับ HTML, CSS และ JavaScript พื้นฐาน เพื่อใช้ในการสร้างอินเทอร์เฟซส่วนหน้าและตรรกะการโต้ตอบของปลั๊กอิน การมีความเข้าใจพื้นฐานเกี่ยวกับ SQL จะช่วยในการจัดการการดำเนินการกับข้อมูลที่ซับซ้อนมากขึ้นอีกด้วย

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

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

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

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

ไฟล์ CSS และ JavaScript ด้านหน้าของปลั๊กอินควรโหลดอย่างถูกต้องได้อย่างไร

เพื่อหลีกเลี่ยงความขัดแย้งและรับประกันประสิทธิภาพ ไม่ควรนำทรัพยากรเข้าโดยตรงในไฟล์เทมเพลต วิธีที่ถูกต้องคือการใช้wp_enqueue_style()和wp_enqueue_script()ฟังก์ชัน สำหรับทรัพยากรของแผงควบคุมหลังบ้าน ควรติดตั้งไว้ที่admin_enqueue_scriptsฮุก; สำหรับทรัพยากรของส่วนหน้าเว็บไซต์ ควรติดตั้งไว้ที่wp_enqueue_scriptsฮุก วิธีนี้จะช่วยให้แน่ใจว่าการพึ่งพาอาศัยกันเป็นไปอย่างถูกต้อง และไฟล์เดียวกันจะไม่ถูกโหลดซ้ำซ้อน