Trong hướng dẫn này, chúng tôi sẽ giới thiệu cách thêm liên kết menu mới vào trang tài khoản của tôi trong bảng điều khiển Wooc Commerce. Điều này rất hữu ích khi bạn muốn thêm các tính năng [Điểm trung thành] vào cửa hàng web của mình và bạn muốn làm cho chúng có thể truy cập được thông qua trang tài khoản của tôi trong Wooc Commerce. Trong hướng dẫn này, chúng tôi sẽ thêm một văn bản “Xin chào thế giới” đơn giản và chúng tôi cũng sẽ chỉ cho bạn cách hiển thị/thực thi các shotrcode trên trang tùy chỉnh đó
Mục lục
PHẦN TLDR
Phần này dành cho các nhà phát triển có kinh nghiệm thường chỉnh sửa mã WordPress.
Đừng lo lắng nếu bạn chưa có kinh nghiệm, có hướng dẫn đầy đủ bên dưới phần này sẽ hướng dẫn bạn từng bước về cách triển khai giải pháp này.
* Vui lòng đọc các nhận xét trong mã, họ sẽ giúp bạn hiểu và tùy chỉnh nó
TLDR
File: Functions.php
add_filter [ 'woocommerce_account_menu_items', 'woowiki_menu', 40 ];
function woowiki_menu[ $menu_links ]{
$menu_links = array_slice[ $menu_links, 0, 5, true ]
+ array[ '' => '']
+ array_slice[ $menu_links, 5, NULL, true ];
//By changing number 5 to number 3 For Exmaple
//this menu item will be 4th then in the menu
//Change to 0 if you want it to be first
return $menu_links;
}
add_action[ 'init', 'woowiki_add_endpoint' ];
function woowiki_add_endpoint[] {
// Adding an endpoint
add_rewrite_endpoint[ '', EP_PAGES ]; //add_rewrite_endpoint
}
add_action[ 'woocommerce_account__endpoint', 'woowiki_my_account_endpoint_content' ];
function woowiki_my_account_endpoint_content[] {
//Content of your page
$short_code = do_shortcode['[my_shortcode]']; //Don't forget to replace with your shortcode
$html = 'Hello World
'; //Sample content Hello World
$html_short_combined = 'this is custom html sample combined with shortcode html
'.$short_code.'';
echo $html;
echo $short_code;
echo $html_short_combined;
//There is 3 echo statments showing diffrent combinations you can do with output
}
// Dont Forget to go to Settings > Permalinks and just press "Save Changes" button.
// Otherwise your custom menu link won't workTLDR
Custom CSS
/*Css to add icon to menu*/
/*Change permalink_name to the same name you used in code above*/
woocommerce-MyAccount-navigation-link-- a:before{
background-image: url[];
background-size: contain;
}Thêm liên kết menu mới vào tài khoản của tôi
Để thêm một liên kết menu mới, chúng ta cần thêm một số mã vào cuối chức năng. php.
Chúng ta cần vào giao diện Quản trị, sau đó bên dưới Giao diện, chọn Trình chỉnh sửa chủ đề
Sau khi điều hướng đến đó, bạn sẽ thấy một cửa sổ như thế này bên dưới. Trong đó chọn Theme Functions [chức năng. php]
Ở cuối tệp [hàm. php] thêm mã này vào bên dưới
add_filter [ 'woocommerce_account_menu_items', 'woowiki_menu', 40 ];
function woowiki_menu[ $menu_links ]{
$menu_links = array_slice[ $menu_links, 0, 5, true ]
+ array[ '' => '']
+ array_slice[ $menu_links, 5, NULL, true ];
//By changing number 5 to number 3 For Exmaple
//this menu item will be 4th then in the menu
//Change to 0 if you want it to be first
return $menu_links;
}
add_action[ 'init', 'woowiki_add_endpoint' ];
function woowiki_add_endpoint[] {
// Adding an endpoint
add_rewrite_endpoint[ '', EP_PAGES ]; //add_rewrite_endpoint
}
add_action[ 'woocommerce_account__endpoint', 'woowiki_my_account_endpoint_content' ];
function woowiki_my_account_endpoint_content[] {
//Content of your page
$short_code = do_shortcode['[my_shortcode]']; //Don't forget to replace with your shortcode
$html = 'Hello World
'; //Sample content Hello World
$html_short_combined = 'this is custom html sample combined with shortcode html
'.$short_code.'';
echo $html;
echo $short_code;
echo $html_short_combined;
//There is 3 echo statments showing diffrent combinations you can do with output
}
// Dont Forget to go to Settings > Permalinks and just press "Save Changes" button.
// Otherwise your custom menu link won't workChỉnh sửa mã
Nếu bạn chỉ sao chép và dán mã này ở trên thì mã sẽ không hoạt động theo mặc định, nhưng đừng lo, chúng tôi chỉ cần thay đổi một số thứ và sau đó mã sẽ hoạt động hoàn toàn và được tùy chỉnh cho trường hợp sử dụng của bạn.
1. ] Định vị và thay đổi
2. ] Định vị và thay đổi
3. ] Định vị và thay đổi
4. ] Xác định vị trí và thay đổi
5. ] Trong hàm woowiki_my_account_endpoint_content có 3 ví dụ.
Cái đầu tiên $short_code và echo $short_code chỉ cho bạn cách xuất một mã ngắn vào trang menu tùy chỉnh.
Cái thứ hai $html và echo $html chỉ cho bạn cách xuất html tùy chỉnh sang trang menu tùy chỉnh.
Cái thứ ba $html_short_combined và echo $html_short_combined chỉ cho bạn cách kết hợp html tùy chỉnh và đầu ra từ một mã ngắn.
Vậy thôi.
Trang tùy chỉnh mới của bạn hiện sẽ được thêm vào menu của trang tài khoản của tôi trong Woocommerce.
Thêm biểu tượng
Nếu bạn vào trang tài khoản của tôi, bạn có thể thấy rằng liên kết menu của bạn không có biểu tượng bên cạnh như những trang khác. Để thực hiện điều đó, bạn cần thêm CSS tùy chỉnh này bên dưới