Guida avanzata allo sviluppo per l’utilizzo dei campi personalizzati di WooCommerce: dalla creazione alla visualizzazione

Quando si costruisce un negozio WooCommerce ricco di funzionalità, i campi di prodotto predefiniti spesso non riescono a soddisfare tutti i requisiti aziendali. Che si tratti di aggiungere tabelle delle taglie per i vestiti, specifiche tecniche per i prodotti elettronici o descrizioni personalizzate per i servizi a pagamento, gli sviluppatori devono espandere il modello di dati dei prodotti. I campi personalizzati rappresentano la tecnologia fondamentale per raggiungere questo obiettivo: consentono di aggiungere attributi di dati aggiuntivi ai prodotti, agli ordini e persino agli utenti, integrandoli in modo seamless sia nel front end che nel back end del negozio.

Questo articolo esaminerà in dettaglio l’intero processo di sviluppo dei campi personalizzati di WooCommerce, coprendo tutte le fasi: dalla creazione e archiviazione dei dati, alla gestione sul lato server, fino alla visualizzazione sul lato client. Verranno inoltre fornite tecniche avanzate e migliori pratiche per aiutarti a creare soluzioni e-commerce altamente personalizzate.

I concetti fondamentali e i tipi dei campi personalizzabili in WooCommerce

Prima di iniziare lo sviluppo, è fondamentale comprendere i diversi tipi di campi personalizzabili presenti in WooCommerce e i loro contesti d’uso. Questo aspetto determina la posizione in cui i dati vengono memorizzati, il modo in cui vengono gestiti e la loro accessibilità.

Si consiglia di leggere Tutorial di WooCommerce: costruire un sito e-commerce indipendente e funzionale da zero.。

Campo personalizzabile del prodotto

I campi personalizzabili dei prodotti sono il tipo più comune, utilizzati per aggiungere informazioni aggiuntive a un singolo articolo. Ad esempio, il numero ISBN di un libro o il modello del processore (CPU) di un computer. Questi dati sono solitamente legati a un prodotto specifico e devono essere visualizzati sulla pagina dei dettagli dell’articolo. Esistono principalmente due metodi per implementarli: il primo consiste nell’utilizzare le funzionalità integrate di WooCommerce per le attributi dei prodotti (Attributes) e i metadati; il secondo prevede l’uso dell’API per i metadati di WordPress (Post Meta) per aggiungere direttamente i campi al tipo di articolo “Prodotto”.

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

La funzione di storage principale è…update_post_meta()Permette di associare coppie di chiavi-valori ai dati di qualsiasi tipo di articolo (inclusi…).productVengono collegati tra loro. La funzione di lettura corrispondente è…get_post_meta()。

Ordini e campi personalizzati dall’utente

Oltre ai prodotti, anche gli ordini e gli utenti richiedono spesso ulteriori funzionalità o modifiche. Ad esempio, è possibile aggiungere informazioni come il “titolare della fattura” o i “requisiti per l’imballaggio del regalo” agli ordini, oppure fornire agli utenti informazioni sulla “classe di membership” o codici sconto per acquisti aziendali. I dati relativi agli ordini vengono memorizzati in un database o in un sistema di gestione degli ordini.wp_postmetaNel tabello, è possibile…update_post_meta()为shop_orderAggiungere un campo per i tipi di articoli. I dati degli utenti vengono memorizzati…wp_usermetaNella tabella, è necessario utilizzare l’API per i metadati degli utenti di WordPress, ad esempio…update_user_meta()和get_user_meta()Funzione.

Comprendere questi meccanismi di archiviazione di base ti aiuterà a scegliere le API giuste durante lo sviluppo e a effettuare ricerche efficaci in questi dati personalizzati.

Creare campi personalizzati nell’interfaccia di amministrazione.

L’integrazione dei campi personalizzati nel pannello di amministrazione di WooCommerce (il dashboard di WordPress) è fondamentale per permettere agli amministratori di negozio di modificare facilmente tali dati. Questo viene realizzato principalmente grazie alla funzionalità dei Metabox di WordPress.

Si consiglia di leggere Guida approfondita a WooCommerce: creare un sito web professionale di e-commerce transfrontaliero da zero.。

Utilizzare gli hook di WooCommerce per aggiungere campi meta

Per aggiungere un’area di input personalizzata sulla pagina di modifica del prodotto, è necessario utilizzare…add_meta_boxes“Hook” o le sue varianti più specificheadd_meta_boxes_productInnanzitutto, è necessario creare una funzione di callback per generare i campi di un form HTML.

