آموزش کدهای وردپرسآموزش کدهای ووکامرس

ایجاد حساب کاربری پیشرفته برای ووکامرس

قبلاً در افزودن tab جدید به حساب کاربری ووکامرس، مختصر در مورد اضافه کردن تب جدید توضیح داده‌ایم. اما در این آموزش می‌خواهیم کمی با جزئیات بیشتر در مورد ایجاد حساب کاربری پیشرفته برای ووکامرس بپردازیم. با ما همراه باشید.

ایجاد حساب کاربری پیشرفته برای ووکامرس

اگر از مقاله افزودن tab جدید به ناحیه حساب کاربری دیدن کنید، شاید برایتان سؤال باشد که در این مقاله چه کاری خاصی می‌خواهیم به شما آموزش دهیم؟ چه تفاوتی میان این مقاله و مقاله دیگر است؟.

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

ایجاد حساب کاربری پیشرفته برای ووکامرس

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

در این آموزش ما هیچ نیازی به افزونه خاصی نداریم و کاملاً با کدنویسی این کار را انجام می‌دهیم.

سعی کنید کدها را در فایل فانکشن قالب یا اگر چایلد تم (child theme) دارید، آن‌ها را در فانکشن چایلد قرار دهید.

تغییر ترتیب تب‌ها

برای خیلی‌ها ممکنه سؤال باشه که چطور و چگونه می‌توان ترتیب هر تب حساب کاربری ووکامرس را (بدون استفاده از پلاگین) تغییر داد. با تکه کدی که وردپرس آبی برای شما آماده کرده‌است می‌توانید این کار را به آسانی انجام دهید.

function tfc_my_account_menu_items( $items ) {
	    $items = array(
	        'dashboard'         => 'پیشخوان حساب',
			'downloads'         => 'فهرست دانلودها',
	        'orders'            => 'سفارشات',
			'edit-account'      => 'جزئیات حساب',
	        'customer-logout'   =>  'خروج از حساب',
	    );

	    return $items;
	}
add_filter( 'woocommerce_account_menu_items', 'tfc_my_account_menu_items' );

مثلاً اگر می‌خواهید تب فهرست دانلودها بالاتر از تب لیست سفارشات نمایش داده شود، کافیه هر رشته (استرینگ) داخل آرایه:

'downloads'         => 'فهرست دانلودها',

بالاتر از استرینگ سفارشات بگذارید. به همین سادگی و راحتی با ذخیره قطعه کد، می‌بینید که ترتیب منوهای حساب کاربری شما تغییریافت.

اضافه کردن نقطه‌های پایانی (endpoint) جدید به حساب

اگر بخواهیم هر تب جدید که به حساب کاربری اضافه کرده‌ایم، دارای محتوا و قابل کلیک و مانند سایر تب‌های پیش‌فرض ووکامرس باشد باید از ویژگی endpoint در وردپرس استفاده کنیم. اندپوینت دقیقاً همان Slug (آدرس url) است.

function tfc_add_account_woo_endpoint() {
    add_rewrite_endpoint( 'ticket-support', EP_ROOT | EP_PAGES );
	add_rewrite_endpoint( 'auto-update', EP_ROOT | EP_PAGES );
	add_rewrite_endpoint( 'help-center', EP_ROOT | EP_PAGES );
}
  
add_action( 'init', 'tfc_add_account_woo_endpoint' );

همانطور که در بالا مشاهده می‌کنید، من تعداد 3 نقطه پایانی برای تب‌هایی که می‌خواهم اضافه کنم، قرار داده‌ام. من قصد دارم مانند تصویر ابتدایی مقاله، تب پشتیبانی، تب آپدیت خودکار، تب مرکز راهنما را در حساب قرار بدهم.

اگر می‌خواهید یک نقطه پایانی دیگر اضافه کنید، یکی از موارد بالا را کپی پیست کنید و تنها نامک آن را تغییر دهید. مثال زیر:

function tfc_add_account_woo_endpoint() {
    add_rewrite_endpoint( 'ticket-support', EP_ROOT | EP_PAGES );
    add_rewrite_endpoint( 'my-products', EP_ROOT | EP_PAGES );  // مثال
	add_rewrite_endpoint( 'auto-update', EP_ROOT | EP_PAGES );
	add_rewrite_endpoint( 'help-center', EP_ROOT | EP_PAGES );
}
  
add_action( 'init', 'tfc_add_account_woo_endpoint' );

اضافه کردن کوئری برای هر نقطه پایانی

