คู่มือเริ่มต้นการพัฒนา WordPress Plugin: สร้างส่วนขยายฟังก์ชันแรกของคุณตั้งแต่ศูนย์

เตรียมความพร้อม: เข้าใจพื้นฐานของปลั๊กอิน WordPress

ก่อนเริ่มเขียนโค้ด การสร้างพื้นฐานทางทฤษฎีที่มั่นคงเป็นสิ่งสำคัญ ปลั๊กอิน WordPress โดยพื้นฐานคือชุดของไฟล์ PHP หนึ่งไฟล์หรือมากกว่า ซึ่งขยายหรือปรับเปลี่ยนฟังก์ชันหลักของ WordPress ผ่านHook（钩子）ระบบที่ WordPress จัดให้ ปลั๊กอินอาจมีขนาดเล็กเพียงเพิ่มชอร์ตโค้ดเดียว ไปจนถึงขนาดใหญ่ที่สร้างแอปพลิเคชันแอดมินเต็มรูปแบบ ปลั๊กอินทั้งหมดจะถูกเก็บไว้ใน/wp-content/plugins/ไดเรกทอรี โดยแต่ละปลั๊กอินจะมีโฟลเดอร์ของตัวเอง

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

สร้างปลั๊กอินแรก: โครงสร้างพื้นฐานและการเปิดใช้งาน

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

แนะนำให้อ่าน คู่มือเริ่มต้นการพัฒนา WordPress Plugin: สร้างส่วนขยายฟังก์ชันแรกของคุณตั้งแต่เริ่มต้น。

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

UltaHost WordPress โฮสติ้ง

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

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

<?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 ของคุณ ไปที่หน้า “ปลั๊กอิน” คุณจะเห็นปลั๊กอินชื่อ “ปลั๊กอินแรกของฉัน” ปรากฏในรายการ คลิก “เปิดใช้งาน” ปลั๊กอินของคุณก็จะถูกเปิดใช้งานอย่างเป็นทางการ แม้ว่าตอนนี้มันยังไม่ทำอะไรเลย

การใช้งานฟังก์ชันหลัก: ใช้ฮุคเพื่อเพิ่มเนื้อหา

จุดแข็งของ WordPress อยู่ที่Hook（钩子）ระบบ แบ่งออกเป็นAction（动作）和Filter（过滤器）สองประเภท Action hooks อนุญาตให้คุณแทรกโค้ดของคุณเองในจุดเวลาที่กำหนด (เช่น เมื่อโหลดหน้าเสร็จสิ้น เมื่อเผยแพร่บทความ) เพื่อดำเนินการฟังก์ชัน Filter hooks อนุญาตให้คุณปรับเปลี่ยนข้อมูลที่ส่งผ่านในกระบวนการ (เช่น เนื้อหาบทความ หัวเรื่อง)

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

// 这是一个安全措施，防止直接访问PHP文件
if ( ! defined( 'ABSPATH' ) ) {
    exit; // 如果ABSPATH未定义，则退出
}

/**
 * 在网站页脚输出自定义HTML内容
 */
function myfp_add_footer_text() {
    echo '<div style="text-align: center; padding: 20px; border-top: 1px solid #eee; margin-top: 40px;">';
    echo '<p>© ' . date('Y') . ' เว็บไซต์ของฉัน สงวนลิขสิทธิ์ทั้งหมด เนื้อหานี้สร้างโดย<strong>ปลั๊กอินแรกของฉัน</strong>สร้าง</p>';
    echo '</div>';
}
// 将我们的函数挂载到 `wp_footer` 动作钩子上
add_action( 'wp_footer', 'myfp_add_footer_text' );

