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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

افزونه 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() . '/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 تصویر را کپی کنید و سپس آن را در کد قرار دهید.

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

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

پست نحوه افزودن اسکرول صاف به افکت برتر در وردپرس با استفاده از جی کوئری اولین بار در WPBeginner ظاهر شد.