WordPress-pluginontwikkeling: Een gids om van nul je eerste custom-functionaliteit te bouwen

Waarom is het nodig om zelfgemaakte plugins te ontwikkelen?

In de WordPress-ecosysteem zijn plugins essentieel voor het uitbreiden van de mogelijkheden van een website. Er zijn duizenden beschikbare plugins op de markt, maar het ontwikkelen van eigen plugins biedt unieke voordelen. Wanneer je behoeften zeer specifiek zijn, of wanneer de combinatie van bestaande plugins te complex of onefficiënt is, is een op maat gemaakte plugin de beste oplossing. Een custom-made plugin past perfect bij je bedrijfslogica, voorkomt mogelijke conflicten tussen verschillende plugins en biedt over het algemeen een betere prestatie dan veelzijdige, generieke plugins. Bovendien heb je als je zelf ontwikkelt volledige controle over de kwaliteit en de veiligheid van het code.

Vanuit een leraarsperspectief is het begrijpen van de werking van pluginontwikkeling een essentieel onderdeel van het verder ontwikkelen van je kennis van WordPress. Het zorgt ervoor dat je van een gebruiker verandert in een creator, waardoor je flexibeler kunt omgaan met verschillende customisatievereisten. Bovendien legt het een solide basis voor toekomstige productontwikkeling of je carrière.

Forbereidende werkzaamheden: Opzetten van de ontwikkelingsomgeving

Voordat je met het schrijven van code begint, is een stabiele en geisoleerde ontwikkelingsomgeving van belang. Dit beschermt niet alleen je live-website, maar biedt je ook de vrijheid om te testen en te debuggen.

Configuratie van het lokale ontwikkelingsmilieu

Het wordt aanbevolen om lokale serversoftwarepakketten te gebruiken, zoals Local by Flywheel, XAMPP of MAMP. Deze tools simuleren een webserveromgeving (Apache/Nginx, MySQL, PHP) op je computer, zodat je offline kunt ontwikkelen. Na het installeren kun je een nieuwe WordPress-site maken als je “sandbox”.

Code-editor keuze

Een krachtig code-editor kan de ontwikkelingsefficiëntie aanzienlijk verbeteren. Visual Studio Code is momenteel een zeer populaire keuze: het is lichtgewicht, gratis en beschikt over een grote verscheidenheid aan extensies, zoals syntax highlighting, code hints en debugging-mogelijkheden specifiek voor PHP en WordPress. PHPStorm is een andere sterke Integrated Development Environment (IDE) die nog uitgebreidere mogelijkheden voor code-analyse en -restructuring biedt.

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

Ik ben hier om je te helpen met je huiswerk.

Basic file structure for plugins

Een eenvoudig WordPress-plugin kan bestaan uit één enkele PHP-bestand. Echter, een goed georganiseerd plugin beschikt meestal over een duidelijke structuur van bestanden en mappen. In het lokale WordPress-installatieverlies van jouw computer vind je… wp-content/plugins Binnen de map maak je een nieuwe map voor je plugin, bijvoorbeeld: my-first-pluginDeze map zal alle bestanden van de plugin bevatten.

Maak je eerste plugin: “Hello Admin”.”

We gaan een plugin maken genaamd “Hello Admin”. De functionaliteit is heel simpel: het toont een aangepaste welkomstboodschap bovenin het dashboard in de WordPress-beheeromgeving. Dit voorbeeld beslaat de belangrijkste elementen van pluginontwikkeling: het hoofdbestand, hooks en basisfuncties.

Maak een hoofdpluginbestand.

In je plugin-map my-first-plugin Binnenin wordt een object met de naam ... gecreëerd. my-first-plugin.php Het is een bestand. Dit is het invoerbestand voor het plugin. Open het en voeg eerst in het begin van het bestand de standaardcommentaren met informatie over het plugin toe. Deze commentaren zijn nodig voor WordPress om het plugin te herkennen.

<?php
/**
 * Plugin Name:       Hello Admin
 * Plugin URI:        https://yourwebsite.com/hello-admin
 * Description:       一个简单的插件，用于在管理后台显示欢迎信息。
 * Version:           1.0.0
 * Author:            你的名字
 * License:           GPL v2 or later
 * Text Domain:       hello-admin
 */

