WordPress plugin ontwikkeling: functionele modules bouwen van nul tot één

Het begrijpen van de basisstructuur van WordPress plugins

Voordat je verder gaat met het bekijken van de code, is het heel belangrijk om de basiscomponenten van een WordPress-plugin te begrijpen. Een plugin is in feite één of meerdere onderdelen die zijn opgeslagen in een speciale map in het WordPress-bestandssysteem.wp-content/plugins/De PHP-bestanden in de map bevatten een centrale hoofdbestand, waarin de meta-informatie van het plugin is opgeslagen. De aanwezigheid van het plugin wordt aan WordPress gemeld via een commentaarblok in een speciale format.

Het kernbestand van de plugin, bijvoorbeeld als we het 'core.js' noemen...my-first-plugin.phpDe plugin moet een specifieke bestandskopijing (header comment) bevatten. Deze commentaarblock bevat informatie over de naam van de plugin, de beschrijving, de versie, de ontwikkelaar, etc. Dit is de enige manier voor WordPress om de plugin te herkennen en te laden. Een zeer basistische plugin kan bestaan uit slechts één bestand. De plugin kan de functionaliteit van de website wijzigen of uitbreiden door gebruik te maken van de API's die WordPress biedt, zoals Action Hooks en Filter Hooks.

De functionaliteit van een plugin kan zeer simpel zijn, bijvoorbeeld een regel tekst toevoegen aan de onderste helft van een pagina; of zeer complex, bijvoorbeeld een volledig e-commerce-systeem creëren. Ongeacht de complexiteit, volgt de ontwikkeling altijd hetzelfde basispatroon: eerst wordt de juiste bestandsstructuur op de juiste plek gecreëerd, daarna wordt de code geschreven en geïntegreerd in het levenscyclusmechanisme van WordPress, en ten slotte worden via het administratiepaneel van WordPress de nodige instellingen gedaan.

Aanbevolen leesmateriaal WordPress-pluginontwikkelingsgids: van nul beginnen met het maken van je eerste plugin。

Maak je eerste plugin.

Laten we het met een klassiek voorbeeld van “Hello World” proberen om de simpelste plugin te maken. De functie van deze plugin is om een groet te weergeven bovenin het artikel op elke pagina van de website.

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

Allereerst moet je dit op je lokale computer of op de server instellen.wp-content/plugins/Maak een nieuwe map in de map en geef deze de naammy-hello-pluginVervolgens maak je in die map een hoofdPHP-bestand, en noemen we dat ‘main.php’.my-hello-plugin.php。

Schrijf de hoofdfile van het plugin.

Openenmy-hello-plugin.phpLaad de bestand op en voer de volgende code in. De code voldoet aan de standaardformatie voor WordPress plugins en bevat een plugin-informatiekop en de code die de gewenste functionaliteit uitvoert.

<?php
/**
 * Plugin naam: Mijn Groeten Plugin
 * Plugin URI: https://yourwebsite.com/my-hello-plugin
 * Beschrijving: Dit is een eenvoudige plugin om “Hallo, lezer!” uit te voeren voor de inhoud van een bericht. .
 * Versie: 1.0.0
 * Auteur: 你的名字
 * Licentie: GPL v2 of hoger
 * Tekstdomein: my-hello-plugin
 */

// Voorkom directe toegang tot het bestand
if ( ! defined( 'ABSPATH' ) ) {
    exit; }
}

/**
 * Voegt een begroeting toe voor de inhoud van het hoofdartikel.
 *
 * @param string $content De oorspronkelijke inhoud van het artikel.
 * @return string De nieuwe inhoud nadat de begroeting is toegevoegd.
 */
functie my_hello_add_greeting( $content ) {
    $groeting = &#039;<p style="background-color:#f0f8ff; padding:10px; border-left:4px solid #0073aa;"><strong>Hallo, lezers! Welkom bij dit artikel.</strong></p>';
    // Alleen toevoegen als het de hoofdlus is en het een postpagina is
    if ( is_single() &amp;&amp; in_the_loop() &amp;&amp; is_main_query() ) {
        return $greeting . $content.
    }
    return $content.
}
// Monteer de functie aan de ‘the_content’ filter
add_filter( 'the_content', 'my_hello_add_greeting' );

