Tutorial dotyczący tworzenia wtyczek WordPress: od zera do stworzenia swojej pierwszej wtyczki.

Przygotowanie i ustawienie środowiska

Przed rozpoczęciem pisania kodu należy upewnić się, że twoje środowisko rozwoju jest dobrze konfigurowane. Dobrze przygotowane lokalne środowisko rozwoju może znacząco poprawić efektywność pracy i wygodę debugowania.

Najpierw musisz zainstalować na swoim lokalnym komputerze środowisko serwera internetowego, które często nazywane jest “środowiskiem serwera lokalnego”. Jednym z najpopularniejszych wyborów jest XAMPP lub MAMP – obejmują one połączenie Apache, MySQL/MariaDB oraz PHP. Alternatywą jest użycie Dockera do konfiguracji środowiska zbliżonego do tego, które znajdziemy w środowisku produkcyjnym. Bez względu na wybrany sposób upewnij się, że wersja PHP (zaleca się 7.4 lub wyższa) oraz wersja MySQL są kompatybilne z większością środowisk hostujących WordPress.

Następnie pobierz i zainstaluj najnowszą wersję WordPressa. Rozpakuj pliki WordPressa w korzenowym katalogu witryny na swoim lokalnym serwerze (na przykład w katalogu XAMPP). htdocs Utworz folder i dokonaj konfiguracji według znanej procedury “wymagającej pięciu minut”. Upewnij się, że możesz normalnie korzystać z tego lokalnego witryny WordPress.

Polecamy lekturę. W prosty i zrozumiały sposób: kompletny przewodnik po tworzeniu wtyczek WordPressa od podstaw.。

Na koniec, i to niezbyt istotne, ale ważne: przygotuj edytor kodu. Zaleca się używać takich narzędzi jak Visual Studio Code, PhpStorm lub Sublime Text, które oferują funkcje podkreślania kodu, inteligentnych sugestii oraz możliwości debugowania. Szczególnie przy rozwoju w języku PHP te funkcje pomogą uniknąć wielu błędów gramatycznych.

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

Podstawa architektury pluginów i główny plik

WordPress plugin posiada standardową i konieczną strukturę plików, która składa się z kilku podstawowych elementów. Serce tego pluginu stanowi plik, znajdujący się w określonym miejscu w strukturze plików pluginu. /wp-content/plugins/ folder o tym samym nazwieniu w katalogu, a także główny plik PHP znajdujący się w tym folderze.

Tworzenie głównego pliku wtyczki

Najpierw… /wp-content/plugins/ W katalogu utwórz nową folderę o jasnym, unikalnym nazwaniu, które opisuje funkcje dodatku, na przykład “my-first-plugin”. Następnie w tej folderze stworz plik PHP o tej samej nazwie. my-first-plugin.php。

Ten plik główny stanowi “punkt wejścia” do pluginu – WordPress identyfikuje metadane pluginu poprzez odczytywanie informacji zawartych w jego nagłówku. Informacje w nagłówku pluginu to standardowy blok komentarzy w języku PHP, który musi znajdować się na początku pliku. Muszą zawierać co najmniej nazwę pluginu i jego opis.

<?php
/**
 * Plugin Name:       我的第一个插件
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       这是一个学习WordPress插件开发的示例插件，用于展示“Hello World”。
 * Version:           1.0.0
 * Author:            你的名字
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 * Domain Path:       /languages
 */

W powyższym kodzie…Plugin Name To pola obowiązkowe; wszystkie pozostałe są opcjonalne, ale zaleca się je wypełnić. Te informacje będą wyświetlone na stronie zarządzania pluginami w backendzie WordPress.Text Domain Wykorzystywany do internacionalizacji (podstütki wielu języków) i musi być zgodny z obszarem tekstu używanym przy późniejszych wywołaniach funkcji tłumaczeniowych.

Polecamy lekturę. Naucz się tworzyć wtyczki do WordPressa od podstaw: zasady, praktyki i zaawansowane techniki.。

Definicja podstawowych stałych dla pluginu

Dobre zwyki przy rozwoju pluginów polegają na ustawieniu od początku kilku przydatnych stałych wartości, np. ścieżek plików pluginu oraz adresów URL, aby można je łatwo wykorzystywać w dalszym kodzie. Dzięki temu unikamy konieczności wpisywania tych informacji w kod w postaci „hardcode’u”, co ułatwia jego utrzymanie i przenoszenie na inne platformy.

