Rozwój pluginów dla WordPress – od poznania podstaw do osiągnięcia biegłości: stworzenie twojego pierwszego funkcjonalnego pluginu

Czemu warto uczyć się tworzenia pluginów dla WordPress?

WordPress, jako najpopularniejszy na świecie system do zarządzania treścią, dzięki swej wielkiej rozszerzalności jest w stanie dostosować się do potrzeb użytkowników. Uczenie się tworzenia dodatków (pluginów) nie tylko umożliwi ci dostosowanie funkcji według własnych wymagań, ale także pozwoli lepiej zrozumieć istotę architektury WordPressa, poprawić swoje umiejętności techniczne i przekształcić twoje kreatywne idee w produkty gotowe do publikacji. Tworząc własne dodatki, masz kontrolę nad jakością kodu, możesz zapewnić bezpieczeństwo witryny oraz uniknąć problemów z kompatybilnością wynikających z użycia dodatków dostępnych od innych dostawców.

Podstawowy plugin dla WordPressa to w istocie jeden lub kilka plików w języku PHP, znajdujących się w określonym katalogu. Ten plugin interaguje z core’em systemu WordPress za pomocą bogatej API (jak np. aktywnych hooków, hooków filtrów, krótkich kodów, widgetów itd.). Zrozumienie tego mechanizmu jest warunkiem skutecznego rozwoju jakiegoś pluginu.

Przygotowanie środowiska rozwoju i infrastruktury podstawowej

Przed napisaniem pierwszego linii kodu istotne jest stworzenie dobrzego środowiska rozwoju. Potrzebny jest lokalny serwer (np. XAMPP, Local by Flywheel lub DevKinsta), edytor kodu (np. VS Code lub PhpStorm) oraz zainstalowana wersja WordPressu do testów.

Polecamy lekturę. Święty tekst dla programistów tworzących dodatki do WordPressa: Opanowanie podstawowych zasad i praktyczne przykłady projektów。

Wejście do pluginu stanowi główny plik PHP. Komentarze umieszczone na początku tego pliku są kluczowe dla rozpoznawania pluginu przez WordPress. Najpierw utworzymy bazową strukturę pluginu.

UltaHost – hostingu dla stron WordPress

Gwarancja zwrotu pieniędzy w ciągu 30 dni, nieograniczony przepustowość sieci i dostęp do bazy danych, bezpłatna ochrona przed atakami typu DDoS. Promocja: 50% przy zakupie na 3 lata.

strona dostępu

Tworzenie głównego pliku wtyczki

Główny plik wtyczki zwykle nosi nazwę tej samej wtyczki. Na przykład, jeśli tworzymy wtyczkę o nazwie “Moja pierwsza wtyczka”, jej główny plik może mieć nazwę „my_first_plugin.js”.my-first-plugin.phpTen plik musi zostać umieszczony w następującym miejscu:/wp-content/plugins/my-first-plugin/W katalogu.

Na początku pliku muszą znajdować się standardowe informacje o wtyczce, w postaci komentarzy. Poniżej jest przykład najprostszego możliwego przypadku:

<?php
/**
 * Plugin Name:       我的第一个插件
 * 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
 * Domain Path:       /languages
 */

Po zapisaniu tego pliku wejdź na stronę “Dodatki” w panelu administracyjnym WordPressa. Powinien pojawić się na liście dostępnych dodatków, a potem możesz go aktywować. Na razie nie ma on żadnych funkcji, ale podstawa jego działania została już przygotowana.

Utworzenie podstawowej struktury katalogu dla wtyczek

Plugin o jasno strukturyzowanej architekturze ułatwia długoterminową konserwację. Zaleca się stworzenie następujących katalogów:
* /assets/Znajduje się tu miejsce na przechowywanie statycznych zasobów, takich jak CSS, JavaScript oraz zdjęcia.
* /includes/Zawiera pliki z klasyfikacją PHP oraz pliki z definicjami funkcji.
* /languages/Znajduje się tu miejsce na pliki z tłumaczeniami międzynarodowymi (w formatach .po/.mo).

Polecamy lekturę. Zasadnicze elementy pracy frameworku CSS Tailwind: odkryjemy, w jaki sposób funkcjonuje ten praktyczny i modularny framework do tworzenia stron internetowych.。

