Skip to content
تمی
تمی

اخبار روز وردپرس

  • اخبار و مقالات قالب سایت
تمی

اخبار روز وردپرس

21 مرداد 1401

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


آیا می خواهید یک اسکرول صاف به بالای صفحه در وب سایت وردپرس خود اضافه کنید؟

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

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

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

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

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

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

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

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

با پیمایش کل صفحه در میلی ثانیه، کاربران را به بالای صفحه می فرستد. کار می‌کند، اما اثر می‌تواند تکان‌دهنده باشد، مانند زمانی که به یک دست انداز در جاده برخورد می‌کنید.

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

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

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

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

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

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

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

تنظیمات WPfront اسکرول بالا را ویرایش کنید

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

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

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

تنظیمات بیشتر WPfront اسکرول بالا را ویرایش کنید

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

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

محل نمایش افکت را انتخاب کنید

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

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

یک دکمه تصویر را انتخاب کنید

وقتی کارتان تمام شد، به سادگی روی دکمه «ذخیره تغییرات» کلیک کنید.

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

به پیش نمایش دکمه بالا بروید

افزودن Smooth Scroll به Top Effect با jQuery در وردپرس

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

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

ابتدا یک ویرایشگر متن مانند 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/ پوشه در فهرست قالب وردپرس شما. برای جزئیات بیشتر، لطفاً راهنمای ما در مورد نحوه استفاده از FTP برای آپلود فایل ها در وردپرس را ببینید.

اگر موضوع شما یک ندارد /js/ دایرکتوری، سپس می توانید یکی را ایجاد کرده و آپلود کنید smoothscroll.js به آن همچنین می توانید راهنمای ما در مورد ساختار فایل ها و دایرکتوری وردپرس را برای اطلاعات بیشتر مشاهده کنید.

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

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

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

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 تصویر را کپی کنید و سپس آن را در کد قرار دهید.

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

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





منبع

اخبار و مقالات قالب سایت تم سایتقالب سایت

راهبری نوشته

Previous post
Next post