De plugin activeren en testen.

De map die deze bestand bevat, moet worden opgeslagen op de server.wp-content/plugins/Plaats de inhoud van de map in het juiste verhaal of, als je lokale ontwikkeling doet, direct op de gewenste plek. Log daarna in bij het WordPress-beheerpaneel en ga naar het menu “Plug-ins”. In de lijst met plug-ins moet je “My Greeting Plugin” zien. Klik op de knop “Activeren”.

Nadat je het plugin hebt aktiveerd, zie je wanneer je op een artikel of pagina op de website kijkt een groettekst met een lichtblauw achtergrond en een linkerkantige rand voordat de inhoud van het artikel begint. Dit proces illustreert duidelijk de kernstappen van het ontwikkelen van plugins: het maken van bestanden, het toevoegen van functies met behulp van ‘hooks’, en het activeren van het plugin in de achtergrond. Je hebt met succes de eerste stap in het ontwikkelen van WordPress-plugins gezet.

Aanbevolen leesmateriaal WordPress-pluginontwikkeling: van nul tot een krachtige websiteextensie。

Functies uitbreiden met hangmappen en filters

De flexibiliteit en uitbreidbaarheid van WordPress is in grootte deel te danken aan het systeem van “hooks”. Er bestaan twee soorten hooks: action hooks en filter hooks. Het is belangrijk om deze te begrijpen en ervoor te zorgen dat je ze goed kunt gebruiken, vooral voor het ontwikkelen van geavanceerde plugins.

Action hooks bieden je de mogelijkheid om op specifieke momenten tijdens het werken van WordPress (bijvoorbeeld wanneer een artikel wordt gepubliceerd of een pagina wordt geladen) je eigen code in te voegen en uit te voeren.save_postDe actie wordt uitgevoerd wanneer de inhoud van een artikel of pagina wordt opgeslagen in de database. Je kunt dit doen door…add_action()De functie “monteert” je eigen gedefinieerde functie op deze hook.

De filter-haken bieden je de mogelijkheid om de door WordPress genereerde gegevens te bewerken. Je registreert een functie als filter, en wanneer WordPress deze filter uitvoert, worden de gegevens doorgegeven aan alle geregistreerde functies. WordPress ontvangt vervolgens de verwerkte teruggegeven waarden. In het voorbeeld hierboven wordt dit gebruik.the_contentDit is een typisch filter-hook; het biedt je de mogelijkheid om de inhoud van het artikel dat wordt uitgegeven te bewerken.

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

Maak een simpel beheeroptie.

Een echt handig plugin vereist meestal enkele door de gebruiker instelbare opties. Dit betekent dat er interactie met de WordPress-backend is nodig. We demonstreren hoe je een persoonlijke instellingenpagina kunt toevoegen met een simpel voorbeeld.

Allereerst gebruiken we...add_action(‘admin_menu’, …)Registreer een functie die in de beheeromgeving een nieuw menu-item zal creëren.

/**
 * 在WordPress后台添加一个自定义菜单页面。
 */
function my_hello_add_admin_menu() {
    add_menu_page(
        ‘问候插件设置’， // 页面标题
        ‘问候插件’，     // 菜单标题
        ‘manage_options’， // 所需权限
        ‘my-hello-plugin’， // 菜单slug
        ‘my_hello_admin_page_html’， // 用于显示页面内容的回调函数
        ‘dashicons-format-chat’， // 图标（可选）
        80 // 菜单位置（可选）
    );
}
add_action( ‘admin_menu‘, ’my_hello_add_admin_menu’ );

/**
 * 自定义设置页面的HTML输出。
 */
function my_hello_admin_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
            // 输出设置字段、安全性和保存更改按钮
            settings_fields( ‘my_hello_options’ );
            do_settings_sections( ‘my-hello-plugin’ );
            submit_button( ‘保存问候语设置’ );
            ?>
        <input type="hidden" name="trp-form-language" value="nl"/></form>
    </div>
    &lt;?php
}

Registratie en instellingen van uitvoeringsvelden