main filemy-first-plugin.phpPlugin powinien być odpowiedzialny wyłącznie za inicjalizację, np. definiowanie stałych, włączanie innych plików, rejestrację hooków itd.

Rozwijanie kluczowych funkcji: tworzenie menu i stron zarządzania

Częsta funkcja dodatków jest możliwość dodania strony menu zarządzania w backendzie WordPress. To osiągniemy za pomocą “API do stronic menu” w WordPress.

Dodać menu najwyższego poziomu w tle (w obszarze nie widzialnym przez użytkownika).

Musimy to użyć.add_menu_page()Funkcja. Ta funkcja jest często używana w…admin_menuTen aktywny hook jest wykonywany w momencie jego aktywacji. Dodajemy następujący kod do głównego pliku:

hosting.com Hosting współdzielony

Wysoka wydajność dzięki procesorom AMD EPYC, pamięci masowej NVMe SSD i LiteSpeed, wewnętrzne wsparcie ekspertów 24/7, zaawansowane środki bezpieczeństwa, w tym SSL, brute force, ochrona przed złośliwym oprogramowaniem i DDoS, oszczędność do 73%

strona dostępu

// 定义在管理员菜单初始化时执行的功能
function mfp_add_admin_menu() {
    add_menu_page(
        '我的插件设置',         // 页面标题
        '我的插件',            // 菜单标题
        'manage_options',      // 所需权限
        'my-first-plugin',     // 菜单slug
        'mfp_display_settings_page', // 用于显示页面内容的回调函数
        'dashicons-admin-generic', // 菜单图标（Dashicon）
        6                      // 菜单位置
    );
}
// 将函数挂载到 `admin_menu` 钩子上
add_action('admin_menu', 'mfp_add_admin_menu');

Utworzenie treści wyświetlanych na stronie ustawień

W powyższym kodzie…mfp_display_settings_pageTo jest funkcja typu „callback”, która jest odpowiedzialna za wyświetlenie zawartości HTML strony konfiguracji. Musimy ją definiować:

// 设置页面的显示内容
function mfp_display_settings_page() {
    // 检查用户权限
    if (!current_user_can('manage_options')) {
        wp_die(__('你没有权限访问此页面。'));
    }
    ?>
    <div class="wrap">
        <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
        <form action="/pl/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            // 输出设置字段和安全nonce字段
            settings_fields('mfp_options_group'); // 设置组的名称
            do_settings_sections('my-first-plugin'); // 页面slug
            submit_button('保存设置');
            ?>
        <input type="hidden" name="trp-form-language" value="pl"/></form>
    </div>
    &lt;?php
}

Ten kod tworzy standardową strukturę witryny do konfiguracji w WordPressie, w której zastosowano różne elementy interfejsu.settings_fields()和do_settings_sections()To oznacza, że użyjemy API do konfiguracji WordPressu (WordPress Settings API) do zarządzania naszymi ustawieniami. Jest to najbezpieczniejszy i najstandardniejszy sposób.

Użyj API Settings do zarządzania opcjami wtyczek.

Zająć się tym bezpośrednio.$_POSTDane stanowią źródło potencjalnych ryzyk z punktu widzenia bezpieczeństwa. API WordPress Settings umożliwia nam sprawdzenie wiarygodności danych, zabezpieczenie ich oraz ich przechowywanie, co czyni go najlepszym sposobem na konfigurację dodatków (pluginów).

Polecamy lekturę. Pełny przewodnik po wtyczce WooCommerce: jak stworzyć profesjonalną, niezależną stronę e-commerce z funkcją transgranicznej sprzedaży — od podstaw.。

Ustawienia rejestracji, pola oraz sekcje

Musimy to zrobić.admin_initInicjalizujemy nasze ustawienia w „hooku”. Najpierw użyj…register_setting()Udziel zgodę na rejestrację tej opcji ustawień.

function mfp_register_settings() {
    // 注册一个设置：`mfp_options` 是存储在`wp_options`表中的键名
    register_setting(
        'mfp_options_group', // 设置组名，需与`settings_fields()`参数一致
        'mfp_options',       // 选项名
        'mfp_sanitize_options' // 可选：数据清洗回调函数
    );

// 添加一个设置章节
    add_settings_section(
        'mfp_main_section',                // 章节ID
        '主要设置',                         // 章节标题
        'mfp_main_section_callback',       // 章节介绍的回调函数
        'my-first-plugin'                  // 所属页面slug
    );

// 在章节中添加一个文本字段
    add_settings_field(
        'mfp_text_field',                  // 字段ID
        '示例文本',                         // 字段标签
        'mfp_text_field_callback',         // 用于渲染字段HTML的回调函数
        'my-first-plugin',                 // 所属页面slug
        'mfp_main_section'                 // 所属章节ID
    );
}
add_action('admin_init', 'mfp_register_settings');

