Volledig handboek voor het ontwikkelen van WordPress plugins: van nul tot een bouwen van je eerste functionaliteitsplugin

3 minuten leestijd
2026-03-15
2026-06-03
2,624
Ik verdien commissies wanneer je via de onderstaande links winkelt, zonder dat dit extra kosten voor jou met zich meebrengt.

Voordat u begint, moet u ervoor zorgen dat u over een lokale of online WordPress-omgeving beschikt voor ontwikkeling en testing beschikt. Een geïntegreerde omgeving zoals Local, XAMPP of MAMP is een goede keuze. Daarnaast hebt u een computer nodig met een code-editor geïnstalleerd (bijvoorbeeld Visual Studio Code of PhpStorm), en moet u basiskennis hebben van PHP, HTML, CSS en JavaScript.

Een duidelijke ontwikkelomgeving is de basis voor alle vervolgende werkzaamheden. Het zorgt ervoor dat je je kunt concentreren op de logica van de code, in plaats van op de instellingen van de omgeving.

Maak je eerste pluginbestand.

Een WordPress-plugin vereist ten minste één hoofd-PHP-bestand, en dit bestand moet een specifieke plugin-head-commentaar bevatten. Dit commentaar biedt het WordPress-systeem meta-informatie over het plugin aan.

Aanbevolen leesmateriaal Volledig handboek voor het ontwikkelen van WordPress plugins: van nul tot een professionele plugin bouwen

Plugin-headcommenten en het hoofdbestand

Allereerst, in de installatie-map van WordPress: wp-content/plugins/ Binnen de map maak je een nieuwe map, bijvoorbeeld... my-first-pluginIn deze map moet je een hoofdbestand (main file) maken. my-first-plugin.phpAan het begin van het bestand moeten standaard commentaren voor de plugin-head worden toegevoegd.

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.
<?php
/**
 * Plugin Name:       我的第一个功能插件
 * Plugin URI:        https://yourwebsite.com/my-first-plugin
 * Description:       这是一个学习 WordPress 插件开发的示例插件,用于在前端页面底部添加自定义文本。
 * Version:           1.0.0
 * Author:            你的名字
 * Author URI:        https://yourwebsite.com
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 */

Deze commentaar is het soort “identiteitsbewijs” van het plugin. WordPress leest deze commentaar om meer informatie over het plugin te krijgen. Plugin Name De naam van het plugin wordt weergegeven in het beheerpaneel in de achtergrond; andere informatie, zoals de versienummer en beschrijving, wordt ook op de juiste plek getoond. Nadat u het bestand hebt gesaved, kunt u het niet-actieve plugin zien op de “Plugins”-pagina in het WordPress-beheerpaneel.

Functionality implementation: Add action hooks

De logica van de plugin wordt voornamelijk geïntegreerd via het WordPress-hook-systeem. We zullen dit systeem gebruiken. wp_footer Deze actie-hook genereert een tekstfragment in de voetnoot van de website.

Under de commentaren in het hoofd van het plugin, voeg de volgende code toe:

// 在网站页脚添加自定义文本
function mfp_add_footer_text() {
    echo '<p style="text-align: center; color: #666;">Fijn dat je het hebt gelezen! De voetnoten op deze pagina zijn gemaakt met “Mijn eerste functionaliteitsplug-in”.</p>';
}
add_action( 'wp_footer', 'mfp_add_footer_text' );

Hier hebben we een object gecreëerd met de naam… mfp_add_footer_text Een zelfgemaakte functie. En vervolgens wordt deze gebruikt. add_action() De functie “monteert” deze andere functie. wp_footer Op deze haak wordt de HTML-code opgeslagen. Wanneer WordPress de voetnoot van de pagina bereikt, wordt onze functie automatisch opgeroepen, waarna de desbetreffende HTML-code wordt weergegeven.

Aanbevolen leesmateriaal Step by step bouw je je eerste WordPress-plugin op: van het begin tot de praktische ontwikkeling

Een beheeringspagina toevoegen voor het plugin

Een goed uitgerust plugin vereist meestal een backend-configuratieinterface, zodat gebruikers de werking van het plugin kunnen aanpassen zonder de code te hoeven bewerken. We gaan een eenvoudige optiepagina maken.

Create management menu items.

Allereerst moeten we gebruikmaken van... add_action( ‘admin_menu’, … ) Voeg een nieuw menu-item toe in het beheerpaneel. Voer de volgende code vervolgens toe in uw hoofdpluginbestand:

// 添加管理菜单
function mfp_add_admin_menu() {
    add_menu_page(
        '我的插件设置',          // 页面标题
        '我的插件',             // 菜单标题
        'manage_options',       // 权限要求
        'mfp-settings',         // 菜单slug
        'mfp_settings_page',    // 显示页面内容的回调函数
        'dashicons-admin-generic', // 图标(使用Dashicons)
        30                      // 菜单位置
    );
}
add_action( 'admin_menu', 'mfp_add_admin_menu' );

add_menu_page() De functie is een API die wordt geleverd door het kernbestand van WordPress en wordt gebruikt om een topmenu toe te voegen aan de linkerkant van de navigatiebalk. We hebben de toegangrechten hiervoor specifiek bepaald. manage_optionsMeestal hebben alleen beheerders toegang tot deze informatie.

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%

Construct een instellingenpagina en een formulier

Volgens de opgave moeten we de eerder genoemde callback-functie nu definiëren. mfp_settings_page De HTML-content van de instellingenpagina wordt weergegeven, en de opgeslagen gegevens uit het formulier worden verwerkt.

// 设置页面的HTML内容
function mfp_settings_page() {
    // 检查用户权限
    if ( !current_user_can( ‘manage_options’ ) ) {
        return;
    }

// 处理表单提交
    if ( isset( $_POST[‘mfp_footer_text’] ) ) {
        // 验证和清理输入数据
        $new_text = sanitize_text_field( $_POST[‘mfp_footer_text’] );
        // 使用 update_option 将数据保存到数据库
        update_option( ‘mfp_footer_text’, $new_text );
        echo ‘<div class="“notice" notice-success is-dismissible”><p>De instellingen zijn gespeeld!</p></div>’;
    }

// 从数据库获取现有值,用于填充表单
    $current_text = get_option( ‘mfp_footer_text’, ‘这是默认的页脚文本。’ );
    ?&gt;
    <div class="“wrap”">
        <h1>Mijn plug-ininstellingen</h1>
        <form method="“post”" action="/nl/“”/" data-trp-original-action="“”">
            <?php wp_nonce_field( ‘mfp_save_settings’, ‘mfp_settings_nonce’ ); ?>
            <table class="“form-table”">
                <tr>
                    <th scope="“row”"><label for="“mfp_footer_text”">Aangepaste voetnotetekst</label></th>
                    <td>
                        <input name="“mfp_footer_text”" type="“text”" id="“mfp_footer_text”" value="“NO NUMERIC NOISE KEY" 1001” class="“regular-text”">
                        <p class="“description”">Deze tekst zal worden weergegeven aan de onderkant van alle pagina's op de website.</p>
                    </td>
                </tr>
            </table>
            <?php submit_button(); ?>
        <input type="hidden" name="trp-form-language" value="nl"/></form>
    </div>
    &lt;?php
}

Deze functie uitvoert enkele belangrijke taken: controle van toegangrechten en verwerking van formulierinzendingen (met behulp van...) update_option Opslag, evenals de weergave van formulierinterfaces. Let op dat hierbij bepaalde technieken zijn gebruikt. sanitize_text_field()esc_attr() Veiligheidsfuncties worden gebruikt om XSS-aanvallen te voorkomen.

Maak de functionaliteit configurabel.

Nu moeten we de functie die de voetnotetekst op de uitgegeven pagina genereert, aanpassen. In plaats van hardecodeerde tekst moet de functie de gebruikersinstellingen uit de database halen.

Aanbevolen leesmateriaal Van nul af WordPress-pluginontwikkeling meesteren: een volledig handboek met praktische oefeningen

// 更新页脚文本函数,使其可配置
function mfp_add_footer_text() {
    // 从数据库获取保存的文本,如果没有则使用默认值
    $footer_text = get_option( ‘mfp_footer_text’, ‘感谢阅读!本页脚由“我的第一个功能插件”生成。’ );
    if ( !empty( $footer_text ) ) {
        echo ‘<p style="“text-align:" center; color: #666;”>’ . esc_html( $footer_text ) . ‘</p>’;
    }
}
add_action( ‘wp_footer’, ‘mfp_add_footer_text’ );

Zo is een plugin met basisbeheerfuncties voor de backend klaar. Gebruikers kunnen tekst in de backend bewerken, en deze veranderingen worden direct weergegeven op de frontend-website.

Beste praktijken en veiligheid bij het ontwikkelen van plugins

Het volgen van de beste praktijken zorgt niet alleen voor een betere kwaliteit van de code, maar ook voor de veiligheid en compatibiliteit van de plugins.

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.

Het gebruik van prefixen en namenruimten

Alle door u gedefinieerde functies, klassen, variabelen en optienamen moeten een unieke prefix hebben, om conflicten met het WordPress-core, thema's of andere plugins te voorkomen. In dit voorbeeld hebben we… mfp_ ‘(Mijn eerste plugin)’ als prefix. Voor complexere plugins kun je ervan uitgaan dat je PHP-namespace’ gebruikt.

Datavalidatie, -reiniging en -ontsnapping

Dit is het kernpunt van de beveiliging van plugins: alle invoer van gebruikers (inclusief beheerders) moet als onbetrouwbaar worden beschouwd.
* 验证 (Validation): 检查数据是否符合预期格式(如是否为邮箱、数字)。
* 清理 (Sanitization): 在将数据存入数据库或用于其他操作前,移除其中的非法或危险字符。我们使用了 sanitize_text_field()
* 转义 (Escaping): 在将数据从数据库输出到 HTML、JavaScript 或 URL 时,进行转义以防止 XSS 攻击。我们使用了 esc_html()esc_attr()

Internationalisatie voorbereiden

Zodat de plugin door gebruikers wereldwijd kan worden vertaald, moeten alle teksten die worden getoond aan de gebruiker worden omhuld met de internationaleizatie-functies van WordPress. Verander de manier waarop onze teksten worden weergegeven:

`echo ‘`‘<p style="“text-align:" center; color: #666;”>’ . esc_html__( ‘感谢阅读!本页脚由“我的第一个功能插件”生成。’, ‘my-first-plugin’ ) . ‘</p>’;

En zorg ervoor dat in de commentaren bovenin het plugin de juiste instellingen zijn gedaan. Text DomainVervolgens wordt met tools als Poedit een .pot-templatefile gemaakt.

Foutopsporing, testen en voorbereiden op publicatie

Voorafgaand aan het plaatsen van een plugin in een productieomgeving of het indienen in de officiële catalogus, is uitgebreid testen van cruciaal belang.

De debugmodus inschakelen

In de configuratiebestand van WordPress wp-config.php In de ontwikkelingsomgeving kun je de debug-modus inschakelen om PHP-fouten, waarschuwingen en berichtgeving te zien. Dit is zeer handig voor het ontwikkelen.

define( ‘WP_DEBUG’, true );
define( ‘WP_DEBUG_LOG’, true ); // 将错误记录到 wp-content/debug.log 文件
define( ‘WP_DEBUG_DISPLAY’, false ); // 不在页面上直接显示错误

Functionele en compatibiliteitsgetesten uitvoeren

  • Functionele test: Test alle functies van het plugin één voor één: activeren/uitschakelen, instellingen opslaan, en controleren of de front-end-uitstelling correct is.
  • Compatibiliteitstesten: Test je plugin op verschillende versies van WordPress (met name oudere versies), PHP-versies (7.4+ en 8.x), populaire thema's en andere veelgebruikte plugins.
  • Beveiligingscontrole: Je kunt automatische tools gebruiken of de code handmatig controleren om te zorgen dat er geen beveiligingslekken zijn, zoals SQL-injecties, XSS of CSRF. Het veld ‘Nonce’ dat we eerder hebben toegevoegd, is bedoeld om CSRF te voorkomen.

De bestanden zijn klaar voor publicatie.

Als je van plan bent de inhoud te publiceren, is een standaard bestandsstructuur vereist. Meestal omvat deze:
* 主插件文件 (如 my-first-plugin.php)
* readme.txtHet moet worden opgesteld volgens het format van WordPress.org, voor het weergeven op de pagina met de plugin-indeling.
* assets Mappen: worden gebruikt om iconen, screenshots en andere bestanden op te slaan.
* languages Map: Hier worden de vertaalmappen (.po/.mo) opgeslagen.
* includes Map: Hier worden andere PHP-klassenfileen opgeslagen.
* uninstall.phpDefinieer de schoonmaakacties wanneer een plugin wordt verwijderd (bijvoorbeeld het verwijderen van gegevens uit de database).

Samenvatting

Met deze handleiding hebt u de volledige procedure afgerond voor het ontwikkelen van een basis-WooCommerce-functionaliteit: van het maken van een hoofdbestand met standaardheaderinformatie, het toevoegen van functionaliteiten met behulp van action hooks, tot het bouwen van een compleet backend-instellingsscherm en het garanderen van de beveiliging ervan. We hebben aandacht besteed aan beste praktijken als het gebruik van prefixen, het veilig verwerken van gegevens en internationalisatie, en hebben ook kort uitgelegd hoe u de code kunt debuggen en vooraf kunt voorbereiden op de publicatie.

Vergeet niet dat het essentieel is bij het ontwikkelen van plugins om het uitgebreide systeem van hooks en filters van WordPress te begrijpen en deze op intelligente manier te gebruiken. Met deze kleine plugin als uitgangspunt kunt u verder ontdekken hoe u shortcodes, widgets, aangepaste artikeltypen (CPTs) of REST API- endpoints kunt toevoegen, waardoor u krachtige, flexibele en standaardconforme commerciële plugins kunt bouwen.

Veelgestelde vragen (FAQ)

Welke map moet de plugin worden opgeslagen?

WordPress-plug-ins moeten op de juiste plek worden geplaatst. wp-content/plugins/ De plugins zitten in een map. Elke plugin kan een apart PHP-bestand zijn (dit is handig voor zeer simpele plugins), maar het is veel gebruikelijker om een map te maken met de naam van de plugin, en de hoofdfile en andere resource-bestanden daarin op te slaan.

Hoe verwijder ik de gegevens die door een plugin zijn gecreëerd?

Als een gebruiker in de backend op de knop “Verwijderen” voor een plugin klikt, worden alleen de plugin-bestanden standaard verwijderd. De opties die in de database zijn opgeslagen, blijven echter nog steeds bestaan.wp_optionsDe gegevens uit ) worden behouden. Voor een volledige schoonmaak moet u een nieuw exemplaar maken. uninstall.php Deze bestand wordt gebruikt in... delete_option() Deze functie wordt gebruikt om relevante opties te verwijderen. Het bestand wordt alleen opgeroepen wanneer de gebruiker de plugin via de verwijderingsfunctie van WordPress verwijdert.

Wat is het verschil tussen acties en filters in hooks?

Action Hooks: gebruik ervan add_action()Het biedt u de mogelijkheid om op bepaalde tijdstippen in WordPress een stuk code in te voegen en uit te voeren, zonder dat deze code een terugkeerwaarde hoeft te geven. Denk hierbij aan het uitvoeren van een functie in het koppenblok, voetnotenblok of wanneer een artikel wordt gepubliceerd.

Filter hooks: gebruik ervan add_filter()Dit geeft u de mogelijkheid om de gegevens die worden overgedragen in de flow te bewerken. Het ontvangt een waarde, verwerkt deze en moet vervolgens een nieuwe waarde terugsturen. Denk hierbij aan het bewerken van de titel van een artikel, de inhoud van een commentaar of de resultaten van een zoekopdracht.

Waarom wordt mijn plugin niet weergegeven in de backend?

Allereerst: controleer of uw hoofd-PHP-bestand van de plugin zich bevindt in de juiste map, en of de plugin-head-commentaren (met name...) correct zijn. Plugin Name:Eerst moet je controleren of het format van de bestand correct is. Daarna moet je kijken of er grammaticale fouten in het bestand zitten. Je kunt dit doen met verschillende tools of programma's. wp-config.php Activeren in China WP_DEBUG Kijk eens naar de mogelijke foutmeldingen.