نوشته‌های تازه

  • نحوه تراز کردن یک ویدیو در مرکز وردپرس
  • نحوه به تاخیر انداختن نمایش پست ها در فید RSS وردپرس
  • نحوه ایجاد فرم های سازگار با GDPR در وردپرس
  • نحوه استفاده از Retargeting کوکی در وردپرس برای نمایش پیام های سفارشی در سایت
  • خرید بک لینک خرید بک لینک ایرانی | گلدلینک
  • خرید بک لینک قوی باکیفیت ارزان پکیج امن بک لینک به دور از پنالتی گوگل | گلدلینک
  • خرید بک لینک قوی با اتوریتی بالا صفحه 1 گوگل باشید | گلدلینک
  • شرکت مهندسی آسانسور و پله برقی آسانبر کاران عرشیان
  • 7 بهترین خدمات رونویسی پست صوتی تجاری (متن و ایمیل)
  • خواص زعفران اصل، با 16 خاصیت مهم زعفران آشنا شوید ماه چین-دکتر سافران
  • متن جایگزین تصویر در مقابل عنوان تصویر در وردپرس
  • چگونه به راحتی حالت تاریک را به وب سایت وردپرس خود اضافه کنید
  • قالیکده البرز فروشگاه فرش خرید اینترنتی فرش ماشینی فروش آنلاین انواع فرش-فرش شادرخ
  • مبل و سرویس خواب سلطنتی ترنج متریال وارداتی نقد و اقساط-مبل سید
  • نحوه محدود یا غیرفعال کردن تخلیه خودکار سطل زباله در وردپرس
  • گلگیر جلو S5 جک لوزم یدکی اصلی جک لیست قیمت فطعات اورجینال ملت یدک-پارس قطعه
  • طراحی سایت و فروشگاه اینترنتی شروع یک موفقیت آنلاین پرتال
  • 10 داده بازاریابی وب سایت که باید در هر سایت وردپرسی ردیابی کنید
  • اندازه توصیه شده بنر تصویر Shopify در سال 2023 چقدر است
  • فناوری اطلاعات یا آی تی IT چیست و چرا تا این حد پرطرفدار است؟ همیار آی‌تی-ترازنت
  • چگونه از تقلب و سفارشات جعلی در ووکامرس جلوگیری کنیم
  • نحوه ایجاد یک نظرسنجی تعاملی در وردپرس (گام به گام)
  • روش تست شارژرهای لپ تاپ نمایندگی ایسوس در ایران-شارژر لپتاپ مستر جانبی
  • نحوه نمایش پست های محبوب بر اساس روز، هفته و ماه در وردپرس
  • نحوه واردات و صادرات محصولات WooCommerce با تصاویر
  • 10 افزونه وردپرس با استفاده از هوش مصنوعی و یادگیری ماشین
  • نحوه رفع خطای ERR_CONNECTION_REFUSED در کروم
  • نحوه ردیابی تاریخچه ویجت وردپرس (روش آسان)
  • نحوه ایجاد یک نظرسنجی Net Promoter Score® (NPS) در وردپرس
  • 5 بهترین برنامه پاپ آپ تخفیف Shopify در سال 2023 – Shopidevs
  • اتاق فرار چیست؟ معرفی انواع اسکیپ روم در تهران اکتیک-آل اسکیپ
  • نحوه ردیابی کلیک روی لینک و کلیک روی دکمه در وردپرس (روش آسان)
  • نحوه تغییر نام فرستنده در ایمیل خروجی وردپرس
  • گزیده محصول Shopify را در همه صفحات و صفحات مجموعه اضافه کنید
  • نحوه نوشتن محتوا با استفاده از AI Content Generator در وردپرس
  • نحوه ایجاد فرم HubSpot در وردپرس
  • نحوه نصب Microsoft Clarity Analytics در وردپرس
  • نحوه افزایش ارتفاع بخش Shopify div در سال 2023
  • چگونه URL کوتاه سفارشی خود را برای وبلاگ خود ایجاد کنید
  • معرفی انواع دستگاه مینی چیلر و مزایای آن ها آی تهویه-بتا تهویه
  • rel=”noopener” در وردپرس چیست؟ (توضیح داده شد)
  • تترلند خرید تتر و فروش تتر برنامه‌ها در Google Play-تترفا
  • چگونه از FOMO در سایت وردپرس خود برای افزایش تبدیل استفاده کنید
  • نحوه اضافه کردن گزینه انتخابگر در Shopify در صفحات مجموعه در سال 2023 – Shopidevs
  • 13 بهترین نمونه طراحی پاورقی وردپرس (+ بهترین روش ها)
  • چگونه به راحتی یک نقشه سایت چند زبانه در وردپرس ایجاد کنیم
  • نحوه اضافه کردن محدودیت کشوری برای محصولات WooCommerce
  • لوله بازکنی و لوله بازکن فوری قیمت لوله بازکنی-lolebazkonii
  • نحوه راه اندازی ردیابی تبدیل ووکامرس (گام به گام)
  • نحوه اضافه کردن گزینه انتخابگر در Shopify در صفحات جزئیات محصول در سال 2023 – Shopidevs