Definicja funkcji renderowania i przygotowania danych dla pola

Teraz musimy definiować wszystkie wyżej wspomniane funkcje zwrotne (callback functions), które będą używane do generowania HTML kodu dla polów oraz do przygotowania danych do dalszego wykorzystania.

Hosting współdzielony InterServer

Hosting współdzielony $2.50 USD miesięcznie, pierwszy miesiąc $0.1 USD kod promocyjny tryinterserver, 461 skryptów aplikacji w chmurze, instalacja jednym kliknięciem.

strona dostępu

// 主章节的描述文本
function mfp_main_section_callback() {
    echo '<p>Oto główna zona ustawień dla pluginu.</p>';
}

// 文本字段的HTML输出
function mfp_text_field_callback() {
    // 从数据库获取现有值
    $options = get_option('mfp_options');
    $value = $options['mfp_text_field'] ?? ''; // PHP 7.0+ 空合并运算符
    echo '<input type="text" name="mfp_options[mfp_text_field]" value="' . esc_attr($value) . '" class="regular-text">';
}

// 数据清洗函数（可选但推荐）
function mfp_sanitize_options($input) {
    $sanitized_input = [];
    if (isset($input['mfp_text_field'])) {
        // 对文本字段进行基本的清洗，如去除标签
        $sanitized_input['mfp_text_field'] = sanitize_text_field($input['mfp_text_field']);
    }
    return $sanitized_input;
}

Takim sposobem został stworzony kompletny plugin z witryną dla konfiguracji bezpieczeństwa. Po aktywacji pluginu w panelu administracyjnym WordPress pojawi się menu “Moje pluginy”. Klikając na nie, możesz ustawić i zapisać tekstową opcję. Wszkie dane są bezpiecznie przechowywane za pomocą API WordPress.wp_optionsW tabeli.

Dodaj funkcje frontendowe do pluginu: umożliwienie tworzenia krótkich kodów.

Funkcje dostępne w tle są podstawą, ale pluginy często muszą też wpływać na wygląd witryny (jej frontend). Tworzenie skrótów kodu (shortcodes) to doskonały sposób na umożliwienie integracji funkcji pluginów w artykuły, strony lub inne elementy interfejsu użytkownika.

Zarejestruj prosty krótki kod.

Zarejestrujemy coś o nazwie…[my_greeting]Krótki kod, służący do wyświetlania powitania na stronie front-end.add_shortcode()Funkcja.

Dodaj to w głównym pliku lub w specjalnym pliku zawierającym funkcje:

