Hoe je van scratch leert om WordPress-plugins te ontwikkelen: een volledig handboek en praktische tutorial

Het begrijpen van de basisarchitectuur van WordPress plugins

Voordat je met het ontwikkelen begint, is het belangrijk om de kernconcepten en werking van WordPress-plug-ins te begrijpen. Een plugin is in feite een groep PHP-bestanden die de kernfuncties van WordPress kunnen uitbreiden en bevat meestal instructies, uitvoerende code en resourcebestanden. De werking van een plugin is volledig afhankelijk van het systeem van hooks (haakjes) dat WordPress biedt.

Exploring the standard file structure of plugins

Een standaard WordPress-plugin volgt meestal een bepaalde directorystructuur. De hoofdpluginbestand, bijvoorbeeld... my-first-plugin.phpDit moet worden geplaatst op /wp-content/plugins/ Deze bestand bevindt zich in de map of een submap van de directory. Het is van cruciaal belang, omdat het de plugin-headinformatie bevat, waarmee het WordPress-systeem kan herkennen welke plugin je hebt gebruikt.

Een typische plug-incatalogus bevat mogelijk de volgende onderdelen: het hoofdplug-inbestand en een map waarin statische bronnen zoals JavaScript en CSS worden opgeslagen. assets/ Mappen voor PHP-klassenbestanden includes/ Contents, voor gebruikersinterfaces admin/ 和 public/ Mappen, en de tools die worden gebruikt voor het vertalen van bestanden languages/ Inhoudsopgave. Een goede structuur helpt bij het organiseren en onderhouden van code, vooral wanneer de functionaliteit van plugins complexer wordt.

Aanbevolen leesmateriaal WordPress-pluginontwikkeling: van het begin tot meesterschap: een volledig handboek voor het bouwen van aangepaste functies。

Kennis van de belangrijkste informatie in de bestandskoppen van plugins

Elk plugin moet beginnen met specifieke meta-informatie (header), die wordt opgenomen in een PHP-commentaarblock. Dit is essentieel voor WordPress om het plugin te herkennen. De basisformat is als volgt:

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

<?php
/**
 * Plugin Name: 我的第一个插件
 * Plugin URI:  https://www.example.com/my-first-plugin
 * Description: 这是一个简短描述，介绍插件功能的句子。
 * Version:     1.0.0
 * Author:      你的名字
 * Author URI:  https://www.example.com
 * License:     GPL v2 or later
 * Text Domain: my-first-plugin
 * Domain Path: /languages
 */

Hieronder valt ook:Plugin Name Dit is vereist; alle overige informatie is optioneel, maar wordt aanbevolen om in te vullen. Vooral... Text Domain 和 Domain PathZe zijn bedoeld om de internationalisering (meertalig ondersteuning) van plugins voor te bereiden. WordPress leest deze informatie en toont deze op de backend-pagina voor het beheer van plugins.

Een lokale ontwikkelingsomgeving opzetten en de eerste plugin maken

Voordat je met het coderen begint, is een geïsoleerde, snel te itereren lokale ontwikkelingsomgeving essentieel. Dit voorkomt de risico's die kunnen optreden bij het direct testen van de website online.

Configureren van de lokale ontwikkelingsketen

Het wordt aanbevolen om een lokale server-integratieomgeving te gebruiken, zoals Local by Flywheel, XAMPP of Laragon. Met deze tools kun je PHP, MySQL en de webserver die WordPress vereist, in één stap installeren. Daarnaast heb je een code-editor nodig, zoals Visual Studio Code of PHPStorm; deze bieden ondersteuning voor syntaxhighlighting, codevoorstellen en het oplossen van fouten. Zorg ervoor dat je PHP-versie compatibel is met de server waar je WordPress op gaat installeren; het wordt meestal aanbevolen om PHP 7.4 of een latere versie te gebruiken.

Een simpel plugin schrijven en activeren:

Laten we nu de eerste functionele plugin maken. /wp-content/plugins/ In de map moet je een nieuwe map maken met de naam: my-first-pluginIn deze map moet je een bestand maken met de naam my-first-plugin.php De file.

Aanbevolen leesmateriaal Ultimate Guide to WordPress Plugin Development: Build Your First Plugin from Scratch。

