Tutorial definitivo per lo sviluppo di plugin WordPress: crea il tuo primo plugin da zero.

Basi dello sviluppo di plugin per WordPress e preparazione dell’ambiente di lavoro

Prima di iniziare a scrivere il codice, è fondamentale comprendere i concetti di base dei plugin per WordPress e configurare correttamente l’ambiente di sviluppo. Un plugin per WordPress è essenzialmente un insieme di uno o più file PHP che estendono o modificano le funzionalità di base del sistema grazie al sistema di “hook” fornito da WordPress. I plugin possono essere semplici, limitandosi ad aggiungere un breve frammento di codice, oppure possono essere molto complessi, fino a creare interi sistemi di e-commerce.

Il cuore di un ambiente di sviluppo è la creazione di un ambiente server locale. Puoi utilizzare strumenti come XAMPP, MAMP, Local by Flywheel o Docker per configurare rapidamente un sito WordPress locale che includa PHP, MySQL e Apache/Nginx. Assicurati che la versione di PHP utilizzata sia in linea con quella consigliata ufficialmente da WordPress. Per quanto riguarda gli editor di codice, Visual Studio Code,PhpStorm e Sublime Text sono ottime scelte: offrono evidenziazione del codice, suggerimenti e funzionalità di debug, migliorando notevolmente l’efficienza dello sviluppo.

Un plugin standard per WordPress deve contenere almeno un file PHP principale, il cui codice iniziale deve includere specifiche annotazioni che forniscono informazioni essenziali sul plugin stesso. Queste annotazioni sono fondamentali affinché WordPress possa riconoscere e gestire correttamente il plugin. Inoltre, sebbene non sia obbligatorio, creare un directory dedicata al proprio plugin rappresenta una pratica consigliata: ciò facilita la gestione dei file di risorse, dei pacchetti linguistici e di altre dipendenze.

Si consiglia di leggere Sviluppo di plugin per WordPress: una guida completa dall'inizio alla perfezione per creare siti web personalizzati.。

Crea il tuo primo file di plugin.

Ora, diamo il via alla creazione del file principale del primo plugin. Prima di tutto, devi entrare nella directory di installazione di WordPress./wp-content/plugins/Cartella. Qui, crea una nuova cartella per il tuo plugin, ad esempio chiamandola…my-first-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

All’interno di questa cartella, crea un file PHP principale. Di solito, questo file principale ha lo stesso nome della cartella dei plugin. Ad esempio:my-first-plugin.phpAll’inizio di questo file devono essere presenti le informazioni standard relative alla parte di intestazione del plugin.

<?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
 */

Questo commento fornisce tutte le informazioni meta necessarie per il backend di un plugin per WordPress. Dopo aver salvato il file, potrai visualizzare e attivare il plugin nella pagina “Plugin” del pannello di amministrazione di WordPress. Al momento non dispone di alcuna funzionalità, ma la struttura di base è già stata creata.

Aggiungere una funzionalità semplice al plugin.

Dopo aver attivato il plugin, aggiungeremo la sua prima funzionalità concreta: la visualizzazione di un testo personalizzato nella parte inferiore della pagina del sito web. Per farlo, utilizzeremo le funzionalità disponibili in WordPress.wp_footerGancio.

Nel file principale del plugin…my-first-plugin.phpSotto la nota di testo in cima, aggiungi il seguente codice:

Si consiglia di leggere Imparare dall'inizio lo sviluppo di plugin per WordPress: creare funzionalità e estensioni personalizzate.。

// 在网站页脚输出自定义文本
function mfp_add_footer_text() {
    echo '<p style="text-align: center; color: #666;">Grazie per aver utilizzato il nostro sito web! Il supporto è fornito da “Il mio primo plugin”.</p>';
}
add_action( 'wp_footer', 'mfp_add_footer_text' );

