Sviluppo di plugin per WordPress in modo semplice e comprensibile: costruisci il tuo primo plugin personalizzato da zero

Fundamenti dei plugin per WordPress e ambiente di sviluppo

Prima di iniziare a scrivere il codice, è fondamentale comprendere i concetti di base dei plugin per WordPress e configurare un ambiente di sviluppo appropriato. Un plugin per WordPress è essenzialmente una cartella che contiene codice PHP; esso estende le funzionalità di base di WordPress attraverso l’API ricca fornita dal framework stesso. I plugin possono essere molto semplici (ad esempio, includere solo un breve frammento di codice) oppure estremamente complessi (ad esempio, creare interi sistemi di gestione). L’idea fondamentale alla base dello sviluppo di plugin è quella di “non modificare il codice sorgente di WordPress”, il che garantisce che le funzionalità personalizzate non vengano perse in caso di aggiornamenti del software.

Per sviluppare in modo efficiente, è necessario disporre di un ambiente di sviluppo locale. È possibile utilizzare strumenti come XAMPP, MAMP, Local by Flywheel o Docker per configurare rapidamente un server che includa PHP e MySQL. Successivamente, installare un’istanza aggiornata di WordPress. Durante il processo di sviluppo, si consiglia di…wp-config.phpAbilitato nel file.WP_DEBUGAllo scopo di individuare tempestivamente gli errori.

Il “cuore” di un plugin è un file PHP principale. Le note presenti all’inizio di questo file costituiscono il suo “identificativo”; WordPress utilizza queste informazioni per riconoscere e gestire il plugin in background. Le note di apertura di un file principale di plugin standard sono riportate di seguito:

Si consiglia di leggere Cos'è un tema WordPress?。

<?php
/**
 * Plugin Name: 我的第一个自定义插件
 * Plugin URI:  https://example.com/my-first-plugin
 * Description: 这是一个用于学习插件开发的简单插件，它将在文章末尾添加自定义内容。
 * Version:     1.0.0
 * Author:      开发者名称
 * License:     GPL v2 or later
 * Text Domain: my-first-plugin
 */

Crea il tuo primo plugin funzionale.

Iniziamo con una funzionalità pratica: aggiungere automaticamente un testo personalizzato alla fine di ogni articolo sul sito web. Questo esempio rappresenterà il fulcro del processo di sviluppo del plugin.

UltaHost – Hosting per siti WordPress

Garanzia di rimborso entro 30 giorni, larghezza di banda illimitata e accesso ai database, protezione gratuita contro gli attacchi DDoS; sconto del 50% per l’acquisto di un piano valido per 3 anni (da 3 a 4 TB di spazio di archiviazione).

pagina di accesso

Il file principale del plugin e l’operazione di inizializzazione

Prima di tutto, in WordPress…wp-content/pluginsCreare una nuova cartella nella directory, ad esempio.my-first-pluginAll’interno di quella cartella, creare il file PHP principale; può essere chiamato…my-first-plugin.phpCopia il codice delle note in cima nel testo principale.

Successivamente, abbiamo bisogno di un metodo sicuro per eseguire il codice di inizializzazione del plugin. La pratica migliore è racchiudere tutte le funzionalità all’interno di una classe o utilizzare funzioni definite all’interno di namespace. Qui utilizzeremo una semplice classe per organizzare il codice. Dopo le note di testo nella parte iniziale del file principale, aggiungete la seguente definizione di classe:

if ( ! defined( 'ABSPATH' ) ) {
	exit; // 防止直接访问文件
}

class My_First_Plugin {
    public function __construct() {
        // 构造函数，在这里挂载钩子
    }
}

// 初始化插件
new My_First_Plugin();

if ( ! defined( ‘ABSPATH’ ) )Questo codice rappresenta uno standard di sicurezza per lo sviluppo di plugin per WordPress, utilizzato per impedire agli utenti di accedere direttamente ai file del plugin tramite l’URL.

Utilizzare degli “hook” per aggiungere il contenuto del piede di pagina agli articoli.

