چگونه یک نوار پایینی چسبان برای موبایل در وردپرس ایجاد کنیم؟

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

چرا به یک نوار پایینی چسبان برای موبایل در وردپرس نیاز داریم؟

دسترسی سریع کاربران: کاربران بدون نیاز به جستجو در منوها، می‌توانند به بخش‌های مهم سایت دسترسی داشته باشند.
بهبود تجربه کاربری (UX): این ویژگی باعث می‌شود کاربران در موبایل راحت‌تر از سایت شما استفاده کنند.
افزایش نرخ تبدیل: قرار دادن لینک سبد خرید در نوار چسبان وردپرس برای موبایل، احتمال خرید را افزایش می‌دهد.
سبک و سریع: این قابلیت بدون نیاز به افزونه، فقط با چند خط کد پیاده‌سازی می‌شود.

مراحل افزودن نوار پایینی چسبان به وردپرس

1. اضافه کردن کد PHP به فایل functions.php
   بسیاری از قالب های حرفه ای وردپرس قابلیت نوارچسپان را در نسخه های موبایل خود قرار داده اند ولی چنانچه قالب وردپرس شما از این قابلیت برخوردار نیست می توانید برای نمایش نوار پایینی موبایل در وردپرس در تمام صفحات به جز صفحات سبد خرید، تسویه حساب و محصول، کد زیر را به فایل functions.php قالب خود اضافه کنید:

function add_mobile_bottom_bar() {
    if (wp_is_mobile() && !is_cart() && !is_checkout() && !is_product()) {
        echo '<div id="mobile-bottom-bar">
                <a href="' . home_url() . '"><span class="dashicons dashicons-admin-home"></span> صفحه اصلی</a>
                <a href="' . wc_get_cart_url() . '"><span class="dashicons dashicons-cart"></span> سبد خرید</a>
                <a href="' . wc_get_page_permalink("myaccount") . '"><span class="dashicons dashicons-admin-users"></span> حساب کاربری</a>
                <a href="' . wc_get_endpoint_url("orders", "", wc_get_page_permalink("myaccount")) . '"><span class="dashicons dashicons-list-view"></span> سفارش‌ها</a>
              </div>';
        echo '<style>
                #mobile-bottom-bar {
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    background: #333;
                    color: #fff;
                    text-align: center;
                    padding: 10px 0;
                    font-size: 18px;
                    z-index: 9999;
                    display: flex;
                    justify-content: space-around;
                }
                #mobile-bottom-bar a {
                    color: #fff;
                    text-decoration: none;
                    padding: 10px;
                    flex-grow: 1;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
                #mobile-bottom-bar .dashicons {
                    font-size: 24px;
                    margin-bottom: 5px;
                }
              </style>';
    }
}
add_action('wp_footer', 'add_mobile_bottom_bar');

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

function add_mobile_bottom_bar() {
    if (wp_is_mobile()) {
        echo '<div id="mobile-bottom-bar">
                <a href="' . home_url() . '"><span class="dashicons dashicons-admin-home"></span> صفحه اصلی</a>
                <a href="' . wc_get_cart_url() . '"><span class="dashicons dashicons-cart"></span> سبد خرید</a>
                <a href="' . wc_get_page_permalink("myaccount") . '"><span class="dashicons dashicons-admin-users"></span> حساب کاربری</a>
                <a href="' . wc_get_endpoint_url("orders", "", wc_get_page_permalink("myaccount")) . '"><span class="dashicons dashicons-list-view"></span> سفارش‌ها</a>
              </div>';
        echo '<style>
                #mobile-bottom-bar {
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    background: #333;
                    color: #fff;
                    text-align: center;
                    padding: 10px 0;
                    font-size: 18px;
                    z-index: 9999;
                    display: flex;
                    justify-content: space-around;
                }
                #mobile-bottom-bar a {
                    color: #fff;
                    text-decoration: none;
                    padding: 10px;
                    flex-grow: 1;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
                #mobile-bottom-bar .dashicons {
                    font-size: 24px;
                    margin-bottom: 5px;
                }
              </style>';
    }
}
add_action('wp_footer', 'add_mobile_bottom_bar');

2. بررسی عملکرد در موبایل
   پس از اضافه کردن این کد به نوار چسبان وردپرس برای موبایل، وب‌سایت خود را در یک دستگاه موبایل بررسی کنید. نوار باید در پایین صفحه ظاهر شود و شامل لینک‌های صفحه اصلی، سبد خرید، حساب کاربری و سفارش‌ها باشد.
3. بهبود طراحی با CSS
   اگر می‌خواهید استایل نوار پایینی موبایل در وردپرس را به دلخواه خود تغییر دهید، می‌توانید کدهای CSS را در فایل style.css قالب اضافه کنید. برای مثال، اگر بخواهید رنگ پس‌زمینه را تغییر دهید:

#mobile-bottom-bar {
    background: #ff6600 !important;
}

نتیجه‌گیری

افزودن نوار چسبان در وردپرس برای موبایل، یک راه عالی برای بهبود تجربه کاربری و افزایش فروش در فروشگاه‌های ووکامرس است. این روش بدون نیاز به افزونه و با استفاده از چند خط کد PHP و CSS پیاده‌سازی می‌شود. شما می‌توانید نوار چسبان وردپرس برای موبایل را مطابق با نیازهای خود شخصی‌سازی کنید.