Ultimate Guide to WordPress Plugin Development: Build Your First Custom Plugin from Scratch

Waarom kiezen je voor het ontwikkelen van WordPress plugins?

WordPress is de populairste content management system (CMS) ter wereld geworden dankzij zijn uitstekende schaalbaarheid, die vooral te danken is aan zijn pluginarchitectuur. Door zelf plugins te ontwikkelen, kun je alle functies toevoegen die je wenst aan je website, zonder dat je de kerncode van WordPress hoeft aan te passen. Dit betekent dat deze functies onafhankelijk van het gebruikte thema kunnen bestaan en dat ze onverstoord blijven wanneer je het thema vervangt. Bovendien kunnen goede plugins problemen van specifieke gebruikers oplossen en zelfs een apart product of dienst worden.

Als je het ontwikkelen van plugins onder de knie hebt, verandert je van een gebruiker van WordPress in een creator. Of je nu de customiseringen van je eigen projecten wilt realiseren of wilt inkomsten genereren door commerciële plugins te ontwikkelen, het is van essentieel belang om de fundamentele principes en beste praktijken van pluginontwikkeling te begrijpen. Deze gids leidt je stap voor stap door het proces, van de basisstructuur van een plugin tot het bouwen van een functioneel en standaardvoldoend plugin.

Maak je eerste pluginstructuur op

Een standaard WordPress-plugin is een map die één of meerdere PHP-bestanden bevat, en de root-map moet een hoofdbestand (main file) bevatten. Dit hoofdbestand moet bepaalde plugin-informatie bevatten, zodat WordPress het kan herkennen en kunnen beheren.

Aanbevolen leesmateriaal WordPress-pluginontwikkeling beheersen: van nul efficiënte, aangepaste functionaliteiten bouwen。

Maak een hoofdbestand voor het plugin.

Het eerste wat je moet doen, is de hoofdfile van het plugin maken. Deze file heet meestal dezelfde naam als het plugin, bijvoorbeeld... my-first-plugin.phpBovenaan deze bestand moet je een standaard commentaar met de plugin-headinvoer toevoegen.

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://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
 * Domain Path:       /languages
 */

Deze commentaar is het soort “identiteitsbewijs” van het plugin. Plugin NameDe naam van het plugin is het enige vereiste veld; de overige velden dienen om extra informatie te bieden. De “Plugins”-pagina in het WordPress-administratiepaneel leest deze informatie op en toont deze vervolgens. Nadat je deze bestand hebt gemaakt, moet je het plaatsen in de installatie-map van WordPress. /wp-content/plugins/ De bestand zit in een map. Je kunt eenvoudig een submap maken met de naam “my-first-plugin” en de hoofdbestand daarin plaatsen. Log nu in bij het WordPress-administratiepaneel en je ziet het in de lijst met plugins; je kunt het ook activeren. Hoewel het voorlopig nog geen functies heeft, heb je al de eerste stap in het succesvol maken van je plugin gezet.

Organiseer je pluginbestanden.

Naarmate de functionaliteiten toenemen, wordt het moeilijker om al het codegedrag in één hoofdbestand te bewaren. Een goede structuur van de bestanden is van essentieel belang. Een typisch plugin bevat meestal de volgende mappen:
* /includes/Deze map bevat de bestanden met de definities van de kernfuncties en klassen.
* /admin/Deze map bevat bestanden die te maken hebben met de backend-beheerinterface.
* /public/Deze map bevat bestanden met front-end-functies die zijn gericht op bezoekers van de website.
* /assets/Hier worden statische bronnen opgeslagen, zoals JavaScript, CSS en afbeeldingen.
* /languages/Plaats hier de internationale vertaalmappen (.po/.mo).

Deze modulaire structuur maakt de code niet alleen duidelijk, maar bevordert ook de samenwerking binnen het team en het latere uitbreiden van de functionaliteiten. In het hoofdbestand… my-first-plugin.php In deze context zou je normaal gesproken gebruikmaken van… require_once Om de functiebestanden uit deze mappen te kunnen gebruiken…