Questo, qui,mfp_add_footer_textÈ una funzione che abbiamo definito noi; contiene il contenuto HTML da visualizzare.add_action()È la funzione principale utilizzata per aggiungere “ganci” (hook) che permettono di eseguire azioni specifiche all’interno del sistema di WordPress. Questa funzione consente di “incollare” (mount) le nostre funzioni all’interno del codice sorgente del core di WordPress, in modo che possano essere eseguite automaticamente in momenti specifici del ciclo di esecuzione del sito.wp_footerIn questo punto di esecuzione: salvando il file e aggiornando la pagina web, potrai vedere questa riga di testo in fondo alla pagina.

Utilizzare codici brevi per espandere le funzionalità di editing del contenuto.

I “Shortcode” rappresentano una funzionalità molto potente offerta da WordPress, che consente agli utenti di inserire contenuti dinamici all’interno di articoli o pagine utilizzando semplici tag. Ora creeremo un semplice shortcode per visualizzare la data attuale.

Nello stesso file principale, continua ad aggiungere il seguente codice:

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

// 创建一个显示当前日期的短代码
function mfp_show_current_date( $atts ) {
    // 定义短码的默认属性
    $attributes = shortcode_atts(
        array(
            'format' => 'Y年m月d日',
        ),
        $atts
    );

// 根据属性中的格式返回日期
    return date( $attributes['format'] );
}
add_shortcode( 'show_date', 'mfp_show_current_date' );

funzionemfp_show_current_dateÈ stata definita la logica per l’utilizzo dei codici abbreviati.shortcode_atts()La funzione viene utilizzata per unire gli attributi definiti dall’utente con quelli predefiniti, al fine di garantire la robustezza del codice. Infine…add_shortcode()La funzione…[show_date]Questo tag è associato alle funzioni di elaborazione personalizzate che abbiamo definito.

Ora puoi inserire il testo in qualsiasi articolo, pagina o editor di testi per strumenti utili (widgets).[show_date]Per visualizzare la data nel formato predefinito, oppure utilizzare…[show_date format="F j, Y"]Per visualizzare la data in formato inglese.

Comprendere a fondo gli hook e i filtri

La filosofia fondamentale dello sviluppo di plugin per WordPress si basa sugli “hook” (ganci). Esistono due tipi di hook: gli Action (azioni) e i Filter (filtri). Ne abbiamo già utilizzati alcuni in precedenza…add_action()Si tratta semplicemente di aggiungere un “action hook”.

Si consiglia di leggere Partire da zero: costruire il tuo primo plugin per WordPress。

I “action hooks” eseguono il codice in momenti specifici e non richiedono il ritorno di un valore; vengono solitamente utilizzati per visualizzare contenuti o eseguire compiti specifici, ad esempio per aggiungere testo in fondo alla pagina. I “filter hooks”, invece, servono per modificare i dati: ricevono un valore, lo elaborano attraverso la funzione specificata e devono restituire un valore modificato.

Modificare il titolo di un articolo utilizzando un filtro

Creiamo un filtro che aggiunga automaticamente un prefisso a tutti i titoli degli articoli. Aggiungilo al file principale del plugin:

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

// 使用过滤器为文章标题添加前缀
function mfp_add_title_prefix( $title, $id = null ) {
    // 确保只在主循环且是文章页面的标题上生效
    if ( in_the_loop() && is_single() && get_post_type( $id ) === 'post' ) {
        $title = '【推荐阅读】' . $title;
    }
    return $title;
}
add_filter( 'the_title', 'mfp_add_title_prefix', 10, 2 );

Questo, qui,the_titleÈ un hook per i filtri.add_filter()Il terzo parametro “10” rappresenta il livello di priorità: più il numero è basso, più l’operazione viene eseguita rapidamente; il quarto parametro “2” indica che la nostra funzione di elaborazione accetta due argomenti (quelli originali).$titleL’ID dell’articolo. Questa funzione verifica le condizioni e aggiunge il prefisso al titolo soltanto sulla pagina di un singolo articolo, e solo quando si trova all’interno del ciclo principale.

