Jak dodać nowe menu w menu strony MyAccount w Woocommerce?
Opublikowany: 2020-01-29
Szukasz prostego sposobu na dodanie nowej zakładki na stronie moje konto w WooCommerce, którą może szybko i łatwo wdrożyć każdy użytkownik WooCommerce, niezależnie od poziomu umiejętności? Szybkie rozwiązanie polegające na dodaniu nowej karty na stronie mojego konta wiąże się z dodaniem dwóch haczyków filtrów WooCommerce, które zajmują się dodawaniem menu, a drugi zajmuje się przekierowaniem do nowej strony dodanej do odpowiedniego adresu URL.
W tym samouczku pokażę, jak dokładnie dodać menu w menu Moje konto WooCommerce, a następnie utworzyć filtr przekierowań, aby przekierować użytkowników na dowolną preferowaną stronę, w tym przekierowanie zewnętrzne. Zacznij więc od zrozumienia, jak działa strona menu Moje konto.
Jak działa menu strony MyAccount WooCommerce
Te zakładki w WooCommerce to w zasadzie menu i możliwe jest filtrowanie zawartości tej strony i uzyskanie tablicy wyświetlającej menu, a następnie dodanie zawartości do tablicy i zwrócenie zawartości.
Hooki filtrów WooCommerce/WordPress
Jeśli nie pracowałeś wcześniej z filtrami, napisałem szczegółowe wprowadzenie do filtrowania w tym samouczku apply_filters i do_action , w którym wspomniałem, jak działają filtry WordPress .
Innym dobrym przykładem jest filtr, który zastosowaliśmy na the_content w tym samouczku WordPress, aby dodać treść przed lub po domyślnym wpisie lub treści strony WordPress .
Wystarczające informacje o haczykach filtrów, teraz skupmy się na tym, jak dodać menu na stronie mojego konta w WooCommerce.
Lubię rozpoczynać wszystkie moje tutoriale od krótkiego podsumowania krok po kroku, aby pomóc Ci nauczyć się i zrozumieć, co dzieje się w kodzie. Nie lubię po prostu udostępniać kodu i prosić o kopiowanie i wklejanie bez wyjaśniania, co robi kod. Jest to dobre podejście, ponieważ czytelnicy mogą być bardziej innowacyjni i dodawać bardziej szczegółowe funkcje do fragmentu kodu.
Kroki, jak dodać nową kartę na stronie Moje konto WooCommerce
Aby dodać nową kartę na stronie moje konto, należy wykonać trzy kroki, które są następujące:
- Utwórz zaczep filtra, aby dodać nową kartę na stronie moje konto, a filtr powinien zebrać wszystkie dane wyświetlane w menu, a następnie wcisnąć nowe dane . (proszę zapamiętać to słowo PUSH, dokładniej wyjaśnię w dalszej części tego postu)
- Utwórz drugi filtr, który doda przekierowanie adresu URL menu dodanego w pierwszym kroku do utworzonej strony.
- Dodaj ten kod do pliku functions.php w swoim motywie lub możesz dodać ten kod do klasy wtyczki lub funkcji, a z powodzeniem dodasz nowe menu na stronie mojego konta w WooCommerce.
Dodaj menu na stronie Moje konto w Woocommerce
W ciągu ostatnich kilku dni klient poprosił mnie o dodanie nowego menu na stronie mojego konta w istniejącej witrynie WooCommerce. Idealnie menu miało przekierowywać do Forum , które dodaliśmy wcześniej za pomocą BuddyPress.
W tym samouczku chcę założyć, że tak jest, a my dodamy menu do strony Moje konto, które powinno przekierować do forum.
Na początek poniższy obrazek pokazuje końcowy produkt tego, jak dodałem nową kartę na stronie moje konto w tej witrynie WooCommerce i przekierowałem użytkowników na forum.
Dodaj pierwszy filtr, aby dodać menu do strony Moje konto
Kod do dodania nowej karty na stronie moje konto zawiera zaczep filtra i funkcję zwrotną, jak pokazano poniżej:
//Pierwszy hak, który dodaje pozycję menu do menu WooCommerce mojego konta
function example_forum_link( $menu_links ){
// później zahaczymy o "womanide-forum"
$new = array( 'example-forum' => 'Przykład forum' );
// lub jeśli potrzebujesz 2 linków
// $new = array( 'link1' => 'Łącze 1', 'link2' => 'Łącze 2' );
// array_slice() jest dobre, gdy chcesz dodać element między innymi
$menu_links = array_slice( $menu_links, 0, 1, prawda )
+ $nowy
+ array_slice( $menu_links, 1, NULL, true );
zwróć $menu_links;
}
add_filter ( 'woocommerce_account_menu_items', 'example_forum_link' );
Po dodaniu tego kodu do functions.php powinieneś zobaczyć nowe menu na stronie mojego konta, jak pokazano na obrazku poniżej:
Jak działa kod
- W tym filtrze używamy zmiennej $menu_links, którą przekazujemy do funkcji zwrotnej, aby uzyskać wszystkie menu na stronie moje-konto w tablicy.
- Po uzyskaniu tablicy linków menu używamy funkcji array_slice(), aby wyodrębnić, a następnie WCIŚNIJ w naszym nowym elemencie menu, a następnie wszystkie menu tworzymy w jednej tablicy i dołączamy do haka woocommerce_account_menu_items WooCommerce.
- W tym momencie pozycja menu jest teraz wyświetlana w menu mojego konta
Jak widać filtr dodał nowe menu w domyślnym menu Moje konto. Po kliknięciu menu zostaniesz przekierowany na stronę 404, ponieważ przekierowanie w tej nowej pozycji menu działa teraz tak, jak pokazano na poniższym obrazku:
Ta strona nie istnieje na desce rozdzielczej WooCommerce, ale możesz zobaczyć przykładowe forum slug , dodaliśmy w pierwszym filtrze i użyjemy go w drugim filtrze, aby przekierować do strony forum.
Dodaj drugi filtr, aby dodać menu do strony Moje konto
Jak wspomniano powyżej, drugi filtr doda stronę, na którą chcemy przekierować to menu i w tym przypadku możemy ją dodać za pomocą kodu pokazanego poniżej:
// Drugi filtr do przekierowania punktu końcowego WooCommerce na niestandardowy adres URL
funkcja forum_example_hook_endpoint( $url, $punkt końcowy, $wartość, $permalink ){
if( $endpoint === 'przykładowe-forum' ) {
// Tutaj dodajesz niestandardowy adres URL, może być zewnętrzny, tak jak w tym przypadku musimy przejść do mojego profilu na stronie bbpress
// Użyję tej funkcji (bp_core_get_username( bp_loggedin_user_id() );), aby uzyskać mój identyfikator użytkownika profilu i dodać go do adresu URL, jak pokazano poniżej
$url = site_url() .'/członkowie/' . bp_core_get_username( bp_loggedin_user_id() );
}
zwróć $url;
}
add_filter( 'woocommerce_get_endpoint_url', 'forum_example_hook_endpoint', 10, 4 );
Kiedy dodasz ten kod tuż pod pierwszym filtrem, który dodaliśmy w powyższym kroku, twoje menu Przykładowe forum powinno przekierowywać do konkretnego profilu użytkownika, jak pokazano na obrazku poniżej, gdzie przekierowałem do mojego profilu na forum BBPress.
Wypełnij fragment kodu, aby dodać nową kartę na stronie Moje konto i przekierować na dowolną stronę
Aby dodać nowe menu do menu strony mojego konta w WooCommerce, należy dodać pełny fragment kodu udostępniony poniżej, w pliku functions.pfp motywu i zastąpić zmienne odpowiednim slugiem i stroną, na którą chcesz przekierować menu.
//Pierwszy hak, który dodaje element menu do menu WooCommerce mojego konta
function example_forum_link( $menu_links ){
// później zahaczymy o "womanide-forum"
$new = array( 'example-forum' => 'Przykład forum' );
// lub jeśli potrzebujesz 2 linków
// $new = array( 'link1' => 'Łącze 1', 'link2' => 'Łącze 2' );
// array_slice() jest dobre, gdy chcesz dodać element między innymi
$menu_links = array_slice( $menu_links, 0, 1, prawda )
+ $nowy
+ array_slice( $menu_links, 1, NULL, true );
zwróć $menu_links;
}
add_filter ( 'woocommerce_account_menu_items', 'example_forum_link' );
// Drugi filtr do przekierowania punktu końcowego WooCommerce na niestandardowy adres URL
funkcja forum_example_hook_endpoint( $url, $punkt końcowy, $wartość, $permalink ){
if( $endpoint === 'przykładowe-forum' ) {
// Tutaj dodajesz niestandardowy adres URL, może być zewnętrzny, tak jak w tym przypadku musimy przejść do mojego profilu na stronie bbpress
// Użyję tej funkcji (bp_core_get_username( bp_loggedin_user_id() );), aby uzyskać mój identyfikator użytkownika profilu i dodać go do adresu URL, jak pokazano poniżej
$url = site_url() .'/członkowie/' . bp_core_get_username( bp_loggedin_user_id() );
}
zwróć $url;
}
add_filter( 'woocommerce_get_endpoint_url', 'forum_example_hook_endpoint', 10, 4 );
Zawijanie
Utworzenie nowej zakładki menu na stronie mojego konta w WooCommerce nie powinno już być wyzwaniem po przeczytaniu tego samouczka. Wyjaśniłem krok po kroku i na praktycznym przykładzie, jak dodać nową zakładkę na stronie moje konto i utworzyć przekierowanie na wybraną przez siebie stronę. Napisałem również inne tutoriale, jak dodać przekierowanie WooCommerce po kasie i przekierowanie WooCommerce po rejestracji. Jeśli nie jesteś w stanie wdrożyć tego rozwiązania, możesz skorzystać z pomocy profesjonalnego programisty WooCommerce.