Kopieer de plugin-informatie die in de vorige sectie wordt genoemd naar het begin van deze bestand. Daarna voegen we een simpel functie toe: automatisch toevoegen van een aangepaste tekst aan het eind van de artikelinhoud. Hiervoor gebruiken we de “filters”-hook van WordPress. Voeg de volgende code onder de kopieerde informatie:

// 在文章内容后添加自定义文本
function myfp_add_footer_text( $content ) {
    // 仅对主循环中的单篇文章生效
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $custom_text = '<p><em>Dank je voor het lezen! Deze tekst is ondersteund door “Mijn eerste plugin”.</em></p>';
        $content .= $custom_text;
    }
    return $content;
}
// 将函数挂载到 ‘the_content’ 过滤器上
add_filter( 'the_content', 'myfp_add_footer_text' );

Na het opslaan van het bestand, log in je in bij het WordPress-administratiepaneel en ga naar de pagina “Plug-ins”. Hier moet je een nieuwe plugin zien met de naam “Mijn eerste plugin”. Klik op “Activeren”. Nu kun je een artikel op je website bekijken; je ziet dat de tekst die we hebben toegevoegd aan het eind van het artikel is verschenen. Hiermee is je eerste WordPress-plugin met succes geïnstalleerd en geactiveerd.

De kerntechnieken van pluginontwikkeling beheersen

De sterke uitbreidbaarheid van WordPress is gebaseerd op enkele kernconcepten: hooks, de Options API, custom post types (CPT’s) en database-operaties. Het beheersen van deze concepten is essentieel voor het uitvoeren van geavanceerde ontwikkelingen.

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

Een dieper inzicht in acties en filter-hooks

Het hook-systeem vormt de basis voor het ontwikkelen van WordPress-plug-ins en bestaat uit actions (acties) en filters. Action-hooks worden op specifieke momenten uitgevoerd (bijvoorbeeld wanneer de pagina wordt geladen of wanneer een artikel wordt gesaved), waardoor je bepaalde acties kunt uitvoeren, zoals een menu toevoegen of een e-mail sturen. add_action() Een functie die wordt gebruikt om iets te mounten.

Als voorbeeld: voeg een nieuwe pagina toe aan het menu voor backend-beheer.

function myfp_add_admin_menu() {
    add_menu_page(
        '我的插件设置', // 页面标题
        '我的插件',     // 菜单标题
        'manage_options', // 权限
        'myfp-settings',  // 菜单slug
        'myfp_settings_page', // 回调函数，用于显示页面内容
        'dashicons-admin-generic', // 图标
        20
    );
}
add_action( 'admin_menu', 'myfp_add_admin_menu' );

De filter-haken bieden je de mogelijkheid om gegevens te “bewerken”. Ze worden gebruikt om gegevens op te vangen voordat deze worden gebruikt (bijvoorbeeld worden weergegeven in een browser of opgeslagen in een database). Je kunt de gegevens dan bewerken en een nieuwe waarde terugsturen. Dit hebben we gebruikt in ons eerste plugin. the_content Het is gewoon een filter-hook.

Aanbevolen leesmateriaal Diepgravend onderzoek naar WooCommerce: een volledig handboek voor het bouwen van een high-performance e-commerce-website vanuit het niets。

De plugin-instellingen worden opgeslagen met behulp van de Option API.

Plugins moeten meestal enkele instellingen opslaan, zoals API-sleutels en de status van schakelaars. WordPress biedt hierbij ondersteuning. Options API Om deze soort gegevens gemakkelijk te verwerken, zijn er enkele belangrijke functies beschikbaar. De belangrijkste functies zijn onder andere: add_option(), get_option(), update_option() 和 delete_option()。

Maak een eenvoudige instellingenpagina om deze functies te kunnen gebruiken. Definieer eerst de callback-functies voor het menu zoals hierboven beschreven. myfp_settings_page Om een formulier te weergeven:

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

function myfp_settings_page() {
    ?>
    <div class="wrap">
        <h1>Mijn plug-ininstellingen</h1>
        <form method="post" action="/nl/options.php/" data-trp-original-action="options.php">
            <?php
            settings_fields( 'myfp_settings_group' ); // 输出安全字段
            do_settings_sections( 'myfp-settings' );  // 输出设置部分
            submit_button(); // 输出提交按钮
            ?>
        <input type="hidden" name="trp-form-language" value="nl"/></form>
    </div>
    &lt;?php
}