Functies toevoegen met behulp van hooks

De kernmechanisme van WordPress zijn de zogenoemde “hooks”. Hiermee kun je op specifieke momenten je eigen code toevoegen aan het systeem. Er zijn twee soorten hooks: Action Hooks en Filter Hooks. Om inhoud te weergeven in het beheerpaneel, moeten we Action Hooks gebruiken.

WordPress biedt bij het laden van de header van het beheerderspaneel een functie aan met de naam admin_notices De action hook. Hierdoor kunnen we... add_action() De functie maakt onze eigen gedefinieerde functie beschikbaar voor gebruik in deze ‘hook’.

Under de commentaren in het hoofdbestand, voeg de volgende code toe:

// 钩子函数：在管理后台显示通知
function hello_admin_display_message() {
    // 确保只对管理员显示，使用 current_user_can() 检查权限
    if ( current_user_can( 'manage_options' ) ) {
        echo '<div class="notice notice-success is-dismissible"><p>Welkom terug, beheerder! De door u zelf gecreerde “Hello Admin”-plug-in is actief.</p></div>';
    }
}
// 将我们的函数挂载到 ‘admin_notices’ 这个动作钩子上
add_action( 'admin_notices', 'hello_admin_display_message' );

Testen en activeren

Slaaf de bestand op. Nu kun je intokomen in het beheerpaneel van je lokale WordPress-site (meestal via een speciale toegangspagina). /wp-adminGa naar het menu “Plug-ins” en je moet “Hello Admin” zien in de lijst met plug-ins. Klik op “Activeren”. Na activering moet je de dashboard-pagina opnieuw laden; bovenin op de pagina zal een groen succesbericht verschijnen met de door jou gedefinieerde welkomstboodschap. Dit betekent dat je eerste plugin met succes is geïnstalleerd en werkt!

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

Voeg instelbare opties toe aan het plugin.

Een plugin dat alleen bepaalde, vaste informatie weergeeft, is beperkt in zijn bruikbaarheid. In de volgende stap maken we het configureerbaar, zodat beheerders via een instellingenpagina de berichten die worden weergegeven kunnen aanpassen. Hiervoor moeten we een beheermenupagina maken, de gegevens uit formulieren verwerken en de gegevens met behulp van de optie-API opslaan.

Ik ben hier om je te helpen met je huiswerk.

Maak een pagina met een beheermenu.

We moeten een instellingenpagina toevoegen aan het beheerderspaneel. Dit kan worden gerealiseerd door... add_menu_page() 或 add_submenu_page() Function implementatie: We voegen verder code toe in het hoofdbestand van het plugin.

Eerst moet een functie worden gemaakt om de HTML-content voor de instellingenpagina te genereren, en een menu-item moet worden geregistreerd:

// 创建插件设置页面
function hello_admin_add_settings_page() {
    add_options_page(
        'Hello Admin 设置', // 页面标题
        'Hello Admin',      // 菜单标题
        'manage_options',   // 所需权限
        'hello-admin',      // 菜单slug
        'hello_admin_render_settings_page' // 用于渲染页面的回调函数
    );
}
add_action( 'admin_menu', 'hello_admin_add_settings_page' );
// 渲染设置页面的HTML
function hello_admin_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>Hallo Admin, hier zijn de instellingen voor het ‘Hello Admin’-systeem.</h1>
        <form method="post" action="/nl/options.php/" data-trp-original-action="options.php">
            <?php
            settings_fields( 'hello_admin_settings_group' ); // 设置组名称
            do_settings_sections( 'hello-admin' ); // 页面slug
            submit_button(); // 提交按钮
            ?>
        <input type="hidden" name="trp-form-language" value="nl"/></form>
    </div>
    &lt;?php
}

Registratie-instellingen, velden en gegevensopslag

Vervolgens moeten we de Settings API van WordPress gebruiken om onze opties veilig te registreren, te verifiëren en op te slaan. Maak hiervoor een nieuwe functie en voeg deze toe aan admin_init Zet het op de haak en draai het rond.

