Van nul beginnen: Een volledig handboek en praktische tutorial voor het ontwikkelen van WordPress-plug-ins

Forbereidende werkzaamheden en opzet van de omgeving

Voordat je met het schrijven van code begint, is een stabiele en efficiënte ontwikkelomgeving van belang. Dit zorgt niet alleen voor een duidelijke structuur van je plugin tijdens de toekomstige ontwikkeling, maar biedt je ook de mogelijkheid om moderne tools te gebruiken om je werkzaamheden te versnellen.

Configuratie van het lokale ontwikkelingsmilieu

We raden aan om een lokale serveromgeving te gebruiken, zoals Local by Flywheel, XAMPP of MAMP. Met deze tools kun je snel een WordPress-omgeving op je computer opzetten die Apache/Nginx, MySQL en PHP bevat. Zorg ervoor dat je PHP-versie compatibel is met de versie van de server waar je het wilt gebruiken, en activeer de foutmeldingen; dit helpt je om problemen snel op te sporen in de ontwikkelingsfase.

Keuze van codeeditoren en tools

Het eerste stap is om een krachtige code-editor te kiezen, zoals Visual Studio Code, PhpStorm of Sublime Text. Deze bieden meestal syntax-highlighting, code-suggesties en integratie met versiebeheer. Daarnaast zal het installeren van een tool voor het opmaken van code (bijvoorbeeld PHP_CodeSniffer) en een tool voor het oplossen van fouten (bijvoorbeeld Xdebug) je ontwikkelingservaring en de kwaliteit van je code aanzienlijk verbeteren.

Aanbevolen leesmateriaal Volledig handboek voor het ontwikkelen van WordPress-themes: van nul tot een professionele website bouwen。

Maak je eerste plugin.

Laten we nu beginnen met het maken van het simpelste plugin, om de basisstructuur en de activeringsmechanismen van WordPress-plugins te begrijpen.

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

Plugin-hoofdbestand en basisheaderinformatie

Elk WordPress-plugin moet een hoofd-PHP-bestand hebben, en dit bestand moet de standaard-pluginheader-informatie bevatten, zodat WordPress het kan herkennen. We gaan een bestand maken met de naam... my-first-plugin.php De file.

Plaats de code in deze bestand en upload deze vervolgens naar het mapverwijzing van de WordPress-installatie. /wp-content/plugins/my-first-plugin/ Binnen de map.

<?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
 */

Nadat je het hebt gesaved, kun je het plugin zien op de “Plugins”-pagina in het WordPress-administratiepaneel. Je kunt erop klikken om het te activeren. Op dit moment heeft het plugin nog geen functies, maar je hebt met succes een plugin gecreëerd dat door WordPress wordt geaccepteerd.

Een instellingenpagina toevoegen voor het plugin

Een veel voorkomend verzoek is om een beheerpagina voor een plugin te toevoegen. Dit kan worden gerealiseerd met de mogelijkheden die WordPress biedt. add_menu_page() 或 add_options_page() Deze functionaliteit wordt gerealiseerd door een function.

Aanbevolen leesmateriaal Ultimatumgids voor het ontwikkelen van WordPress-plug-ins: van nul tot een professionele uitbreiding。

We voegen verder code toe in het hoofdbestand om een eenvoudige instellingenpagina te creeren.

// 钩子：在管理员菜单中添加一个新的页面
add_action('admin_menu', 'mfp_add_admin_menu');

function mfp_add_admin_menu() {
    add_options_page(
        '我的插件设置',          // 页面标题
        '我的插件',             // 菜单标题
        'manage_options',       // 所需权限
        'my-first-plugin',      // 菜单slug
        'mfp_settings_page_html' // 用于显示页面内容的回调函数
    );
}

// 设置页面的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>
        <p>Welkom op de instellingenpagina van mijn eerste plugin!</p>
        <form action="/nl/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            // 输出设置字段（后续可在此添加）
            settings_fields('mfp_options_group');
            do_settings_sections('my-first-plugin');
            submit_button('保存设置');
            ?>
        <input type="hidden" name="trp-form-language" value="nl"/></form>
    </div>
    &lt;?php
}

Deze code wordt gebruikt om… add_action() De hook zal de functie uitvoeren. mfp_add_admin_menu Gemonteerd op WordPress admin_menu Op het gebied van acties: wanneer het administratieve menu wordt gemaakt, worden onze functies opgeroepen, waardoor een nieuw submenu-item wordt toegevoegd onder het hoofdmenu “Instellingen”. Het klikken op dit submenu-item leidt tot de uitvoering van de betreffende actie. mfp_settings_page_html Een functie die wordt gebruikt om de inhoud van de pagina te renderen.

Het begrijpen van WordPress-hooks en filters