Vervolgens moet je gebruikmaken van... register_setting(), add_settings_section() 和 add_settings_field() Gebruik functies zoals `declare` en `initialize` om deze instellingen te declareren en in te stellen. Dit proces zorgt ervoor dat de gegevens veilig worden opgeslagen. wp_options In de tabel.

Een volledig voorbeeld van een praktische plugin:

We zullen de kennis die we eerder hebben geleerd integreren om een iets complexere, maar praktische plugin te maken: een plugin voor het schatten van de leesduur van artikelen. De plugin toont de verwachte leesduur onder de titel van de artikelen.

Creëer de hoofdfile van het plugin en de functionele methoden.

Een nieuwe map voor plugins maken post-reading-time En de hoofdfile post-reading-time.phpVul de standaardgegevens voor de pluginkop in. Daarna maken we de kernfuncties om de leestijd te berekenen.

function prt_calculate_reading_time( $post_id ) {
    // 获取文章内容
    $content = get_post_field( 'post_content', $post_id );
    // 清除HTML标签和短代码，只计算文字
    $text = strip_tags( strip_shortcodes( $content ) );
    // 计算字数（中英文混合场景的简单处理）
    $word_count = mb_strlen( $text, 'UTF-8' );
    // 假设平均阅读速度为每分钟300字（可根据需要调整）
    $reading_speed = 300;
    // 计算分钟数，至少1分钟
    $minutes = floor( $word_count / $reading_speed );
    if ( $minutes < 1 ) {
        $minutes = 1;
    }
    // 返回包含时间的字符串
    return sprintf( _n( '约 %d 分钟读完', '约 %d 分钟读完', $minutes, 'post-reading-time' ), $minutes );
}

Front-end weergave in integratie met back-end beheer

Volgens de beschrijving moeten we nu besluiten hoe we deze tijd gaan weergeven. Een veel voorkomende manier is om deze tijd toe te voegen aan de meta-informatie van het artikel (onder de titel). the_content De filter of het thema biedt bepaalde ‘hooks’ aan. Hier gebruiken we een meer geschikte actie-hook. thesis_hook_before_post(afhankelijk van het onderwerp), of op een meer algemene manier: de inhoud van de artikelen wordt rechtstreeks gefilterd.

Ter meer flexibiliteit hebben we een shortcode en een klein widget gemaakt, en we bieden een eenvoudige instellingsoptie om aan te geven of de inhoud automatisch moet worden weergegeven of niet.

Allereerst moet je een kort nummer registreren:

function prt_reading_time_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'id' => get_the_ID(),
    ), $atts, 'reading_time' );

$time_text = prt_calculate_reading_time( $atts['id'] );
    return '<span class="reading-time">'. $time_text . '</span>'add_shortcode( 'reading_time', 'prt_reading_time_shortcode' );

Vervolgens kunnen we de resultaten automatisch toevoegen aan het begin van het artikel (met behulp van een filter):

function prt_prepend_to_content( $content ) {
    if ( is_single() && get_option( 'prt_auto_display', '1' ) == '1' ) {
        $time_html = '<div class="post-reading-time">' . prt_calculate_reading_time( get_the_ID() ) . '</div>';
        $content = $time_html . $content;
    }
    return $content;
}
add_filter( 'the_content', 'prt_prepend_to_content' );

Je moet ook een instellingsoptie creeren in de backend. prt_auto_displayDe gebruiker kan zelf bepalen of de automatische weergave-functie wordt ingeschakeld of niet. Hiermee is een volledig functionerend en goed georganiseerd plugin gemaakt.

Samenvatting

We begonnen met het begrijpen van de basisarchitectuur van plugins en de inhoud van de bestandskoppen. Vervolgens bouwden we stap voor stap een ontwikkelingsomgeving op en creëerden we de eerste simpele functionaliteitsplugin. Door diep te duiken in het kernpunt van de uitbreidbaarheid van WordPress, het hook-systeem, leerden we hoe we de uitvoer van processen en het bewerken van gegevens kunnen beïnvloeden zonder de kerncode aan te passen. Met de Options API konden we permanente instellingen voor de plugin opstellen. Ten slotte combineerden we het theoretische kennis met de praktijk door een volledig voorbeeld van een plugin te bouwen voor het schatten van de leesduur van artikelen. Hierbij werden alle aspecten van de ontwikkelingsprocedure behandeld, van het schrijven van de functionaliteit tot het creeren van kortcodes en de integratie in het front-end. Vergeet niet: een goede pluginontwikkeling begint met duidelijk planeren, het naleven van de WordPress-编码standaarden, en het altijd prioriteit te geven aan veiligheid, prestaties en de gebruikerservaring.

