Zasady tworzenia i wyświetlania polów dostosowanych w systemie WooCommerce: poradnik dla zaawansowanych programistów

Podczas budowy rozwiniętego sklepu na platformie WooCommerce standardowe pola produktów często nie są w stanie spełnić wszystkich wymagań biznesowych. Bez względu na to, czy chodzi o dodanie tabeli rozmiarów do produktów odzieżnych, specyfikacji technicznych do elektronicznych produktów czy dowolnych ustawień dostosowanych do usług subskrypcyjnych, programiści muszą rozszerzyć model danych produktów. A właśnie pola dostosowane stanowią kluczową technologię umożliwiającą to osiągnięcie. Dzięki nim można dodawać dodatkowe atrybuty danych do produktów, zamówień, a nawet użytkowników, a następnie integrować je bezproblemowo zarówno w interfejsie frontendowym, jak i w części backendowej sklepu.

W tym tekście zostanie dokładnie opisany cały proces rozwoju własnych poli w systemie WooCommerce, od tworzenia i przechowywania danych po zarządzanie nimi na stronie serwera oraz ich wyświetlanie na stronie klienta. Ponadto będą przedstawione zaawansowane techniki i najlepsze praktyki, które pomogą ci stworzyć wysoko dostosowane rozwiązania e-commerce.

Podstawowe pojęcia i typy poli dostosowanych (custom fields) w systemie WooCommerce

Przed rozpoczęciem rozwoju istotne jest zrozumienie różnych typów polów dostosowanych w systemie WooCommerce oraz ich zastosowań. To decyduje o miejscu, sposobie i dostępności przechowywania danych.

Polecamy lekturę. Tutorial WooCommerce: jak stworzyć w pełni funkcjonalną, niezależną stronę e-commerce od podstaw.。

Dywersyfikowane pola produktowe

Najczęściej używane są pola dostosowane do produktów, które służą do dodawania dodatkowych informacji o poszczególnych towarach. Na przykład numer ISBN książki lub model procesora w komputerze. Te dane są zwykle powiązane z konkretnym produktem i muszą być wyświetlone na jego stronie szczegółowej. Istnieją dwa głównie sposoby na to, by je implementować: pierwszy polega na wykorzystaniu wbudowanych atrybutów produktów (Attributes) w systemie WooCommerce w połączeniu z metadanami, a drugi na bezpośrednim dodawaniu pola za pomocą API metadanych (Post Meta) w WordPress.

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

Podstawową funkcją magazynowania danych jest…update_post_meta()Dzięki temu można przypisywać pary klucz–wartość danych do dowolnego typu artykułu.productZwiązane z tym jest funkcja odczytywania.get_post_meta()。

Zamówienia i pola dostosowane przez użytkownika

Poza produktami często konieczne jest rozszerzenie funkcjonalności zamówień i informacji o użytkownikach. Na przykład można dodać do zamówienia pola dla “nazwy adresata faktury” lub “wymagań dotyczących pakowania prezentów”, a do informacji o użytkowniku – pola dla “poziomu członkostwa” lub “kodu rabatowego dla biznesów”. Dane zamówień są przechowywane w bazie danych.wp_postmetaW tabeli można to zrobić poprzez…update_post_meta()为shop_orderDodano pole dla typu artykułu. Dane użytkowników są przechowywane w…wp_usermetaW tabeli potrzebny jest dostęp do metadanych użytkowników WordPressa za pomocą API. Na przykład:update_user_meta()和get_user_meta()Funkcja.

Zrozumienie tych podstawowych mechanizmów magazynowania danych pomoże ci w czasie rozwoju aplikacji dobrać odpowiednie API oraz efektywnie wyszukiwać te udefiniowane przez ciebie dane.

Utworzenie pola dostosowanego w panelu administracyjnym

Integracja pola dostosowanego do systemu zarządzania WooCommerce (panelu kontrolnego WordPress) umożliwia administratorom sklepów łatwe edycję tych danych. To jest realizowane przede wszystkim za pomocą funkcji Metabox w WordPress.

