WooCommerce: Odkrywanie bazy kodów

WooCommerce to wtyczka z dużą i skomplikowaną bazą kodu.

Jeśli jesteś programistą, szczegółowe zrozumienie podstawowego kodu jest niezwykle korzystne i prawie na pewno przyniesie korzyści w dłuższej perspektywie.

Jeśli potrafisz napisać trochę PHP (większość Business Bloomer składa się z fragmentów PHP), zdecydowanie musisz od czasu do czasu przeszukiwać rdzeń . W przeciwnym razie Stackoverflow sam w sobie nie wystarczy.

Jeśli zdarzyło Ci się zobaczyć i użyć WooCommerce Visual Hook Guides, takiego jak ten dla strony pojedynczego produktu, cóż, są one po prostu generowane (ręcznie…) z samego kodu, wykonując wiele wyszukiwań PHP. Osobiście przechowuję kopię najnowszych plików wtyczek w plikach do pobrania na mój komputer, dzięki czemu zawsze mogę je przeszukiwać, szukając zaczepu lub określonej funkcji.

Więc śledźcie razem ze mną ten artykuł, gdy będziemy badać bazę kodu WooCommerce, jej strukturę i niektóre z jej wewnętrznych sekretów!

Gdzie znaleźć kod

Aby zbadać bazę kodów WooCommerce, masz kilka alternatyw, innych niż pobieranie plików wtyczek z https://wordpress.org/plugins/woocommerce

Pierwszym i najbardziej dostępnym jest przeglądanie kodu online za pomocą WordPress Trac . Jest to najwygodniejszy sposób poruszania się po kodzie, ponieważ jest on zawsze aktualny i natychmiast dostępny. Wszystko czego potrzebujesz to połączenie internetowe i dostęp do przeglądarki.

Ta metoda doskonale nadaje się do szybkiego wyszukiwania kodu i tworzenia zakładek do plików kodu, do których można się odwołać w późniejszym terminie. Możesz nawet dodać zakładkę do konkretnego numeru linii. np. aby połączyć się z metodą renderowania bloku Checkout Gutenberg (który zaczyna się od linii 66) możesz użyć tego adresu URL: https://plugins.trac.wordpress.org/browser/woocommerce/trunk/packages/woocommerce-blocks/src /BlockTypes/Checkout.php#L66

Inną opcją wyświetlenia kodu jest sklonowanie oficjalnego repozytorium WooCommerce GitHub . Jest to zalecane, jeśli chcesz dokładniej zbadać kod lokalnie za pomocą preferowanego edytora, ponieważ masz dostęp do bardziej zaawansowanych narzędzi wyszukiwania.

Aby to zrobić, musisz użyć wiersza poleceń, aby pobrać i zarządzać repozytorium WooCommerce. Jeśli używasz systemu operacyjnego macOS lub Linux, możesz użyć wbudowanej aplikacji Terminal. Git Bash to doskonały wybór dla użytkowników systemu Windows.

Niezależnie od używanej aplikacji terminalowej, otwórz ją i uruchom następujące polecenie, aby sklonować WooCommerce do lokalnego katalogu na komputerze:

 klon git https://github.com/woocommerce/woocommerce.git

Możesz sklonować go bezpośrednio do lokalnego katalogu wtyczek WordPress (znajdującego się w /wp-content/plugins/) lub zamiast tego sklonować WooCommerce do ogólnego folderu na komputerze i połączyć go symbolicznie z lokalnym folderem wtyczek WordPress. Zaletą tej metody jest to, że możesz łatwo dodać/usunąć WooCommerce z określonej lokalnej instancji WordPress. Nie jest związany z żadnym konkretnym.

Po sklonowaniu repozytorium upewnij się, że uruchomiłeś również następujące polecenie, aby zainstalować zależności wtyczek i pakiety zewnętrzne.

 instalacja npm i instalacja kompozytora