Het begrijpen van de kernontwikkelingsconcepten van WordPress: hooks en filters

De kern van het ontwikkelen van WordPress-plug-ins is het “hook”-mechanisme. Dit mechanisme biedt je de mogelijkheid om je code op specifieke momenten te “in te hangen” in de uitvoeringsflow van WordPress, waardoor je functies kunt veranderen of toevoegen. Er bestaan twee soorten hooks: Actions en Filters.

Aanbevolen leesmateriaal Van nul naar expert in het ontwikkelen van WordPress plugins: een gids voor het implementeren van geavanceerde functies en het naleven van beste praktijken。

Functies toevoegen met action-hooks

Action hooks bieden je de mogelijkheid om je eigen functies uit te voeren op een specifiek moment tijdens het werken van WordPress. Denk bijvoorbeeld aan het uitvoeren van een actie wanneer een artikel wordt gepubliceerd, of het toevoegen van een menu aan de sidebar in het administratiepaneel.

Hier is een eenvoudig voorbeeld: wp_footer Deze actie-hook zal een bericht weergeven in de gemeenschappelijke ruimte onderaan de website-pagina. Je moet de volgende code toevoegen aan het hoofdbestand van je plugin.

function myplugin_add_footer_text() {
    echo '<p style="text-align:center;">Fijn dat je mijn eerste plugin hebt gebruikt!</p>';
}
add_action( 'wp_footer', 'myplugin_add_footer_text' );

Hier,myplugin_add_footer_text Dit is een door ons gedefinieerde functie.add_action() De functie “bindt” deze andere functie aan… wp_footer Deze actie is gekoppeld aan een hook. Wanneer WordPress de voetnoot (footer) van de pagina verwerkt, wordt onze functie automatisch opgeroepen.

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

Inhoud bewerken met filterhooks

In tegenstelling tot actie-haken (action hooks) worden filter-haken gebruikt om gegevens te bewerken. Je functie ontvangt een invoerwaarde en moet na verwerking een uitvoerwaarde teruggeven. Denk hierbij aan het bewerken van de titel van een artikel of het veranderen van de weergave van de inhoud.

Het volgende voorbeeld toont hoe dit kan worden gebruikt. the_content Een filter dat automatisch een op maat gemaakte tekst toevoegt aan het eind van alle artikelen en pagina-inhoud.

function myplugin_append_to_content( $content ) {
    $custom_text = '<div class="myplugin-note"><p><em>Deze tekst wordt versterkt door mijn eigen aangepaste plugin.</em></p></div>';
    // 仅在主循环的单篇文章页面添加
    if ( is_single() &amp;&amp; in_the_loop() &amp;&amp; is_main_query() ) {
        return $content . $custom_text;
    }
    return $content;
}
add_filter( 'the_content', 'myplugin_append_to_content' );

functie myplugin_append_to_content Ontvang de originele versie. $contentWe control wanneer tekst wordt toegevoegd door gebruik te maken van condities, zodat dit alleen op de gewenste plaatsen gebeurt. Vervolgens returneren we de gewijzigde inhoud.add_filter() De functie heeft de registratie voltooid.

Aanbevolen leesmateriaal Van beginner tot expert in het ontwikkelen van WordPress-plug-ins: het bouwen van aangepaste functionaliteiten en efficiënte uitbreidingen.。

Een beheerpagina maken voor het plugin

De meeste plugins hebben een configuratiepagina nodig, zodat gebruikers opties kunnen instellen. WordPress biedt een uitgebreide API aan om een mooi en standaard beheerinterface te creeren.

Beheerdersmenu op bovenste niveau toevoegen