Polecamy lekturę. Szczegółowy przewodnik po WooCommerce: jak stworzyć profesjonalną witrynę e-commerce z zerowego poziomu.。

Użyj hooków operacyjnych w WooCommerce, aby dodać metadane do produktów.

Aby dodać obszar wprowadzania danych na stronie edycji produktu, należy użyć…add_meta_boxesHak lub jego bardziej specyficzne odmianyadd_meta_boxes_productNajpierw musisz stworzyć funkcję zwrotną (callback), która będzie wyświetlać pola formularza HTML.

Na przykład, następny kod dodaje do produktu pola metryczne zawierające informacje o producencie:

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%;" />';
}

Zbieranie i przechowywanie danych z ustawionych polów.

Niewystarczy tylko wyświetlić pola wpisywania; należy również bezpiecznie zapisywać dane wprowadzone przez użytkownika. To wymaga odpowiednich procedur bezpieczeństwa.save_post_productWszystko zostanie zrealizowane w funkcji wywołanej przez hook. Logika związana z zapisem musi zawierać sprawdzenie upoważnień, weryfikację losowych numerów oraz oczyszczenie wejściowych danych.

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

Patrząc na poprzedni przykład, funkcja do zapisu danych wygląda następująco:

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 );
    }
}

Wyświetlanie pola udefiniowanego przez użytkownika na stronie front-end

Eleganckie prezentowanie danych z zdefiniowanych polów użytkownika klientom to ostatni etap procesu rozwoju. Do tego potrzebny jest system szablonów oraz aktywności („action hooks”) w platformie WooCommerce.

Wstawienie treści na stronie produktu

Najprostszym sposobem jest dodanie treści po opisie produktu lub na stronie z informacjami o produkcie. WooCommerce oferuje wiele dostępnych „hooków akcji” (action hooks), które umożliwiają to.woocommerce_product_meta_end(po informacjach metapodatkowych produktu) lubwoocommerce_after_single_product_summary(Po sekcji z opisem produktu).

Polecamy lekturę. WooCommerce od podstaw do zaawansowanych zagadnień: kompletny przewodnik po tworzeniu profesjonalnych witryn e-commerce.。

Na przykład, informacje o producencie powinny być wyświetlone poniżej ceny produktu:

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>Producent:</strong>' . esc_html( $manufacturer );
        echo '</div>';
    }
}

Stworzenie osobistej strony z tagami produktów

Dla dużych, złożonych polów dostosowanych (np. szczegółowych specyfikacji, instrukcji dla użytkowników) stworzenie osobnej strony produktu z informacjami o tym polu zapewni lepsze doświadczenie użytkownika. Do tego potrzebna jest kombinacja różnych metod i elementów interfejsu.woocommerce_product_tabsFiltry, hooki oraz funkcja callback dostosowana do potrzeb renderowania treści.

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

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>';
}

Wysokiej jakości techniki i optymalizacja wydajności

Gdy liczba i złożoność polów dostosowanych rosną, metody rozwoju muszą też zostać odpowiednio aktualizowane, aby zapewnić łatwość konserwacji kodu, bezpieczeństwo oraz wysoką wydajność systemu.

Używaj plików rozszerzeń typu ACF Pro oraz innych zaawansowanych narzędzi do tworzenia własnych poli.

Dla osób niezwiązanych z rozwojem oprogramowania lub dla zespołów, które chcą szybko implementować złożone typy pola (np. możliwość załadowania zdjęć, wybór daty, pola relacyjne), wykorzystanie rozszerzenia Advanced Custom Fields Pro (ACF Pro) w połączeniu z platformą WooCommerce jest doskonałym wyborem. Dzięki intuicyjnie przyjaznej interfejsie graficznej można łatwo tworzyć grupy pola, a narzędzie automatyzuje proces zapisu i odczytywania danych, co znacząco podwyższa efektywność pracy.

Zadbaj o efektywność wyszukiwania danych.