La sicurezza dei plug-in e le migliori pratiche.

Quando si sviluppano plugin, la sicurezza è un fattore da prendere in considerazione per primo. Non si deve mai fidare dei dati inseriti dagli utenti: è necessario verificarli, pulirli e escaparli correttamente.

Convalida dei dati ed escape

Quando un plugin deve elaborare dati provenienti da un form o da un URL, è necessario utilizzare le funzioni di sicurezza fornite da WordPress. Ad esempio, è consigliabile…sanitize_text_field()Per pulire l’input di testo, utilizza…esc_html()或esc_attr()Per generare HTML o attributi, al fine di prevenire gli attacchi di cross-site scripting (XSS).

Realizzare una semplice pagina di configurazione

Un plugin completo di solito richiede una pagina di configurazione da utilizzare in background. Qui viene mostrato come creare una semplice pagina di opzioni e come salvare in modo sicuro un valore di configurazione.

// 在后台管理菜单中添加一个选项页面
function mfp_add_admin_menu() {
    add_options_page(
        '我的第一个插件设置', // 页面标题
        '我的插件设置',       // 菜单标题
        'manage_options',     // 权限要求
        'my-first-plugin',    // 菜单slug
        'mfp_options_page_html' // 用于显示页面内容的回调函数
    );
}
add_action( 'admin_menu', 'mfp_add_admin_menu' );

// 注册一个设置项
function mfp_settings_init() {
    register_setting( 'mfpPlugin', 'mfp_settings' ); // 设置组，选项名

add_settings_section(
        'mfp_plugin_section', // 区块ID
        '基础设置',           // 区块标题
        null,                 // 区块介绍的回调函数（此处为null）
        'my-first-plugin'     // 所属页面slug
    );

add_settings_field(
        'custom_text',        // 字段ID
        '自定义显示文本',     // 字段标签
        'mfp_custom_text_field_html', // 用于输出字段HTML的回调函数
        'my-first-plugin',    // 页面slug
        'mfp_plugin_section'  // 所属区块ID
    );
}
add_action( 'admin_init', 'mfp_settings_init' );

// 渲染设置字段的HTML
function mfp_custom_text_field_html() {
    $options = get_option( 'mfp_settings' );
    $value = isset( $options['custom_text'] ) ? esc_attr( $options['custom_text'] ) : '';
    ?>
    <input type='text' name='mfp_settings[custom_text]' value='<?php echo $value; ?>'>
    <p class="description">Il testo inserito qui verrà visualizzato nella parte inferiore della pagina (footnote).</p>
    <?php
}

// 渲染整个选项页面的HTML
function mfp_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( 'mfpPlugin' ); // 输出安全字段
            do_settings_sections( 'my-first-plugin' ); // 输出设置区块和字段
            submit_button( '保存设置' );
            ?>
        <input type="hidden" name="trp-form-language" value="it"/></form>
    </div>
    &lt;?php
}

Questo codice crea una pagina secondaria all’interno del menu “Impostazioni”, utilizzata per salvare un testo personalizzato. Si noti inoltre la verifica dei diritti di accesso degli utenti.current_user_can…) e l’escapamento dei dati di output (…)esc_html, esc_attrQuesti sono tutti aspetti delle pratiche di sicurezza. In seguito, puoi modificare la funzione che generava il contenuto della parte inferiore della pagina (footer) in modo da…get_option( 'mfp_settings' )Leggi questo valore dal file per visualizzarlo in modo dinamico.

Riassumendo

