De geheimen van pluginontwikkeling: bouw je eerste extensie van scratch

De geheimen van pluginontwikkeling: bouw je eerste extensie van scratch

De kern van WordPress schuilt in zijn enorme uitbreidbaarheid. Door zelf plugins te ontwikkelen, kunnen ontwikkelaars eenvoudig alle gewenste functies toevoegen aan een website, zonder dat de kerncode hoeft te worden veranderd. Dit zorgt voor meer veiligheid en gemakkelijkheid bij het updaten van WordPress. In deze gids wordt je systematisch geïnformeerd over de basisprocessen, architectuurregels en beste praktijken voor het ontwikkelen van WordPress-plugins.

De kernbasis van pluginontwikkeling

Voordat je begint met schrijven van code, is het heel belangrijk om de basisconcepten en de standaardstructuur van WordPress-plug-ins te begrijpen. Een plugin is in feite één of meerdere PHP-bestanden die zijn opgepakket in een map, en deze bestanden bevatten een speciale header-commentaarfile.

Standaard voor het hoofdbestand van een plugin

Elk plugin moet een hoofd-PHP-bestand hebben. Dit bestand moet de standaardplugin-informatiekoppen bevatten, zodat WordPress het kan herkennen en beheren. De koppen zijn opgeslagen in specifieke commentaarblokken. Bijvoorbeeld, een plugin met de naam… my-first-plugin.php De bestanden kunnen de volgende inhoud bevatten:

Aanbevolen leesmateriaal Handboek voor het ontwikkelen van WordPress-themes: bouw je eerste thema van scratch op。

<?php
/**
 * Plugin Name:       我的第一个插件
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       这是一个用于演示的 WordPress 插件。
 * Version:           1.0.0
 * Author:            你的名字
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 * Domain Path:       /languages
 */

Deze informatie wordt rechtstreeks weergegeven op de “Plugins”-beheerpagina in het WordPress-administratiepaneel.Text Domain 和 Domain Path Het wordt gebruikt voor internationalisering (i18n), zodat de plugin meerdere talen ondersteunt.

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-directory en bestandsorganisatie

Een goed georganiseerde map met plugins is niet alleen handig voor ontwikkeling en onderhoud, maar ook voor de gebruikers om het systeem te begrijpen. Het wordt aanbevolen om de volgende structuur te volgen:

/my-first-plugin/
├── my-first-plugin.php      // 主文件
├── uninstall.php            // 卸载清理脚本
├── includes/                // 核心功能类与函数
│   ├── class-core.php
│   └── functions.php
├── admin/                   // 后台相关文件
│   ├── css/
│   ├── js/
│   └── class-admin.php
├── public/                  // 前台相关文件
│   ├── css/
│   ├── js/
│   └── class-public.php
├── assets/                  // 静态资源（图片等）
└── languages/               // 翻译文件（.po, .mo）

Deze gescheiden structuur splitsst de backend-logica, frontend-logica en gemeenschappelijke bronnen duidelijk van elkaar af, wat overeenkomt met de beste praktijken voor WordPress-development.

利用钩子与过滤器扩展功能

De plugin-API van WordPress is gebaseerd op “hooks”, die het hart vormen van de eventgedreven architectuur. Er zijn twee soorten hooks: actions en filters. Het is belangrijk om deze te begrijpen en ervoor te zorgen dat je ze goed kunt gebruiken, want dit is essentieel voor het ontwikkelen van plugins.

Het gebruik van action hooks

Action hooks bieden je de mogelijkheid om op specifieke momenten in WordPress aangepaste code uit te voeren. Denk hierbij aan het moment waarop een artikel wordt gepubliceerd of wanneer het menu in het beheerpaneel wordt geladen. add_action() De functie “monteert” je eigen functie op deze ‘haakjes’ (hooks).

Aanbevolen leesmateriaal Gids voor websiteontwikkeling: een volledige uitleg van het proces, van planning tot online publicatie.。

Hier is een eenvoudig voorbeeld: we voegen een rij met aangepaste tekst toe aan de voet van een website-pagina. Eerst creeren we een functie in het hoofdplugin-bestand en hangen we deze vervolgens op (mounten we de functie). wp_footer Deze actie zit vast aan de haak.

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