Je kunt een nieuw bovenste menu-item toevoegen aan het linkernavigatiegebied in het WordPress-administratiepaneel van je plugin. Hierdoor wordt het gemakkelijk toegankelijk voor gebruikers. add_menu_page() Deze functionaliteit is gerealiseerd door een function. We gebruiken dit meestal in... admin_menu Deze functie wordt opgeroepen in deze action-hook.

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 myplugin_add_admin_menu() {
    add_menu_page(
        '我的插件设置', // 页面标签
        '我的插件',     // 菜单标题
        'manage_options', // 所需权限
        'myplugin-settings', // 菜单 Slug
        'myplugin_settings_page_html', // 显示页面内容的回调函数
        'dashicons-admin-generic', // 图标（可选）
        80 // 菜单位置（可选）
    );
}
add_action( 'admin_menu', 'myplugin_add_admin_menu' );

Constructeer de inhoud voor de instellingenpagina.

Nu moeten we de eerder genoemde callback-functies definiëren. myplugin_settings_page_htmlDe HTML-content van de instellingenpagina wordt gebruikt om deze pagina te renderen. Een eenvoudige versie hiervan is als volgt:

function myplugin_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( 'myplugin_options' );
            do_settings_sections( 'myplugin-settings' );
            submit_button( '保存设置' );
            ?>
        <input type="hidden" name="trp-form-language" value="nl"/></form>
    </div>
    &lt;?php
}

Deze functie maakt een formulier dat is opgemaakt volgens het ontwerp van de WordPress-backend. Om de instellingen volledig te kunnen verwerken, moet je ook andere tools of functies gebruiken. register_setting(), add_settings_section() 和 add_settings_field() Met functies als deze kunnen specifieke instellingen worden gedefinieerd, waardoor de volledige werkwijze van de “Settings API” wordt gevormd. Dit is de aanbevolen manier om plugin-opties veilig op te slaan en op te halen.

Een praktische plugin-functie om het aantal bezoekjes aan artikelen bij te houden:

Laten we deze concepten combineren om een praktische functie te creeren: het tellen en weergeven van het aantal bezoekjes per artikel.

Een database-veld creëren en data daarin opslaan

Allereerst moeten we op het moment van publicatie van een artikel een plek creëren om het aantal bezoekjes te bewaren. Meestal gebruiken we hiervoor de mogelijkheden van de post meta-data (artikelmeta-data) in WordPress. add_post_meta Een functie kan hiervoor worden gebruikt, maar een eleganter manier is om de waarde te controleren en bij te werken wanneer de artikel wordt bekeken.

function myplugin_track_post_views( $post_id ) {
    if ( ! is_single() ) {
        return;
    }
    if ( empty( $post_id ) ) {
        global $post;
        $post_id = $post->ID;
    }
    // 获取当前浏览次数
    $count = get_post_meta( $post_id, 'myplugin_post_views', true );
    // 如果为空，初始化为0
    $count = $count ? absint( $count ) : 0;
    $count++;
    // 更新数据库
    update_post_meta( $post_id, 'myplugin_post_views', $count );
}
// 在模板重定向时触发，确保只对真实访客计数
add_action( 'template_redirect', 'myplugin_track_post_views' );

Het aantal bezoekjes wordt weergegeven op de frontend.

Nadat de gegevens zijn opgeslagen, hebben we een functie nodig om deze te kunnen ophalen en weergeven. We kunnen een shortcode maken, zodat gebruikers deze gemakkelijk kunnen toevoegen aan het artikelinhoud of aan bijlagen in de sidebar.

function myplugin_display_post_views_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'id' => get_the_ID(),
    ), $atts, 'myplugin_views' );

$post_id = absint( $atts['id'] );
    $views = get_post_meta( $post_id, 'myplugin_post_views', true );
    $views = $views ? $views : 0;

return '<span class="myplugin-view-count">Bezoekjes: ' . esc_html( $views ) . '</span>'php
add_shortcode('myplugin_views', 'myplugin_display_post_views_shortcode');

Nu hoeven gebruikers alleen maar een kort code in te voeren in de artikeleditor. [myplugin_views]Of je gebruikt een klein hulpmiddel om een “shortcode” toe te voegen en deze in te voeren, dan kan het aantal bezoekjes aan dat artikel worden weergegeven op de pagina. Dit volledige voorbeeld omvat het hele proces: het opslaan van data (hooks), het opvragen van data en de weergave op de frontend (shortcode).