function tfc_account_woo_query_vars( $vars ) {
    $vars[] = 'ticket-support';
	$vars[] = 'auto-update';
	$vars[] = 'help-center';
    return $vars;
}
  
add_filter( 'query_vars', 'tfc_account_woo_query_vars', 0 );

به این نکته توجه کنید که برای هر نقطه پایانی، باید حتما یک درخواست (کوئری) هم اضافه کنید. برای این مورد نیز مانند مثال‌های بالا عمل کنید.

معرفی هر endpoint به حساب کاربری

در مرحله قبلی، ما تنها نقطه‌های پایانی را ثبت کردیم. اما اضافه کردن این قطعه کد، تب‌ها هرکدام لینک منحصربفرد خود را خواهند داشت.

function tfc_add_account_woo_link_my_account( $items ) {
    $items['ticket-support'];
	$items['auto-update'];
	$items['help-center'];
    return $items;
}
  
add_filter( 'woocommerce_account_menu_items', 'tfc_add_account_woo_link_my_account' );

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

بدون شک برای هر تب نیز، یک صفحه (محتوای خاص) درنظر گرفته‌اید که در صورت بازدید کاربر از تب، محتوای آن تب نمایش داده شود. طبق قطعه زیر برای هر از tab ها یک محتوا در نظر گرفته‌ام، که هم می‌توان متن، کد HTML اضافه کرد و یا حتی از شرت کد – shortcode  (کد کوتاه) استفاده کرد.

function tfc_ticket_support_content() {
echo '<h3>تیکت پشتیبانی</h3><p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است.</i></p>';
echo do_shortcode( ' /* جاسازی کد کوتاه */ ' );
}

function tfc_auto_update_content() {
echo '<h3>آپدیت خودکار</h3><p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است.</i></p>';
echo do_shortcode( ' /* جاسازی کد کوتاه */ ' );
}

function tfc_help_center_content() {
echo '<h3>مرکز راهنما</h3><p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است.</i></p>';
echo do_shortcode( ' /* جاسازی کد کوتاه */ ' );
}

add_action( 'woocommerce_account_ticket-support_endpoint', 'tfc_ticket_support_content' );
add_action( 'woocommerce_account_auto-update_endpoint', 'tfc_auto_update_content' );
add_action( 'woocommerce_account_help-center_endpoint', 'tfc_help_center_content' );

برای هر منو یا تب تابع مختص به خودش تعریف شده که هرکدام را به دلخواه می‌توانید تغییر بدهید یا اینکه تابع خود را اضافه کنید. اگر تابعی را تغییر دادید یا اضافه کردید، اکشن آن‌ را هم فراموش نکنید.

این بخش تمام شد، اگر روی هر تب جدید کلیک می‌کنید و با خطای 404 مواجه می‌شوید، به داشبورد وردپرس، منوی تنظیمات -> پیوندهای یکتا  بروید و یکبار صفحه پیوندهای یکتا را ذخیره کنید.

اضافه کردن آیکون به هر تب

.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--dashboard a:before {
    content: "\f0e4";
    font-family: fontawesom-pro;
    margin-left: 5px;
}

.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--orders a:before{
	    content: "\f15c";
    font-family: fontawesom-pro;
    margin-left: 5px;
}

.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--downloads a:before{
	    content: "\f019";
    font-family: fontawesom-pro;
    margin-left: 5px;
}

.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--ticket-support a:before{
	    content: "\f145";
    font-family: fontawesom-pro;
    margin-left: 5px;
}

.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--auto-update a:before{
	    content: "\f1e6";
    font-family: fontawesom-pro;
    margin-left: 5px;
}

.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--help-center a:before{
	    content: "\f05a";
    font-family: fontawesom-pro;
    margin-left: 5px;
}
.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--edit-account a:before{
	    content: "\f044";
    font-family: fontawesom-pro;
    margin-left: 5px;
}

بخش خیلی آسان‌تر این آموزش، اضافه کردن آیکون به هر تب است که قبل از عنوان تب قرار می‌گیرد. اگر تب‌های شما آدرس URL (endpoint) مختص خود را دارند، روی هر تب با ابزار inspect element مرورگر (ترجیحاً فایرفاکس یا کروم) کد CSS را آن بیاید و محتوای آن را بدین شکل قرار بدید:

CSS a:before{
    content: "\f044";
    font-family: نام فونت آیکون شما;
    margin-left: 5px;
}

حتما از نام فونت آیکون خود در font-family قالب‌تان استفاده کنید. اکثراً از font awesome برای تصاویر آیکونی وب‌سایت‌ها استفاده می‌شود.

