เรียนรู้การพัฒนา WordPress Plugin อย่างลึกซึ้ง: สร้างปลั๊กอินที่กำหนดเองตัวแรกของคุณตั้งแต่เริ่มต้น

พื้นฐานปลั๊กอิน WordPress และสภาพแวดล้อมการพัฒนา

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

เพื่อการพัฒนาอย่างมีประสิทธิภาพ คุณต้องการสภาพแวดล้อมการพัฒนาท้องถิ่น คุณสามารถใช้เครื่องมือเช่น XAMPP, MAMP, Local by Flywheel หรือ Docker เพื่อตั้งค่าเซิร์ฟเวอร์ที่มี PHP และ MySQL อย่างรวดเร็ว จากนั้นติดตั้งอินสแตนซ์ WordPress เวอร์ชันล่าสุด ในระหว่างกระบวนการพัฒนา แนะนำให้เปิดใช้งานwp-config.phpเปิดใช้งานในไฟล์WP_DEBUGเพื่อเปิดเผยข้อผิดพลาดได้ทันที

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

แนะนำให้อ่าน ธีม WordPress คืออะไร。

<?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
 */

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

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

UltaHost WordPress โฮสติ้ง

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

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

ไฟล์หลักของปลั๊กอินและการเริ่มต้นระบบ

ขั้นแรก ใน WordPresswp-content/pluginsสร้างโฟลเดอร์ใหม่ในไดเรกทอรี เช่นmy-first-pluginภายในโฟลเดอร์นั้น สร้างไฟล์ PHP หลัก ซึ่งสามารถตั้งชื่อเป็นmy-first-plugin.php。คัดลอกโค้ดคอมเมนต์ส่วนหัวด้านบนไปวาง

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

if ( ! defined( 'ABSPATH' ) ) {
	exit; // 防止直接访问文件
}

class My_First_Plugin {
    public function __construct() {
        // 构造函数，在这里挂载钩子
    }
}

// 初始化插件
new My_First_Plugin();

if ( ! defined( ‘ABSPATH’ ) )โค้ดบรรทัดนี้เป็นมาตรฐานความปลอดภัยในการพัฒนาปลั๊กอิน WordPress ใช้เพื่อป้องกันไม่ให้ผู้ใช้เข้าถึงไฟล์ปลั๊กอินของคุณโดยตรงผ่าน URL

ใช้ฮุคเพื่อเพิ่มเนื้อหาท้ายบทความ

สถาปัตยกรรมปลั๊กอินของ WordPress สร้างขึ้นบนระบบ “ฮุค” (Hooks) ซึ่งแบ่งออกเป็นแอ็กชัน (Action) และฟิลเตอร์ (Filter) แอ็กชันอนุญาตให้คุณรันโค้ดในช่วงเวลาที่กำหนด ในขณะที่ฟิลเตอร์อนุญาตให้คุณปรับเปลี่ยนข้อมูล

แนะนำให้อ่าน คู่มือขั้นสูงสุดสำหรับการเพิ่มประสิทธิภาพเว็บไซต์ WordPress: วิเคราะห์ตั้งแต่การตั้งค่าพื้นฐานไปจนถึงปลั๊กอินแคชทั้งหมด。

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

class My_First_Plugin {
    public function __construct() {
        // 将自定义方法挂载到‘the_content’过滤器上
        add_filter( 'the_content', array( $this, 'add_footer_to_content' ) );
    }

/**
     * 在文章内容后添加自定义页脚
     *
     * @param string $content 原始文章内容。
     * @return string 修改后的文章内容。
     */
    public function add_footer_to_content( $content ) {
        // 确保只在主循环的单篇文章页面显示
        if ( is_single() && in_the_loop() && is_main_query() ) {
            $custom_footer = '<div class="my-plugin-footer"><p>ขอบคุณที่อ่านบทความนี้! สร้างโดย [My First Plugin]</p></div>';
            $content .= $custom_footer;
        }
        return $content;
    }
}

add_filter()ฟังก์ชันจะลงทะเบียนเมธอดคลาสadd_footer_to_contentไปยังthe_contentตัวกรอง เมื่อ WordPress เตรียมแสดงเนื้อหาบทความ จะเรียกใช้เมธอดของเราและส่งผ่านเนื้อหาดั้งเดิมเข้ามา เราตรวจสอบเงื่อนไขเพื่อให้แน่ใจว่าจะเพิ่มส่วนท้ายเฉพาะในหน้าบทความเดี่ยวเท่านั้น เพื่อหลีกเลี่ยงการเพิ่มซ้ำในหน้าหลักหรือหน้ารวบรวมบทความ สุดท้าย เพิ่ม HTML ที่กำหนดเองต่อท้ายเนื้อหาแล้วส่งคืน

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

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

hosting.com 共享主机

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

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

สร้างหน้าเมนูการตั้งค่า

เราจำเป็นต้องเพิ่มหน้าย่อยภายใต้เมนู “การตั้งค่า” ในแถบการจัดการ WordPress ซึ่งต้องใช้add_options_page()ฟังก์ชัน ซึ่งมักจะถูกติดตั้งในadmin_menuฮุคแอ็กชัน

