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

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

در این مقاله به شما نشان خواهیم داد که چگونه با استفاده از جی کوئری و یک افزونه یک افکت اسکرول به بالا در وردپرس اضافه کنید.

برای خرید هاست وردپرس با ارزان ترین قیمت و بالاترین سرعت از ایرانیکاسرور، روی بنر زیر کلیک کنید.

Smooth Scroll چیست و چه زمانی باید از آن استفاده کرد؟

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

شما می توانید این قابلیت را به عنوان یک لینک متنی ساده بدون استفاده از jQuery اضافه کنید، مانند این:

<a href="#" title="Back to top">^Top</a>

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

اما افکت اسکرول به بالا را که اضافه میکنیم، کاربر را با جلوه ای بصری دلپذیر به سمت بالا می کشاند. استفاده از عناصری مانند این می تواند تجربه کاربری در سایت شما را به شدت بهبود بخشد.

با این اوصاف، بیایید ببینیم چگونه می توانید با استفاده از افزونه وردپرس و جی کوئری، یک اسکرول صاف به جلوه های بالا اضافه کنید.

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

این روش برای مبتدیان توصیه می شود، زیرا می توانید بدون لمس یک خط کد، یک افکت اسکرول به بالا به وب سایت وردپرس اضافه کنید. اولین کاری که باید انجام دهید این است که افزونه WPFront Scroll Top را نصب و فعال کنید.

پس از فعال سازی، می توانید از داشبورد وردپرس خود به تنظیمات » Scroll Top بروید. در اینجا می توانید افزونه را پیکربندی کرده و افکت اسکرول صاف را سفارشی کنید.

ابتدا باید بر روی کادر “Enabled” کلیک کنید تا دکمه اسکرول به بالا در سایت خود فعال شود. در مرحله بعد، گزینه هایی برای ویرایش offset اسکرول، اندازه دکمه، کدورت، مدت زمان محو شدن، مدت زمان اسکرول و موارد دیگر را خواهید دید.

اگر به پایین اسکرول کنید، گزینه‌های بیشتری مانند ویرایش زمان پنهان کردن خودکار، فعال کردن گزینه پنهان کردن دکمه در دستگاه‌های کوچک و پنهان کردن آن در صفحه wp-admin را خواهید یافت.

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

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

افزونه WPFront Scroll Top نیز فیلترهایی را برای نمایش دکمه اسکرول به بالا فقط در صفحات انتخاب شده ارائه می دهد.

به طور معمول، در تمام صفحات وبلاگ وردپرس شما ظاهر می شود. با این حال، می‌توانید به بخش Display on Pages بروید و جایی را انتخاب کنید که می‌خواهید اسکرول را به جلوه‌ی بالا نمایش دهید.

این افزونه همچنین طرح های دکمه از پیش ساخته شده ای را ارائه می دهد که می توانید از بین آنها انتخاب کنید. شما باید بتوانید به راحتی طرحی را پیدا کنید که مطابق با سایت شما باشد.

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

وقتی کارتان تمام شد، به سادگی روی دکمه Save Changes کلیک کنید. اکنون می توانید از وب سایت خود دیدن کنید تا دکمه اسکرول به بالا را در عمل مشاهده کنید.

افزودن افکت smooth اسکرول به بالا با jQuery در وردپرس

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

ما از jQuery، مقداری CSS و یک خط کد HTML در قالب وردپرس شما برای افزودن افکت بالای اسکرول smooth استفاده خواهیم کرد.

ابتدا یک ویرایشگر متن مانند Notepad باز کنید و یک فایل بسازید. ادامه دهید و آن را به عنوان smoothscroll.js ذخیره کنید. در مرحله بعد باید این کد را کپی و در فایل پیست کنید:

jQuery(document).ready(function($){     $(window).scroll(function(){         if ($(this).scrollTop() < 200) {             $('#smoothup') .fadeOut();         } else {             $('#smoothup') .fadeIn();         }     });     $('#smoothup').on('click', function(){         $('html, body').animate({scrollTop:0}, 'fast');         return false;         }); });

پس از آن، می توانید فایل را ذخیره کرده و آن را در پوشه /js/ موجود در دایرکتوری قالب وردپرس خود آپلود کنید. اگر تم شما دارای یک پوشه /js/ نیست، می‌توانید آن را ایجاد کرده و smoothscroll.js را در آن آپلود کنید.

این کد اسکریپت جی کوئری است که یک افکت اسکرول صاف به دکمه ای اضافه می کند که کاربران را به بالای صفحه می برد.

کاری که باید انجام دهید این است که فایل smoothscroll.js را در قالب خود بارگذاری کنید. برای انجام این کار، اسکریپت را در وردپرس در صف قرار می دهیم.

پس از آن، به سادگی این کد را در فایل functions.php تم خود کپی و جایگذاری کنید:

wp_enqueue_script( 'smoothup', get_template_directory_uri() . 'https://cdn2.wpbeginner.com/js/smoothscroll.js', array( 'jquery' ), '',  true );

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

اکنون که بخش jQuery را اضافه کرده‌ایم، بیایید یک پیوند واقعی به سایت وردپرس خود اضافه کنیم که کاربران را به بالا بازگرداند. به سادگی این HTML را در هر جایی از فایل footer.php تم خود قرار دهید.

<a href="#top" id="smoothup" title="Back to top"></a>

ممکن است متوجه شده باشید که کد HTML شامل یک لینک است اما بدون متن. دلیل آن این است که ما از یک آیکون تصویر با یک فلش رو به بالا برای نمایش دکمه بازگشت به بالا استفاده می کنیم.

در این مثال، ما از یک آیکون 40x40px استفاده می کنیم. به سادگی CSS سفارشی زیر را به استایل تم خود اضافه کنید.

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

#smoothup { height: 40px; width: 40px; position:fixed; bottom:50px; right:100px; text-indent:-9999px; display:none; background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png"); -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; } #smoothup:hover { -webkit-transform: rotate(360deg) } background: url('') no-repeat; }

در CSS بالا، مطمئن شوید که https://www.example.com/wp-content/uploads/2013/07/top_icon.png را با URL تصویری که می خواهید استفاده کنید جایگزین کنید. می توانید نماد تصویر خود را با استفاده از آپلود کننده رسانه وردپرس آپلود کنید، URL تصویر را کپی کنید و سپس آن را در کد قرار دهید.

امیدواریم این مقاله به شما کمک کرده باشد تا با استفاده از پلاگین و کد جی کوئری، یک افکت اسکرول به بالا، در سایت وردپرسی خود اضافه کنید.