Als WordPress dit punt bereikt… wp_footer Wanneer het om de locatie gaat (meestal in het kader van een thema)... footer.php Als de functie wordt opgeroepen (in de code), wordt de door ons toegevoegde functie uitgevoerd.

Het gebruik van filterhooks

De filterhook wordt gebruikt om gegevens die worden doorgegeven in een proces te bewerken. Het biedt de mogelijkheid om een variabele op te vangen, te controleren en te bewerken, waarna deze door WordPress of andere plugins kan worden gebruikt. add_filter() Een functie die wordt gebruikt om filters toe te passen.

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

Als voorbeeld: wij willen de standaardweergave van de artikeltitels wijzigen, door voor elke titel een bepaald prefix te toevoegen. We zullen de functioneeliteit hiervoor toevoegen aan... the_title Deze filter zit vast aan de haak.

function myplugin_prefix_post_title( $title, $id = null ) {
    // 确保只在主循环且在非管理后台时添加前缀
    if ( ! is_admin() && in_the_loop() ) {
        $title = '[推荐] ' . $title;
    }
    return $title;
}
add_filter( 'the_title', 'myplugin_prefix_post_title', 10, 2 );

De parameters hier 10 Dit betreft de prioriteit (hoe lager het nummer, des eerder wordt de actie uitgevoerd).2 Dit betekent dat onze functie twee parameters accepteert.$title 和 $idDe filterfunctie moet de gewijzigde waarde teruggeven.

Een pagina voor plug-inbeheer maken

Veel plugins vereisen dat er configuratieopties worden beschikbaar gesteld in het WordPress-administratiepaneel. Dit wordt meestal gerealiseerd door een nieuwe pagina toe te voegen aan het beheermenu. WordPress biedt een groot aantal functies om topmenues, submenues en optiepagina's te creeren.

Aanbevolen leesmateriaal Volledige tutorial: Verbeter de verkoopconversie met aangepaste productpaginasjablonen in WooCommerce.。

Beheerdersmenu op bovenste niveau toevoegen

Je kunt gebruikmaken van add_menu_page() Deze functie maakt een aparte achtergrondmenuoptie voor je plugin. De functie vereist meerdere parameters om de titel van de pagina, de naam van het menu, de toegangrechten, de unieke identificator en de callback-functie te definiëren.

De onderstaande code toont hoe je een eenvoudige topmenu-pagina kunt toevoegen, en zorgt ervoor dat deze alleen wordt weergegeven wanneer een beheerder de site bezoekt.

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', // 显示页面内容的回调函数
        'dashicons-admin-generic', // 图标（使用 Dashicons）
        30                      // 菜单位置
    );
}
add_action( 'admin_menu', 'myplugin_add_admin_menu' );

// 定义设置页面的内容
function myplugin_settings_page() {
    ?>
    <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
            settings_fields( 'myplugin_options' ); // 输出安全字段
            do_settings_sections( 'myplugin-settings' ); // 输出设置区块
            submit_button( '保存设置' );
            ?>
        <input type="hidden" name="trp-form-language" value="nl"/></form>
    </div>
    &lt;?php
}

Hier,myplugin_settings_page De functie is verantwoordelijk voor het renderen van de HTML-inhoud van de pagina. In praktische projecten combineer je dit met de API van WordPress.register_setting, add_settings_section, add_settings_fieldOm een formulier te kunnen opslaan, wordt gebruik gemaakt van…

Vormen bouwen en instellingen opslaan

Om gebruikersinvoer op veilige en georganiseerde manier te verwerken, is het nodig om de WordPress API te gebruiken. De API is verantwoordelijk voor het controleren van de invoer (waaronder of deze voldoet aan de vereisten), het valideren van de gegevens en het opslaan in de database. Eerst moet je een nieuwe instellingsoptie registreren, en daarna de vereiste instellingen toevoegen.

Het volgende voorbeeld toont hoe je een tekstveld registreert en de waarde ervan opslaat.