Een enkele pagina is niet genoeg; we moeten ook opties creeren die kunnen worden opgeslagen. Hiervoor is gebruik gemaakt van…add_action(‘admin_init’, …)…en ookregister_setting()、add_settings_section()和add_settings_field()Een reeks functies.

Aanbevolen leesmateriaal Van het begin tot de volmaakte beheerder: Een compleet handboek voor het ontwikkelen van WordPress plugins。

/**
 * 初始化插件的设置。
 */
function my_hello_settings_init() {
    // 注册一个设置项到数据库的‘my_hello_options’键下
    register_setting( ‘my_hello_options‘, ’my_hello_greeting_text’ );

// 在页面中添加一个设置区域
    add_settings_section(
        ‘my_hello_section’， // 区域ID
        ‘问候语设置’，        // 区域标题
        ‘my_hello_section_html’， // 区域描述的回调函数
        ‘my-hello-plugin’ // 所属页面slug
    );

// 在区域内添加一个具体的设置字段
    add_settings_field(
        ‘my_hello_field’， // 字段ID
        ‘自定义问候语’，    // 字段标签
        ‘my_hello_field_html’， // 用于渲染字段HTML的回调函数
        ‘my-hello-plugin’， // 所属页面slug
        ‘my_hello_section’ // 所属区域ID
    );
}
add_action( ‘admin_init‘, ’my_hello_settings_init’ );

/**
 * 设置区域的描述信息。
 */
function my_hello_section_html() {
    echo ‘<p>Hier kun je de groettekst instellen die wordt weergegeven aan het begin van het artikel.</p>’;
}

/**
 * 渲染设置字段的HTML。
 */
function my_hello_field_html() {
    // 从数据库获取已保存的值，如果没有则使用默认值
    $greeting = get_option( ‘my_hello_greeting_text‘, ’您好，读者！欢迎阅读本文。’ );
    ?&gt;
    <input type="‘text’"
           id="‘my_hello_greeting_text’"
           name="‘my_hello_greeting_text’"
           value="“NO NUMERIC NOISE KEY" 1000”
 class="“regular-text”" />
    <p class="“description”">Vul in het groetje dat u wilt zien vooraan in het artikel.</p>
    &lt;?php
}

Nu hebben we een backend-instellingenpagina met een invoervak. Als volgende moet de oorspronkelijke functionaliteit van de functies worden gewijzigd.my_hello_add_greetingLaat het de groetteksten lezen uit de opties in de database.

function my_hello_add_greeting( $content ) {
    // 获取保存的自定义问候语，如果不存在则使用默认值
    $custom_greeting = get_option( ‘my_hello_greeting_text‘, ’您好，读者！欢迎阅读本文。’ );
    $greeting = ‘<p style="“background-color:#f0f8ff;" padding:10px; border-left:4px solid #0073aa;”><strong>’ . esc_html( $custom_greeting ) . ‘</strong></p>’;
    if ( is_single() &amp;&amp; in_the_loop() &amp;&amp; is_main_query() ) {
        return $greeting . $content;
    }
    return $content;
}

Hiermee is een plugin met basisfuncties voor backend-configuratie klaar. Gebruikers kunnen het tekstbericht van de groet op de backend vrijwel onbeperkt aanpassen via het menu “Groetplugin”, waarna de nieuwste instellingen automatisch worden toegepast in de artikelen op de frontend.

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

Beste praktijken en veiligheid bij het ontwikkelen van plugins

Een WordPress-plugin ontwikkelen voor anderen te gebruiken vereist niet alleen dat de functionaliteit volledig is uitgewerkt, maar dat de plugin ook voldoet aan de beste praktijken op het gebied van veiligheid, prestaties en onderhoudbaarheid.

Bezorgdheden met betrekking tot de veiligheid

Security is the top priority. Vertrouw nooit op de invoer van gebruikers. Alle gegevens die van gebruikers worden verzameld (bijvoorbeeld...)$_GET、$_POST、$_COOKIEVoordat gegevens worden gebruikt voor database-opvragen, worden weergegeven op een pagina of worden verwerkt in bestanden, moet er eerst worden gezuiverd, gecontroleerd en de juiste escape-methode worden toegepast.

