Forbereidende werkzaamheden en opzet van de omgeving
Voordat je begint met schrijven van code, heb je een geschikte ontwikkelomgeving nodig. Dit omvat een lokale installatie van WordPress, een code-editor en enkele basiskennis van PHP. Voor lokale ontwikkeling worden tools als XAMPP, MAMP of Local by Flywheel aanbevolen; deze maken het mogelijk om snel een serveromgeving met PHP en MySQL op te zetten op je lokale computer.
Maak een basisdirectory en -bestanden voor het plugin.
Elk WordPress-plugin moet een hoofdbestand hebben; dit bestand vormt de ingangspunt voor het plugin. Eerst moet je dit hoofdbestand in WordPress instellen. wp-content/plugins Maak een nieuwe map in de map. my-first-pluginVervolgens maak je in die map een hoofd-PHP-bestand, dat meestal dezelfde naam heeft als de map. my-first-plugin.php。
De opening van deze hoofdfile moet een standaard commentaar bevatten met informatie over het plugin. WordPress gebruikt deze informatie om het plugin in de backend-beheeromgeving te herkennen en weergeven.
Aanbevolen leesmateriaal Van nul naar één: In deze handleiding leert u stap voor stap de belangrijkste technieken van WordPress-pluginontwikkeling.。
<?php
/**
* Plugin Name: 我的第一个插件
* 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
* Domain Path: /languages
*/Het begrijpen van de basisstructuur van het ontwikkelen van WordPress plugins
Een volledig functionerende plugin bestaat meestal uit meer dan één bestand. Naast het hoofdbestand kunnen er ook bestanden voor JavaScript, CSS, afbeeldingen en andere bronbestanden zijn, evenals taalbestanden voor internationaal gebruik. Een goed georganiseerde directorystructuur helpt bij het ordenen en onderhouden van het codebestand.
Een aan te raden structuur is als volgt:
- my-first-plugin/ (Plugin-wortelmap)
- my-first-plugin.php (Primary file)
- includes/ (Filen met de kernfuncties of -methoden)
- admin/ (De code die betrekking heeft met de backend-beheerinterface is opgeslagen hier.)
- public/ (Bevat code voor de front-end-weergave)
- assets/ (Plaats voor CSS, JavaScript, afbeeldingen en andere bronnen)
- languages/ (Plaatsing van internationale vertaalmappen)
Core PHP-code schrijven
Alle functionaliteiten van het plugin worden gerealiseerd met PHP-code. WordPress biedt een groot aantal mogelijkheden om plugins te ontwikkelen.动作钩子和过滤器钩子Dit is de basis voor de interactie tussen plugins en het kernbestand van WordPress.
Een eenvoudige kortcode-functionaliteit implementeren
Shortcodes zijn krachtige hulpmiddelen die het gebruikers gemakkelijk maken om plug-in-functies in artikelen of pagina's in te bouwen. We gaan een simpel shortcode maken dat een groet op de pagina weergeeft.
In je hoofdbestand… my-first-plugin.php Under the header comments, add the following functions and hooks:
Aanbevolen leesmateriaal Diepgravend inzicht in het ontwikkelen van WordPress-plug-ins: van nul tot één je eerste functionaliteit bouwen。
// 注册短代码
function mfp_greeting_shortcode( $atts ) {
// 使用 shortcode_atts 设置默认参数并合并用户传入的参数
$atts = shortcode_atts( array(
'name' => '访客',
), $atts, 'mfp_greeting' );
// 返回要显示的内容
return '<p>Hallo, '. esc_html($atts['name'])'. ‘! Welkom bij mijn eerste plugin.</p>'php
add_shortcode('mfp_greeting', 'mfp_greeting_shortcode');Nu kunnen gebruikers tekst invoeren in de artikeleditor. [mfp_greeting name=“小明”]Op de front-end wordt dan het bericht weergegeven: “Hallo, Xiaoming! Welkom bij mijn eerste plugin.”
Een instellingsoptie toevoegen aan de backend
Om de functionaliteiten van een plugin te kunnen configureren, is het meestal nodig om een instellingenpagina toe te voegen. Hier wordt demonstreerd hoe je een submenupagina kunt toevoegen aan het “Instellingen”-menu.
Allereerst gebruiken we... add_action De hook wordt geregistreerd en geconfigureerd tijdens de initialisatie door de administrator.
// 初始化插件设置
function mfp_settings_init() {
// 注册一个新的设置 section
add_settings_section(
'mfp_settings_section', // section ID
'我的插件设置', // 标题
'mfp_settings_section_callback', // 回调函数，用于输出 section 描述
'general' // 显示在哪个设置页，这里是“常规”设置页
);
// 在 section 内注册一个字段
add_settings_field(
'mfp_default_greeting', // 字段 ID
'默认问候人名', // 字段标题
'mfp_default_greeting_callback', // 渲染字段输入框的回调函数
'general', // 设置页面
'mfp_settings_section' // 所属 section
);
// 在 WordPress 的 `option` 表中注册这个设置
register_setting( 'general', 'mfp_default_greeting' );
}
add_action( 'admin_init', 'mfp_settings_init' );Vervolgens worden de twee callback-functies die eerder zijn gebruikt gedefinieerd, om de interface te renderen:
// Section 描述的回调函数
function mfp_settings_section_callback() {
echo '<p>Hier configureer ik de opties voor mijn eerste plugin.</p>';
}
// 字段输入框的回调函数
function mfp_default_greeting_callback() {
// 从数据库获取已保存的值，如果没有则使用默认值
$option = get_option( 'mfp_default_greeting', 'WordPress 用户' );
// 输出一个输入框
echo '<input type="text" name="mfp_default_greeting" value="' . esc_attr( $option ) . '" />';
}Nu kunt u deze instellingsoptie zien onderaan de pagina “Instellingen -> Algemeen” in het WordPress-administratiepaneel.
Front-end resource management en interactie met Ajax
Moderne plugins hebben meestal hun eigen stijl en interactie-logica nodig. WordPress biedt standaardmethoden om CSS- en JavaScript-bestanden veilig te registreren en te laden.
Aanbevolen leesmateriaal Vanaf nul: waarom je zou kiezen voor het ontwikkelen van WordPress plugins?。
CSS en JavaScript op veilige manier laden
Vergeet nooit om direct in je PHP-bestanden geen bepaalde code op te schrijven. <link> 或 <script> De resourcelpaden zijn hardgecodeerd in de labels. Dit zou niet moeten gebeuren; er zou een betere manier moeten worden gebruikt om deze paden op te halen. wp_enqueue_style 和 wp_enqueue_script Functie.
// 注册并加载前端资源
function mfp_enqueue_public_assets() {
// 加载一个 CSS 文件
wp_enqueue_style(
'mfp-public-style', // 样式表句柄
plugin_dir_url( __FILE__ ) . 'assets/css/public-style.css', // 样式表 URL
array(), // 依赖项
'1.0.0' // 版本号，可用于清除缓存
);
// 加载一个 JavaScript 文件
wp_enqueue_script(
'mfp-public-script', // 脚本句柄
plugin_dir_url( __FILE__ ) . 'assets/js/public-script.js', // 脚本 URL
array( 'jquery' ), // 依赖项，这里依赖 jQuery
'1.0.0',
true // 是否在页面底部加载
);
// 重要：将 PHP 变量安全地传递到 JavaScript
wp_localize_script(
'mfp-public-script',
'mfp_ajax_object', // 在 JS 中访问的对象名
array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'mfp_ajax_nonce' ),
'default_name' => get_option( 'mfp_default_greeting', 'WordPress 用户' )
)
);
}
// 在前端页面加载资源
add_action( 'wp_enqueue_scripts', 'mfp_enqueue_public_assets' );
// 在后台管理页面加载资源（如果需要）
// add_action( 'admin_enqueue_scripts', 'mfp_enqueue_admin_assets' );Een simpel Ajax-verzoek implementeren:
Ajax maakt het mogelijk om met de server te communiceren zonder de pagina opnieuw te laden. WordPress beschikt over een ingebouwde Ajax-verwerker.
Allereerst, in het front-end JavaScript-bestand: public-script.js Een verzoek wordt verzonden naar:
jQuery(document).ready(function($) {
$('#my-button').on('click', function(e) {
e.preventDefault();
$.post(
mfp_ajax_object.ajax_url, // WordPress 提供的 Ajax URL
{
action: 'mfp_get_server_time', // 触发的 PHP 钩子标识
nonce: mfp_ajax_object.nonce, // 安全随机数
},
function(response) {
if (response.success) {
$('#result-container').html('服务器时间：' + response.data);
} else {
alert('请求失败：' + response.data);
}
}
);
});
});Vervolgens wordt deze vraag verwerkt op de PHP-site. Er zijn aparte verwerkingsfuncties nodig voor ingelogde en oningelogde gebruikers (of beide kunnen worden verwerkt tegelijkertijd).
// 处理 Ajax 请求的函数
function mfp_ajax_get_server_time() {
// 验证 nonce，防止 CSRF 攻击
check_ajax_referer( 'mfp_ajax_nonce', 'nonce' );
// 处理逻辑
$server_time = current_time( 'mysql' );
// 返回成功响应（JSON 格式）
wp_send_json_success( $server_time );
}
// 为登录用户注册处理函数
add_action( 'wp_ajax_mfp_get_server_time', 'mfp_ajax_get_server_time' );
// 为未登录用户注册处理函数（如果功能允许）
add_action( 'wp_ajax_nopriv_mfp_get_server_time', 'mfp_ajax_get_server_time' );Internationalisatie van plugins en voorbereiding op publicatie
Om je plugin beschikbaar te maken voor WordPress-gebruikers overal ter wereld, is internationalisering (i18n) een essentieel stap. Het is ook van belang om de plugin grondig te testen en te optimaliseren voordat je hem publiceert.
De tekstvertaling wordt gerealiseerd met de gettext-functie.
WordPress gebruikt het GNU gettext-framework voor vertalingen. Alle teksten die bedoeld zijn voor de gebruiker moeten worden omhuld met specifieke functies.
De vorige kortere codefunctie moet worden gewijzigd zodat deze vertalingen ondersteunt.
function mfp_greeting_shortcode_i18n( $atts ) {
$atts = shortcode_atts( array(
'name' => __( '访客', 'my-first-plugin' ), // 默认值也可翻译
), $atts, 'mfp_greeting' );
// 使用 sprintf 和 __ 函数组合翻译字符串
return '<p>' . sprintf( __( '你好，%s！欢迎使用我的第一个插件。', 'my-first-plugin' ), esc_html( $atts['name'] ) ) . '</p>'add_shortcode( 'mfp_greeting', 'mfp_greeting_shortcode_i18n' );Je moet tools gebruiken zoals Poedit om al die elementen in de plugin te scannen die op elkaar lijken. __(‘文本’, ‘my-first-plugin’) Een string die is gemaakt van... .pot Eerst een templatebestand maken, en vervolgens voor elke taal (bijvoorbeeld Chinees) een corresponderend bestand aanmaken. .po En de gecompileerde versie .mo De bestanden worden vervolgens in de gewenste map geplaatst. /languages Inhoudsopgave.
Voer de laatste testen uit en schoonmaken van de code.
Voordat je de plugin publiceert, moet je de volgende controles uitvoeren:
1. 功能测试：在全新的 WordPress 安装上激活插件，测试所有功能（短代码、设置、Ajax等）是否按预期工作。
2. 代码审查：检查所有用户输入是否都使用了 esc_html, esc_attr, wp_kses_post Deze functies worden gebruikt voor het veilige ontsluiten van data. Worden alle databasequery's hiermee verwerkt? $wpdb De klasse bevat voorbereidende statements om SQL-injecties te voorkomen.
3. 性能检查：确保脚本和样式只在需要的页面加载（可以使用条件标签如 is_admin(), is_single() Vermijd onnodige database-verzoeken bij elke pagina-laad.
4. 文件清理：删除开发过程中使用的调试代码、多余的注释和未使用的文件。
5. README 文件：创建一个详细的 readme.txt Het moet een bestand zijn in een format dat voldoet aan de vereisten van WordPress.org, waarin een beschrijving, instructies voor het installeren, en antwoord op veel voorkomende vragen zijn opgenomen. Dit bestand is vereist om de plugin in het officiële WordPress-directory te kunnen indienen.
Samenvatting
Met deze handleiding heb je de stap van een leeg bestand naar een volledig WordPress-plugin gemaakt dat ondersteunt kortere codes, achtergrondinstellingen, het laden van front-end-resources, Ajax-interacties en internationale functies. De belangrijkste stappen zijn: het opzetten van een omgeving en het creeren van een hoofdbestand met standaardheaders; het toevoegen van functionaliteiten met behulp van action-hooks en filter-hooks; het veilig beheersen van resource-bestanden; het realiseren van asynchrone communicatie tussen front- en back-end; en het voorbereiden van vertalingen en testen voor een wereldwijde release. Vergeet niet dat veiligheid (escapement, validatie, nonce), prestaties (op maat laden) en standaarden (het volgen van WordPress-编码regels) de drie belangrijkste pilaren zijn voor het ontwikkelen van kwalitatief goede plugins. Door continu te leren en te oefenen met meer geavanceerde API's, zoals het maken van aangepaste artikeltypen, REST-API's en het ontwikkelen van blocks-editors, wordt je plugin nog sterker.
Veelgestelde vragen (FAQ)
Moet je voor het ontwikkelen van plugins objectgerichte programmering gebruiken?
Niet altijd. Voor eenvoudige plugins is het volledig mogelijk om procedurale programmering (een groep functies) te gebruiken; dit is zelfs eenvoudiger en directer. Voor middelgrote tot grote, complexe plugins is het echter aan te raden om objectgerichte programmering (OOP) en klassenstructuren te toepassen. Dit zorgt voor een betere organisatie van het code, ondersteunt encapsulatie en hergebruik, en vermindert de kans op namenconflicten.
Hoe debug je problemen in een WordPress-plugin?
Allereerst, zorg ervoor dat je op wp-config.php Het bestand is geopend in WP_DEBUG 和 WP_DEBUG_LOG Een constante gebruiken, zodat de foutmeldingen worden opgeslagen. /wp-content/debug.log De inhoud van de bestand wordt niet aan de gebruiker getoond. Daarnaast is het mogelijk om… error_log() De functie stuurt de waarden van de variabelen naar het logbestand. Voor Ajax of complexe logica zijn de panelen “Netwerk” en “Console” in de ontwikkelaarstool van de browser onmisbare hulpmiddelen voor het opsporen van fouten.
Hoe kan mijn plugin worden geïntegreerd met het thema of andere plugins?
De beste praktijk om compatibiliteit te bewaren is om strikt te volgen de officiële WordPress API en coderingstandaarden; geef de namen van je functies, klassen en action-hooks een unieke prefix (zoals 'wp_'). mfp_Om conflicten te voorkomen: controleer of een globale variabele of functie al bestaat, voordat u deze gebruikt. function_exists() 或 class_exists()Vul ook duidelijk in de documentatie welke database-tabels je plugin heeft gecreëerd.选项或 用户元数据。
Welke vereisten zijn er voor het indienen van een plugin in de WordPress.org-directory?
Je moet een account op WordPress.org hebben en ervoor zorgen dat het plugin volledig voldoet aan de officiële vereisten. Dit betekent dat de code onder een GPL-compatibele licentie (meestal GPLv2+) valt; het moet 100% open source zijn en geen externe, betaalde diensten gebruiken om de core-functionaliteiten te kunnen uitvoeren; en dat het plugin beschikt over een standaardformat. readme.txt Er is geen kwaadwillig of ongewenst materiaal in de bestanden of code te vinden; deze zijn ook gecontroleerd door een team van menselijke beoordelaars. Lees voor het indienen de officiële handleiding voor het ontwikkelen van plugins en de richtlijnen voor het indienen goed door.
De volgende stap, wat moeten we als volgende doen?
Voor meer informatie en praktische kennis
De volgende content is relevant voor het onderwerp van dit artikel en is geschikt voor verder lezen. Het kan vaak effectief zijn om eerst het artikel te lezen dat het dichtst bij uw huidige vraagstuk staat en vervolgens geleidelijk aan artikelen over aanverwante onderwerpen te bekijken.
- WordPress-pluginontwikkelingsgids: van nul tot één: maak je eerste eigen plugin
- Werken als WordPress-pluginontwikkelaar: een volledig handboek van nul tot één
- Volledig handboek voor het ontwikkelen van WordPress plugins: van het begin tot de volmaakte beheersing van professionele uitbreidingen
- WordPress-pluginontwikkeling: van het begin tot de volmaaktheid: bouw je eerste eigen plugin
- Van nul naar één: een volledig handboek voor het stappen voor stappen ontwikkelen van je eerste WordPress-plugin
Nederlands