De kernfilosofie van WordPress is gebaseerd op “hooks”. Hierdoor kun je op specifieke momenten of op bepaalde plekken eigen code toevoegen, waardoor je de kernfuncties van WordPress kunt wijzigen of uitbreiden, zonder de originele bestanden rechtstreeks te bewerken. Er zijn twee soorten hooks: actions en filters.

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

Het gebruik van action-hooks

Action hooks worden gebruikt om code uit te voeren wanneer een bepaald evenement plaatsvindt, bijvoorbeeld wanneer een artikel wordt gepubliceerd, de beheeromgeving wordt geladen of de voetnoot wordt weergegeven. Ze verwachten geen terugkerende waarde en dienen voornamelijk om een bepaalde taak uit te voeren. add_action() Een functie die een callback-functie monteert op een specifiek action-hook-punt.

Als voorbeeld: we willen dat er automatisch een auteursrechtverklaring wordt toegevoegd aan het eind van elke artikel. Dit kan worden gerealiseerd met behulp van… the_content Deze filter (die ook een actiepunt is) wordt gebruikt om dit te realiseren. Om de actie echter op een pureer manier te laten zien, gebruiken we... wp_footer De hook genereert informatie die wordt weergegeven in het voetgedeelte (footer) van de front-end-pagina van de website.

add_action('wp_footer', 'mfp_add_footer_note');

function mfp_add_footer_note() {
    if (is_single()) { // 仅在文章页面显示
        echo '<p style="text-align:center; color:#666;">Deze tekst wordt voor u weergegeven door mijn plugin.</p>';
    }
}

Het gebruik van filterhooks

De filterhook wordt gebruikt om gegevens te bewerken voordat deze worden gebruikt of opgeslagen in de database. Er wordt van je verwacht dat je een waarde ontvangt, deze bewerkt en de gewijzigde waarde terugstuurt. We gebruiken dit mechanisme… add_filter() Een functie die wordt gebruikt om een callback-functie te mounten.

Aanbevolen leesmateriaal WordPress-pluginontwikkeling: Een gids om van nul af je eigen aangepaste functionaliteiten te creëren。

Een klassiek voorbeeld is het aanpassen van de lengte van de samenvatting van een artikel. WordPress heeft standaard een samenvatting van 55 woorden; dit kan worden gewijzigd door… excerpt_length Je kunt het gebruiken met filters om het te veranderen.

add_filter('excerpt_length', 'mfp_custom_excerpt_length');

function mfp_custom_excerpt_length($length) {
    // 将摘要长度修改为 20 个单词
    return 20;
}

In dit voorbeeld is de function… mfp_custom_excerpt_length De standaardlengte is ontvangen. $lengthVervolgens wordt de door ons gedefinieerde nieuwe lengte van 20 teruggegeven. WordPress gebruikt deze teruggegeven waarde om de samenvatting te genereren.

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

Pluginbeveiliging en beste praktijken

Een populaire plugin ontwikkelen vereist dat je rekening houdt met veiligheid, onderhoudbaarheid en prestaties. Het volgen van beste praktijken kan veel voorkomende problemen voorkomen.

Datavalidatie, ontsnapping en schoonmaken

Vertrouw nooit op gegevens die door gebruikers worden ingevoerd of uit een database komen. Vooraleer je met deze gegevens werkt, moet je ze controleren, schoonmaken en eventueel ongevaarlijke elementen (zoals speciale tekens) ontsluiten (‘escape’).
Validatie: controleer of de gegevens overeenkomen met het verwachte formaat of type (bijvoorbeeld of het een e-mailadres of een getal is). Hiervoor kunt u gebruikmaken van filter_var() Function of of WordPress sanitize_*() Reeks van functies.
Sanitering: het verwijderen van illegale of gevaarlijke tekens uit gegevens om deze veilig te maken. Voor formulierinvvoer wordt dit vaak gebruikt. sanitize_text_field()。
Escapen: Wanneer gegevens naar HTML, JavaScript of URL's worden geëxporteerd, worden deze afhankelijk van de context geëscapeerd om XSS-aanvallen te voorkomen. WordPress biedt verschillende escape-functies, zoals < esc_html()、esc_attr()、esc_url() 和 wp_kses_post()。

Als voorbeeld: een variabele uit de database veilig weergeven:

// 假设 $user_input 是从数据库或表单获取的数据
echo '<div class="info">'`.esc_html($user_input)`.'</div>';
// 或者，如果允许一些安全的HTML标签
echo '<div class="info">'`wp_kses_post($user_input)`'</div>';

Internationalisering en lokalisering van plugins

Om je plugin beschikbaar te maken voor gebruikers overal ter wereld, moet je ervoor zorgen dat het wordt vertaald. Dit proces heet internationalisering (i18n). WordPress gebruikt hiervoor het GNU gettext-framework.