Voor de data die naar een HTML-pagina wordt gestuurd, moet worden gebruikt…esc_html()、esc_attr()或wp_kses_post()Voor functies die escape-behandeling vereisen, moet deze behandeling worden uitgevoerd. Voor variabelen die worden gebruikt in database-opvragen, moet ervoor worden gezorgd dat deze op de juiste manier worden geëscapeerd.$wpdb->prepare()Voor parameteriseerde queries moet je nooit direct variabelen toevoegen aan de SQL-sentence. In plugins moet dit altijd worden gedaan op een georganiseerde en veilige manier.defined(‘ABSPATH’) or die;Dit is om te voorkomen dat de bestanden rechtstreeks worden bereikt.

Codeorganisatie en internationalisatie

Naarmate de mogelijkheden van plugins toenemen, wordt het moeilijker om al het codegebruik in één hoofdbestand te bewaren. Het is verstandiger om de code op te delen in verschillende bestanden, afhankelijk van de functionaliteit. Het hoofdbestand is meestal verantwoordelijk voor het definiëren van hooks en de kernprocessen, terwijl instellingen, functionen en klassendefinities in aparte bestanden worden opgeslagen.includes/或admin/、public/In dergelijke submappen wordt dit gedaan door...require_onceIntroductie.

Om je plugin beschikbaar te maken voor gebruikers wereldwijd, moet je internationaalization (i18n) ondersteunen. Dat betekent dat alle tekststringen die in de plugin worden weergegeven moeten worden vertaald met de vertaalfuncties van WordPress.__()、_e()Verpak het en zorg ervoor dat...Text DomainEen unieke identificator instellen (bijvoorbeeld de naam van de plugin-map). In de commentaarblock bovenin het bestand hebben we dit al gedefinieerd.Text Domain: my-hello-pluginIn het code moet dit op de volgende manier worden gebruikt:

`$greeting = ‘`‘<p><strong>’ . esc_html__( ‘您好，读者！欢迎阅读本文。’ , ’my-hello-plugin’ ) . ‘</strong></p>’;

Op deze manier kunnen de vertalers het gebruiken..po和.moDeze bestanden bevatten de vertalingen van je plugin in verschillende talen.

Prestatie-optimalisatie

De plugin moet de prestaties van de website zo min mogelijk beïnvloeden. Vermeid het uitvoeren van veel database-opvragen of complexe berekeningen bij elke pagina-laad, vooral op de front-end. Gebruik de Transients API van WordPress op een verantwoordelijke manier om resultaten van kostbare opvragen op te slaan die niet vaak veranderen. Als je bijvoorbeeld het resultaat van een API-oproep wilt opslaan, kun je dit op de volgende manier doen:

