اضافه کردن تب جدید در منوی حساب کاربری ووکامرس

اضافه کردن تب جدید در منوی حساب کاربری ووکامرس در دو آموزش قبلی که در خصوص شخصی سازی منوی حساب کاربری ووکامرس بود را دیدید. در ادامه این موضوع آموزشی خواهیم دید که چگونه می‌توان برای آیتمی که به لیست اضافه کرده‌ایم, تب اختصاصی که مشابه با بقیه آیتم‌های منوی کاربری باز می‌شود.

در صورتی که هنوز دو آموزش قبلی را مطالعه نکرده‌اید برای درک بهتر این آموزش لینکهای زیر را مطالعه کنید.

• آموزش حذف کردن یک تب در حساب کاربری من در ووکامرس
• آموزش تغییر نام  تب‌های موجود و اضافه کردن یک تب جدید در حساب کاربری من در ووکامرس

بریم سراغ آموزش این بخش!!

قبل از ادامه آموزش دقت کنید با روشی که در آموزش اضافه کردن منو به حساب کاربری ووکامرس ابتدا یک منو جدید اضافه کنید و بعد ادامه این آموزش را مطالعه کنید.

اگر دقت کرده باشید در کنار هر کدام از عناوین تب‌ها در منوی حساب کاربری یک آیکن قرار گرفته است. برای اینکه شما هم بتوانید یک آیکن در کنار عنوان تب شخصی خود به وجود آورید از روش زیر استفاده می‌کنیم.

در صورتی که قالب شما از Font Awesome استفاده می‌کند, کافی است به سایت Font Awesome وارد شوید و آیکن مورد نظر خود را انتخاب کنید.

حالا کافیه تک کد زیر رو داخل بخش css سفارشی (نمایش> سفارشی سازی)سایت خودتون وارد کنید.

body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--anyuniquetext123 a:before{
	content: "\f0e0"
}

بعد از اضافه کردن کد فوق نتیجه به شکل زیر می‌شود.

حالا باید بتونیم یه تب مشابه با بقیه تب‌ها به حساب کاربری من اضافه کنیم.

اضافه کردن تب شخصی به منوی حساب کاربری

برای اضافه کردن یک تب ۴ مرحله زیر را باید انجام دهید و دقت کنید که تمامی مراحل را کامل انجام دهید.

برای شروع ابتدا کد زیر را در ادامه کدهایی که برای ایجاد یک تب در فایل functions.php وارد کرده‌اید وارد کنید.

/*
 * Step 1. اضافه کردن لینک به آیتم شخصی در حساب کاربری
 */
add_filter ( 'woocommerce_account_menu_items', 'wphashtag_message_box_link', 40 );
function wphashtag_message_box_link( $menu_links ){
 
	$menu_links = array_slice( $menu_links, 0, 5, true ) 
	+ array( 'message-box' => 'پیام‌های دریافتی من' )
	+ array_slice( $menu_links, 5, NULL, true );
 
	return $menu_links;
 
}
/*
 * Step 2. تعریف نقطه پایانی برای آیتم جدید
 */
add_action( 'init', 'wphashtag_add_endpoint' );
function wphashtag_add_endpoint() {
 
	add_rewrite_endpoint( 'message-box', EP_PAGES ); 
}
/*
 * Step 3. وارد کردن اطلاعات برای تب جدید, woocommerce_account_{ENDPOINT NAME}_endpoint
 */
add_action( 'woocommerce_account_message_box_endpoint', 'wphashtag_my_account_endpoint_content' );
function wphashtag_my_account_endpoint_content() {
 
	// of course you can print dynamic content here, one of the most useful functions here is get_current_user_id()
	echo 'پیام جدیدی وجود ندارد';
 
}
/*
 * Step 4
 */
// به تنظیمات > پیوندهای یکتا بروید و بدون اعمال تغییر فقط دکمه ذخیره سازی را بزنید.

حالا اگر بر روی آیتم جدید کلیک کنید می‌توانید محتوای تب جدید را ببینید. همینطور می‌توانید با وارد کردن آدرس /my-account/message-box محتوای جدید را ببینید.

شما می‌توانید داخل تابع wphashtag_my_account_endpoint_content()  یک فرم html قرار دهید یا اطلاعات دینامیک را فراخوانی و نمایش دهید.

این آموزش به پایان رسید. امیدواریم این مطلب برای شما کاربردی باشد. در صورتی که سوالی داشتید در نظرات بپرسید.