L’architettura dei plugin di WordPress si basa sul sistema dei “Hook” (Ganci), che si dividono in “Action” (Azioni) e “Filter” (Filtri). Gli Action ti permettono di eseguire del codice in momenti specifici, mentre i Filter ti consentono di modificare i dati.

Si consiglia di leggere Guida definitiva all’ottimizzazione delle prestazioni dei siti WordPress: dall’configurazione di base all’analisi completa dei plugin di cache。

Il nostro obiettivo è aggiungere del testo dopo il contenuto dell’articolo; si tratta di un processo di “filtrazione” del contenuto stesso. Pertanto, utilizzeremo…the_contentQuesto filtro: modifica il costruttore e i metodi nella classe come segue:

class My_First_Plugin {
    public function __construct() {
        // 将自定义方法挂载到‘the_content’过滤器上
        add_filter( 'the_content', array( $this, 'add_footer_to_content' ) );
    }

/**
     * 在文章内容后添加自定义页脚
     *
     * @param string $content 原始文章内容。
     * @return string 修改后的文章内容。
     */
    public function add_footer_to_content( $content ) {
        // 确保只在主循环的单篇文章页面显示
        if ( is_single() && in_the_loop() && is_main_query() ) {
            $custom_footer = '<div class="my-plugin-footer"><p>Grazie per aver letto questo articolo! È stato generato da “Il mio primo plugin”.</p></div>';
            $content .= $custom_footer;
        }
        return $content;
    }
}

add_filter()La funzione utilizza i metodi della classe.add_footer_to_contentRegistrarsi suthe_contentFiltro. Quando WordPress è pronto a visualizzare il contenuto dell'articolo, chiama il nostro metodo e trasmette il contenuto originale. Utilizziamo un controllo condizionale per assicurarci che il piè di pagina venga aggiunto solo alle singole pagine degli articoli, evitando di aggiungerlo ripetutamente alla home page e alle pagine di archivio. Infine, aggiungiamo l'HTML personalizzato al contenuto e lo restituiamo.

Aggiungere opzioni per la gestione del backend al plugin.

Un plugin maturo consente di solito agli utenti di effettuare configurazioni in background. Aggiungeremo un semplice opzione di impostazione per il testo del piede di pagina appena creato, in modo che gli utenti possano personalizzare il testo visualizzato.

hosting.com Hosting condiviso

Prestazioni elevate con CPU AMD EPYC, storage SSD NVMe e LiteSpeed, supporto interno di esperti 24 ore su 24, 7 giorni su 7, misure di sicurezza avanzate, tra cui SSL, brute force, malware e protezione DDoS, risparmi fino a 73%

pagina di accesso

Creare la pagina del menu di impostazioni

Dobbiamo aggiungere una pagina secondaria al menu “Impostazioni” presente nell’interfaccia di amministrazione di WordPress. Per farlo, è necessario utilizzare…add_options_page()La funzione, di solito, viene “montata” (ovvero resa disponibile per l’uso) all’interno di un contesto specifico…admin_menuSul gancio dell’azione.

Innanzitutto, aggiungere un nuovo metodo nella classe dei plugin per registrare i menu e le pagine:

class My_First_Plugin {
    // ... 之前的构造函数和方法 ...

public function __construct() {
        add_filter( 'the_content', array( $this, 'add_footer_to_content' ) );
        // 挂载后台管理菜单
        add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );
        // 挂载初始化设置选项
        add_action( 'admin_init', array( $this, 'settings_init' ) );
    }

public function add_admin_menu() {
        add_options_page(
            '我的第一个插件设置', // 页面标题
            '自定义页脚设置',     // 菜单标题
            'manage_options',     // 所需权限
            'my-first-plugin',    // 菜单slug
            array( $this, 'options_page_html' ) // 回调函数，用于输出页面HTML
        );
    }
}

Campi di configurazione per l’iscrizione e pagina di rendering

Successivamente, dobbiamo utilizzare l’API delle impostazioni di WordPress per registrare, salvare e verificare le opzioni in modo sicuro. Questo processo implica…register_setting(), add_settings_section()和add_settings_field()e altre funzioni.