Jest to ważne, ponieważ nie cały kod WooCommerce znajduje się w głównym repozytorium. Na przykład bloki Gutenberga są domyślnie zawarte w osobnym repozytorium. Aby uwzględnić je w bazie kodu, musisz użyć powyższego polecenia, aby je specjalnie zainstalować.

Po zainstalowaniu wszystkich zależności i zewnętrznych repozytoriów są one natychmiast dostępne. Oto ten sam kod blokowy kasy, który widzieliśmy wcześniej na WordPress Trac, ale teraz mamy do niego dostęp lokalnie.

Struktura kodu

Wtyczka WooCommerce jest podzielona na kilka folderów najwyższego poziomu:

• /majątek
• /i18n
• /zawiera
• /lib
• /pakiety
• /przykładowe dane
• /src
• /szablony
• /sprzedawca

Folder zasobów zawiera dużą kolekcję stylów, czcionek, obrazów i JavaScript, które pomagają w estetyce wtyczek i interaktywności zarówno w panelu administracyjnym WordPress, jak i na interfejsie użytkownika.

Standardowe foldery wtyczek, takie jak i18n , sample-data i vendor zawierają odpowiednio funkcje internacjonalizacji, przykładowe dane produktów i biblioteki innych firm.

Folder szablonów zawiera wszystkie ustrukturyzowane szablony PHP używane do różnych treści WooCommerce, takich jak koszyk, kasa, e-maile itp. Każdy szablon można nadpisać, kopiując go do odpowiedniej lokalizacji w niestandardowym motywie (zazwyczaj motyw podrzędny), więc warto go przejrzeć przez ten folder szczegółowo, aby zobaczyć wszystkie dostępne szablony, które można dostosować. Uwaga: dostosowywanie WooCommerce za pomocą fragmentów jest lepsze niż zastępowanie szablonów.

Główny rdzeń funkcjonalności wtyczki jest zawarty w folderach include , lib , packages i src . W szczególności folder include zawiera główną listę klas wtyczek PHP dla różnych funkcji WooCommerce.

Ponadto wszystkie definicje bloków Gutenberga dostępne w WooCommerce znajdują się w folderze pakietów.

Odkrywanie kodu

Główny plik wtyczki w folderze głównym to woocommerce.php . To uruchamia autoloader i pakiety.

Autoloader zarządza ładowaniem pakietów i klas znajdujących się w katalogu /src. Pakiety zawierają kod opracowany poza podstawową wtyczką WooCommerce, na przykład bloki edytora.

Po załadowaniu całego automatycznie załadowanego kodu główna klasa WooCommerce jest następnie dołączana i tworzona przez:

 WooCommerce::instancja()

Tworzy to nową instancję klasy WooCommerce i przechowuje ją wewnątrz statycznej zmiennej klasy. Ta nowa instancja jest następnie zwracana i przechowywana w zmiennej globalnej, dzięki czemu można uzyskać do niej dostęp z dowolnego miejsca.

Przeszukiwanie bazy kodów

Większość nowoczesnych edytorów kodu udostępnia zaawansowane funkcje wyszukiwania, które umożliwiają poruszanie się po bazie kodu. W poniższych przykładach używamy VS Code, ale tak naprawdę nie ma to większego znaczenia, ponieważ prawie wszystkie edytory zapewniają podobną funkcjonalność wyszukiwania.

Możemy dowiedzieć się wiele o kodzie, wykonując kilka podstawowych wyszukiwań. Na przykład, jeśli szukamy dostępnych haczyków, wyszukiwanie ' add_filter ' zwraca około 380 haczyków filtrów!

Porównaj to z hakami akcji, które zwracają jeszcze więcej przy około 618 dopasowaniach dla wyszukiwanego hasła „ add_action ”.

Istnieje wiele możliwości doprecyzowania naszych wyszukiwań, takich jak wyszukiwanie tylko określonych typów plików i ciągów, które konkretnie pasują do wyszukiwanego hasła, wielkości liter i jeśli jest to całe słowo.