// 初始化设置
function hello_admin_settings_init() {
    // 注册一个设置，将其存储在 wp_options 表中
    register_setting( 'hello_admin_settings_group', 'hello_admin_custom_message', 'sanitize_text_field' );
// 在页面上添加一个设置区域（可以省略，此处为清晰而加）
    add_settings_section(
        'hello_admin_section',
        '自定义消息设置',
        null, // 可选的区域描述回调函数
        'hello-admin'
    );
// 在区域中添加一个字段
    add_settings_field(
        'hello_admin_message_field',
        '欢迎消息',
        'hello_admin_message_field_callback',
        'hello-admin',
        'hello_admin_section'
    );
}
add_action( 'admin_init', 'hello_admin_settings_init' );
// 渲染消息输入字段
function hello_admin_message_field_callback() {
    $message = get_option( 'hello_admin_custom_message', '欢迎回来，管理员！' ); // 获取已保存的值，没有则用默认值
    echo '<input type="text" name="hello_admin_custom_message" value="' . esc_attr( $message ) . '" class="regular-text" />';
    echo '<p class="description">Hier kunt u het welkomstbericht invoeren dat u wilt weergeven in het beheerpaneel.</p>';
}

De weergavefunctie wordt gewijzigd om gebruik te maken van de configuratiegegevens.

Ten slotte moeten we de oorspronkelijke functie voor het weergeven van notificaties aanpassen. hello_admin_display_message()Laat het komen uit de database-opties. hello_admin_custom_message De inhoud wordt gelezen uit een bestand, in plaats van dat deze hardgecodeerd is.

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 hello_admin_display_message() {
    if ( current_user_can( 'manage_options' ) ) {
        $custom_message = get_option( 'hello_admin_custom_message', '欢迎回来，管理员！' ); // 获取自定义消息
        if ( ! empty( $custom_message ) ) {
            echo '<div class="notice notice-success is-dismissible"><p>'`. esc_html($custom_message)`.'</p></div>';
        }
    }
}

Nu kun je alle gewijzigde instellingen opslaan. Ga terug naar het WordPress-beheerpaneel en je ziet in het menu “Instellingen” de optie “Hello Admin”. Bezoek deze pagina, wijzig de boodschap en sla deze op. Vervolgens moet je het dashboard opnieuw laden; de weergegeven boodschap zal nu de inhoud zijn die je net hebt ingesteld. Hiermee is een aangepast plugin met basisfuncties klaar voor gebruik.

Beste praktijken voor het ontwikkelen van plugins en de volgende stappen

Nadat de basisfuncties zijn geïmplementeerd, zorgen het volgen van beste praktijken ervoor dat je plugin professioneler, veiliger en gemakkelijker te onderhouden is.

Ik ben hier om je te helpen met je huiswerk.

Security comes first: altijd de invoer van gebruikers controleren, ontsnappen en schoonmaken. Gebruik de functies die WordPress biedt, zoals… esc_html(), esc_attr(), sanitize_text_field(), wp_nonce_field() Etc. Vertrouw nooit direct op gegevens die van gebruikers of uit de database komen.

Codeorganisatie en annotaties: Naarmate de mogelijkheden van het plugin groter worden, is het handig om de code op te delen in verschillende klassen of bestanden. Het gebruik van objectgericht programmeren (OOP) kan de herbruikbaarheid en de structuur van de code verbeteren. Voeg duidelijke annotaties toe aan je functies en klassen; dit is van belang voor jouzelf in de toekomst en voor potentiële medewerkers.

Internationalisatie voorbereiden: Als je plugin op openbare wijze gaat distribueren, moet het ondersteuning bieden voor internationalisatie (i18n). Dat betekent dat je de inhoud van je plugin moet kunnen aanpassen aan verschillende talen. __() 或 _e() Deze functies omvatten alle voor de gebruiker bestemde tekststringen en zorgen ervoor dat de tekstindeling (text domain) correct is ingesteld. Hierdoor kunnen anderen je plugin naar andere talen vertalen.

Prestatiesoverwegingen: Laad alleen de resources van je plugin op wanneer dit nodig is (CSS, JavaScript). Gebruik conditiesneloos om te voorkomen dat scripts worden geladen die alleen op de achtergrond nodig zijn op elke pagina. Optimaliseer de databasequery's en gebruik de WordPress-transient-API op een verantwoordelijke manier voor het opslaan van gegevens in de cache.