แรกสุด เพิ่มเมธอดใหม่ในคลาสปลั๊กอินเพื่อลงทะเบียนเมนูและหน้า:

class My_First_Plugin {
    // ... 之前的构造函数和方法 ...

public function __construct() {
        add_filter( 'the_content', array( $this, 'add_footer_to_content' ) );
        // 挂载后台管理菜单
        add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );
        // 挂载初始化设置选项
        add_action( 'admin_init', array( $this, 'settings_init' ) );
    }

public function add_admin_menu() {
        add_options_page(
            '我的第一个插件设置', // 页面标题
            '自定义页脚设置',     // 菜单标题
            'manage_options',     // 所需权限
            'my-first-plugin',    // 菜单slug
            array( $this, 'options_page_html' ) // 回调函数，用于输出页面HTML
        );
    }
}

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

ถัดไป เราจำเป็นต้องใช้ WordPress Settings API เพื่อลงทะเบียน บันทึก และตรวจสอบตัวเลือกอย่างปลอดภัย ซึ่งเกี่ยวข้องกับregister_setting(), add_settings_section()和add_settings_field()ฟังก์ชันต่างๆ

แนะนำให้อ่าน WooCommerce คืออะไร? บทความอธิบายฟังก์ชันหลักและสถานการณ์การใช้งาน。

public function settings_init() {
    // 注册一个设置选项组
    register_setting( 'my_first_plugin_settings', 'my_first_plugin_options' );

// 在页面中添加一个设置区域
    add_settings_section(
        'my_first_plugin_section',
        '页脚内容配置',
        array( $this, 'section_callback' ),
        'my-first-plugin'
    );

// 向该区域添加一个字段
    add_settings_field(
        'footer_text',
        '页脚显示文本',
        array( $this, 'footer_text_field_render' ),
        'my-first-plugin',
        'my_first_plugin_section'
    );
}

public function section_callback() {
    echo '<p>กำหนดค่าข้อความที่จะแสดงที่ส่วนท้ายของบทความที่นี่</p>';
}

public function footer_text_field_render() {
    $options = get_option( 'my_first_plugin_options' );
    $value = $options['footer_text'] ?? '感谢阅读本文！由【我的第一个插件】生成。'; // 默认值
    ?&gt;
    <input type='text' name='my_first_plugin_options[footer_text]' value='<?php echo esc_attr( $value ); ?>' style='width: 400px;'>
    <p class="description">รองรับแท็ก HTML อย่างง่าย เช่น <strong>, <em>, <a>。</p>
    <?php
}

public function 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( 'my_first_plugin_settings' );
            do_settings_sections( 'my-first-plugin' );
            submit_button();
            ?>
        <input type="hidden" name="trp-form-language" value="th"/></form>
    </div>
    &lt;?php
}

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

public function add_footer_to_content( $content ) {
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $options = get_option( 'my_first_plugin_options' );
        $footer_text = $options['footer_text'] ?? '感谢阅读本文！由【我的第一个插件】生成。';
        $custom_footer = '<div class="my-plugin-footer"><p>' . wp_kses_post( $footer_text ) . '</p></div>';
        $content .= $custom_footer;
    }
    return $content;
}

wp_kses_post()ฟังก์ชันรับรองว่าข้อความที่ผู้ใช้ป้อนอนุญาตเฉพาะแท็ก HTML ที่ปลอดภัย ซึ่งเป็นมาตรการรักษาความปลอดภัยที่สำคัญ

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

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

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

การทำให้ปลั๊กอินเป็นสากลและแนวทางปฏิบัติที่ดีที่สุด

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

ฟิลด์ข้อความและฟังก์ชันการแปล

ก่อนอื่น ตรวจสอบให้แน่ใจว่าในส่วนหัวของปลั๊กอินของคุณมีการกำหนดText Domainตัวอย่างเช่นmy-first-pluginจากนั้น ในทุกตำแหน่งของปลั๊กอินที่ต้องการแปลสตริง ให้ใช้ฟังก์ชันเฉพาะในการห่อหุ้ม

แก้ไขโค้ดก่อนหน้านี้ของเราเพื่อเพิ่มการสนับสนุนการแปลสำหรับข้อความเอาต์พุต:

// 在构造函数中加载翻译文件
public function __construct() {
    // ... 其他钩子 ...
    add_action( 'plugins_loaded', array( $this, 'load_textdomain' ) );
}

public function load_textdomain() {
    load_plugin_textdomain(
        'my-first-plugin',
        false,
        dirname( plugin_basename( __FILE__ ) ) . '/languages/'
    );
}

// 修改设置页面的字符串
public function section_callback() {
    echo '<p>' . esc_html__( '在这里配置显示在文章末尾的文本内容。', 'my-first-plugin' ) . '</p>';
}