Si consiglia di leggere Cos’è WooCommerce? Una spiegazione dettagliata delle sue funzionalità principali e dei suoi scenari di utilizzo.。

public function settings_init() {
    // 注册一个设置选项组
    register_setting( 'my_first_plugin_settings', 'my_first_plugin_options' );

// 在页面中添加一个设置区域
    add_settings_section(
        'my_first_plugin_section',
        '页脚内容配置',
        array( $this, 'section_callback' ),
        'my-first-plugin'
    );

// 向该区域添加一个字段
    add_settings_field(
        'footer_text',
        '页脚显示文本',
        array( $this, 'footer_text_field_render' ),
        'my-first-plugin',
        'my_first_plugin_section'
    );
}

public function section_callback() {
    echo '<p>Qui è possibile configurare il testo da visualizzare alla fine degli articoli.</p>';
}

public function footer_text_field_render() {
    $options = get_option( 'my_first_plugin_options' );
    $value = $options['footer_text'] ?? '感谢阅读本文！由【我的第一个插件】生成。'; // 默认值
    ?&gt;
    <input type='text' name='my_first_plugin_options[footer_text]' value='<?php echo esc_attr( $value ); ?>' style='width: 400px;'>
    <p class="description">Sono supportati semplici tag HTML, come… <strong>, <em>, <a>。<p>Non ho bisogno di un amico che cambia ogni volta che soffia il vento.</p>
    <?php
}

public function options_page_html() {
    // 检查用户权限
    if ( ! current_user_can( 'manage_options' ) ) {
        return;
    }
    ?>
    <div class="wrap">
        <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
        <form action='/it/options.php/' method='post' data-trp-original-action="options.php">
            <?php
            settings_fields( 'my_first_plugin_settings' );
            do_settings_sections( 'my-first-plugin' );
            submit_button();
            ?>
        <input type="hidden" name="trp-form-language" value="it"/></form>
    </div>
    &lt;?php
}

Infine, modificare la funzione di output del lato client ( frontend).add_footer_to_contentPer far sì che il testo venga letto dalle opzioni del database:

public function add_footer_to_content( $content ) {
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $options = get_option( 'my_first_plugin_options' );
        $footer_text = $options['footer_text'] ?? '感谢阅读本文！由【我的第一个插件】生成。';
        $custom_footer = '<div class="my-plugin-footer"><p>'`. wp_kses_post($Footer_text)`.'</p></div>';
        $content .= $custom_footer;
    }
    return $content;
}

wp_kses_post()La funzione garantisce che nel testo inserito dall’utente siano presenti solo tag HTML sicuri; questa è una misura di sicurezza molto importante.

Hosting condiviso InterServer

Hosting condiviso $2,50 USD al mese, primo mese $0,1 USD codice promozionale tryinterserver, 461 script di applicazioni cloud, installazione con un clic.

pagina di accesso

Internazionalizzazione dei plugin e migliori pratiche

Per permettere agli utenti di tutto il mondo di utilizzare i plugin, l’internazionalizzazione (i18n) è un passaggio essenziale. WordPress utilizza il framework GNU gettext per gestire le traduzioni.

Campo di testo e funzione di traduzione

Prima di tutto, assicurati che le note presenti nella parte iniziale del tuo plugin definiscano correttamente tutti i parametri necessari.Text DomainAd esempio…my-first-pluginPoi, in tutti i punti del plugin in cui sono presenti stringhe da tradurre, utilizzare una funzione specifica per incapsularle.

Modifica il codice che abbiamo scritto in precedenza per aggiungere il supporto alla traduzione del testo da visualizzare.

// 在构造函数中加载翻译文件
public function __construct() {
    // ... 其他钩子 ...
    add_action( 'plugins_loaded', array( $this, 'load_textdomain' ) );
}

public function load_textdomain() {
    load_plugin_textdomain(
        'my-first-plugin',
        false,
        dirname( plugin_basename( __FILE__ ) ) . '/languages/'
    );
}

