Praktische introductie voor beginners: stap voor stap leer je hoe je WordPress-plug-ins ontwikkelt.

WordPress-pluginontwikkelingsomgeving en basisvoorbereidingen

Voordat je begint met schrijven van code, heb je een geschikte lokale ontwikkelingsomgeving nodig. Dit omvat meestal een lokale server (zoals XAMPP, MAMP of Local by Flywheel), een code-editor (bijvoorbeeld VS Code of PHPStorm) en een geïnstalleerde versie van WordPress voor het testen. Zorg ervoor dat je PHP-versie overeenkomt met de door WordPress officieel aanbevolen versie.

De kern van een WordPress-plugin is een deel dat zich bevindt in…/wp-content/plugins/De map die zich in de map bevindt, is je plugin-identificator. Het is het beste om alleen kleine letters, cijfers en strepen te gebruiken voor de naam van deze map. In deze map moet er een PHP-hoofdbestand zijn met dezelfde naam als de map.my-first-plugin.phpDeze file is de entrypoint voor het plugin en bevat de meta-informatie van het plugin.

Maak je eerste pluginbestand.

Laten we beginnen met het maken van het simpelste plugin: dit plugin zal een welkomstbericht weergeven in het beheerpaneel van de website.

Aanbevolen leesmateriaal Een gedetailleerde analyse van de WooCommerce-plug-in: een complete handleiding van de basisconfiguratie tot geavanceerde aanpassingen.。

Schrijven van commentaren in de kop van een plugin

Elke WordPress-plugin moet beginnen met specifieke header-commentaren. WordPress gebruikt deze informatie om de plugin te herkennen en te weergeven. In je plugin-map (bijvoorbeeld…)my-first-pluginIn het document, moet de hoofdfile worden gecreëerd.my-first-plugin.phpEn schrijf de volgende code op:

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: 我的第一个WordPress插件
 * 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
 */

Na het opslaan van het bestand, log in je in bij het WordPress-administratiepaneel en ga naar de pagina “Plug-ins”. Hier moet je “Mijn eerste WordPress-plugin” zien staan in de lijst met plug-ins. Je kunt het nu activeren, hoewel het nog geen enkele functie heeft.

Een eerste functie toevoegen aan de plugin

Laten we nu een simpel functie toevoegen aan deze plugin: een aangepaste beheerberichting die wordt weergegeven aan de bovenkant van het beheerpaneel. Hiervoor gebruiken we de mogelijkheden van WordPress.admin_noticesHook.

In het hoofdbestandmy-first-plugin.phpUnder the header comment, add the following code:

// 在管理后台添加一个欢迎提示
function my_first_plugin_admin_notice() {
    ?>
    <div class="notice notice-success is-dismissible">
        <p>Welkom bij “Mijn eerste WordPress-plugin”! U hebt het plugin met succes geactiveerd.</p>
    </div>
    &lt;?php
}
add_action( &#039;admin_notices&#039;, &#039;my_first_plugin_admin_notice&#039; );

Deze code definieert een object of structuur met de naammy_first_plugin_admin_noticeDeze functie genereert een stuk HTML en maakt daarmee een sluitbare succesberichtsbalk.add_action()De functie “monteert” deze zelfgemaakte functie op WordPress.admin_noticesDeze actie is gekoppeld aan een hook. Zodra je de bestand slaat op en de WordPress-beheeromgeving opnieuw laadt, zie je de groene welkomstboodschap bovenaan de pagina.

Aanbevolen leesmateriaal Praktische handleiding voor websiteontwikkeling: een volledig ontwikkelingsproces van nul tot online, inclusief richtlijnen voor technische selectie.。

De kernmechanismen van WordPress-plug-ins begrijpen: hooks en filters

De kern van het ontwikkelen van WordPress-plug-ins ligt in de interactie met het core van WordPress, die voornamelijk wordt gerealiseerd door het zogenaamde “hook”-systeem. Er zijn twee soorten hooks: actions en filters.

Het gebruik van action-hooks

Action hooks bieden je de mogelijkheid om op specifieke momenten tijdens het uitvoeren van WordPress zelfgekozen code in te voegen, net zoals we net hebben gedaan.admin_noticesEen ander veel voorkomend voorbeeld isinitDe ‘hook’ wordt uitgevoerd tijdens het initialiseren van WordPress en wordt gebruikt om zelfgemaakte artikeltypes of categorieën te registreren.

Als voorbeeld kunnen we bij het initialiseren van een plugin een waarde voor een optie instellen:

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

function my_first_plugin_set_default_option() {
    // 如果选项不存在，则添加它
    if ( false === get_option( 'my_first_plugin_greeting' ) ) {
        add_option( 'my_first_plugin_greeting', 'Hello from my plugin!' );
    }
}
add_action( 'init', 'my_first_plugin_set_default_option' );

Het gebruik van filterhooks

De filter-haken bieden je de mogelijkheid om de gegevens die worden overgedragen in de flow te bewerken. Bijvoorbeeld…the_contentDe filters bieden je de mogelijkheid om de weergave van het artikeltekst te bewerken. We kunnen ze gebruiken om automatisch een copyright-vermelding toe te voegen aan het eind van elk artikel.

function my_first_plugin_add_copyright( $content ) {
    // 仅对主循环中的单篇文章生效
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $copyright = '<p><em>Deze tekst is beschermd door auteursrechten. Vraag toestemming om deze te reproduceren en vermeld altijd de bron.</em></p>';
        $content .= $copyright;
    }
    return $content;
}
add_filter( 'the_content', 'my_first_plugin_add_copyright' );