$data = get_transient( ‘my_plugin_api_data’ );
if ( false === $data ) {
    // 数据不存在或已过期，从API获取
    $data = wp_remote_retrieve_body( wp_remote_get( ‘https://api.example.com/data’ ) );
    // 将数据存储12小时
    set_transient( ‘my_plugin_api_data’, $data, 12 * HOUR_IN_SECONDS );
}
// 使用 $data

Daarnaast moet je ervoor zorgen dat je CSS- en JavaScript-bestanden alleen worden geladen op de pagina's waar ze nodig zijn. Gebruik hiervoor technieken als conditional loading of lazy loading.wp_enqueue_script()和wp_enqueue_style()Functies, in combinatie met de juiste ‘hooks’ (bijvoorbeeld…)wp_enqueue_scriptsDe front-end-resources worden geladen met behulp van …; voor de back-end-resources wordt … gebruikt.admin_enqueue_scriptsHook.

Samenvatting

Door de stappen in dit artikel te volgen, hebben we een volledige ontwikkelingsprocedure afgerond: van een simpel “Hello World”-plugin tot een praktisch plugin met achtergrondconfiguratieopties en dat voldoet aan de basisprincipes van veiligheid en codeorganisatie. Het belangrijkste is om de kernmechanismen van WordPress te begrijpen en te gebruiken: het hook-systeem. Dit systeem biedt de mogelijkheid om de functionaliteit van het platform op modulaire en niet-invasieve manier uit te breiden. Of het nu gaat om het bewerken van content (filters) of het uitvoeren van specifieke taken (actions), hooks vormen de brug tussen je eigen code en de wereld van WordPress.

Vergeet niet dat het ontwikkelen van goede plugins niet alleen gaat om ervoor te zorgen dat de functies werken. Het omvat ook het strikte beveiligen van de invoer van gebruikers, een duidelijke organisatie van de code, ondersteuning voor internationalisatie en een zorgvuldige beoordeling van de prestaties van de website. Alles van het definiëren van een duidelijke bestandsopmaak voor de plugin tot het gebruiken van standaard-API’s voor het maken van menu’s en instellingen, en uiteindelijk het veilig ontsluiten van de uitgegeven gegevens, heeft invloed op de kwaliteit, veiligheid en gebruikerservaring van de plugin. Door verder te ontdekken wat WordPress te bieden heeft in de vorm van API’s en functies, kun je krachtige en betrouwbare plugins bouwen.

Veelgestelde vragen (FAQ)

Welke basiskennis is vereist voor het ontwikkelen van plugins?

Je moet basiskennis hebben van de PHP-programmeringstaal, inclusief concepten als variabelen, functies, arrays, conditionele bewerkingen en cycli. Het is ook handig om enkele basiskenningen van HTML en CSS te hebben, omdat plugins vaak front-end-interfaces genereren of bewerken. Een goede kennis van de basisfuncties en de back-end-structuur van WordPress zal de ontwikkelingsprocessen soepeler maken.

Hoe debug ik mijn WordPress-plugin?

Allereerst: zorg ervoor dat je…wp-config.phpIn het bestand is de debugmodus van WordPress ingeschakeld. Dit kan worden gedaan door bepaalde instellingen te wijzigen.define('WP_DEBUG', true);和define('WP_DEBUG_LOG', true);De foutmeldingen worden opgeslagen.wp-content/debug.logIn de bestand is dit veiliger dan wanneer het direct op de pagina wordt weergegeven. Bovendien kan dit ook gecombineerd worden met andere methoden.error_log()De functie printt de waarde van de variabele uit, of je kunt de problemen met de front-end-scripten en -stijlen controleren met de “Netwerk”- en “Console”-panelen in de browser-developer-tools.

De plugin die ik heb ontwikkeld, kan worden geüpload in het officiële plugin-verzeichnis?

Ja, dat is mogelijk, maar er moeten wel enkele vereisten van WordPress worden gehaald voor het indienen van een plugin. Hieronder valt onder andere dat je plugin voldoet aan de GPL-licentie, de codingstandaarden van WordPress, dat de code veilig is en geen schade kan toebrengen aan het systeem, en dat er duidelijke documentatie beschikbaar is. Voor het indienen raden we aan om de officiële handleidingen en instructies voor pluginontwikkelaars goed te lezen. Het indienen van de plugin gebeurt via het plugin-inleveringssysteem op WordPress.org, waar de plugin vervolgens wordt bekeken door een team van medewerkers van WordPress.

Wat is het verschil tussen de functionaliteiten van plugins en themes? Wanneer moet je een plugin ontwikkelen?

Het thema bepaalt voornamelijk het uiterlijk en de lay-out van een website. Het is verantwoordelijk voor de template-bestanden, de stijlbestanden (style sheets) en enkele functies die te maken hebben met de weergave van inhoud. Plugins daarentegen worden gebruikt om functies aan een website toe te voegen of te bewerken; hun invloed is (in de meeste gevallen) onafhankelijk van het huidige thema. Een goede regel is: als een functie rechtstreeks te maken heeft met het uiterlijk van de website (bijvoorbeeld de lay-out van pagina's of het kleurenschema), kan deze worden opgenomen in het thema. Als een functie echter algemeen van toepassing is en onafhankelijk van het thema (bijvoorbeeld een contactformulier, SEO-optimalisatie of caching), moet deze als plugin worden ontwikkeld. Dit bevordert de scheiding tussen functies en design en zorgt voor meer flexibiliteit.