دسته‌ها

  • اخبار و مقالات قالب سایت
  • دسته‌بندی نشده
  • نحوه تراز کردن یک ویدیو در مرکز وردپرس
  • نحوه به تاخیر انداختن نمایش پست ها در فید RSS وردپرس
  • نحوه ایجاد فرم های سازگار با GDPR در وردپرس
  • نحوه استفاده از Retargeting کوکی در وردپرس برای نمایش پیام های سفارشی در سایت
  • خرید بک لینک خرید بک لینک ایرانی | گلدلینک
  • خرید بک لینک قوی باکیفیت ارزان پکیج امن بک لینک به دور از پنالتی گوگل | گلدلینک
  • خرید بک لینک قوی با اتوریتی بالا صفحه 1 گوگل باشید | گلدلینک
  • شرکت مهندسی آسانسور و پله برقی آسانبر کاران عرشیان
  • 7 بهترین خدمات رونویسی پست صوتی تجاری (متن و ایمیل)
  • خواص زعفران اصل، با 16 خاصیت مهم زعفران آشنا شوید ماه چین-دکتر سافران
  • متن جایگزین تصویر در مقابل عنوان تصویر در وردپرس
  • چگونه به راحتی حالت تاریک را به وب سایت وردپرس خود اضافه کنید
  • قالیکده البرز فروشگاه فرش خرید اینترنتی فرش ماشینی فروش آنلاین انواع فرش-فرش شادرخ
  • مبل و سرویس خواب سلطنتی ترنج متریال وارداتی نقد و اقساط-مبل سید
  • نحوه محدود یا غیرفعال کردن تخلیه خودکار سطل زباله در وردپرس
  • گلگیر جلو S5 جک لوزم یدکی اصلی جک لیست قیمت فطعات اورجینال ملت یدک-پارس قطعه
  • طراحی سایت و فروشگاه اینترنتی شروع یک موفقیت آنلاین پرتال
  • 10 داده بازاریابی وب سایت که باید در هر سایت وردپرسی ردیابی کنید
  • اندازه توصیه شده بنر تصویر Shopify در سال 2023 چقدر است
  • فناوری اطلاعات یا آی تی IT چیست و چرا تا این حد پرطرفدار است؟ همیار آی‌تی-ترازنت
  • چگونه از تقلب و سفارشات جعلی در ووکامرس جلوگیری کنیم
  • نحوه ایجاد یک نظرسنجی تعاملی در وردپرس (گام به گام)
  • روش تست شارژرهای لپ تاپ نمایندگی ایسوس در ایران-شارژر لپتاپ مستر جانبی
  • نحوه نمایش پست های محبوب بر اساس روز، هفته و ماه در وردپرس
  • نحوه واردات و صادرات محصولات WooCommerce با تصاویر
  • 10 افزونه وردپرس با استفاده از هوش مصنوعی و یادگیری ماشین
  • نحوه رفع خطای ERR_CONNECTION_REFUSED در کروم
  • نحوه ردیابی تاریخچه ویجت وردپرس (روش آسان)
  • نحوه ایجاد یک نظرسنجی Net Promoter Score® (NPS) در وردپرس
  • 5 بهترین برنامه پاپ آپ تخفیف Shopify در سال 2023 – Shopidevs
  • اتاق فرار چیست؟ معرفی انواع اسکیپ روم در تهران اکتیک-آل اسکیپ
  • نحوه ردیابی کلیک روی لینک و کلیک روی دکمه در وردپرس (روش آسان)
  • نحوه تغییر نام فرستنده در ایمیل خروجی وردپرس
  • گزیده محصول Shopify را در همه صفحات و صفحات مجموعه اضافه کنید
  • نحوه نوشتن محتوا با استفاده از AI Content Generator در وردپرس
  • نحوه ایجاد فرم HubSpot در وردپرس
  • نحوه نصب Microsoft Clarity Analytics در وردپرس
  • نحوه افزایش ارتفاع بخش Shopify div در سال 2023
  • چگونه URL کوتاه سفارشی خود را برای وبلاگ خود ایجاد کنید
  • معرفی انواع دستگاه مینی چیلر و مزایای آن ها آی تهویه-بتا تهویه
  • rel=”noopener” در وردپرس چیست؟ (توضیح داده شد)
  • تترلند خرید تتر و فروش تتر برنامه‌ها در Google Play-تترفا
  • چگونه از FOMO در سایت وردپرس خود برای افزایش تبدیل استفاده کنید
  • نحوه اضافه کردن گزینه انتخابگر در Shopify در صفحات مجموعه در سال 2023 – Shopidevs
  • 13 بهترین نمونه طراحی پاورقی وردپرس (+ بهترین روش ها)
  • چگونه به راحتی یک نقشه سایت چند زبانه در وردپرس ایجاد کنیم
  • نحوه اضافه کردن محدودیت کشوری برای محصولات WooCommerce
  • لوله بازکنی و لوله بازکن فوری قیمت لوله بازکنی-lolebazkonii
  • نحوه راه اندازی ردیابی تبدیل ووکامرس (گام به گام)
  • نحوه اضافه کردن گزینه انتخابگر در Shopify در صفحات جزئیات محصول در سال 2023 – Shopidevs
©2023 تمی | WordPress Theme by SuperbThemes