In dit voorbeeld is de function…my_first_plugin_add_copyrightOntvang de originele versie.$contentNa een controle op de voorwaarden (om zeker te stellen dat deze wijziging alleen op de pagina van een enkele artikel van toepassing is) is er een stuk HTML toegevoegd aan het eind van de tekst. Ten slotte moet de gewijzigde versie van de tekst worden opgeslagen.$contentTerugkeren.

Constructeer meer complexe plugins: kortere code en instellingenpagina's

Een volledig functionerend plugin moet meestal zowel front-end-interactie (zoals kortcodes) als back-end-configuratie (zoals instellingenpagina's) bieden.

Aanbevolen leesmateriaal Een krachtig hulpmiddel voor zoekmachineoptimalisatie: het opbouwen van een SEO-strategie voor een WordPress-website vanaf nul.。

Maak je eigen korte codes.

Shortcodes bieden gebruikers de mogelijkheid om door middel van eenvoudige tags te werken.[my_greeting]In artikelen of pagina's kunnen plug-in-functies worden ingebouwd. Registreer een kort code om deze functies te kunnen gebruiken.add_shortcode()Functie.

// 注册一个简单的问候短代码
function my_first_plugin_greeting_shortcode( $atts ) {
    // 使用 shortcode_atts 定义默认属性并合并用户输入
    $attributes = shortcode_atts( array(
        'name' => '访客',
    ), $atts );

// 获取我们之前设置的选项
    $greeting_text = get_option( 'my_first_plugin_greeting', 'Hello' );

// 生成输出
    $output = '<div class="my-plugin-greeting">';
    $output .= esc_html( $greeting_text ) . ', ' . esc_html( $attributes['name'] ) . '!';
    $output .= '</div>';

return $output;
}
add_shortcode( 'my_greeting', 'my_first_plugin_greeting_shortcode' );

Nu kunnen gebruikers tekst invoeren in de editor.[my_greeting name="张三"]Op de front-end wordt dan “Hello from my plugin! Zhang San!” weergegeven.

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

Pagina voor het instellen van plugins

Om het voor gebruikers mogelijk te maken om hun eigen groetteksten te instellen, moeten we een instellingenpagina toevoegen in het beheerssysteem. Dit betekent dat we een hoogste niveau-menu of een submenu moeten toevoegen, evenals dat we de opnames van de formuliergegevens moeten verwerken.

// 在后台“设置”菜单下添加子菜单页
function my_first_plugin_add_settings_page() {
    add_options_page(
        '我的插件设置',          // 页面标题
        '我的第一个插件',        // 菜单标题
        'manage_options',       // 所需权限
        'my-first-plugin',      // 菜单slug
        'my_first_plugin_render_settings_page' // 回调函数，用于输出页面内容
    );
}
add_action( 'admin_menu', 'my_first_plugin_add_settings_page' );

// 渲染设置页面的HTML
function my_first_plugin_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>Mijn eerste plugin-instellingen</h1>
        <form method="post" action="/nl/options.php/" data-trp-original-action="options.php">
            <?php
            settings_fields( 'my_first_plugin_settings_group' );
            do_settings_sections( 'my-first-plugin' );
            submit_button();
            ?>
        <input type="hidden" name="trp-form-language" value="nl"/></form>
    </div>
    &lt;?php
}