Ad esempio, il codice seguente aggiunge un riquadro meta per le “Informazioni sul produttore”:

add_action( 'add_meta_boxes', 'add_custom_product_meta_box' );
function add_custom_product_meta_box() {
    add_meta_box(
        'custom_product_manufacturer', // 元框唯一ID
        '制造商信息', // 元框标题
        'render_custom_manufacturer_fields', // 回调函数，用于输出HTML
        'product', // 显示在哪个文章类型上
        'side', // 上下文位置（side, normal, advanced）
        'default' // 优先级
    );
}

function render_custom_manufacturer_fields( $post ) {
    // 添加安全字段 nonce
    wp_nonce_field( 'save_custom_manufacturer', 'custom_manufacturer_nonce' );
    // 获取已保存的值
    $value = get_post_meta( $post->ID, '_product_manufacturer', true );
    // 输出HTML输入框
    echo '<label for="product_manufacturer">制造商名称：</label>';
    echo '<input type="text" id="product_manufacturer" name="product_manufacturer" value="' . esc_attr( $value ) . '" style="width:100%;" />';
}

Salvare i dati dei campi personalizzati

Non è sufficiente limitarsi a mostrare i campi di input: è anche necessario salvare in modo sicuro i dati inseriti dall’utente. Questo richiede l’adozione di misure appropriate per proteggere i dati dagli accessi non autorizzati.save_post_productLa logica di salvataggio deve essere eseguita all’interno della funzione di callback scatenata dal “hook”. Tale funzione deve includere controlli sui diritti di accesso, verifiche dei numeri casuali e la pulizia dei dati in ingresso.

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

Continuando con l’esempio precedente, la funzione per salvare i dati è la seguente:

add_action( 'save_post_product', 'save_custom_product_manufacturer_field' );
function save_custom_product_manufacturer_field( $post_id ) {
    // 检查自动保存、用户权限和nonce验证
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
    if ( ! current_user_can( 'edit_post', $post_id ) ) return;
    if ( ! isset( $_POST['custom_manufacturer_nonce'] ) || ! wp_verify_nonce( $_POST['custom_manufacturer_nonce'], 'save_custom_manufacturer' ) ) return;

// 检查字段是否存在并净化数据
    if ( isset( $_POST['product_manufacturer'] ) ) {
        $manufacturer_data = sanitize_text_field( $_POST['product_manufacturer'] );
        // 使用带下划线的前缀，表示该字段为“隐藏”的元数据
        update_post_meta( $post_id, '_product_manufacturer', $manufacturer_data );
    }
}

Visualizzare i campi personalizzati sul lato front-end.

Mostrare in modo elegante ai clienti i dati dei campi personalizzati salvati rappresenta l’ultima fase del processo di sviluppo. Questo richiede l’utilizzo del sistema di template di WooCommerce nonché degli “action hooks”.

Inserire contenuto sulla pagina di un singolo prodotto

Il modo più diretto è aggiungere il contenuto dopo la descrizione del prodotto o la pagina delle informazioni sul prodotto. WooCommerce offre una vasta gamma di “action hooks” (punti di interazione programmabili) che permettono di personalizzare l’aspetto e il funzionamento del sito web in modo semplice.woocommerce_product_meta_end(Dopo le informazioni metadati del prodotto) owoocommerce_after_single_product_summary(Dopo la sezione riassuntiva del prodotto).

Si consiglia di leggere WooCommerce: Dal principiante all’esperto: La guida definitiva per creare siti e-commerce professionali。

Ad esempio, visualizzare le “informazioni sul produttore” sotto il prezzo del prodotto:

add_action( 'woocommerce_product_meta_end', 'display_custom_manufacturer_on_frontend' );
function display_custom_manufacturer_on_frontend() {
    global $product;
    $manufacturer = get_post_meta( $product->get_id(), '_product_manufacturer', true );
    if ( ! empty( $manufacturer ) ) {
        echo '<div class="product-manufacturer">';
        echo '<strong>Produttore:</strong>' . esc_html( $manufacturer );
        echo '</div>';
    }
}

Creare una pagina di etichette personalizzate per i prodotti

Per i campi personalizzati che contengono una grande quantità di informazioni (ad esempio, specifiche dettagliate o manuali per l’utente), creare una pagina di etichetta del prodotto dedicata offre un’esperienza d’uso migliore. Questo richiede l’utilizzo combinato di diversi elementi o funzionalità.woocommerce_product_tabsI “filter hooks” e una funzione di callback personalizzata vengono utilizzati per rendere il contenuto visibile sullo schermo.

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