function myplugin_settings_init() {
    register_setting(
        'myplugin_options', // 选项组名
        'myplugin_api_key', // 选项名（存储在 wp_options 表中）
        array(
            'type' => 'string',
            'sanitize_callback' => 'sanitize_text_field', // 数据清理回调
            'default' => ''
        )
    );

    add_settings_section(
        'myplugin_section_main',
        '主要设置',
        null,
        'myplugin-settings'
    );

    add_settings_field(
        'myplugin_field_api',
        'API 密钥',
        'myplugin_field_api_cb',
        'myplugin-settings',
        'myplugin_section_main',
        array( 'label_for' => 'myplugin_api_key' )
    );
}
add_action( 'admin_init', 'myplugin_settings_init' );

function myplugin_field_api_cb() {
    $value = get_option( 'myplugin_api_key', '' );
    echo '<input type="text" id="myplugin_api_key" name="myplugin_api_key" value="' . esc_attr( $value ) . '" class="regular-text">';
}

Op deze manier worden de gegevens die worden ingediend in het formulier verwerkt. sanitize_text_field De functie reinigt de gegevens en slaat deze vervolgens automatisch op in de database. wp_options In de tabel heet de sleutelnaam… myplugin_api_key。

Zorg ervoor dat de plugin veilig en performant is.

Tijdens het ontwikkelen van plugins zijn veiligheid en prestaties belangrijke aspecten die niet mogen worden overgeslagen. Een onveilige plugin kan een bron van beveiligingsproblemen voor het hele WordPress-systeem zijn.

Datavalidatie en escape