Np. Poniższy wynik wyszukiwania wyświetla dopasowania dla ' WooCommerce ', gdzie jest to całe słowo, rozróżniana jest wielkość liter i znajduje się tylko w pliku PHP (inne typy plików są ignorowane).

Jednym z powodów, dla których VS Code jest tak popularny, jest ogromna liczba dostępnych rozszerzeń, a jest kilka, które mogą pomóc w nawigacji po kodzie. Jednym szczególnym rozszerzeniem, które się wyróżnia, są Zakładki.

Pozwala na tworzenie zakładek do lokalizacji w kodzie, dzięki czemu możesz przeskoczyć z powrotem do określonych sekcji kodu, które Cię interesują, za jednym kliknięciem przycisku. Jest to bardzo przydatne, szczególnie w przypadku dużych baz kodu, takich jak WooCommerce.

Na poniższym zrzucie ekranu dodałem do zakładek kilka haczyków akcji WooCommerce, aby uzyskać szybki dostęp, do których chciałbym wrócić później.

Wystarczy kliknąć dowolny element zakładki w panelu eksploratora, aby przejść bezpośrednio do określonej linii kodu.

Istnieje wiele innych terminów, których możesz szukać. Być może chcesz dowiedzieć się, jakie klasy WooCommerce są dostępne. Ten rodzaj wyszukiwania może być bardziej wydajny w połączeniu z Regex.

Na przykład, łatwo jest wyszukać nazwy klas, które na początku zawierają 'WC' (np. 'WC_Structured_Data'). Ale co z klasami, które zawierają 'WC' gdziekolwiek w nazwie klasy? W tym celu wymagany jest regex, ponieważ musisz wyszukać ciąg „klasa”, po którym następuje spacja, po którym następuje ciąg zawierający „WC” w dowolnym miejscu w środku.

Z Regexem możesz również robić takie rzeczy, jak wyszukiwanie nazwy funkcji (lub części nazwy), która jest metodą klasy, a nie samodzielną funkcją. Możliwości są nieograniczone, dlatego zalecana jest dobra praktyczna znajomość Regex.

Szybki przykład dostosowania WooCommerce

Załóżmy, że musisz dostosować stronę realizacji transakcji, a konkretnie musisz wyświetlić podtytuł pod nagłówkiem „Szczegóły płatności”.

To, co możesz zrobić, to wyszukać w pliku wtyczki WooCommerce ciąg „ Szczegóły rozliczeniowe ”, aby sprawdzić, czy istnieje „coś”, czego możesz użyć w swoim niestandardowym kodzie. W tym przypadku użyję edytora kodu NotePad++, aby pokazać, że każde oprogramowanie jest poprawne:

Mam 2 wyniki wyszukiwania, ale tylko jeden dotyczy strony kasy. Więc otwieram ten konkretny plik (form-billing.php), w tym konkretnym wierszu (28):

…i zauważ, że zaraz po nagłówku znajduje się do_action() !

Daje nam to możliwość „wstrzyknięcia” tam jakiegoś kodu bez nadpisywania całego pliku szablonu. Wchodzę do pliku functions.php mojego motywu potomnego i piszę:

/**
 * @snippet       Add Subtitle Below Billing Heading @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_action( 'woocommerce_before_checkout_billing_form', 'bbloomer_billing_details_subtitle' );

function bbloomer_billing_details_subtitle() {
   echo '<h4>This is a subtitle</h4>';
}

A oto „po”:

Odkrywaj dalej!

Tylko zarysowaliśmy powierzchnię tego, co jest, szczerze mówiąc, bardzo dużą bazą kodu. Przejrzenie każdej linijki kodu zajęłoby Ci dużo czasu, ale mam nadzieję, że udało mi się zaostrzyć Twój apetyt na tyle, aby dalej kopać w fascynującej bazie kodów WooCommerce i dowiedzieć się jeszcze więcej!