// 注册设置、区域和字段
function my_first_plugin_register_settings() {
    register_setting(
        &#039;my_first_plugin_settings_group&#039;, // 设置组名
        &#039;my_first_plugin_greeting&#039;        // 选项名
    );

add_settings_section(
        &#039;my_first_plugin_main_section&#039;,    // 区域ID
        &#039;问候语设置&#039;,                     // 区域标题
        null,                            // 区域回调函数（可为空）
        &#039;my-first-plugin&#039;                // 页面slug
    );

add_settings_field(
        &#039;greeting_text_field&#039;,            // 字段ID
        &#039;问候语文本&#039;,                     // 字段标题
        &#039;my_first_plugin_greeting_field_callback&#039;, // 字段HTML的回调函数
        &#039;my-first-plugin&#039;,                // 页面slug
        &#039;my_first_plugin_main_section&#039;    // 所属区域ID
    );
}
add_action( &#039;admin_init&#039;, &#039;my_first_plugin_register_settings&#039; );

// 渲染问候语输入字段
function my_first_plugin_greeting_field_callback() {
    $greeting = get_option( &#039;my_first_plugin_greeting&#039; );
    echo &#039;<input type="text" name="my_first_plugin_greeting" value="' . esc_attr( $greeting ) . '" class="regular-text" />';
}

Deze code maakt een standaard WordPress-instellingenpagina. Wanneer een gebruiker de groet op deze pagina wijzigt en deze opslaat, wordt de eerder gecreerde shortcode vervangen door de nieuwe groetentext.

Samenvatting

In deze tutorial hebben we vanaf nul een WordPress-plugin met basisfuncties gemaakt. Je hebt geleerd hoe je de structuur van een plugin-bestand opmaakt, hoe je de header-informatie van een plugin schrijft, hoe je achtergrondnotificaties gebruikt via action hooks, hoe je content kunt bewerken met filters, hoe je shortcodes maakt die gebruikers op de front-end kunnen oproepen, en hoe je een volledige instellingenpagina bouwt om de opties van de plugin te beheren. Dit zijn de kernvaardigheden voor het ontwikkelen van WordPress-plugins. Nadat je deze technieken onder de knie hebt, kun je door het officiële WordPress-pluginhandboek te raadplegen meer over API's leren, zoals het aanpassen van database-tabellen, REST API-uitgangspunten en AJAX-verwerking. Hiermee kun je nog krachtigere en professionelere plugins ontwikkelen.

Veelgestelde vragen (FAQ)

Welke programmeerkennis is nodig om een WordPress-plugin te ontwikkelen met de naam ###?

Om WordPress-plug-ins te ontwikkelen zijn kennis van de PHP-programmeertaal essentieel, aangezien het core van WordPress zelf in PHP is geschreven. Daarnaast moet je vertrouwd zijn met HTML, CSS en basis-JavaScript, om de front-end-omgeving en de interactieve logica van de plug-ins te kunnen bouwen. Een basiskennis van SQL is ook handig voor het verwerken van complexere dataoperaties.

Hoe debug ik mijn WordPress-plugin?

Allereerst moet je zorgen dat…wp-config.phpHet bestand is geopend inWP_DEBUGDeze instelling zorgt ervoor dat PHP-fouten en waarschuwingen op het scherm worden weergegeven. Daarnaast is het ook mogelijk om…error_log()De functie schrijft de debug-informatie in het foutenlog van de server. Voor meer complexe debugging-procedures kan je gebruikmaken van speciale PHP-debugging-hulpmiddelen, zoals Xdebug, of een WordPress-debugging-plugin installeren om problemen te kunnen opsporen.

Hoe kan ik de plugin die ik heb ontwikkeld publiceren in de officiële WordPress-plugincatalogus?

Je moet naar WordPress.org gaan en een ontwikkelaarsaccount aanmaken. Vervolgens moet je je plugincode met het hulpmiddel Subversion (SVN) naar het door het bedrijf toegewezen coderepository indienen. Je plugin moet voldoen aan de GPL-licentie, en de kwaliteit, veiligheid en documentatie van de code moeten aan bepaalde vereisten voldoen. Na het slagen van de audit zal je plugin worden opgenomen in de officiële catalogus, waarna gebruikers het kunnen downloaden.

Hoe moeten de CSS- en JavaScript-bestanden van een plugin op de front-end worden geladen?

Om conflicten te voorkomen en de prestaties te garanderen, moet je resources niet rechtstreeks in de templatebestanden invoeren. De juiste manier om dit te doen is door…wp_enqueue_style()和wp_enqueue_script()Functies. Voor de resources van het beheerdersplatform moeten deze worden gemounted (dat wil zeggen, ze moeten worden toegevoegd aan het systeem zodat ze beschikbaar zijn).admin_enqueue_scriptsHook; voor de front-end-resources van een website moet dit worden gemonteerd.wp_enqueue_scriptsHooken. Dit zorgt ervoor dat de afhankelijkheden correct zijn en dat dezelfde bestand niet meerdere keren wordt geladen.