Prosto w…wp_postmetaWielka liczba zapytań typu LIKE w tabeli lub zapytań dotyczących nieindeksowanych metakluczyków to częste przyczyny spowolnienia działania witryny internetowej. Aby poprawić wydajność operacji wyszukiwania produktów w zależności od ustawionych polów, można zastosować następujące strategie:
1. Użyj prefiksu z podkreśleniem (_): jak w przykładzie z wcześniejszego tekstu._product_manufacturerTo zapobiega wyświetlaniu pola w standardowym polu metadanych “Udostępnione pola” w WordPress, ale co więcej, pomaga w optymalizacji niektórych zapytań.
2. Kopiowanie kluczowych polów do kategorii produktów lub tagów: Jeśli często konieczne jest filtrowanie lub sortowanie produktów według jakiegoś ustawionego pola (np. “marki”), lepszym rozwiązaniem jest utworzenie tego pola jako atrybutu produktu lub kategorii w systemie WooCommerce. Dzięki temu można korzystać z efektywnych funkcji sortowania w WordPress, zamiast nieefektywnych operacji na poziomie metadanych.
3. Używaj z ostrożnością.meta_queryW: NaWP_Query或WC_Product_QueryUżyj tego w Chinach.meta_queryGdy wykonywane są wyszukiwania, upewnij się, że metaklucze używane w zapytach są ograniczone i jasno określone, unikając wykorzystania znaków zastępczych (wildcardów).

Bezpieczeństwo i czyszczenie danych

Nigdy nie ufajdanaj danych wprowadzonych przez użytkowników lub administratorów. Przed zapisem jakiegoś pola dostosowanego należy je uprzątnić (zrealizować procedurę sanitizacji) w zależności od rodzaju tych danych. W przypadku tekstów użyj odpowiednich metod obróbki, aby zapobiec potencjalnym problemom z bezpieczeństwem.sanitize_text_field()；对于HTML内容，使用wp_kses_post()；对于URL，使用esc_url_raw()Podczas wyświetlania na stronie klienta („front end”) należy użyć…esc_html()、esc_attr()或wp_kses_post()Wykonaj escape, aby zapobiec atakom typu XSS (Cross-Site Scripting).

Podsumowanie.

Polowe dostosowane w systemie WooCommerce to potężne narzędzie do rozszerzania funkcjonalności sklepu. Od zrozumienia typów pola dla różnych entitet, takich jak produkty, zamówienia czy użytkownicy, przez bezpieczne tworzenie i edycję tych pola w panelu administracyjnym z użyciem aktywnych hooków i metapole, aż po elegancką prezentację danych na stronie klienta za pomocą filtrów i hooków, cały ten proces stanowi podstawę dla tworzenia dostosowanych rozwiązań e-commerce. Dzięki stosowaniu takich zaawansowanych technik, jak tworzenie osobnych kart tagów, wykorzystanie narzędzia ACF Pro, optymalizacja zapytań dotyczących metadanych oraz stosowanie rygorystycznych procedur czyszczenia i weryfikacji danych, programiści mogą stworzyć skuteczne, wydajne i bezpieczne rozwiązania, które dokładnie odpowiadają specyficznym wymaganiom biznesowym.

FAQ – najczęściej zadawane pytania.

Jak edytować w masie ustawienia kustomowe produktów?

WooCommerce nie oferuje w swoim panelu administracyjnym interfejsu do edycji wielu ustawień kustomowych jednocześnie. Aby uzyskać tę funkcję, zwykle należy skorzystać z jednego z następujących sposobów:
1. Można używać specjalnych pluginów, np. wersji Pro pluginu “Advanced Custom Fields” (ACF), w połączeniu z pluginem “ACF Extended”, aby uzyskać możliwość masowej edycji elementów na stronie frontend.
2. Można to zrobić za pomocą narzędzia “Eksport/Import” w WordPress. Najpierw użyj opcji “Eksportuj wszystkie dane”, aby wyeksportować produkty w formacie CSV lub XML. Następnie w tym pliku znajdź odpowiednie pola dostosowane do potrzeb i wykonać zmiany masowe, a po tym znowu importuj produkty.
3. Napisz własny skrypt w PHP lub użyj komend z WP-CLI, aby przetworzyć produkty w cyklu i wykonać odpowiednie operacje.update_post_meta()Można użyć funkcji do masowych aktualizacji. Ten sposób wymaga wiedzy programistycznej; przed wykonaniem operacji konieczne jest tworzenie kopii bazy danych.

