In de uitgestrekte wereld van het internet beheert WordPress met zijn flexibiliteit en sterke ecosystem een groot deel van de contentmanagement-systemen. De kern van deze flexibiliteit berust in grote mate op de mogelijkheid om plugins te gebruiken. Voor ontwikkelaars betekent het beheersen van WordPress-pluginontwikkeling niet alleen dat ze de functionaliteiten van een website diep kunnen aanpassen, maar ook dat ze hun creativiteit kunnen omzetten in herbruikbare producten. In dit artikel worden je stap voor stap geleidde in het maken van je eerste WordPress-plugin met praktische functies, waarmee je het geheim van pluginontwikkeling ontdekt.
WordPress-pluginbasis en voorbereidende stappen
Voordat je begint met schrijven van de eerste regel code, is het heel belangrijk om de basisconcepten van WordPress-plug-ins te begrijpen en een geschikte ontwikkelingsomgeving op te zetten. Een WordPress-plug-in is in feite een verzameling van één of meerdere PHP-bestanden, die ook resources als JavaScript, CSS en afbeeldingen kunnen bevatten. Je kunt met een plug-in nieuwe functies toevoegen of bestaande functies aanpassen, en dit gebeurt onafhankelijk van het thema. Dat betekent dat de functionaliteit van de plug-in meestal niet wordt beïnvloed wanneer je het thema vervangt.
Je hebt een lokale ontwikkelomgeving nodig (bijvoorbeeld Local by Flywheel, XAMPP of MAMP) of een testwebsite voor ontwikkeling. De belangrijkste tools zijn een code-editor (zoals VS Code of PhpStorm) en de ontwikkelaarsmogelijkheden van de browser voor het opsporen en oplossen van fouten (debugging). Je moet ook vertrouwd zijn met WordPress.wp-content/pluginsDe directorystructuur is het eerste stap: alle plugins worden hier geïnstalleerd.
Aanbevolen leesmateriaal Als je de wereld van WordPress-pluginontwikkeling betreedt, betekent dat dat je de technieken beheerst om plugins te maken voor gebruikers overal ter wereld.。
Maak je eerste pluginbestand.
De entrypoint van het plugin is een hoofdPHP-bestand dat zich bevindt in een eigen, afgescheiden map. Dit bestand moet een standaard commentaar met plugin-informatie bevatten; WordPress gebruikt dit om het plugin in de backend-beheerinterface te herkennen en weergeven.
Definities voor de header-informatie van plugins
Elk plugin moet beginnen met een specifiek PHP-annotatieblok. Dit annotatieblok bepaalt de basisgegevens van het plugin in de WordPress-backoffice. In je plugin-map (bijvoorbeeld…)wp-content/plugins/my-first-pluginIn ) moet een object met de naam worden gecreëerd.my-first-plugin.phpDe file.
<?php
/**
* Plugin Name: 我的第一个功能插件
* Plugin URI: https://yourwebsite.com/my-first-plugin
* Description: 这是一个学习用的WordPress插件，用于在文章末尾添加自定义提示框。
* Version: 1.0.0
* Requires at least: 5.6
* Requires PHP: 7.4
* Author: 你的名字
* Author URI: https://yourwebsite.com
* License: GPL v2 or later
* Text Domain: my-first-plugin
*/Na het opslaan van het bestand, log in je in bij het WordPress-administratiepaneel en ga naar het menu “Plug-ins”. Hier moet je het plug-in “Mijn eerste functionaliteit” zien in de lijst met beschikbare plug-ins. Je kunt het nu activeren. Hoewel het nog geen enkele functionaliteit heeft, heb je al het eerste stuk van het proces succesvol afgerond.
De basisstructuur van een plugin bouwen
Naarmate er meer functies worden toegevoegd, wordt het moeilijker om één enkele bestand te onderhouden. Een goede praktijk is om een georganiseerde directorystructuur te creeren. Bijvoorbeeld, kun je een nieuwe directory onder de worteldirectory van het plugin aanmaken.includes/De map bevat de belangrijkste PHP-klassen of functionalfailen.assets/De map bevat JavaScript- en CSS-bestanden.admin/和public/De backend- en frontend-logica worden apart verwerkt. Hoofdbestand.my-first-plugin.phpDit is verantwoordelijk voor het begeleiden en laden van deze modules.
Realisatie van de kernfuncties: hooks en filters
De kernfilosofie van WordPress-pluginontwikkeling is “hooks”. Hierdoor kun je op specifieke momenten je eigen code toevoegen, zonder de kernbestanden te hoeven bewerken. Er zijn twee soorten hooks: actions en filters. Actions bieden je de mogelijkheid om functies uit te voeren wanneer bepaalde gebeurtenissen plaatsvinden, bijvoorbeeld wanneer een artikel wordt gepubliceerd of de frontend wordt geladen; filters daarentegen geven je de mogelijkheid om gegevens te bewerken, zoals de inhoud of de titel van een artikel.
Aanbevolen leesmateriaal Van nul naar één: Een volledig handboek en praktische tutorial voor het ontwikkelen van WordPress plugins。
Het inhoud van een artikel bewerken met filters
Laten we de eerste echte functionaliteit toevoegen aan het plugin: automatisch een aangepaste waarschuwingstekst toevoegen aan het eind van elke artikel. We zullen hierbij gebruikmaken van...the_contentFilteren.
Eerst voeg je in het hoofdpluggifail, onder de hoofdcommentaren, de volgende functies en hooks toe:
// 防止直接访问文件
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
/**
* 在文章内容末尾添加自定义提示框
*
* @param string $content 原始文章内容。
* @return string 修改后的文章内容。
*/
function mfp_add_notice_box( $content ) {
// 仅在主循环的单篇文章页面显示
if ( is_single() && in_the_loop() && is_main_query() ) {
$notice_box = '<div class="mfp-notice" style="background-color: #f0f8ff; border-left: 4px solid #3498db; padding: 15px; margin: 20px 0; border-radius: 5px;">'$notice_box = '<p><strong>Tip:</strong> Deze tekst is versterkt door het “Mijn eerste functionaliteitsplug-in”. Ik hoop dat je dit leuk vindt!</p>'$notice_box = '</div>';
$content .= $notice_box;
}
return $content;
}
add_filter( 'the_content', 'mfp_add_notice_box' );functiemfp_add_notice_boxOriginal content wordt ontvangen.$contentAls parameter moet worden gecontroleerd of de huidige omgeving een pagina met één artikel is. Als dit het geval is, moet een HTML-block met instructies worden samengesteld en vervolgens de gewijzigde inhoud worden teruggegeven.add_filterDe functie maakt deze zelfgemaakte functie beschikbaar in WordPress.the_contentOp de filter.
Gebruik een actie om een instellingenmenu als plugin toe te voegen.
Om de plugin te verbeteren, hebben we meestal een backend-configuratiepagina nodig. Hier moeten we action-hooks gebruiken.admin_menuVoeg een menu-item toe.
/**
* 在WordPress后台添加插件设置菜单
*/
function mfp_add_admin_menu() {
add_options_page(
'我的插件设置', // 页面标题
'我的第一个插件', // 菜单标题
'manage_options', // 所需权限
'my-first-plugin', // 菜单 Slug
'mfp_render_settings_page' // 用于输出页面内容的回调函数
);
}
add_action( 'admin_menu', 'mfp_add_admin_menu' );
/**
* 渲染设置页面内容
*/
function mfp_render_settings_page() {
?>
<div class="wrap">
<h1>Mijn eerste plugin-instellingen</h1>
<form action="/nl/options.php/" method="post" data-trp-original-action="options.php">
<?php
settings_fields( 'mfp_settings_group' );
do_settings_sections( 'my-first-plugin' );
submit_button();
?>
<input type="hidden" name="trp-form-language" value="nl"/></form>
</div>
<?php
}Door dit voorbeeld begrijp je hoe je action-hooks kunt gebruiken om de WordPress-beheerinterface uit te breiden. De volledige instellingenpagina vereist meestal ook nog andere stappen.register_setting, add_settings_section和add_settings_fieldFuncties als `wait` worden gebruikt om opties te definiëren en op te slaan; dit vormt de basis voor de interactiviteit van de plugin.
Stijlen en scripts toevoegen aan een plugin
Een professioneel plugin moet niet alleen goede functionaliteiten hebben, maar ook een passend uiterlijk. We moeten de CSS- en JavaScript-bestanden op de juiste manier toevoegen, om conflicten met het thema of andere plugins te voorkomen.
Aanbevolen leesmateriaal Hoe je een kwalitatief WordPress-plugin ontwikkelt: een gids van het begin tot de voltooiing。
veilig registreren en laden van front-end-resources
WordPress biedt…wp_enqueue_style和wp_enqueue_scriptEr zijn functies beschikbaar om resources veilig te kunnen toevoegen. We moeten deze functies gebruiken.wp_enqueue_scriptsAction hooks worden gebruikt om deze elementen te laden.
/**
* 注册并加载插件的前端样式和脚本
*/
function mfp_enqueue_public_assets() {
// 获取插件URL
$plugin_url = plugin_dir_url( __FILE__ );
// 注册并排队样式表
wp_enqueue_style(
'mfp-public-style',
$plugin_url . 'assets/css/mfp-public.css',
array(),
'1.0.0'
);
// 注册并排队JavaScript文件（示例）
wp_enqueue_script(
'mfp-public-script',
$plugin_url . 'assets/js/mfp-public.js',
array('jquery'), // 依赖jQuery
'1.0.0',
true // 在页脚加载
);
}
add_action( 'wp_enqueue_scripts', 'mfp_enqueue_public_assets' );Je moet eerst een map maken in de plugin-map.assets/css/mfp-public.cssWe kunnen een bestand gebruiken om vervolgens stijlen toe te voegen om de waarschuwingsschermen die we eerder hebben gemaakt op te vijzelen.
/* assets/css/mfp-public.css */
.mfp-notice {
background-color: #f0f8ff;
border-left: 4px solid #3498db;
padding: 15px;
margin: 20px 0;
border-radius: 5px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
}
.mfp-notice p {
margin: 0;
color: #2c3e50;
}Back-end resources worden geladen.
De registratie van achtergrondbronnen verloopt op vergelijkbare manier, maar er worden andere ‘hooks’ (speciale mechanismen) gebruikt.admin_enqueue_scriptsJe moet bepalen of de huidige pagina de instellingenpagina van je plugin is (bijvoorbeeld door te controleren op bepaalde kenmerkende elementen of code).get_current_screen()Door functies te gebruiken, kunnen resources selectief worden geladen, waardoor onnodige prestatiebelasting wordt vermeden.
Samenvatting
Je hebt de volledige procedure gevolgd om je eerste functionaliteitsplugin te bouwen: van het definiëren van de basisinformatie in het hoofddeel van het plugin tot het dynamisch bewerken van de inhoud en structuur van de website met behulp van het krachtige hook-systeem van WordPress (actions en filters), en tot het professioneel beheren van stijl- en scriptbronnen. Het belangrijkste is om de ontwikkelingsregels van WordPress te begrijpen en te volgen: gebruik hooks in plaats van rechtstreeks de kern van WordPress te bewerken, resources correct te registreren en te ordenen, en een duidelijke bestandsstructuur op te bouwen. Dit is echter nog maar het begin van de wereld van pluginontwikkeling. Vervolgens kun je meer geavanceerde onderwerpen verkennen, zoals het maken van shortcodes, het aanpassen van artikeltypen (Custom Post Types of CPTs), interactie met de database, REST API-uitgangspunten, en de internationalisering van plugins. Hiermee maak je je plugin nog sterker en gebruikersvriendelijker.
Veelgestelde vragen (FAQ)
Welke voorwaartse kennis is vereist om een WordPress-plugin te ontwikkelen?
Je moet basiskennis van PHP-programmering hebben, waaronder het begrijpen van functies, conditionele statements, cycli en array-verwerking. Het is ook handig om enige kennis te hebben van HTML, CSS en JavaScript, vooral wanneer je de front-end-omgeving wilt bewerken. Het belangrijkste is dat je de basisprincipes van WordPress begrijpt, zoals de structuur van templates, de hoofdcyclus en de basis van de database.
Hoe debug ik mijn WordPress-plugin?
WordPress activerenWP_DEBUGHet instellen van de juiste modi is de eerste stap in het oplossen van problemen. Dit moet worden gedaan in de rootmap van je website.wp-config.phpIn het bestand zijn de instellingen gedefinieerd.define( 'WP_DEBUG', true );Dit zal PHP-fouten en waarschuwingen op het scherm weergeven en ze ook registreren in een logbestand.wp-content/debug.logDeze informatie zit in de bestand. Daarnaast kunnen de Console- en Network-panelen in de browser-developer-tools worden gebruikt om JavaScript- en Ajax-verzoeken te debuggen. Voor complexe logische processen zijn deze tools zeer handig.error_log()De functie of het speciale debuggen-pakket stuurt de variabelinformatie naar het logbestand.
Hoe moet ik configurabele opties toevoegen aan mijn plugin?
De standaardmanier om instellingsopties voor een plugin te toevoegen, is het gebruik van de WordPress Settings API. Hierbij worden een reeks functies gebruikt:register_setting()Het wordt gebruikt om een groep instellingsopties te registreren en deze veilig op te slaan in de database.add_settings_section()Voeg op je instellingenpagina een nieuwe sectie toe.add_settings_field()Voeg specifieke formuliervelden toe in het blok (bijvoorbeeld invoervakken, vervolgkeuzemenu's). De callback-functie op je instellingenpagina moet deze elementen bevatten.settings_fields()和do_settings_sections()De oproep van … is nodig om de formulier correct te genereren en te verifiëren.
Hoe kan ik zorgen dat mijn plugin geen conflicten veroorzaakt met andere plugins of thema's?
Het volgen van de beste praktijken is de sleutel om conflicten te voorkomen. Voeg voor alle je functies, klassen, constanten, acties/filters en CSS-klassen in je HTML een unieke prefix of namenruimte toe. Bijvoorbeeld:myplugin_function_nameZo'n functionnaam, en niet alleen dat...function_nameGebruikwp_enqueue_style和wp_enqueue_scriptDe broncode moet worden gebruikt om resources te laden, en er moet worden gezorgd dat de hanteringsobjecten voor stijlen (styles) en scripts uniek zijn. Als mogelijk moet je je code opslaan in klassen, zodat variabelen en functies nog beter worden geisoleerd.
Nadat mijn plugin is ontwikkeld, hoe kan ik deze publiceren?
Als je een plugin wilt indienen in het officiële WordPress-pluginbestand, moet je ervoor zorgen dat het volledig voldoet aan de codingstandaarden van WordPress en de GPL-licentie. Je moet een account op WordPress.org registreren en de plugin indienen voor review. Het review-team zal de veiligheid, functionaliteit en de documentatie van de code controleren. Lees voor het indienen de officiële handleiding voor pluginontwikkeling en de instructies voor het indienen goed door. Voor commerciële plugins kun je kiezen om deze te distribueren op je eigen website of op een derdepartijenmarkt.
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.
- Voordracht: Waarom kiezen voor WordPress voor ontwikkeling?
- Waarom hebt u gekozen voor WooCommerce als uw e-commerce-oplossing?
- WooCommerce-compleetgids: Van nul een online winkel opbouwen en je verkoopstrategie bepalen
- Volledig handboek voor het ontwikkelen van WordPress-themes: van nul een professionele website bouwen
- Webdesign van het begin tot de volmaaktheid: een compleet praktisch handboek en technische uitleg voor het bouwen van professionele websites
Nederlands