Veelgestelde vragen (FAQ)

Welke voorwaartse kennis is vereist om een WordPress-plugin te ontwikkelen?

Je moet een solide basis in PHP-programmering hebben, aangezien de code van de plugin voornamelijk in PHP is geschreven. Daarnaast is het belangrijk om een basiskennis te hebben van HTML, CSS en JavaScript, zodat je de front-end-weergave en interactie kunt beheersen. Het is handig om de basisconcepten van MySQL te begrijpen, zodat je de manier van data-opslag en -verwerking in WordPress kunt begrijpen. Het allerbelangrijkste is om gewend te raken aan het lezen van de officiële WordPress-developerhandboeken (Codex) en de referenties voor ontwikkelaars (Developer Reference).

Hoe kan ik zorgen dat de plugin die ik ontwikkeld heb veilig is?

Security is van het grootste belang. Verifieer en desinfecteer altijd de invoer van gebruikers, en ontsluit de uitgegeven gegevens (escape). Gebruik de door WordPress beschikbare nonces (nonces) om cross-site request forgery (CSRF) te voorkomen. Zorg ervoor dat je de databasequery's op de juiste manier opstelt. $wpdb De door de klasse geboden methoden (zoals) prepare()Om SQL-injecties te voorkomen, moet je onveilige functies vermijden. eval()Updaten je plugins regelmatig om bekende beveiligingslekken te verhelpen.

Welke map moet de plugin worden opgeslagen?

WordPress-plug-ins moeten worden opgeslagen op de website. /wp-content/plugins/ De pluginbestanden kunnen worden opgeslagen in een speciale map. Je kunt de hoofd-PHP-fail van de plugin direct opnemen in de root-map van deze map, maar het is beter om voor elke plugin een apart submap aan te maken en alle relevante bestanden (PHP, JS, CSS, afbeeldingen, etc.) in deze submap op te slaan. Dit zorgt voor een duidelijke structuur van de bestanden en voorkomt conflicten met andere plugins.

Hoe voeg ik een instellingenpagina toe aan mijn plugin?

Het toevoegen van een instellingenpagina aan een plugin omvat meestal enkele stappen: in eerste instantie... add_action( ‘admin_menu’, ‘your_function’ ) De hook registreert een nieuw management-menü of sub-menü-item. Vervolgens wordt de HTML-formulier van de pagina uitgegeven in de callback-functie. Daarna wordt… register_setting()、add_settings_section() 和 add_settings_field() Gebruik de Settings API-functies om je instellingen te declareren en te koppelen aan de corresponderende velden. Dit zorgt automatisch voor het controleren van toegangrechten, het verifiëren van gegevens (niet-CES-verificatie) en het opslaan van keuzes. Ten slotte, gebruik deze functies in je formulier. settings_fields() 和 do_settings_sections() De functie genereert de benodigde gegevens (velden).

Wat zijn hooks en waarom zijn ze zo belangrijk?

Hookjes zijn specifieke punten in de uitvoeringsflow van het kernprogramma van WordPress waarbij plugins en thema’s hun eigen code kunnen toevoegen. Er bestaan twee soorten hookjes: Action-hookjes en Filter-hookjes. Action-hookjes worden uitgevoerd wanneer bepaalde gebeurtenissen plaatsvinden, waardoor je eigen code kan worden gebruikt om nieuwe functies te toevoegen. Filter-hookjes bieden de mogelijkheid om gegevens te bewerken voordat deze worden gebruikt of opgeslagen. Het hookjesysteem vormt de kern van de uitbreidbaarheid van WordPress; dit maakt het mogelijk voor ontwikkelaars om het gedrag van WordPress drastisch te veranderen of te verbeteren zonder de kernbestanden aan te passen. Hierdoor blijft het kernprogramma schoon en upgradenbaar.