Vertrouw nooit op de invoer van gebruikers. Alle gegevens van buitenaf (bijvoorbeeld uit formulieren, URL's of databases) moeten worden gevalideerd, gesanitiseerd en geëscapéerd voordat ze worden weergegeven of gebruikt.

• Verificatie: Kontroleren of de gegevens overeenkomen met het verwachte formaat (bijvoorbeeld of het een e-mailadres of een cijfer is).
• Clean up: Verwijder ongeautoriseerde karakters of inhoud uit de gegevens (bijvoorbeeld HTML-taggen).
• Escaping: Het versleutelen van data wanneer deze naar HTML, JavaScript of een URL wordt gestuurd, om zo cross-site scripting-aanvallen te voorkomen.

WordPress biedt een groot aantal hulpprogramma's (of helperfuncties) aan, bijvoorbeeld:
* sanitize_text_field(): Reinig de tekststring.
* esc_html(): HTML-uitvoer ontsluiten.
* esc_url()Een URL-escapement.
* wp_kses_post()HTML-taggen mogen worden gebruikt in combinatie met de artikelinhoudsfilter.

Het correct laden van scripts en styles

Om de laad snelheid van de pagina niet te beïnvloeden en conflicten te voorkomen, moeten JavaScript- en CSS-bestanden op de juiste manier worden geregistreerd en worden geladen in de volgorde die WordPress voorstelt. wp_enqueue_script() 和 wp_enqueue_style() Functie.

De onderstaande code toont hoe je exclusieve JS- en CSS-bestanden alleen op de beheerpagina van het eigen plugin laadt.

function myplugin_load_admin_assets( $hook ) {
    // 只在我们插件的设置页加载
    if ( $hook != 'toplevel_page_myplugin-settings' ) {
        return;
    }
    wp_enqueue_style(
        'myplugin-admin-css',
        plugins_url( 'admin/css/style.css', __FILE__ ),
        array(),
        '1.0.0'
    );
    wp_enqueue_script(
        'myplugin-admin-js',
        plugins_url( 'admin/js/script.js', __FILE__ ),
        array( 'jquery' ), // 声明依赖 jQuery
        '1.0.0',
        true // 在页脚加载
    );
}
add_action( 'admin_enqueue_scripts', 'myplugin_load_admin_assets' );

Deze methode zorgt ervoor dat resources alleen worden geladen wanneer ze nodig zijn, en dat afhankelijkheden (zoals jQuery) op de juiste manier worden verwerkt. Bovendien helpen de versienummerparameters bij het beheersen van de browsercache.

Samenvatting

Het ontwikkelen van WordPress-plug-ins is een systeematische procedure die begint met het respecteren van de standaardbestandsstructuur en informatieheaders. Het essentieelste aspect is om ervaren te zijn met het gebruik van action- en filterhooks, zodat je op een niet-invasieve manier kunt integreren in het levenscykel van WordPress. Het creeren van een duidelijke backend-beheerinterface voor je plugin, samen met het strikt naleven van de settings-API, kan de gebruikerservaring en de veiligheid van de gegevens aanzienlijk verbeteren. Ten slotte zijn veiligheid (verificatie, schoonmaken, ontsnappen van gevaarlijke tekens) en prestaties (op verzoek laden van resources) belangrijke principes voor het ontwikkelen van kwalitatief goede en betrouwbare plug-ins. Door deze stappen en beste praktijken te volgen, kun je krachtige, veilige en gemakkelijk te onderhouden WordPress-uitbreidingen maken.

Veelgestelde vragen (FAQ)

Welke basiskennis moet je hebben om een WordPress-plugin te ontwikkelen?

Om een WordPress-plugin te ontwikkelen, moet je vertrouwd zijn met de PHP-programmeringstaal, aangezien plugins voornamelijk bestaan uit PHP-code. Daarnaast is een basiskennis van HTML, CSS en JavaScript vereist voor het bouwen van de front-end-omgeving en interacties. Het belangrijkste is dat je de basisarchitectuur van WordPress begrijpt, met name het hook-systeem (actions en filters), de hiërarchie van thematemplates en de manier van werken met de database. WP_Query 和 wpdb (Klasse)

Hoe debug je een WordPress-plugin die je aan het ontwikkelen bent?

De meest effectieve manier is om… wp-config.php De WordPress-debogagemode is in het bestand geactiveerd. WP_DEBUG De constante is ingesteld op... trueDit zal PHP-fouten, waarschuwingen en berichtgeving op de pagina weergeven. Je kunt dit ook gebruiken om... error_log() De functie slaat aangepaste debug-informatie op in het foutenlog van de server. Voor een meer gedetailleerde debugging kunt u gebruikmaken van speciale PHP-debugging-hulpmiddelen, zoals Xdebug.

Hoe moeten plugins omgaan met database-operaties?

Voor het opslaan van simpel data wordt het aanbod van de Option API in WordPress aanbevolen.add_option, get_option, update_optionOm gegevens in de vorm van sleutel-waarde-paren op te slaan, wordt vaak een bepaald type database gebruikt. Voor gestructureerde gegevens waarbij de structuur zelf kan worden aangepast, kun je gebruikmaken van plugins wanneer deze zijn geactiveerd. dbDelta() Er bestaan functies om de tabelstructuur veilig te creëren of bij te werken, waardoor het noodzakelijk is om een bepaalde SQL-indeling te volgen. Wees er zeker van dat je deze functies gebruikt. $wpdb De globale object verzorgt alle database-verzoeken en gebruikt de `prepare`-methode om SQL-injectieaanvallen te voorkomen.

Hoe maak ik mijn plugin internationaal beschikbaar in meerdere talen?

WordPress gebruikt het GNU gettext-framework voor internationalisering. Je moet de instellingen in het hoofdbestand (header) van je plugin op de juiste manier instellen. Text Domain 和 Domain PathIn het code, moet alle tekst die moet worden vertaald worden gemarkeerd met speciale tekens of tags. __()(Gebruikt voor teruggegeven waarden) of _e()(Dit wordt gebruikt om vertaalfuncties rechtstreeks uit te voeren.) Vervolgens wordt met een tool als Poedit de broncode gescannd om de vertalingen te genereren. .pot Templatebestanden, en op basis daarvan worden de versies in verschillende talen gemaakt. .po 和 .mo Vertaal de bestand en plaatst het op de aangegeven plek. Domain Path Catalogus.

Nadat de ontwikkeling is afgerond, hoe publiceer ik mijn plugin in het officiële catalogus?

Eerst moet je ervoor zorgen dat je plugin volledig voldoet aan de officiële ‘Plugin Development Manual’ en de vereisten voor het indienen van een plugin, waaronder codestandaarden, veiligheid en de licentieovereenkomst (die moet compatibel zijn met GPL). Daarna moet je een account aanmaken op WordPress.org en een aanvraag indienen om je plugin te kunnen indienen. Na goedkeuring kun je de plugincode met Subversion naar het door het WordPress-team toegewezen coderepository uploaden. Na het indienen moet je de beschrijvingspagina van de plugin invullen, inclusief een banner, een icon, screenshots en uitgebreide instructies, zodat gebruikers de plugin kunnen bekijken en downloaden.