ในโค้ดนี้ เรากำหนดฟังก์ชันก่อนmyfp_add_footer_text()ซึ่งมีหน้าที่ในการแสดงโค้ด HTML จากนั้น เราใช้add_action()ฟังก์ชันเพื่อ “ติดตั้ง” ฟังก์ชันที่กำหนดเองนี้ลงบนwp_footerฮุคนี้ ซึ่งหมายความว่าเมื่อใดก็ตามที่ WordPress ดำเนินการถึงwp_footerตำแหน่งเมื่อ (มักอยู่ในไฟล์ของธีเม)footer.phpฟังก์ชันของเราจะถูกเรียกโดยอัตโนมัติ เพื่อแสดงข้อมูลลิขสิทธิ์ที่เรากำหนดไว้ที่ด้านล่างของหน้า

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

ฟังก์ชันขั้นสูง: สร้างหน้าการจัดการและชอร์ตโค้ด

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

เพิ่มหน้าเซ็ตติ้งในเมนูการจัดการ

เราจะใช้add_menu_page()ฟังก์ชันนี้จะเพิ่มรายการใหม่ในเมนูด้านซ้ายของ WordPress แดชบอร์ด แก้ไขไฟล์ปลั๊กอินหลักและเพิ่มโค้ดต่อไปนี้:

/**
 * 注册插件管理菜单
 */
function myfp_add_admin_menu() {
    add_menu_page(
        '我的第一个插件设置', // 页面标题
        '我的插件',           // 菜单标题
        'manage_options',     // 所需权限
        'myfp-settings',      // 菜单slug
        'myfp_settings_page', // 显示页面内容的回调函数
        'dashicons-admin-plugins', // 图标（使用Dashicon）
        30                    // 菜单位置
    );
}
add_action( 'admin_menu', 'myfp_add_admin_menu' );

/**
 * 设置页面的HTML内容
 */
function myfp_settings_page() {
    // 检查用户权限
    if ( !current_user_can( 'manage_options' ) ) {
        return;
    }
    ?>
    <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
            // 未来可以在这里添加设置字段
            ?>
            <p>ฟังก์ชันขั้นสูงเพิ่มเติม (เช่น การบันทึกการตั้งค่า) จะถูกแนะนำในบทเรียนต่อๆ ไป</p>
        <input type="hidden" name="trp-form-language" value="th"/></form>
    </div>
    &lt;?php
}

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

hosting.com 共享主机

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

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

สร้างและลงทะเบียนชอร์ตโค้ด

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

/**
 * 短代码处理函数
 * @param array $atts 短代码属性
 * @param string $content 短代码包裹的内容
 * @return string 返回要替换的HTML
 */
function myfp_current_time_shortcode( $atts = [], $content = null ) {
    // 设置默认属性并合并用户传入的属性
    $atts = shortcode_atts(
        array(
            'format' => 'Y-m-d H:i:s',
        ),
        $atts,
        'current_time'
    );

// 根据format属性格式化当前时间
    $current_time = date( $atts['format'] );

// 返回输出内容
    return '<div class="myfp-time"><strong>เวลาปัจจุบัน:</strong> ' . esc_html( $เวลาปัจจุบัน ) . '</div>';
}
// 注册短代码 [current_time]
add_shortcode( 'current_time', 'myfp_current_time_shortcode' );

ตอนนี้คุณสามารถป้อน[current_time]ในกล่องข้อความบทความ หน้าหรือวิดเจ็ตใดก็ได้เพื่อแสดงเวลาในรูปแบบเริ่มต้น หรือใช้[current_time format="F j, Y"]เพื่อแสดงเวลาที่จัดรูปแบบเอง WordPress จะเรียกใช้ฟังก์ชันของเราโดยอัตโนมัติmyfp_current_time_shortcode()เพื่อประมวลผลและแทนที่ shortcode นี้

สรุป

ผ่านคู่มือนี้ คุณได้ทำขั้นตอนสำคัญในการสร้างปลั๊กอิน WordPress ที่มีฟังก์ชันสมบูรณ์ตั้งแต่เริ่มต้นแล้ว คุณเข้าใจโครงสร้างพื้นฐานของปลั๊กอิน ความสำคัญของคำอธิบายส่วนหัว และได้ฝึกฝนหัวใจสำคัญของการพัฒนา WordPress นั่นคือระบบ hook คุณประสบความสำเร็จในการใช้add_action()เพื่อเพิ่มเนื้อหาไปยังส่วนหน้าของเว็บไซต์ โดยใช้add_menu_page()สร้างอินเทอร์เฟซแอดมินและใช้งานadd_shortcode()ลงทะเบียนชอร์ตโค้ดสำหรับนักเขียนเนื้อหา

