آموزش اضافه کردن دکمه بازگشت به بالای صفحه در وردپرس

وقتی صحبت از حفظ و افزایش کاربران سایت می‌شود، داشتن تجربه کاربری (UX) خوب بسیار مهم است. به این ترتیب، اگر محتوایی طولانی دارید، اضافه کردن دکمه بازگشت به بالای صفحه به صرفه‌جویی در زمان بازدیدکنندگان کمک خواهد کرد.

خوشبختانه افزودن این امکان به سایت شما ساده است. می‌توانید از روش دستی (کد) استفاده کنید و یا یک افزونه اختصاصی وردپرس را انتخاب و نصب کنید. در نهایت، دکمه‌های اسکرول بازگشت به بالا را می‌توان برای عملکرد خوب در هر دستگاهی که سایت شما را روی آن مشاهده می‌کنند، اضافه کرد.

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

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

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

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

کد اضافه کردن دکمه بازگشت به بالای صفحه

اگر بخواهید مستقیماً ظاهر و رفتار دکمه برگشت به بالا صفحه خود را تغییر دهید (و از بکارگیری افزونه‌های اضافی خودداری کنید) این روش مناسب است.

قدم اول:

اولین قدم، دسترسی به فایل‌های وب‌سایت از طریق FTP یا فایل منیجر موجود در کنترل پنل هاست برای رسیدن به پوشه جاوا اسکریپت قالب شما خواهد بود. برای این مثال، ما از نرم افزار FTP FileZilla استفاده خواهیم کرد، زیرا کاربر پسند، امن و در دسترس برای هر پلتفرمی است.

هنگامی که اطلاعات دسترسی به سایت خود را اضافه کرده و به آن متصل شدید، به مسیر wp-content > themes > yourtheme > js بروید (yourtheme نام همان قالبی است که برای سایت خود انتخاب کرده‌اید):

در این پوشه، ما باید یک فایل جاوا اسکریپت ایجاد کنیم که نحوه عملکرد دکمه را تعیین کند.

قدم دوم:

در مرحله بعد، یک فایل جدید به نام topbutton.js در پوشه js خود ایجاد کنید. برای انجام این کار در FileZilla، روی پایین سمت راست کلیک راست کرده و گزینه Create new file را انتخاب کنید. هنگامی که فایل در ویرایشگر متن شما باز شد، کد زیر را در آن قرار دهید:

jQuery(document).ready(function($){
    var offset = 100;
    var speed = 250;
    var duration = 500;
        $(window).scroll(function(){
            if ($(this).scrollTop() < offset) {
                      $('.topbutton') .fadeOut(duration);
            } else {
                      $('.topbutton') .fadeIn(duration);
            }
        });
     $('.topbutton').on('click', function(){
            $('html, body').animate({scrollTop:0}, speed);
            return false;
            });
});

می‌توانید تنظیمات سرعت و مدت زمان رسیدن به بالای صفحه را در متغیرهای speed و duration در کد بالا طبق نیازتان تنظیم کنید، اما در حال حاضر ضروری نبوده و مقادیر پیش‌فرض مناسب هستند.

هنگامی که این کار به پایان رسید، فایل را ذخیره کرده و به مرحله بعدی بروید.

قدم سوم:

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

این URL را مطابق قدم بعدی، در فایل style.css خود قرار دهید تا از آن در سایت استفاده شود.

قدم چهارم:

فایل style.css قالب شما شامل تمام عناصر طراحی سایت شما، مانند فونت‌ها، رنگ‌ها و موارد دیگر است. برای دسترسی به آن، به منوی نمایش > ویرایشگر پرونده پوسته در وردپرس بروید و فایل شیوه‌نامه یا همان style.css را باز کنید. سپس باید قطعه زیر را در انتهای آن Paste کنید:

.topbutton {
     height:50px;
     width:50px;
     position:fixed;
     right:5px;
     bottom:5px;
     Z-index:1;
     background-image:url("http://example.com/wp-content/uploads/2015/01/topbutton.png");
     background-repeat:no-repeat;
     display:none;
}

مطمئن شوید که URL تصویر موجود در مقدار background-image این کد را با آدرس عکسی که آپلود کرده‌اید جایگزین کنید. سپس «بروزرسانی پرونده» را بزنید تا پس از ذخیره سازی، دکمه شما در سایت نمایش داده شود.

قدم پنجم:

اکنون باید از فایل جاوا اسکریپتی که ایجاد کرده‌اید استفاده کنید. فایل توابع پوسته (functions.php) را باز کنید؛ توصیه می‌کنیم که جهت جلوگیری از بروز هرگونه مشکل، آموزش افزودن کد به سایت وردپرسی را مطالعه فرمائید.

سپس، تابع زیر را به انتهای آن اضافه کنید:

function my_scripts_method() {
     wp_enqueue_script(
           'custom-script',
           get_stylesheet_directory_uri() . '/js/topbutton.js',
           array( 'jquery' )
     );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

پس از جایگذاری، روی «بروزرسانی پرونده» کلیک کنید.

قدم ششم:

در نهایت، برای افزودن دکمه به فوتر وب‌سایت خود، به فایل پابرگ پوسته (footer.php) در صفحه ویرایشگر بروید و قطعه کد زیر را در آن قرار دهید (قبل از بسته شدن تگ div جهت اطمینان از فاصله مناسب):

<a href="#" class="topbutton"></a>

پس از کلیک روی «بروزرسانی پرونده» دکمه منوی بازگشت به بالا باید در صفحات سایت وردپرسی شما نمایش داده خواهد شد.

اگر آن را مشاهده نکردید، لازم است یکبار کش ذخیره شده در افزونه کش سایت و نیز مرورگر خود را خالی کنید.

افزونه وردپرس دکمه بازگشت به بالای صفحه

روش دستی افزودن دکمه بازگشت به بالا، برای توسعه دهندگان یا کاربران با تجربه ساده است؛ ممکن است شما نیز به هر دلیل بخواهید که از یک روش ساده‌تر و یا یک افزونه برای انجام این کار استفاده کنید. در ادامه تعدادی از افزونه‌های مناسب جهت این کار را معرفی می‌کنیم.

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

افزونه To Top

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

با To Top، می‌توانید اندازه، رنگ و موقعیت آیکون دکمه خود را با استفاده از گزینه‌های موجود، بدون دردسر تنظیم کنید. حتی گزینه‌ای برای بهینه سازی دکمه منو برای دستگاه‌های تلفن همراه وجود دارد.

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

افزونه WPFront Scroll Top

اگر چه WPFront Scroll Top به اندازه To Top از نظر داشتن قابلیت خوب نیست، اما یک گزینه همه کاره است. شما می‌توانید عملاً هر تصویری را برای دکمه خود تنظیم کنید، عناصر Font Awesome را افزوده و حتی شمایل آیکون را نیز تعیین کنید.

علاوه بر این، WPFront Scroll Top به گونه‌ای پیکربندی شده است که آیکون‌های واکنش‌گرا را نمایش دهد تا در هر دستگاه تلفن همراه نیز خوب به نظر برسند؛ شما همچنین می‌توانید دکمه خود را در صفحه‌های کوچک‌تر نشان دهید.

افزونه Page scroll to id

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

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

امیدواریم این مقاله در نحوه افزودن دکمه بازگشت به بالای صفحه به شما کمک کرده باشد.