Czy pola dostosowane (custom fields) wpływają na szybkość ładowania witryny e-commerce realizowanej za pomocą platformy WooCommerce?

Jeśli nie użyje się tego właściwie, mogą wystąpić problemy. Głównym ograniczeniem wydajności jest proces wyszukiwania dużej liczby produktów na stronie klienta (frontend) lub w tle (backend).wp_postmetaZłożone lub nieopтимізowane operacje wykonywane na tabeli.meta_queryNa przykład na główniej stronie sklepu lub na stronach kategorii filtrowanie i sortowanie według kilku nieindeksowanych polów dostosowanych może powodować spowolnienie wykonywania zapytów.

Metody optymalizacji obejmują: przekształcenie poli, które są często wykorzystywane do filtrowania, w atryuty produktów; upewnienie się, że metaklucze używane w zapytach są dokładne i jasne; rozważenie możliwości tworzenia indeksów dla kluczowych danych w polach dostosowanych; a także ułatwienie dostępu do często używanych metadanych poprzez ich ustawienie w pamięci tymczasowej („transient”) lub w pamięci obiektowej.

Czy można dodać pola dostosowane do potrzeb użytkownika do obszaru wyszukiwania produktów?

Możliwe, ale to wymaga zmiany wyszukiwarki. W standardowym ustawieniu wyszukiwarki w WordPress i WooCommerce nie uwzględniają metadanych produktów (danych ustawionych przez użytkownika). Musisz to wykorzystać, aby metadane były uwzględnione w wynikach wyszukiwania.posts_search或pre_get_postsCzekaj na dostępne filtry i hooki, aby rozszerzyć możliwości wyszukiwania.WHEREKlauzula, aby zawierała informacje o…wp_postmetatabularJOINOperacje i decyzje podstawione na warunkach.

Warto zaznaczyć, że taki sposób może zrobić wyszukiwania bardziej złożonymi i może wpłynąć na wydajność wyszukiwania na dużych stronach internetowych. Zaleca się używać tego tylko w przypadkach koniecznych oraz upewnij się, że tabele w bazie danych posiadają odpowiednie indeksy.

Który sposób jest lepszy: dodawanie własnych poli za pomocą kodu czy za pomocą pluginów?

Zależy to od twoich konkretnych wymagań, umiejętności technicznych oraz planu długoterminowego utrzymania projektu. Metoda dodawania kodu, opisana w tym tekście, jest lżejsza w obsłudze, bardziej elastyczna i nie wymaga żadnych dodatkowych pluginów zewnętrznych, co jest idealne dla programistów lub projektów, które wymagają głębokiej personalizacji oraz wysokiej wydajności. Wszystka logika znajduje się w plikach z funkcjami tematycznymi lub w kustomizowanych pluginach, co ułatwia kontrolę wersji projektu.

Używanie wtyczek (np. ACF Pro, Toolset) sprawia, że proces jest szybszy i intuicywniejszy, szczególnie dla osób niezwiązanych z programowaniem lub dla projektów, które wymagają szybkiego uruchomienia. Wtyczki oferują przyjazny interfejs użytkownika (UI) oraz złożone typy poli, ale dodają dodatkowy kod do strony internetowej i zapytania do bazy danych. Może wystąpić problem z kompatybilnością z przyszłymi tematami lub innymi wtyczkami. W dużych projektach działających w długim okresie może być konieczne dokładne zrozumienie struktury danych wygenerowanych przez te wtyczki.