add_filter( 'woocommerce_product_tabs', 'add_custom_product_spec_tab' );
function add_custom_product_spec_tab( $tabs ) {
    global $product;
    $specs = get_post_meta( $product->get_id(), '_product_specifications', true );
    // 仅当该字段有内容时才添加标签页
    if ( ! empty( $specs ) ) {
        $tabs['specifications_tab'] = array(
            'title'    => '产品规格',
            'priority' => 50,
            'callback' => 'render_custom_specifications_tab_content'
        );
    }
    return $tabs;
}

function render_custom_specifications_tab_content() {
    global $product;
    $specs = get_post_meta( $product->get_id(), '_product_specifications', true );
    // 假设存储的是HTML或纯文本，使用wp_kses_post允许安全的HTML标签
    echo '<div class="product-specifications">'`. wp_kses_post( wpautop( $specs ) )`.'</div>';
}

Tecniche avanzate e ottimizzazione delle prestazioni

Quando aumenta il numero e la complessità dei campi personalizzati, anche il metodo di sviluppo deve essere adeguatamente migliorato per garantire la manutenibilità del codice, la sicurezza e le prestazioni del negozio online.

Utilizzare plugin per campi personalizzati avanzati, come ACF Pro.

Per coloro che non sono sviluppatori o per le squadre che desiderano implementare rapidamente tipi di campi complessi (come l’upload di immagini, selezionatori di date, campi relazionali), l’utilizzo di Advanced Custom Fields Pro (ACF Pro) insieme alla sua integrazione con WooCommerce rappresenta una scelta eccellente. ACF Pro offre un’interfaccia grafica intuitiva per creare gruppi di campi e gestisce automaticamente il salvataggio e il caricamento dei dati, migliorando notevolmente l’efficienza dello sviluppo.

Assicurare l’efficienza delle query di dati.

Direttamente…wp_postmetaEseguire un gran numero di query di tipo “LIKE” su un database, oppure effettuare ricerche su metadati non indicizzati, è una delle cause più comuni di rallentamento del sito web. Per migliorare le prestazioni delle query relative a prodotti che contengono campi personalizzati, si possono considerare le seguenti strategie:
1. Utilizzare un prefisso con un underscore (_): come mostrato negli esempi precedenti._product_manufacturerQuesto permette di evitare che i campi vengano visualizzati nell’interfaccia predefinita di WordPress per i “campi personalizzati”, ma cosa più importante, contribuisce anche all’ottimizzazione di alcune query.
2. Copiare i campi chiave nelle categorie o nelle etichette dei prodotti: Se è necessario effettuare spesso ricerche o classificazioni basate su un campo personalizzato (ad esempio, “Marchio”), è meglio creare tale campo come attributo del prodotto o come categoria in WooCommerce. In questo modo si potranno utilizzare le funzionalità di ricerca avanzate di WordPress, piuttosto che ricorrere a metadati meno efficienti.
3. Utilizzare con cautela.meta_query“In”WP_Query或WC_Product_QueryUtilizzare nel contestometa_queryQuando si esegue una query, è importante assicurarsi che i metadati utilizzati siano limitati e specifici, evitando l’uso di caratteri jolly (wildcards) nelle ricerche.

Sicurezza e purificazione dei dati

Non fidatevi mai dei dati forniti dagli utenti o dagli amministratori. Prima di salvare qualsiasi campo personalizzato, è necessario purificarli in base al loro tipo. Per i dati testuali, utilizzate i metodi appropriati di sanificazione.sanitize_text_field()Per i contenuti HTML, utilizzare…wp_kses_post()Per i URL, utilizzare…esc_url_raw()Durante l’output sul front end, utilizzare…esc_html()、esc_attr()或wp_kses_post()Eseguire l’escape per prevenire gli attacchi di tipo Cross-Site Scripting (XSS).

Riassumendo

I campi personalizzabili di WooCommerce rappresentano uno strumento potente per estendere le funzionalità di un negozio online. Dal comprendere i tipi di campi relativi a prodotti, ordini, utenti e altre entità, all’utilizzo di “action hooks” e moduli meta per creare e salvare questi campi in modo sicuro nell’interfaccia di amministrazione, fino all’organizzazione dei dati in modo elegante sul front end grazie a filtri e “action hooks”, tutto questo costituisce la base dello sviluppo personalizzato. Utilizzando tecniche avanzate come la creazione di pagine di configurazione dedicate, l’impiego di strumenti come ACF Pro, l’ottimizzazione delle query sui metadati, nonché l’applicazione rigorosa di processi di pulizia e verifica dei dati, gli sviluppatori possono creare soluzioni e-commerce personalizzate che siano al contempo potenti, efficienti e sicure, in grado di soddisfare appieno le esigenze specifiche del business.

FAQ - Domande frequenti

Come modificare in batch i campi personalizzati dei prodotti?

Il pannello di amministrazione di WooCommerce non fornisce di per sé un’interfaccia per l’editing in batch dei campi personalizzati. Per implementare questa funzionalità, è solitamente necessario utilizzare uno dei seguenti metodi:
1. Utilizzare plugin dedicati, come la versione Pro di “Advanced Custom Fields” (ACF), che, in combinazione con plugin come “ACF Extended”, consente di effettuare modifiche in batch sul front-end.
2. Utilizzando gli strumenti di “Esporta/Importa” forniti da WordPress: innanzitutto, è possibile esportare tutti i dati dei prodotti in file CSV o XML tramite l’opzione “Esporta tutti i contenuti”. Successivamente, è possibile modificare in blocco i valori dei campi personalizzati presenti nei file e, infine, importare i dati modificati nuovamente nel sito.
3. Scrivere uno script PHP personalizzato o utilizzare i comandi WP-CLI per iterare attraverso i prodotti e eseguire le relative operazioni.update_post_meta()Esiste una funzione per aggiornare i dati in batch. Questo metodo richiede competenze di sviluppo; prima di procedere, è essenziale creare un backup del database.

I campi personalizzati possono influenzare la velocità di caricamento del sito web basato su WooCommerce?

Se utilizzato in modo improprio, possono sorgere problemi. I principali ostacoli alla performance derivano dal fatto che, quando il front-end o il back-end effettuano ricerche su un gran numero di prodotti, si verifica un aumento notevole del carico di lavoro.wp_postmetaLe operazioni eseguite su tali tabelle sono complesse o non ottimizzate.meta_queryAd esempio, sulla pagina principale del negozio o su una pagina di categorie, effettuare contemporaneamente filtri e ordinamenti basati su più campi personalizzati non indicizzati può rallentare le operazioni di ricerca.

I metodi di ottimizzazione includono: convertire i campi utilizzati per le operazioni di filtraggio frequenti in attributi del prodotto; assicurarsi che i metadati utilizzati nelle query siano specifici e chiari; prendere in considerazione la possibilità di creare indici per i dati dei campi personalizzati più importanti; oppure memorizzare i metadati più frequentemente consultati nella cache temporanea (Transients) o nella cache degli oggetti.

È possibile includere i campi personalizzati nell’ambito della ricerca dei prodotti?

Certo, ma è necessario modificare la query di ricerca. Per impostazione predefinita, le funzionalità di ricerca di WordPress e WooCommerce non includono i metadati dei prodotti (i campi personalizzati). Devi utilizzare degli strumenti specifici per includere questi dati nella ricerca.posts_search或pre_get_postsAspettiamo gli hook dei filtri per espandere la ricerca.WHERE“Clause”, in modo che contenga…wp_postmetatabellareJOINOperazioni e valutazioni di condizioni.

È importante notare che questo approccio rende le query di ricerca più complesse, il che potrebbe influire negativamente sulle prestazioni di ricerca di siti web di grandi dimensioni. Si consiglia di utilizzarlo solo quando necessario e di assicurarsi che le tabelle del database siano dotate di indici appropriati.

Qual è il modo migliore per aggiungere campi personalizzati utilizzando codice o plugin?

Dipende dalle tue esigenze specifiche, dalle tue competenze tecniche e dal piano di manutenzione a lungo termine del progetto. L’utilizzo di codice per aggiungere funzionalità (come descritto in questo articolo) rappresenta un approccio più leggero e flessibile, che non richiede l’uso di plugin di terze parti; è adatto sia a sviluppatori che a progetti che richiedono personalizzazioni approfondite e prestazioni elevate. Tutta la logica è contenuta nei file delle funzioni del tema o nei plugin personalizzati, il che facilita il controllo delle versioni.

L’utilizzo di plugin (come ACF Pro o Toolset) rende il processo più veloce e intuitivo, soprattutto per coloro che non sono sviluppatori o per progetti che richiedono un lancio rapido. Questi plugin offrono un’interfaccia utente (UI) semplice da utilizzare e tipi di campi più avanzati, tuttavia aggiungono codice aggiuntivo al sito web nonché query al database, il che potrebbe comportare problemi di compatibilità con temi futuri o altri plugin. Nei progetti di grandi dimensioni gestiti a lungo termine, può essere necessario avere una chiara comprensione delle strutture di dati generate dai plugin.