Attraverso questo tutorial, hai completato l’intero processo di creazione di un plugin WordPress funzionale partendo da zero. Hai imparato come creare la struttura di base dei file del plugin e come utilizzare gli “action hooks”.add_actionAggiungi del contenuto nella parte inferiore della pagina (footnote) tramite…add_shortcodeCreare codici corti personalizzati, nonché utilizzare gli hook dei filtriadd_filterModificare i dati degli articoli… Ancora più importante è il fatto che hai approfondito i concetti fondamentali della sicurezza dei plugin e hai messo in pratica come creare una pagina di configurazione del backend sicura per gestire le opzioni dei plugin.

Lo sviluppo di plugin è un processo di apprendimento e pratica continuo. Nel prossimo passo, puoi provare ad aggiungere supporto per l’internazionalizzazione ai tuoi plugin (utilizzando…).__()和_e()È possibile utilizzare funzioni personalizzate, includere risorse JavaScript e CSS, oppure ricorrere alla programmazione orientata agli oggetti (OOP) per ristrutturare il codice in modo che sia più facile da mantenere e estendere. Ricorda che leggere la documentazione ufficiale dei plugin di WordPress nonché il codice sorgente del framework stesso rappresenta il modo migliore per migliorare le proprie competenze.

FAQ - Domande frequenti

Come posso debuggare il mio plugin WordPress?

Il primo passo per attivare il modalità di debug di WordPress è… (The first step to enable WordPress’s debug mode is…)wp-config.phpNel documento, verrà indicato che...WP_DEBUGLa costante è impostata sutrueQuesto mostrerà direttamente sugli schermi gli errori, gli avvisi e le notifiche di PHP. Per un debug più avanzato, è possibile utilizzare…error_log()La funzione scrive le informazioni nel log di errore del server, oppure utilizza strumenti di debug professionali come Query Monitor per visualizzare le query al database, l’esecuzione dei “hook” e i dati relativi alla performance.

Come posso garantire che il mio plugin sia compatibile con diverse versioni di WordPress?

Nel codice dei plugin, dovresti utilizzare istruzioni di controllo condizionale per verificare la presenza delle funzioni, delle classi o delle costanti del core di WordPress prima di utilizzarle. È possibile farlo in diversi modi, a seconda delle esigenze del tuo progetto.function_exists()、class_exists()或defined()Eseguire la valutazione. Allo stesso tempo, per quanto riguarda il plugin…readme.txtIl file specifica chiaramente la versione minima di WordPress supportata dal tuo plugin.Requires at leastQuesto campo può aiutare gli utenti a comprendere la compatibilità dei prodotti o servizi.

È necessario utilizzare la programmazione orientata agli oggetti per sviluppare plugin?

Non è obbligatorio. È possibile sviluppare plugin completi utilizzando la programmazione puramente procedurale (come negli esempi presenti in questo tutorial). I principali vantaggi della programmazione orientata agli oggetti (OOP) sono una migliore organizzazione del codice, l’incapsulamento dei dati e la riutilizzabilità dei componenti, il che rende questo approccio particolarmente vantaggioso per progetti di plugin di grandi dimensioni e complessi. Per plugin di piccole dimensioni, invece, la programmazione procedurale può risultare più semplice e diretta. Puoi scegliere il metodo più adatto in base alle dimensioni e alla complessità del progetto.

Come posso pubblicare il mio plugin nel catalogo ufficiale di plugin di WordPress?

Prima di tutto, è necessario registrare un account su WordPress.org e inviare il proprio plugin. Il codice del plugin deve essere conforme agli standard e alle linee guida ufficiali, inclusi aspetti legati alla sicurezza, l’assenza di codice dannoso, e l’utilizzo di una licenza compatibile con il GPL. È inoltre necessario creare una descrizione dettagliata del plugin…readme.txtI file vanno inviati insieme alle relative informazioni, e si deve assicurare che le note presenti all’inizio del file principale del plugin siano conformi alle specifiche richieste. Dopo la submission, i file saranno esaminati da volontari appartenenti al team di revisione dei plugin; una volta superata l’approvazione, il plugin potrà essere pubblicato.