Allereerst moet op alle plaatsen waar tekst moet worden vertaald, deze tekst worden omgevat met een specifieke functie. De meest gebruikelijke methode is... __()(gebruikt voor teruggegeven waarden) en _e()(Dit wordt gebruikt voor het direct weergeven van de uitvoer.)

Verander de titel van de beheerpagina die we eerder hebben gemaakt:

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>
        <p><?php _e('欢迎来到我的第一个插件的设置页面！', 'my-first-plugin'); ?></p>
        ...
    </div>
    &lt;?php
}

Let op: elke vertaalfunctie bevat een parameter voor de tekst (‘my-first-plugin’), die moet overeenkomen met de informatie die is gedefinieerd in de plugin-hoofdbestand. Text Domain Volledig overeen. Daarna kun je gebruikmaken van een tool als Poedit om de te vertalen teksten in het plugincode te scannen, waarna deze worden genereerd. .pot Templatebestanden, en maak versies in verschillende talen. .po 和 .mo Vertaal het bestand en plaatst het in de map met plugins. /languages/ In de map.

Samenvatting

Met deze gids hebben we systematisch de belangrijkste stappen van het ontwikkelen van WordPress-plug-ins behandeld. Van het opzetten van een lokale omgeving en het maken van een hoofdbestand met standaardheaderinformatie, tot het diep interageren met het WordPress-core-systeem met behulp van acties en filterhaken, en vervolgens de essentiële aspecten van beveiliging en internationalisatie – je beschikt nu over de basiskennis om een functioneel, veilig en betrouwbare plugin te bouwen. Vergeet niet dat een goede plugin is gebaseerd op een duidelijke codestructuur, strenge beveiligingsmaatregelen en een aandachtige user experience. De beste manier om verder te leren is door zelf te gaan experimenteren: begin met een plugin die een klein, praktisch probleem oplost, en ontwikkel je kennis steeds verder door meer complexe API’s en functies te ontdekken.

Veelgestelde vragen (FAQ)

Welke basiskennis is vereist om een WordPress-plugin te ontwikkelen?

Je moet de PHP-programmeertaal beheersen, aangezien dit de kerntaal is voor het ontwikkelen van WordPress. Daarnaast is een basiskennis van HTML, CSS en JavaScript vereist, om de front-end-weergave en interactie te kunnen beheersen. Het is ook handig om de basisconcepten van de MySQL-database (zoals CRUD-operaties) te kennen, aangezien WordPress deze gebruikt om gegevens op te slaan. Ten slotte is het belangrijk om de basisarchitectuur en werkwijze van WordPress te begrijpen.

Hoe debug ik mijn WordPress-plugin?

Allereerst moet je in het bestand wp-config.php de debug-modus van WordPress activeren. define('WP_DEBUG', true); 和 define('WP_DEBUG_LOG', true); Zet dit op ‘true’. Op deze manier worden fouten gemeten in het bestand /wp-content/debug.log, waardoor ze niet rechtstreeks worden getoond aan bezoekers. Daarnaast kun je professionele debugging-hulpmiddelen zoals Xdebug integreren met je code-editor (bijvoorbeeld VS Code), waardoor je onder andere breakpoints kunt instellen en stap voor stap kunt debuggen. Verder kun je met de netwerk- en console-panelen in de browser-developer-tools AJAX-verzoeken en fouten in het front-end JavaScript controleren.

Hoe kan ik het plugin dat ik heb ontwikkeld indienen in de officiële WordPress-plugincatalogus?

Voordat je je plugin indient, moet je ervoor zorgen dat deze volledig voldoet aan de officiële coderingstrends en beste praktijken van WordPress. Voer ook een grondige codebeoordeling en veiligheidscontrole uit. Je moet een account op WordPress.org registreren en vervolgens je gecomprimeerde pluginbestand indienen op de speciale pagina voor het indienen van plugins. Het review-team zal je code controleren om de veiligheid, legitiemheid en overeenkomst met de richtlijnen te bevestigen. Na goedkeuring wordt je plugin opgenomen in de officiële WordPress-directory, waarna het beschikbaar is voor gebruikers wereldwijd om te downloaden en te installeren.

Hoe voeg ik een instellingsoptie toe aan mijn plugin in de WordPress Customizer?

De WordPress Customizer biedt een mogelijkheid om configuraties in real time te bekijken. Je kunt hiermee zien hoe de website eruit zal zien nadat de gewenste veranderingen zijn gemaakt. add_action('customize_register', 'your_function'); Hook. In de callback-functie. your_function In dit proces wordt gebruik gemaakt van… $wp_customize Het object bevat een sectie (Section), een instelling (Setting) en een controller (Control). Dit maakt het mogelijk voor gebruikers om opties aan te passen in het customizer-scherm en de effecten op de front-end in real time te zien. Dit is zeer handig voor het beheersen van het uiterlijk van thema's en plugins.