Dieper inzoomen: Nadat je de basis hebt beheerd, kun je meer geavanceerde onderwerpen verkennen, zoals het creeren van aangepaste artikeltypes (Custom Post Types of CPT's) en aangepaste categorieën, het toevoegen van shortcodes, het ontwikkelen van aangepaste widgets, het integreren van REST API's, of het maken van draaibare blokken (blocks) voor je plugins.

Samenvatting

Met deze handleiding heb je het hele proces afgerond om van scratch een volledig functionerende WordPress-custom plugin te bouwen. Je hebt de basisconcepten van pluginontwikkeling geleerd, waaronder de bestandstructuur, het kernhaken-systeem (Hooks) en hoe je veilige configuratiepagina’s kunt maken met de Settings API. De “Hello Admin”-plugin is misschien simpel, maar hij bevat de essentie van pluginontwikkeling: het declareren van de plugin, het uitvoeren van functies, het verwerken van data en het weergeven van resultaten. Door deze basiskennen te beheersen, beschik je over de sleutel om de uitgebreide mogelijkheden van WordPress verder te ontdekken. Vergeet niet dat continu leren, het naleven van beste praktijken en het durven om te experimenteren de enige manieren zijn om je pluginontwikkelingsvaardigheden te verbeteren.

Veelgestelde vragen (FAQ)

Hoelang minst bestaan er bestanden nodig voor een WordPress-plugin?

Een plugin met de simpelste functionaliteit kan bestaan uit één enkele PHP-bestand. Zodra dit bestand de juiste commentaren (header-informatie) bevat, herkent en activeert WordPress het plugin. Naarmate de functionaliteit echter complexer wordt, wordt de code meestal opgesplitst in meerdere bestanden: aparte JavaScript- en CSS-bestanden, of PHP-klassebestanden die zijn gegroepeerd naar functionele onderdelen.

Wat is het verschil tussen de actie-haakken (action hooks) `add_action` en de filter-haakken (filter hooks) `add_filter`?

Action Hooks worden gebruikt om op bepaalde momenten een stuk code of een bepaalde functionaliteit uit te voeren. Ze verwachten geen terugkeerwaarde; ze dienen alleen om “iets te doen”. Een voorbeeld is het sturen van een e-mail nadat een artikel is gepubliceerd.

Filter hooks worden gebruikt om gegevens te bewerken. Ze nemen een invoerwaarde op en verwachten een gewijzigde terugkeerwaarde. Bijvoorbeeld kan de inhoud van een artikelstitel worden gewijzigd voordat deze in de browser wordt weergegeven. Het belangrijkste verschil tussen acties (actions) en filters is dat acties worden uitgevoerd, terwijl filters gegevens bewerken en vervolgens een nieuwe terugkeerwaarde terugsturen.

Hoe kun je veilig gebruikersinvoer opslaan in een database?

Vergeet niet de API-functies die WordPress biedt te gebruiken, bijvoorbeeld…update_option()和register_setting()。register_setting()De functie biedt de mogelijkheid om een schoonmaak-callback-functie aan te geven (bijvoorbeeld)...sanitize_text_fieldDe gegevens worden automatisch verwerkt voordat ze worden opgeslagen. Vergeet nooit om ze rechtstreeks te gebruiken.$wpdbHet invoeren van onverwerkt gebruikersgegeven in SQL-opdrachten kan leiden tot ernstige beveiligingsproblemen, zoals SQL-injecties.

Hoe voorkom je dat je bij het ontwikkelen van een plugin conflicten krijgt met andere plugins?

Goede coderingspraktijken zijn essentieel om conflicten te voorkomen. Voeg unieke prefixen toe aan alle je functies, klassen, variabelen en optienamen. Bijvoorbeeld:hello_admin_display_messageIn plaats van het gebruikelijke…display_messageVerpak je CSS-stijlen en JavaScript-code in specifieke klassen of ID-selectoren. Zorg ervoor dat je callback-functies alleen onder de vereiste omstandigheden worden uitgevoerd (bijvoorbeeld door de huidige pagina of de gebruikersrechten te controleren).