در بالا اگر آیکون‌های نمایش داده نشدند، به دلیل نام font-family است که باید نام فونت مدنظرتان را جایگزین آن کنید.

افقی کردن تب‌های حساب کاربری

در بسیاری از وب‌سایت‌های مدرن فعلی، منو یا تب‌های حساب کاربری به صورت افقی نمایش داده می‌شود و محتوای آن نیز در سمت چپ (در زبان‌های راست چین RTL) محتوا به صورت عمودی قابل مشاهده است.

با کد CSS زیر، منوها افقی و محتوا نیز دقیقاً مقابل هر تب نمایش داده می‌شود.

.woocommerce-MyAccount-navigation {
    float: right;
    width: 27%;
	    padding-right: 2px;
}
.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link {
    padding: 10px;
    border-top: 1px solid #eee;
}
.woocommerce-MyAccount-content {
    width: 70%;
    padding-right: 29px;
    float: left;
    border-right: 1px solid #eee;
}

سورس کامل پروژه

/**
 * @snippet       WooCommerce Add New Tab @ My Account
 * @how-to        Watch tutorial @ https://themefour.com/create-an-advanced-account-for-woocommerce/
 * @author        THEMEFOUR.COM
 * @compatible    WooCommerce 4.0.1
 */
  
  
// ------------------
// 1. Edit Order and Name Tabs

function tfc_my_account_menu_items( $items ) {
	    $items = array(
	        'dashboard'         => 'پیشخوان حساب',
			'downloads'         => 'فهرست دانلودها',
	        'orders'            => 'جزئیات خریدها',
			'ticket-support'    => 'تیکت پشتیبانی',
			'auto-update'       => 'آپدیت خودکار',
			'help-center'       => 'مرکز راهنما',
			'edit-account'      => 'جزئیات حساب',
	        'customer-logout'   =>  'خروج از حساب',
	    );

	    return $items;
	}
add_filter( 'woocommerce_account_menu_items', 'tfc_my_account_menu_items' );

// ------------------
// 2. Register new endpoint to use for My Account page
// Note: Resave Permalinks or it will give 404 error
  
function tfc_add_account_woo_endpoint() {
    add_rewrite_endpoint( 'ticket-support', EP_ROOT | EP_PAGES );
	add_rewrite_endpoint( 'auto-update', EP_ROOT | EP_PAGES );
	add_rewrite_endpoint( 'help-center', EP_ROOT | EP_PAGES );
}
  
add_action( 'init', 'tfc_add_account_woo_endpoint' );
  
  
// ------------------
// 3. Add new query var
  
function tfc_account_woo_query_vars( $vars ) {
    $vars[] = 'ticket-support';
	$vars[] = 'auto-update';
	$vars[] = 'help-center';
    return $vars;
}
  
add_filter( 'query_vars', 'tfc_account_woo_query_vars', 0 );
  
  
// ------------------
// 4. Insert the new endpoint into the My Account menu
  
function tfc_add_account_woo_link_my_account( $items ) {
    $items['ticket-support'];
	$items['auto-update'];
	$items['help-center'];
    return $items;
}
  
add_filter( 'woocommerce_account_menu_items', 'tfc_add_account_woo_link_my_account' );
  
  
// ------------------
// 5. Add content to the new endpoints
  
function tfc_ticket_support_content() {
echo '<h3>تیکت پشتیبانی</h3><p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است.</i></p>';
echo do_shortcode( ' /* جاسازی کد کوتاه */ ' );
}

function tfc_auto_update_content() {
echo '<h3>آپدیت خودکار</h3><p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است.</i></p>';
echo do_shortcode( ' /* جاسازی کد کوتاه */ ' );
}

function tfc_help_center_content() {
echo '<h3>مرکز راهنما</h3><p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است.</i></p>';
echo do_shortcode( ' /* جاسازی کد کوتاه */ ' );
}


// 6. Actions for Add Contents

add_action( 'woocommerce_account_ticket-support_endpoint', 'tfc_ticket_support_content' );
add_action( 'woocommerce_account_auto-update_endpoint', 'tfc_auto_update_content' );
add_action( 'woocommerce_account_help-center_endpoint', 'tfc_help_center_content' );
// Note: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format

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

همچنین اگر گزینه‌های بیشتری می‌خواهید، می‌توانید از افزونه‌های دیگر وردپرس مانند افزونه Yith My account استفاده کنید که تنها با چند کلیک ساده صفحه حساب کاربری‌تان را بسازید.

نوشته‌های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا