آیا وب سایت هایی دیده اید که پیمایش صاف را به جلوه بالای صفحه اضافه کنند؟ وقتی صفحه طولانی دارید ، این عالی است و می خواهید راهی آسان برای بازگشت به بالا به کاربران خود ارائه دهید. اخیراً یکی از خوانندگان ما از ما در مورد اضافه کردن یک پیمایش روان به جلوه برتر در وردپرس س askedال کرده است. در این مقاله ، ما به شما نشان خواهیم داد که چگونه با استفاده از jQuery یک پیمایش روان برای جلوه برتر در WordPress اضافه کنید.
توجه: این آموزش برای یک کاربر متوسط DIY ایجاد شده است که راحت می تواند مضامین خود را ویرایش کند. اگر می خواهید از یک روش افزونه استفاده کنید ، لطفاً از پیمایش صفحه صاف به افزونه برتر . برای کسانی که می خواهند نحوه انجام این کار را بدون پلاگین بیاموزند ، لطفاً به مطالعه ادامه دهند.
Smooth Scroll چیست و چه زمانی باید از آن استفاده کرد؟ h4>
وقتی یک صفحه یا پست محتوای زیادی دارد ، کاربران مجبور می شوند برای خواندن این مطالب به پایین پیمایش کنند. با پیمایش کاربران به پایین ، تمام پیوندهای ناوبری شما بالا می رود. وقتی کاربران با خواندن آن مقاله به پایان رسیدند ، باید به بالا پیمایش کنند تا ببینند در وب سایت شما چه کارهای دیگری باید انجام دهند. دکمه پیمایش به بالا ، کاربران را به سرعت به بالای صفحه می فرستد. بدون استفاده از jQuery می توانید این را به صورت پیوند متنی اضافه کنید ، مانند این:
^ بالا
این فقط کاربران را به بالای صفحه می فرستد و کل صفحه را در میلی ثانیه پیمایش می کند. عملکردی است اما به نوعی شبیه دست انداز جاده است. پیمایش صاف مخالف آن است. به راحتی کاربر را به بالای صفحه می کشاند. این یک اثر خوب ایجاد می کند و تجربه کاربر را بهبود می بخشد.
افزودن پیمایش روان به Top Effect با jQuery در وردپرس h4>
برای افزودن یک پیمایش روان به جلوه برتر ، از jQuery ، مقداری CSS و یک خط کد HTML در قالب وردپرس شما استفاده خواهیم کرد. ابتدا یک ویرایشگر متن مانند Notepad باز کنید. یک فایل ایجاد کنید و آن را به عنوان smoothscroll.js ذخیره کنید. این کد را در پرونده کپی و جایگذاری کنید:
jQuery (سند). آماده (تابع ($) {
$ (پنجره). پیمایش (عملکرد () {
if ($ (این) .scrollTop ()
فایل را ذخیره کرده و در پوشه / js / پوشه قالب وردپرس خود بارگذاری کنید (به نحوه استفاده از FTP برای بارگذاری پرونده ها در وردپرس ). اگر موضوع شما دایرکتوری / js / ندارد ، پس یکی ایجاد کنید و smoothscroll.js را در آن بارگذاری کنید. این کد اسکریپت jQuery است که اثر پیمایشی روان را به دکمه ای اضافه می کند که کاربران را به بالای صفحه می رساند.
کار بعدی که باید انجام دهید این است که smoothscroll.js را به موضوع خود اضافه کنید. برای انجام این کار ، ما اسکریپت مورد نظر را در وردپرس ارائه خواهیم داد (در راهنمای ما در نحوه افزودن صحیح اسکریپت ها در وردپرس ). این کد را در پرونده توابع.php طرح زمینه خود کپی و جایگذاری کنید.
wp_enqueue_script ('صاف کردن' ، get_template_directory_uri (). '/js/smoothscroll.js' ، آرایه ('jquery') ، '' ، درست)؛
در کد بالا ، ما به وردپرس گفته ایم که اسکریپت ما را بارگیری کند و همچنین کتابخانه jQuery را بارگیری کند ، زیرا پلاگین ما به آن بستگی دارد. اکنون که قسمت jQuery را اضافه کردیم ، اجازه دهید یک لینک واقعی به سایت وردپرس خود اضافه کنیم که کاربران را به بالا برگرداند. این HTML را در هر کجای پرونده footer.php طرح زمینه خود قرار دهید.
همانطور که مشاهده کردید ما پیوندی اضافه کرده ایم اما آن را به هیچ متنی پیوند نداده ایم. به این دلیل که برای نمایش دکمه بازگشت به بالا از یک نماد تصویر با فلش رو به بالا استفاده خواهیم کرد. در این مثال ما از یک نماد 40x40px استفاده می کنیم. این را به صفحه سبک طرح زمینه خود اضافه کنید.
# اسموتاپ {
ارتفاع: 40 پیکسل
عرض: 40 پیکسل
موقعیت: ثابت
پایین: 50 پیکسل
راست: 100 پیکسل؛
text-indent: -9999px؛
نمایش: هیچ؛
background: url ("http://www.example.com/wp-content/uploads/2013/07/top_icon.png")؛
-webkit-انتقال-مدت زمان: 0.4 ثانیه
-moz-انتقال-مدت زمان: 0.4 ثانیه مدت زمان انتقال: 0.4 ثانیه
}
#smoothup: شناور {
-webkit-transform: چرخش (360deg)}
پس زمینه: url ('') بدون تکرار؛
}
در CSS بالا ، ما از موقعیت ثابت برای نماد تصویر خود استفاده کرده ایم و از یک نماد تصویر به عنوان تصویر پس زمینه استفاده کرده ایم. می توانید نماد تصویر خود را با استفاده از آپلود کننده رسانه وردپرس بارگذاری کنید و سپس url تصویر را برای جایگذاری آن به عنوان url پس زمینه دریافت کنید. ما همچنین کمی انیمیشن CSS به دکمه اضافه کرده ایم که وقتی کاربر ماوس را روی آن می گیرد دکمه را می چرخاند.
پیمایش به بالا به کاربران اجازه می دهد تا به بالا برگردند و کارهای دیگر را در وب سایت شما پیدا کنند. کار دیگری که می توانید انجام دهید افزودن عنوان نوار پاورقی شناور مانند آنچه در سایت خود داریم برای نمایش محتوای برجسته. اگر نمی خواهید کاربران شما برای به اشتراک گذاشتن مقاله شما به بالا پیمایش کنند ، توصیه می کنیم از نوار اشتراک اجتماعی شناور مانند افزونه WPBeginner.
امیدواریم این مقاله به شما کمک کرده باشد با استفاده از jQuery یک پیمایش روان به جلوه بالای صفحه در سایت خود اضافه کنید. برای دیدن برخی دیگر از کاربردهای جالب jQuery در وردپرس می توانید به مقاله آکاردئون پرسش و پاسخ jQuery یا مقاله تصاویر تنبل بارگیری .
آیا فکر می کنید پیمایش به جلوه برتر مفید است؟ با ارسال نظر در زیر با ما در میان بگذارید.
منبع:
https://www.wpbeginner.com/wp-themes/how-to-add-a-smooth-scroll-to-top-effect-in-wordpress-using-jquery/.