Samenvatting

Met deze handleiding heb je het hele proces afgerond om van scratch een WordPress-custom plugin te bouwen. Eerst hebben we de basisstructuur van een plugin besproken en een hoofdbestand gemaakt dat de standaardheader-informatie bevat. Daarna hebben we de fundamenten van WordPress-pluginontwikkeling verkend: hooks (actions en filters), en hoe je deze kunt gebruiken om functies te toevoegen of te bewerken. Vervolgens hebben we een professionele beheerpagina voor de plugin gemaakt, die essentieel is voor de interactie met gebruikers. Ten slotte hebben we dit in praktijk gebracht met een voorbeeld van een plugin die het aantal bezoekjes aan artikelen tellt, waardoor we een complete functionaliteit van het opslaan van gegevens tot het weergeven op de frontend hebben gerealiseerd.

Vergeet niet dat het ontwikkelen van goede plug-ins niet alleen gaat om het laten werken van de functionaliteit, maar dat je ook aandacht moet besteden aan de beveiliging van de code, het onderhoud, de prestaties en de naleving van de WordPress-codestandaarden. Door veel te oefenen en de WordPress API te verkennen, zul je in staat zijn om krachtige plug-ins te maken die door gebruikers worden geliefd.

Veelgestelde vragen (FAQ)

Welke voorwaartse kennis is vereist om plugins te ontwikkelen?

Je moet een solide basis in PHP-programmering hebben, omdat WordPress en zijn plugins voornamelijk in PHP zijn geschreven. Het is ook belangrijk om een basiskennis te hebben van HTML, CSS en JavaScript, zodat je gebruikersinterfaces en interactieve functies kunt bouwen. Een begrip van de basisconcepten van de MySQL-databank is handig om de manier van dataopslag in WordPress te begrijpen.

Hoe debug ik mijn WordPress-plugin?

Allereerst moet je zorgen dat… wp-config.php De WordPress-debogagemode is in het bestand ingeschakeld. WP_DEBUG De constante is ingesteld op... trueDit zorgt ervoor dat PHP-fouten en waarschuwingen op het scherm worden weergegeven. Daarnaast wordt… error_log() De functie schrijft de debug-informatie in het foutenlog van de server, wat een zeer betrouwbare manier van debuggen is. Voor complexe variabelen kan dit worden gecombineerd met andere methoden. print_r() 或 var_dump() 与 error_log()Daarnaast kunt u de browser-developertools (F12) gebruiken om problemen met het front-end JavaScript en CSS op te sporen en te verhelpen.

Hoe kan mijn plugin worden geïntegreerd met verschillende versies van WordPress?

Tijdens het ontwikkelen moet je regelmatig de officiële WordPress-developershandleiding raadplegen om te kijken naar de veranderingen in functies en hooks tussen verschillende versies. function_exists() 或 version_compare() Gebruik conditionele statements om te controleren of een bepaalde functie of eigenschap beschikbaar is, zodat er een back-compatible alternatief kan worden geboden. Vergeet niet de compatibele versies van WordPress duidelijk aan te geven in de beschrijving van het plugin. Het is de beste praktijk om regelmatig te testen in verschillende versies van WordPress om de compatibiliteit te garanderen.

Wat moet je bij het ontwikkelen van commerciële plugins goed onthouden?

Tijdens het ontwikkelen van commerciële plugins moet de veiligheid, de kwaliteit van het code en de gebruikerservaring topprioriteit hebben. Je moet een betrouwbare en veilige authenticatie-systeem implementeren (bijvoorbeeld met licentie-sleutels). Het is van belang om duidelijke en tijdige gebruikersdocumentatie te bieden en technische ondersteuning te verlenen. Zorg ervoor dat je de officiële WordPress-pluginontwikkelingsgidsen en de GPL-licentieovereenkomst naleeft. Overweeg om professionele platforms als Freemius of Easy Digital Downloads te gebruiken voor het verwerken van verkoop, update-notificaties en het beheer van support-verzoeken.