Możesz dodać następujący kod do głównego pliku, bezpośrednio po informacjach o nagłówku pluginu, aby definiować stałe (const):

// 防止直接访问
if ( ! defined( 'ABSPATH' ) ) {
    exit; // 如果 ABSPATH 未定义，则退出
}

// 定义插件路径和URL常量
define( 'MFP_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
define( 'MFP_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
define( 'MFP_PLUGIN_VERSION', '1.0.0' );

Tutaj,plugin_dir_path( FILE ) 和 plugin_dir_url( FILE ) To funkcja dostępna w WordPress, która umożliwia bezpieczne uzyskanie ścieżki katalogu oraz adresu URL aktualnego pliku wtyczki.MFP_PLUGIN_VERSION Konstanty są używane do przechowywania numerów wersji pluginów, co ułatwia ich używanie przy włączaniu stylów skryptów lub porównywaniu wersji.

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

Implementacja kluczowych funkcji oraz używanie „hooków”

Esencją rozwoju pluginów dla WordPress jest system “hooków” („hooks”). Hooki dzielą się na dwa typy: akcje (Actions) i filtry (Filters). Dzięki nim możesz włączyć swój kod w określone momenty wykonywania WordPressa (np. podczas ładowania strony lub zapisu artykułu) lub zmienić dane wygenerowane przez inne funkcje.

Dodaj prosty „hook” do realizacji danej akcji.

Dajmy zrealizować najprostszą funkcję: dodanie jednego wiersza tekstu na dole strony internetowej. Będziemy używać aktywnych elementów (ang. action hooks). wp_footerZapewne zostanie uruchomione przed wyświetleniem HTML w obszarze nagłówka strony (footer).

Dodaj funkcję do głównego pliku, a potem użyj jej w innych częściach kodu. add_action Funkcja umożliwia jej montaż (zainstalowanie) w odpowiednim miejscu. wp_footer Na tym haczu.

Polecamy lekturę. Przewodnik po tworzeniu wtyczek WordPress: krok po kroku nauczymy Cię, jak stworzyć swoją własną wtyczkę od podstaw.。

/**
 * 在网站页脚输出自定义文本
 */
function mfp_display_footer_text() {
    echo '<p style="text-align: center; color: #666;">Dziękuję, że korzystasz z mojego pierwszego pluginu dla WordPress!</p>';
}
add_action( 'wp_footer', 'mfp_display_footer_text' );

Teraz aktywuj swoje wtyczki (plugi) i odwiedź frontend witryny. Przesuń się na dno strony – powinienś zobaczyć tę linię tekstu. To właśnie pokazuje, w jaki sposób działają „hooki akcji” (action hooks): umożliwiają wykonywanie określonych działań w określonym momencie.

Użyj filtrów do modyfikacji treści.

Filtry służą do modyfikacji istniejących wartości. Na przykład, chcemy zmienić nagłówki artykułów i dodać przed każdy z nich tekst “【Rekomendowane】”. To można zrealizować za pomocą filtrów. the_title Można to zrealizować za pomocą filtrów.

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

Stworz funkcję, która przyjmuje jako parametr oryginalny tekst tytułu do filtrowania i powraca tekst tytułu po zmianach. Następnie… add_filter Montowanie.

/**
 * 在所有文章标题前添加前缀
 * @param string $title 原始标题
 * @return string 修改后的标题
 */
function mfp_add_prefix_to_title( $title ) {
    // 确保只在主循环中修改，避免影响后台列表等其他地方
    if ( is_single() && in_the_loop() ) {
        $title = '【推荐】' . $title;
    }
    return $title;
}
add_filter( 'the_title', 'mfp_add_prefix_to_title' );

Ten prosty przykład pokazuje, jak potężne są filtry: możesz sprawdzić różne warunki (np.…) is_single() Aby sprawdzić, czy mamy do czynienia z stroną zawierającą tylko jedną artykulikę, należy dokonać odpowiednich zmian wyłącznie w treści dostępnej w tym kontekście.

Dodaj strony zarządzania oraz zasady bezpieczeństwa.

W pełni funkcjonalny plugin często wymaga strony konfiguracji w backendzie, aby administratorzy witryny mogli dokonać niezbędnych ustawień. Ponadto zapewnienie bezpieczeństwa kodu jest niezbyt ważne.

Strona ustawień dla tworzenia pluginów

Będziemy używać… add_menu_page Funkcja dodaje do pluginu górny meniu zarządzania oraz odnoszącą się do niego stronę ustawień.

Najpierw stworzmy funkcję, która generuje treść HTML dla strony konfiguracji, a potem zainstalujmy tę funkcję w odpowiednim miejscu. admin_menu Funkcja hooka akcji służy do rejestracji tego menu.

/**
 * 渲染插件设置页面的HTML内容
 */
function mfp_render_settings_page() {
    // 检查用户权限
    if ( ! current_user_can( 'manage_options' ) ) {
        wp_die( __( '你没有足够的权限访问此页面。', 'my-first-plugin' ) );
    }
    ?>
    <div class="wrap">
        <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
        <p>To jest strona ustawień mojego pierwszego pluginu. W przyszłości można tu dodawać formularze i opcje.</p>
        <form action="/pl/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            // 后续可以在这里添加设置字段
            // settings_fields( 'mfp_options_group' );
            // do_settings_sections( 'mfp-settings-page' );
            // submit_button( '保存设置' );
            ?>
        <input type="hidden" name="trp-form-language" value="pl"/></form>
    </div>
    &lt;?php
}

/**
 * 注册插件管理菜单
 */
function mfp_add_admin_menu() {
    add_menu_page(
        &#039;我的第一个插件设置&#039;, // 页面标题
        &#039;我的插件&#039;,          // 菜单标题
        &#039;manage_options&#039;,    // 所需权限 (manage_options)
        &#039;mfp-settings-page&#039;, // 菜单slug
        &#039;mfp_render_settings_page&#039;, // 回调函数
        &#039;dashicons-admin-plugins&#039;, // 图标 (Dashicons)
        80                   // 菜单位置
    );
}
add_action( &#039;admin_menu&#039;, &#039;mfp_add_admin_menu&#039; );

Po aktywacji wtyczki na lewej stronie panelu administracyjnego WordPress pojawi się nowy element menu “Moje wtyczki”. Kliknięcie na niego otworzy prostą stronę ustawień. Tu znajduje się interfejs umożliwiający dodawanie pola formularza za pomocą API WordPress Settings – to standardowy sposób bezpiecznego obsługi wprowadzanych przez użytkowników danych.

Weryfikacja danych i escape

Wszelkie dane przyjmowane od użytkowników lub wysyłane do przeglądarki muszą zostać przetworzone, aby zapobiec atakom typu XSS (Cross-Site Scripting) oraz inwazjom typu SQL injection. WordPress oferuje szeroką gamę funkcji bezpieczeństwa do tego celu.

• Użyj escape output. esc_html()、esc_attr()、esc_url() 和 wp_kses_post() Funkcje takie są używane do oczyszczania treści wyświetlanych w HTML.
• Weryfikacja danych: użyj sanitize_text_field()、sanitize_email() Można użyć funkcji takich jak `clean()` lub `sanitize()` do przygotowania danych wprowadzonych z formularza, aby były bezpieczne i poprawne pod kątem formatowania.
• Klucz nie-Ce: Podczas operacji z formularzami, które wymagają modyfikacji danych, musi być użyty właśnie ten klucz. wp_nonce_field() 和 wp_verify_nonce() Aby sprawdzić legalność żądania.

Bezpieczeństwo to kluczowy element w rozwoju dodatków (pluginów); należy od początku kształtować dobre nawyki dotyczące ich tworzenia.

Podsumowanie.

W ramach tego kursu udało nam się zrealizować cały proces rozwoju pluginu dla WordPress – choć plugin jest mały, to zawiera wszystkie niezbędne elementy. Zaczęliśmy od zera, przygotowaliśmy środowisko rozwoju, stworzyliśmy standardową strukturę pliku głównego pluginu i poprzez implementację dwóch funkcji (dodawania tekstu do nagłówka strony i modyfikacji nagłówka artykułu) lepiej zrozumieliśmy kluczowe zasady działania aktywnychhooków (action hooks) i filtrów (filter hooks) w WordPress. Na koniec dodaлиśmy do pluginu podstawową stronę administracyjną w backendzie, a także podkreśliliśmy ważność takich praktyk bezpieczeństwa, jak walidacja danych, sprawdzanie upoważnień użytkowników oraz escapeowanie wyświetlanych tekstów.

Ten prosty plugin typu “Hello World” zawiera już wszystkie kluczowe elementy potrzebne do stworzenia komercyjnych rozszerzeń: standardową strukturę, możliwość wykorzystania „hooków”, interfejs dla administracji oraz zabezpieczenia. Od tego punktu możesz zacząć eksplorować API ustawień WordPress (Settings API), tworzyć własne opcje, projektować tabele w bazie danych lub rozwijać bardziej złożone skrypty i narzędzia. Pamiętaj, że ciągłe studiowanie oficjalnych dokumentacji oraz analiza kodu wysokiej jakości open-source pluginów to najlepszy sposób na rozwój swoich umiejętności.

FAQ – najczęściej zadawane pytania.

### – Jak debugować moje WordPressowe wtyczki?
Pierwszym krokiem jest włączenie trybu debugowania w WordPressie. wp-config.php W dokumencie zostanie przedstawiony WP_DEBUG Wartość stałej została ustawiona na… trueMożesz też ustawić inne parametry. WP_DEBUG_LOG 为 trueZarejestruj informacje o błędzie. /wp-content/debug.log W pliku należy uniknąć wycieku błędnych informacji na stronę internetową, aby nie wpłynąć negatywnie na użytkownika.

Ponadto używanie paneli „Console” i „Network” w narzędziach dla deweloperów w przeglądarzu (nacisk F12) do oglądania błędów JavaScript oraz żądań API, a także integracja narzędzia do debugowania PHP (np. Xdebug) z twoim edytorem kodu (np. VS Code) umożliwia skuteczne wykonywanie procedur debugowania z użyciem punktów przerwania (breakpoints). To bardzo efektywne i profesjonalne metody rozwiązywania problemów w kodzie.

Dlaczego moje wtyczki wykazują “błąd śmiertelny” podczas aktywacji?

Zwykle to wynika z błędów gramatycznych w PHP lub z wywołania nieistniejącej funkcji/klasy. Najpierw sprawdź logi debugowania WordPress (jak wspomniano powyżej). Informacje o błędzie dokładnie wskazują, w którym pliku i na której linii wystąpił problem.

Zwykłe przyczyny problemów to brak kropki końcowej, niespójne nawiasy lub cyfry, wywoływanie funkcji bez niezbędnych plików, a także próby uruchomienia kodu, gdy plugin jest wyłączony. Upewnij się, że twoja wersja PHP odpowiada wymaganym wymogom, a wszystkie funkcje są definiowane przed ich użyciem.

Jak zrobić, aby mój plugin obsługiwał kilka języków (internacjonalizacja)?

WordPress wykorzystuje framework GNU gettext do realizacji funkcji internacionalizacji (i18n) i lokalizacji (l10n). Najpierw, jak pokazano w instrukcjach, należy poprawnie ustawić odpowiednie parametry w nagłówku głównego pliku kodu. Text Domain(Na przykład) my-first-plugin) i Domain Path。

W kodzie pluginu wszystkie teksty, które wymagają tłumaczenia, należy otoczyć funkcją tłumaczeniową. Na przykład:__( ‘文本’, ‘my-first-plugin’ ) 或 _e( ‘文本’, ‘my-first-plugin’ )Następnie użyj narzędzia takiego jak Poedit, by skanować te ciągi tekstu w kodzie, utworzyć plik z rozszerzeniem .pot, a także pliki .po i .mo dla odpowiedniego języka (na przykład chińskiego zh_CN), i umieść je w odpowiednim miejscu. /languages/ W katalogu.

Jak bezpiecznie interagować z bazą danych podczas rozwoju dodatków (pluginów)?

Nigdy nie pisz bezpośrednio zdań SQL, łącząc w nich dane wprowadzone przez użytkownika. Zawsze należy używać klas do operacji z bazą danych dostępnych w WordPress. $wpdbOferuje takie funkcje jak… $wpdb->prepare() Taki sposób umożliwia bezpieczne przygotowanie zapytań SQL, co skutecznie zapobiega atakom typu SQL injection.

Na przykład, aby wyszukać dane, należy napisać coś w tym stylu:

global $wpdb;
$user_input = $_POST['some_input'];
$safe_query = $wpdb->prepare( "SELECT * FROM {$wpdb->prefix}table WHERE column = %s", $user_input );
$results = $wpdb->get_results( $safe_query );

W tym samym czasie należy prowadzić surową weryfikację i czyszczenie danych wprowadzanych przez użytkowników, na przykład za pomocą odpowiednich narzędzi lub algorytmów. sanitize_text_field() Funkcje takie jak…