// 注册短代码
function mfp_greeting_shortcode($atts, $content = null) {
    // 使用shortcode_atts设置默认属性并合并用户输入
    $atts = shortcode_atts(
        array(
            'name' => '访客', // 默认值
        ),
        $atts,
        'my_greeting' // 短代码名称
    );

// 获取插件选项中存储的文本
    $options = get_option('mfp_options');
    $custom_text = $options['mfp_text_field'] ?? '';

// 构造输出
    $output = '<div class="mfp-greeting">'$output = '<p>'Witaj, %s! Zapraszamy na naszą stronę.'</p>';
    if (!empty($custom_text)) {
        $output .= '<p><strong>Udostępniony tekst:</strong>'`.esc_html($custom_text)`.'</p>'$output = '</div>';

// 返回输出内容，而不是直接echo
    return $output;
}
add_shortcode('my_greeting', 'mfp_greeting_shortcode');

Teraz użytkownicy mogą wpisywać tekst w edytorze artykułów.[my_greeting name="张三"]Na stronie frontendu wyświetlony zostanie personalizowany tekst powitania, a jeśli w tle (backendzie) zdefiniowano “tekst przykładowy”, on również zostanie wyświetlony. Taki sposób umożliwia skuteczne połączenie ustawień z danymi wyświetlanymi na stronie frontend.

Podsumowanie.

Poprzez wykonywanie powyżej opisanych kroków udało nam się stworzyć pełnowartościowy plugin dla WordPress. Zaczęliśmy od zera, tworząc podstawowe pliki i strukturę pluginu, a potem użyliśmy odpowiednich narzędzi i technik, aby doprowadzić go do stanu gotowego do używania.add_menu_page()Za pomocą API ustawień (Settings API) zbudowano bezpieczną stronę do edycji ustaw w tle (background settings page), a następnie…add_shortcode()Zrealizowano wyświetlanie funkcji na stronie klienta. Ten proces obejmuje kluczowe etapy rozwoju dodatków: planowanie, inicjalizację, integrację z API serwera, obsługę danych oraz dostawę interfejsów dla użytkownika.

Po opanowaniu tych podstawowych znań możesz przystąpić do eksploracji bardziej zaawansowanych tematów, takich jak tworzenie własnych typów artykułów, metadanych (Meta Box), dostosowywanie tabel w bazie danych, implementacja endpointów REST API, obsługa AJAX oraz lokalizacja pluginów. Pamiętaj, że stosowanie standardów kodowania i najlepszych praktyk WordPress jest kluczowym elementem przy tworzeniu wysokiej jakości, łatwo podlegających konserwacji pluginów.

FAQ – najczęściej zadawane pytania.

Jakie znajomości PHP są konieczne do rozwoju pluginów?

Konieczne jest opanowanie podstaw gramatyki PHP, w tym zmiennych, tablic, funkcji, warunków i pętli. Wiedza z zakresu programowania obiektowego (OOP) jest niezbyt pomocna przy tworzeniu większych i bardziej złożonych wtyczek. Ponadto należy zrozumieć, w jaki sposób WordPress załadowuje wtyczki, oraz jak bezpiecznie używać zmiennych i funkcji globalnych.

Jak debugować samodzielnie opracowaną wtyczkę WordPress?

Najpierw upewnij się, że nawp-config.phpUwolniono dostęp do pliku.WP_DEBUG和WP_DEBUG_LOGDzięki temu informacje o błędach będą zapisywane do pliku logów. Ponadto można użyć…error_log()Funkcja wyświetla informacje diagnostyczne. W przypadku złożonej logiki można użyć profesjonalnych narzędzi do debugowania, takich jak Xdebug, aby krok po kroku wykonywać kod.

Jak zapewnić bezpieczeństwo pliku rozszerzalnego (pluginu) podczas jego tworzenia?

Zawsze sprawdzaj i przygotowuj dane wprowadzone przez użytkowników. Możesz skorzystać z wewnętrznych funkcji WordPressu do tego celu.esc_html(), esc_attr(), sanitize_text_field()和wp_kses()Zajmij się obsługą wyjścia. Korzystaj z metody, która nie bazuje na technologii CE (Non-CE method).wp_nonce_field()Są to metody zapobiegające falsyfikacji żądań między witrynami (Cross-Site Request Forgery, CSRF). W przypadku operacji na bazie danych są stosowane odpowiednie mechanizmy bezpieczeństwa.$wpdbMetody dostępne w klasie, lub ich używanieprepare()Zapyty są tworzone w taki sposób, aby zapobiecć atakom typu SQL injection.

Czy pliki rozszerzeń (plug-inów) powinny być przechowywane lokalnie na komputerze użytkownika, czy na serwerze online?

Zdecydowanie zaleca się wykonywać większość prac rozwojowych w lokalnym środowisku (np. Local, XAMPP). Lokalne środowisko charakteryzuje się szybką odpowiedzią, nie jest podatne na problemy z łącznością internetową, a także umożliwia swobodne testowanie i wprowadzanie zmian bez wpływu na witrynę internetową w publicznym środowisku. Po ukończeniu podstawowych funkcji można aplikację rozwinąć do środowiska testowego w celu sprawdzenia jej końcowej kompatybilności.

Jak opublikować swoje wtyczki w oficjalnym katalogu WordPress?

Musisz odwiedzić stronę WordPress.org, zarejestrować konto dla deweloperów i przesłać kod swojego pluginu za pomocą systemu Subversion (SVN). Plugin musi spełniać oficjalne standardy kodu oraz wymogi struktury katalogów i musi zawierać wszystkie niezbędne elementy.readme.txtPo przyznaniu pliku uprawomocnienia użytkownicy z całego świata będą mogli bezpośrednio wyszukiwać i instalować twoje dodatki w tle systemu.