แนะนำให้อ่าน คู่มือเริ่มต้นการพัฒนา WordPress Plugin。

นี่เป็นเพียงจุดเริ่มต้นของโลกการพัฒนาเพล็กอิน จากที่นี่ คุณสามารถสำรวจด้านที่ซับซ้อนมากขึ้น เช่น: การสร้างตารางฐานข้อมูลเพื่อจัดเก็บข้อมูล, การใช้add_settings_section()和add_settings_field()สร้างหน้าตัวเลือกจริง, การจัดการการส่งฟอร์ม, การเพิ่มการโต้ตอบ AJAX, การสร้างประเภทโพสต์และแท็กซอโนมีที่กำหนดเอง, และการปฏิบัติตามมาตรฐานการเข้ารหัสและแนวปฏิบัติด้านความปลอดภัยของ WordPress เพื่อเผยแพร่เพล็กอินของคุณ ฝึกฝนและสำรวจต่อไป คุณจะสามารถพัฒนาเพล็กอิน WordPress ที่ทรงพลังและเป็นมืออาชีพได้

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

ปลั๊กอินต้องมีไฟล์กี่ไฟล์?

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

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

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

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

ทำไมปลั๊กอินของฉันถึงไม่ปรากฏในรายการหลังบ้าน?

โดยปกติแล้วปัญหานี้เกิดจากรูปแบบความคิดเห็นส่วนหัวของปลั๊กอินไม่ถูกต้องหรือเส้นทางไฟล์ผิดพลาด โปรดตรวจสอบให้แน่ใจว่าไฟล์ PHP หลักของปลั๊กอินของคุณอยู่โดยตรงภายใต้/wp-content/plugins/your-plugin-folder/ไดเรกทอรี และรูปแบบบล็อกความคิดเห็นด้านบนของไฟล์ถูกต้องสมบูรณ์ โดยเฉพาะอย่างยิ่งPlugin Name:บรรทัดนี้จำเป็นต้องมี หลังจากตรวจสอบเรียบร้อยแล้ว ให้รีเฟรชหน้าเพล็กอิน

ข้อแตกต่างระหว่าง Action Hooks และ Filter Hooks คืออะไร?

Action hook ใช้เพื่อ “รันโค้ดบางส่วน” ในเวลาที่กำหนด ไม่จำเป็นต้องส่งคืนค่า ใช้หลักเพื่อกระตุ้นฟังก์ชันเพิ่มเติม เช่น การเพิ่ม HTML, การส่งอีเมล Filter hook ใช้เพื่อ “แก้ไขข้อมูลบางอย่าง” ต้องส่งคืนค่า (มักเป็นค่าที่ป้อนเข้าไปหลังจากแก้ไขแล้ว) ใช้หลักเพื่อแทรกแซงก่อนที่จะแสดงผล เช่น การแก้ไขหัวข้อบทความ, การเพิ่มลิงก์ในเนื้อหา

จะลบ hook ที่เพิ่มไปแล้วอย่างปลอดภัยได้อย่างไร?

คุณสามารถใช้remove_action()或remove_filter()ฟังก์ชันเพื่อลบ hook ที่เพิ่มไว้ก่อนหน้า แต่ต้องมั่นใจว่าการลบเกิดขึ้นหลังจากที่เพิ่มไปแล้ว และพารามิเตอร์ความสำคัญต้องตรงกับของเดิมadd_action()或add_filter()ลำดับความสำคัญในนั้นสอดคล้องกัน โดยทั่วไปแนะนำให้ดำเนินการลบในฮุคการปิดใช้งานปลั๊กอินหรือภายใต้เงื่อนไขเฉพาะ