دوره جامع سئو وردپرس

تبلیغات
طراحی و بهینه سازیمشاهده


آخرین ارسال های تالار مشاهده انجمن
  • تغییرات در ترجمه 4 پاسخ 16 بازدید
  • بازنشدن منو 0 پاسخ 12 بازدید
  • آموزش روند فارسی سازی 11 پاسخ 94 بازدید
  • ▐ معرفی سایت های کاربردی و مفید ▐ 2 پاسخ 249 بازدید
  • نصب همه دمو ها 0 پاسخ 9 بازدید
  • درخواست اسکریپت تغییر تگ آنلاین موزیک 2 پاسخ 32 بازدید
  • ثبت نظر 1 پاسخ 21 بازدید
  • درخواست افزونه ای جهت منو دسته بندی برای ووکامرس 4 پاسخ 133 بازدید
  • مشکل با ووکامرس و نمایش قیمت اجباری 0 پاسخ 27 بازدید
  • دسترسی کاربران 0 پاسخ 23 بازدید
  • هاست

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

    آموزش ها , مقالات,آموزش,ترفند , وردپرس

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

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

     

    یادداشت: این آموزش برای کاربران متوسط که در ویرایش قالب خود راحت هستند میباشد. اگر میخواهید از روش افزونه استفاده کنید از smooth page scroll to top plugin استفاده کنید. کسانیکه میخواهند بدون استفاده از افزونه این کار را انجام دهند ادامه این آموزش را مطالعه کنند.

     

    اسکرول روان چیست و چه زمانی استفاده میشود؟

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

    وقتی پست دارای محتوای زیادی باشد,کاربران برای خواندن محتواها مجبورند اسکرول را به پایین بیاورند. با اسکرول به پایین تمام لینک های ناوبری به بالا میروند. زمانیکه کاربران مقاله میخوانند نیاز دارند به بالا رفته و عملیات وب سایت شما را ببینند. دکمه ی Scroll to top کاربران را به سرعت به بالای صفحه میبرد. میتوانید این کار را بدون استفاده از jQuery و با استفاده از لینک متن زیر انجام دهید:

    کار این لینک فقط بردن کاربران به بالای صفحه با سرعت زیاد میباشد. این مورد کاربردی است اما مانند یک دست انداز در جاده است. Smooth scroll  دقیقا مخالف این مورد است,این اسکرول به نرمی کاربر را بالای صفحه میبرد. این کار باعث یک اثر زیبا و بهبود تجربه کاربر میشود.

     

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

    برای افزودن این اسکرول از jQuery,کدهای CSS و HTML در قالب وردپرس استفاده خواهیم کرد. ابتدا ویرایشگر متن را باز کنید سپس یک فایل ایجاد کرده و با نام  smoothscroll.js ذخیره کرده و کد زیر را در فایل کپی کنید:

    فایل را ذخیره کرده و آنرا در دایرکتوری قالب /js/ آپلود کنید. اگر قالب شما دایرکتوری /js/ را ندارد یک دایرکتوری ایجاد کرده و smoothscroll.js را در آن آپلود کنید. این کد اسکریپت جی کوئری است که اسکرول های موثر را بعنوان یک دکمه که کاربران را به بالای صفحه ببرد اضافه میکند. گام بعدی افزودن smoothscroll.js به قالب است,کد زیر را به فایل قالب functions.php اضافه کنید:

    در کد بالا به وردپرس گفته میشود که اسکریپت را بارگذاری کند همچنین کتابخانه جی کوئری را از آنجا افزونه ها وابسته به آن هستند بارگذاری کند. اکنون که jQuery را اضافه کرده ایم یک لینک به سایت وردپرس که کاربران را به بالای صفحه ببرد اضافه میکنیم. کد HTML را به فایل قالب footer.php اضافه کنید:

    همانطور که متوجه شدید یک لینک اضافه کردیم اما با هر متنی در ارتباط نیست,دلیل آن استفاده از یک آیکون تصویر با فلش رو به بالا برای بازگشت به بالای صفحه میباشد. در این مثال از آیکون 40x40px استفاده کرده ایم,آنرا به قالب خود اضافه کنید:

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

     

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

    دانلود


    جای تبلیغ متنی


    مطلب مفیدی بود ؟
    نویسنده : mohammad 0 آموزش ها , مقالات,آموزش,ترفند , وردپرس

    لینک کوتاه مطلب : https://www.20script.ir/?p=47098

    کلمات کلیدی پست :
    درگاه پرداخت
    مطالب مرتبط
    2,054نمایش مطالب روز در وردپرس تاریخ : 1396/09/15
    2,068وردپرس ۵٫۰ و تغییرات احتمالی آن تاریخ : 1397/07/12
    3,866افزونه اتصال هاست دانلود به وردپرس Hacklog Remote Attachment تاریخ : 1396/10/15
    2,116تایید خودکار سفارشات در ووکامرس با افزونه WooCommerce Autocomplete Orders تاریخ : 1397/08/27
    784نمایش تعداد بازدید مطالب وردپرس بر اساس ip کاربر با افزونه Post Views Counter تاریخ : 1398/03/3
    13,093افزونه محاسبه هزینه پروژها با WPCC برای وردپرس تاریخ : 1393/10/19
    4,054افزونه وردپرس اسلایدر مطالب VG PostSlider تاریخ : 1396/01/26
    2,541ایجاد اسلایدر لوگو در وردپرس با افزونه Logo Slider WP تاریخ : 1396/09/5
    7,746تبدیل وردپرس به یک انجمن حرفه ای با افزونه bbPress تاریخ : 1394/11/23
    740تغییر رنگ نظرات کاربران در وردپرس تاریخ : 1398/02/3
    3,433حفاظت از لینک ها در وردپرس با افزونه WP Secure Links تاریخ : 1392/11/3
    4,091نمایش وضعیت مدیر در اسکایپ تاریخ : 1392/07/28
    برخی از قالب های وبلاگ - بیست اسکریپت
    قالب عشق بین انگشت ها
    قالب دخترونه و آرایش
    قالب زیبای ماشین
    قالب فانتزی و طنز چِشم
    قالب دختر رویایی
    قالب وبلاگ دکوراسیون
    قالب وبلاگ کلبه و درخت
    قالب دختر زیبا
    قالب پسرونه غمگین
    قالب عاشقانه قلب