Praktische gids voor het ontwikkelen van WordPress plugins: bouw je eerste functionaliteitsplugin van scratch

Het plugin-systeem van WordPress vormt de kern van de sterke uitbreidingsmogelijkheden van het platform. Met plugins kunnen ontwikkelaars functies toevoegen aan een website, van eenvoudige contactformulieren tot complexe e-commerce-mogelijkheden. In dit artikel wordt je geleid door het hele proces van het bouwen van een volledig functionerend plugin, waardoor je de kernstructuur, het hook-systeem, de beveiliging en de beste praktijken goed begrijpt. Uiteindelijk beschik je over een klaar product dat je kunt publiceren of direct kunt gebruiken.

Developmentomgeving en basisvoorbereidingen

Voordat je de eerste regel code schrijft, is een stabiele en efficiënte ontwikkelingsomgeving van belang. Dit zorgt niet alleen ervoor dat je je kunt concentreren op het bouwen van de logica, maar helpt ook om veel voorkomende fouten te voorkomen.

Configuratie van het lokale ontwikkelingsmilieu

Het wordt aanbevolen om een lokale serveromgeving te gebruiken, bijvoorbeeld XAMPP, MAMP of het meer professionele Local by Flywheel. Zorg ervoor dat je PHP-versie (het wordt aanbevolen om versie 7.4 of hoger te gebruiken) compatibel is met de WordPress-omgeving waar je het gaat deployen, en dat de debug-modus is ingeschakeld.wp-config.phpIn het bestand zijn de instellingen gedefinieerd.WP_DEBUG为trueTijdens de ontwikkelingsfase worden alle fouten en waarschuwingen weergegeven, waardoor je snel kunt bepalen waar het probleem ligt.

Aanbevolen leesmateriaal WordPress-pluginontwikkeling: een gids van nul tot het bouwen van professionele functionaliteiten。

Pluggins: File Structure Planning

Een standaardplug-in vereist ten minste één hoofdbestand. De gebruikelijke procedure is om een apart mapje aan te maken voor het plug-in, genaamd naar de kernfunctie van het plug-in.my-first-pluginIn deze map heet het hoofdbestand meestal dezelfde naam als de map, gevolgd door een extensie..phpNamelijkmy-first-plugin.phpEen duidelijke structuur helpt bij het toevoegen van JavaScript, CSS, taalpakketten of klassenbestanden later op.

UltaHost WordPress-hosting

30-daagse garantie voor het terugbetalen van het geld, onbeperkt bandbreedte- en databestand, gratis DDoS-beveiliging, en een prijsvoordeel van 50% bij een aankoop van 3 jaar.

toegangspagina

Creëer de hoofdfile van het plugin en de basisheaderinformatie.

De “ingang” van de plugin en de verificatie van de identiteit zijn beide afhankelijk van de header-informatie die zich aan het begin van het hoofdbestand (de main file) bevindt. Dit is cruciaal voor WordPress om de plugin te herkennen en te laden.

Schrijf een standaard plugin-headfile.

In het begin van het hoofdPHP-bestand moet een specifiek PHP-commentaarblok worden gebruikt om informatie over het plugin te bieden. Deze informatie wordt weergegeven op de “Plugins”-beheerpagina in het WordPress-administratiepaneel.

<?php
/**
 * Plugin Name:       我的第一个功能插件
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       这是一个实战指南中创建的示例插件，用于演示核心开发流程。
 * Version:           1.0.0
 * Author:            你的名字
 * Author URI:        https://example.com
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 * Domain Path:       /languages
 */

Hieronder valt ook:Plugin Name和Text DomainDit is een verplicht veld; de overige velden zijn optioneel. Tekstveld.Text DomainVoor internationaal ondersteuningsdoeleinden.

Voorkomen van directe toegang tot bestanden

Om de veiligheid van de plugincode te beschermen en te voorkomen dat de hoofdbestanden rechtstreeks via een URL worden bereikt, waardoor informatie kan worden gelekt of fouten kunnen optreden, moet er na de header-informatie, en voor alle andere code, een controle worden toegevoegd om rechtstreekse toegang te blokkeren.

Aanbevolen leesmateriaal Gids voor het maatwerk ontwikkelen van WooCommerce-plug-ins: creëer je eigen online winkel。

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

ConstantABSPATHDit is de absolute path naar de rootdirectory van WordPress, en WordPress definieert deze tijdens het uitvoeren. Deze conditie zorgt ervoor dat de volgende code alleen wordt uitgevoerd in een WordPress-omgeving.

De kernfuncties worden geïmplementeerd met behulp van WordPress-hooks.

WordPress biedt twee krachtige mechanismen aan: action hooks en filter hooks. Met deze hooks kun je je eigen code op specifieke momenten in de kernprocessen van WordPress invoegen of gegevens bewerken. Het is essentieel om deze mechanismen te begrijpen en te kunnen gebruiken bij het ontwikkelen van plugins.

Functies toevoegen met action-hooks

Action hooks bieden je de mogelijkheid om zelfgemaakte code uit te voeren wanneer bepaalde gebeurtenissen plaatsvinden. Denk hierbij aan het automatisch toevoegen van auteursrechtaangegevens aan het eind van een artikel. Hiervoor is het gebruik van action hooks nodig.the_contentFilters (die in feite filter-hooks zijn, maar worden op vergelijkbare manier gebruikt als action-hooks) enwp_enqueue_scriptsAction hooks worden gebruikt om resources te laden.

hosting.com gedeelde hosting

Hoge prestaties met AMD EPYC CPU's, NVMe SSD opslag en LiteSpeed, 24/7 deskundige interne ondersteuning, geavanceerde beveiligingsmaatregelen waaronder SSL, bescherming tegen brute kracht, malware en DDoS, besparingen tot 73%

toegangspagina

Eerst schrijven we een function.mfp_add_copyright_noticeEn mounteer het op…the_contentAan de haak.

// 在文章内容后添加版权声明
function mfp_add_copyright_notice( $content ) {
	if ( is_single() && in_the_loop() && is_main_query() ) {
		$copyright_text = '<p><em>De auteursrechten van dit artikel berusten bij deze website. Voor het gebruik van dit artikel moet de bron worden vermeld.</em></p>';
		$content .= $copyright_text;
	}
	return $content;
}
add_filter( 'the_content', 'mfp_add_copyright_notice' );

De conditiecontrole zorgt ervoor dat de auteursrechtaankondiging alleen wordt weergegeven in de hoofdloop van een artikel op de frontend, en dat deze geen invloed heeft op de pagina, de samenvatting of de backend.

Gegevens bewerken met filter-haken

Filter-haken worden gebruikt om gegevens die aan hen worden overgedragen te bewerken. Stel dat we willen veranderen welke delen van de website-titel worden weergegeven; we kunnen dan een functie maken en deze toevoegen aan het systeem.wp_titleOf misschien wel iets moderners.document_title_partsFilteren.

Aanbevolen leesmateriaal Volledige uitleg van het ontwikkelingsproces voor WordPress plugins: van het begin tot de volle meesterheid – een praktische gids。

// 修改网站标题后缀
function mfp_modify_title_suffix( $title ) {
	if ( is_home() ) {
		$title['suffix'] = ' | 我的精彩博客';
	}
	return $title;
}
add_filter( 'document_title_parts', 'mfp_modify_title_suffix' );

Scripten en stijlen op veilige manier invoeren

Om front-end-stijlen of interacties toe te voegen aan een plugin, moet je gebruikmaken van de methoden die WordPress aanbeveelt.wp_enqueue_style()和wp_enqueue_script()Functie, en viawp_enqueue_scriptsHook-call.

// 注册并排队插件的前端样式
function mfp_enqueue_frontend_assets() {
	// 获取插件目录的URL
	$plugin_url = plugin_dir_url( __FILE__ );

// 排队一个CSS文件
	wp_enqueue_style(
		'mfp-frontend-style',
		$plugin_url . 'assets/css/frontend.css',
		array(),
		'1.0.0'
	);

// 排队一个JS文件，并依赖jQuery
	wp_enqueue_script(
		'mfp-frontend-script',
		$plugin_url . 'assets/js/frontend.js',
		array( 'jquery' ),
		'1.0.0',
		true // 在页脚加载
	);
}
add_action( 'wp_enqueue_scripts', 'mfp_enqueue_frontend_assets' );

Maak een beheerpagina en instellingenopties klaar.

Veel plugins vereisen dat gebruikers configuratieopties kunnen instellen. WordPress biedt een settings-API aan, waarmee men beheermenü's en optiepagina's op veilige en gestandaardiseerde manier kan maken.

InterServer gedeelde hosting

Shared hosting $2.50 USD per maand, eerste maand $0.1 USD promo code tryinterserver, 461 cloud apps scripts, een klik te installeren.

toegangspagina

Voeg een beheermenu toe.

Allereerst gebruiken weadd_action( ‘admin_menu’, … )Registreer een nieuw management-menu-item of sub-menu-item. Hieronder staat de beschrijving van de function:mfp_create_admin_menuEr wordt een submenü-pagina toegevoegd onder het hoofdmenu “Instellingen”.

// 创建插件管理菜单
function mfp_create_admin_menu() {
	add_options_page(
		‘我的插件设置’, // 页面标题
		‘我的插件’,     // 菜单标题
		‘manage_options’, // 权限要求
		‘mfp-settings’,   // 菜单slug
		‘mfp_settings_page_html’ // 用于输出页面内容的回调函数
	);
}
add_action( ‘admin_menu’, ‘mfp_create_admin_menu’ );

Construct een instellingenpagina en velden

Vervolgens moet de callback-functie worden gedefinieerd.mfp_settings_page_htmlDe inhoud van de pagina wordt weergegeven, en met behulp van de API worden een instellingengroep, een optie en specifieke velden geregistreerd.

// 设置页面的HTML输出
function mfp_settings_page_html() {
	// 检查用户权限
	if ( ! current_user_can( ‘manage_options’ ) ) {
		return;
	}
	?>
	<div class="“wrap”">
		<h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
		<form action="/nl/“options.php”/" method="“post”" data-trp-original-action="“options.php”">
			<?php
			// 输出设置字段、非ce等
			settings_fields( ‘mfp_options_group’ );
			do_settings_sections( ‘mfp-settings’ );
			submit_button( ‘保存设置’ );
			?>
		<input type="hidden" name="trp-form-language" value="nl"/></form>
	</div>
	‘mfp_field_copyright_text’ )
	);
}
add_action( ‘admin_init’, ‘mfp_settings_init’ );

// 渲染版权文本文档字段
function mfp_field_copyright_text_html() {
	$options = get_option( ‘mfp_options’ );
	$value = $options[‘copyright_text’] ?? ‘默认版权文本’; // PHP 7.0+ 空合并运算符
	?&gt;
	<input type="“text”"
		   id="“mfp_field_copyright_text”"
		   name="“mfp_options[copyright_text]”"
		   value="“NO NUMERIC NOISE KEY" 1000”
		 class="“regular-text”">
	&lt;?php
}

Nu kun je het gebruiken zoals eerder…mfp_add_copyright_noticeIn de functie wordt dit gebruikt.get_option( ‘mfp_options’ )[‘copyright_text’]De achtergrondtekst die is ingesteld door de gebruiker wordt dynamisch opgehaald, waardoor de functies van het plugin kunnen worden aangepast.

Samenvatting

In dit artikel wordt het volledige proces beschreven om van scratch een WordPress-functionaliteitstoolkit (plugin) te ontwikkelen. We beginnen met het opzetten van een ontwikkelingsomgeving en het maken van een hoofdbestand met standaardheaderinformatie, waarbij de belangrijkheid van beveiliging wordt benadrukt. Vervolgens gaan we dieper in op het kernpunt van WordPress-pluginontwikkeling: het hook-systeem. We leggen uit hoe action-hooks worden gebruikt om code uit te voeren en filter-hooks om gegevens te bewerken, en demonstreren hoe front-end-resources veilig worden geladen. Ten slotte maken we met behulp van de WordPress Settings API een professioneel uitziende beheerpagina, zodat gebruikers de functionaliteiten van het plugin kunnen aanpassen.

Het volledige ontwikkelingsproces volgt de coderingstandaarden en best practices van WordPress, inclusief het gebruik van unieke functievoorvoegsels, gegevensvalidatie en -ontsnapping, en het bieden van internationale ondersteuning. Als je deze basisbeginselen eenmaal beheerst, kun je de functionaliteit van je plug-in oneindig uitbreiden door verschillende hooks te combineren, aangepaste databasetabellen te maken of widgets of korte codes te ontwikkelen.

Veelgestelde vragen (FAQ)

Hoe kies je een geschikte prefix voor plugin-functies en -klassen?

In alle plugins moeten globale functies, klassen, variabelen en constanten een unieke prefix hebben, om namelijkconflicten met andere plugins of thema’s te voorkomen. De prefix bestaat meestal uit een afkorting of kortere benaming van de plugin. Als de plugin de naam “My First Plugin” heeft, kan bijvoorbeeld de prefix ‘MfP-’ worden gekozen.mfp_或myfirstplugin_Het is van belang om consistentie te bewaren.

Waarom moet je gebruikmaken van `wp_enqueue_script` om scripts te toevoegen?

Gebruikwp_enqueue_script()和wp_enqueue_style()Dit is een methode die officieel wordt aanbevolen door WordPress. Het zorgt ervoor dat scriptafhankelijkheden (zoals jQuery) correct worden verwerkt, voorkomt dat dezelfde scripten meerdere keren worden geladen, en biedt andere plugins of themes de mogelijkheid om te werken met deze afhankelijkheden.wp_deregister_script()Je kunt je script veilig verwijderen of vervangen door het rechtstreeks te gebruiken.Als tags worden ingevoegd, kunnen deze managementvoordelen niet meer worden genoten, en dit kan tot conflicten leidden.

Welke belangrijke veiligheidsregels zijn er bij het ontwikkelen van plugins?

Het belangrijkste principe is: vertrouw nooit op de invoer van gebruikers. Verwerk alle gegevens die van gebruikers worden ontvangen met voorzichtigheid.$_GET、$_POST、$_REQUESTDe gegevens die worden gehaald uit een database moeten worden gevalideerd, gereinigd en geëscapeseerd. Tijdens het weergeven in HTML worden deze gegevens vervolgens gebruikt.esc_html()、esc_attr()Output naar een URL gebruikenesc_url()In SQL-verzoeken moet je altijd gebruikmaken van…$wpdb->prepare()Voer parameteriseerde queries uit om SQL-injecties te voorkomen. Gebruik hiervoor ook de beschikbare beveiligingstechnieken.current_user_can()Controleer de gebruikersrechten.

Hoe voeg ik internationaal ondersteuningsmogelijkheden toe aan mijn plugin?

Allereerst moet de informatie in de plugin-head worden correct ingesteld.Text Domain和Domain PathVervolgens moet, op alle plaatsen in de code waar strings moeten worden vertaald, de gewenste vertaling worden gebruikt.()Voor de uitvoer van de vertaling gebruiken we_e()Voer een echo-vertaling uit, bijvoorbeeld:( ‘Hello World’, ‘my-first-plugin’ )Ten slotte gebruikt u een tool als Poedit om de code te scannen en te genereren..potTemplatebestanden, en maak deze voor verschillende talen..po和.moVertaal de tekst naar Nederlands en plaats de vertaling op de gewenste plek./languagesCatalogus.