public function footer_text_field_render() {
    $options = get_option( 'my_first_plugin_options' );
    $value = $options['footer_text'] ?? __( '感谢阅读本文！由【我的第一个插件】生成。', 'my-first-plugin' );
    ?&gt;
    <input type='text' name='my_first_plugin_options[footer_text]' value='<?php echo esc_attr( $value ); ?>' style='width: 400px;'>
    <p class="description">&lt;?php esc_html_e( &#039;支持简单的HTML标签，如 <strong>, <em>, <a>。', 'my-first-plugin' ); ?&gt;</p>
    &lt;?php
}

// 注意：用户在前台输入的“页脚文本”本身通常不需要翻译，因为它是由管理员设置的具体内容。

__()ใช้สำหรับแปลและส่งคืนสตริงesc_html__()ใช้สำหรับแปลและหนี HTML เอาต์พุต_e()ใช้สำหรับแปลและแสดงผลสตริงโดยตรง พารามิเตอร์ที่สองของฟังก์ชันคือโดเมนข้อความ ซึ่งต้องสอดคล้องกับที่ปลั๊กอินกำหนดไว้

ความปลอดภัย ประสิทธิภาพ และการจัดระเบียบโค้ด

นอกจากนี้ยังต้องปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดดังต่อไปนี้:
1. 安全：对所有用户输入进行验证、清理和转义。使用sanitize_text_field(), esc_html(), wp_kses_post()และฟังก์ชันอื่นๆ ใช้wp_nonce_field()ป้องกันการโจมตี CSRF
2. 性能：合理使用钩子，避免在每次页面加载时执行不必要的数据库查询。可以考虑对输出结果进行 transient 缓存。
3. 代码组织：对于复杂的插件，应将文件按功能模块拆分。主文件负责引导，类和方法放在includes/ไดเรกทอรี สินทรัพย์ส่วนหน้า (CSS, JS) ให้วางไว้ในassets/ไดเรกทอรี
4. 卸载清理：如果你的插件创建了数据库表或选项，应该提供卸载功能来清理数据。可以通过一个独立的uninstall.phpการสร้างกลไกการตรวจสอบประสิทธิภาพและการแจ้งเตือน

สรุป

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

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

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

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

วิธีการเพิ่มไฟล์ CSS และ JavaScript ที่กำหนดเองให้กับปลั๊กอิน

วิธีที่ถูกต้องคือการใช้wp_enqueue_style()和wp_enqueue_script()ฟังก์ชัน สำหรับทรัพยากรส่วนหน้า ควรติดตั้งกับwp_enqueue_scriptsบน Action Hook; สำหรับทรัพยากรในส่วนหลังบ้าน ให้ติดตั้งไว้ที่admin_enqueue_scriptsบนฮุค

ในคลาสปลั๊กอินของคุณ คุณสามารถเพิ่มเมธอดดังต่อไปนี้:

public function enqueue_frontend_assets() {
    wp_enqueue_style( ‘my-plugin-style’, plugin_dir_url( __FILE__ ) . ‘assets/css/style.css’, array(), ‘1.0.0’ );
}

จากนั้นในคอนสตรัคเตอร์ ผ่านทางadd_action( ‘wp_enqueue_scripts’, array( $this, ‘enqueue_frontend_assets’ ) );ลงทะเบียน วิธีนี้จะช่วยให้มั่นใจว่าการจัดการการพึ่งพาเป็นไปอย่างถูกต้อง และจะไม่ขัดแย้งกับปลั๊กอินหรือธีมอื่น

ผู้ใช้จะทำความสะอาดตัวเลือกข้อมูลที่ฉันสร้างขึ้นอย่างไรเมื่อถอนการติดตั้งปลั๊กอิน

WordPress มีสองวิธีหลัก วิธีแรกคือการลงทะเบียนฮุคการถอนการติดตั้ง แต่ไม่ค่อยใช้บ่อยในปลั๊กอินเชิงวัตถุ วิธีที่แนะนำและเป็นมาตรฐานมากขึ้นคือการสร้างuninstall.phpไฟล์ซึ่งอยู่ในระดับเดียวกับไฟล์ปลั๊กอินหลักของคุณ

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

if ( ! defined( ‘WP_UNINSTALL_PLUGIN’ ) ) {
    exit;
}
delete_option( ‘my_first_plugin_options’ );
// 如果有自定义表：$wpdb->query( “DROP TABLE IF EXISTS {$wpdb->prefix}my_table” );

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

กุญแจสำคัญในการรักษาความเข้ากันได้คือการใช้ฟังก์ชันและคุณสมบัติของเวอร์ชันใหม่อย่างรอบคอบ และจัดเตรียมทางเลือกสำหรับเวอร์ชันเก่า ก่อนเรียกใช้ฟังก์ชันที่อาจมีเฉพาะในเวอร์ชันใหม่, ใช้function_exists()ตรวจสอบ เช่น หากคุณต้องการใช้ฟังก์ชันที่นำเข้ามาในเวอร์ชัน 5.0wp_dateคุณสามารถทำได้:

if ( function_exists( ‘wp_date’ ) ) {
    $date = wp_date( get_option( ‘date_format’ ), $timestamp );
} else {
    $date = date_i18n( get_option( ‘date_format’ ), $timestamp );
}

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