// 修改设置页面的字符串
public function section_callback() {
    echo '<p>' . esc_html__( '在这里配置显示在文章末尾的文本内容。', 'my-first-plugin' ) . '</p>';
}

public function footer_text_field_render() {
    $options = get_option( 'my_first_plugin_options' );
    $value = $options['footer_text'] ?? __( '感谢阅读本文！由【我的第一个插件】生成。', 'my-first-plugin' );
    ?&gt;
    <input type='text' name='my_first_plugin_options[footer_text]' value='<?php echo esc_attr( $value ); ?>' style='width: 400px;'>
    <p class="description">&lt;?php esc_html_e( &#039;支持简单的HTML标签，如 <strong>, <em>, <a>。', 'my-first-plugin' ); ?&gt;</p>
    &lt;?php
}

// 注意：用户在前台输入的“页脚文本”本身通常不需要翻译，因为它是由管理员设置的具体内容。

__()Utilizzato per tradurre e restituire stringhe di testo.esc_html__()Utilizzato per tradurre e escapare il contenuto HTML generato._e()Funzione utilizzata per tradurre e visualizzare direttamente una stringa di testo. Il secondo parametro della funzione rappresenta l’area di testo, che deve essere conforme a quella definita dal plugin.

Sicurezza, prestazioni e organizzazione del codice

Oltre all’internazionalizzazione, è necessario seguire anche le seguenti migliori pratiche:
1. Sicurezza: Verifica, pulizia ed escape di tutti i dati inseriti dagli utenti. Utilizzare…sanitize_text_field(), esc_html(), wp_kses_post()Funzioni come… vengono utilizzate.wp_nonce_field()Prevenire gli attacchi CSRF (Cross-Site Request Forgery).
2. Prestazioni: Utilizzare gli “hook” in modo appropriato per evitare esecuzioni di query non necessarie al database ad ogni caricamento della pagina. Si può considerare la possibilità di effettuare il caching temporaneo (transient caching) dei risultati ottenuti.
3. Organizzazione del codice: Per i plugin complessi, i file dovrebbero essere suddivisi in moduli funzionali. Il file principale ha il compito di gestire l’avvio del programma, mentre le classi e i metodi vanno posizionati nei file dedicati a ciascun modulo.includes/Indice: Gli asset front-end (CSS, JS) sono posizionati…assets/Indice.
4. Disinstallazione e pulizia: Se il tuo plugin ha creato tabelle di database o impostazioni personalizzabili, dovresti fornire una funzione di disinstallazione per eliminare tutti i dati generati. Questa funzione può essere realizzata attraverso un processo separato…uninstall.php文件来实现。

Riassumendo

Attraverso questo tutorial, abbiamo completato l’intero processo di sviluppo di un plugin personalizzato per WordPress che dispone di funzionalità di base: dalla creazione dell’ambiente di sviluppo, alla creazione della struttura di base del plugin, all’aggiunta di funzionalità utilizzando il sistema di hook, alla realizzazione delle pagine di configurazione per l’amministratore, fino ad includere pratiche di internazionalizzazione e sicurezza. Hai imparato come utilizzare tutti questi strumenti per sviluppare plugin efficaci e sicuri.add_filter和add_actionInteragire con il nucleo di WordPress: come utilizzare l’API Settings per creare pagine di opzioni affidabili, e come farlo in modo efficace…load_plugin_textdomainRendere i plugin compatibili con più lingue. Ricorda che, durante lo sviluppo di plugin, sicurezza, manutenibilità e esperienza utente sono i fattori più importanti da considerare. Sulla base di questi principi, puoi proseguire esplorando funzionalità più avanzate, come tipi di articoli personalizzati, metadati, codici brevi (shortcodes) e endpoint REST API, per creare estensioni per WordPress ancora più potenti.

FAQ - Domande frequenti

Perché il mio plugin non appare nel menu di back-end?

Di solito, questo problema è causato da problemi di autorizzazione o errori nel codice. Prima di tutto, assicurati che…add_options_page或add_menu_pageI parametri di autorizzazione specificati nella funzione (ad esempio…)‘manage_options’Corrisponde al ruolo dell’utente con cui sei attualmente connesso. In secondo luogo, verifica…admin_menuÈ stato verificato che l’hook sia stato montato correttamente e che la funzione di callback non presenti errori di sintassi che possano interrompere l’esecuzione di PHP. Il metodo più semplice per risolvere il problema è abilitare questa funzionalità tramite l’interfaccia di amministrazione di WordPress.WP_DEBUGControllare se vengono visualizzati messaggi di errore correlati.

Come aggiungere file CSS e JavaScript personalizzati a un plugin?

La procedura corretta da seguire è utilizzare…wp_enqueue_style()和wp_enqueue_script()Funzioni: Per i risorse front-end, queste dovrebbero essere montate (ovvero inserite nel sistema di gestione dei file) in modo appropriato.wp_enqueue_scriptsAggiunto ai “ganci di azione” (action hooks); per i risorse del backend di gestione, viene montato (mounted) lì.admin_enqueue_scriptsSul gancio.

Nella tua classe di plugin, puoi aggiungere il seguente metodo:

public function enqueue_frontend_assets() {
    wp_enqueue_style( ‘my-plugin-style’, plugin_dir_url( __FILE__ ) . ‘assets/css/style.css’, array(), ‘1.0.0’ );
}

Poi, all’interno del costruttore, si procede tramite…add_action( ‘wp_enqueue_scripts’, array( $this, ‘enqueue_frontend_assets’ ) );Registrazione. Questo permette di garantire che la gestione delle dipendenze avvenga correttamente e di evitare conflitti con altri plugin o temi.

Come posso eliminare le opzioni di dati che ho creato quando un utente disinstalla l’estensione?

WordPress offre due principali metodi per rimuovere un plugin. Il primo consiste nell’registrare un “hook” di disinstallazione, ma questo approccio non è molto utilizzato nei plugin orientati agli oggetti. Il metodo più consigliato e standard è quello di creare un nuovo file di configurazione per il plugin stesso, che permetta di gestire la disinstallazione in modo appropriato.uninstall.phpIl file si trova allo stesso livello del tuo file principale del plugin.

Quando un utente elimina un plugin tramite l’interfaccia di back-end di WordPress, WordPress controlla automaticamente il file associato a quel plugin e lo esegue.uninstall.phpIn questo caso, è necessario prima effettuare un controllo.WP_UNINSTALL_PLUGINVengono definite delle costanti, e successivamente vengono eliminati in modo sicuro tutti i dati creati dai plugin, nonché le tabelle personalizzate del database, ecc. Ad esempio:

if ( ! defined( ‘WP_UNINSTALL_PLUGIN’ ) ) {
    exit;
}
delete_option( ‘my_first_plugin_options’ );
// 如果有自定义表：$wpdb->query( “DROP TABLE IF EXISTS {$wpdb->prefix}my_table” );

Come posso rendere il mio plugin compatibile con più versioni di WordPress?

La chiave per mantenere la compatibilità consiste nell’utilizzare con cautela le funzioni e le caratteristiche delle nuove versioni, nonché nel fornire soluzioni alternative per le versioni più vecchie. Prima di chiamare una funzione che potrebbe essere disponibile solo nelle nuove versioni, è necessario…function_exists()Effettua un controllo. Ad esempio, se desideri utilizzare le funzionalità introdotte nella versione 5.0…wp_dateLe funzioni possono:

if ( function_exists( ‘wp_date’ ) ) {
    $date = wp_date( get_option( ‘date_format’ ), $timestamp );
} else {
    $date = date_i18n( get_option( ‘date_format’ ), $timestamp );
}

Inoltre, specificare nella parte delle note in cima al plugin e nel file “readme” la versione minima di WordPress per cui il plugin è stato testato è molto importante. Eseguire regolarmente test su versioni più vecchie di WordPress rappresenta il modo migliore per garantire la compatibilità del plugin con le diverse versioni di questo software.