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

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

افزودن دکمه بازگشت به بالا

 چگونه اسکرول به بالا ایجاد کنیم؟

همانطور که اشاره کردیم گاهی اوقات مطالب صفحه زیاد است و ما با پایین آوردن اسکرول به مطالب پایانی می رسیم همچنین این در روش امروز ما خودمون این قابلیت رو به قالب وردپرس سایتمون اضافه میکنیم، اگر میخواهید میتوانید از افزونه smooth page scroll to top استفاده بکنید و با این افزونه دکمه بازگشت به بالا رو در سایتتون قرار بدید

برای افزودن دکمه بازگشت به بالا 2 روش مختلف داریم:

1. بدون استفاده از jQuery: در این روش کافی است کد زیر که یک لینک است و به سرعت ما را به ابتدای صفحه می برد در قالب خود به کار ببریم.

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

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

• در ابتدا یک فایل با نام و فرمت smoothscroll.js از طریق ویرایشگر متن ایجاد کرده و کد مقابل را در آن کپی کنید و سپس آن را در مسیر قالب وردپرس خود در فولدر js ذخیره کنیم. دقت داشته باشید فولدر 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;
		});
});

• تا اینجا کدی برای بالا بردن اسکرول را ایجاد کردیم اما برای استفاده از این کاربرد باید این کد را به قالب خود اضافه کنیم پس فایل در قالب وردپرس خود را پیدا کرده و با ویرایشگر متن که در اختیار داریم باز می کنیم سپس کد زیر را در آن کپی می کنیم:

  wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

  در کد بالا اسکریپت مربوط به اسکرول که در مراحل  قبل ایجاد کردیم به همراه کتابخانه جی کوئری بارگذاری می کنیم.

• در این مرحله به یک لینک نیاز داریم در واقع باید به سراغ کد قالب برویم حتما می دانید که دکمه اسکرول به بالا در قسمت انتهایی قالب وردپرس قرار می گیرد پس می توانید حدس بزنید این لینک را باید به فایل footer.php اضافه کنیم بنابراین کد پایین را در این فایل کپی کنید:

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

• در این مرحله می توان استایل و شکل دلخواه خود را به دکمه اسکرول رو به بالا قالب خود بدهیم پس کد زیر را در فایل style.css یا rtl.css که در قالب و در فولدر stylesheet قرار دارد کپی می کنیم:

• #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;
  }

   

• دوستان عزیز تا این مرحله بخش اصلی کار را انجام داده ایم در این کد یک موقعیت ثابت به دکمه اسکرول دادیم و برای پس زمینه آن از یک تصویر استفاده کرده ایم که مسیر آن را در قسمت url پس زمینه قرار دادیم همچنین در قسمت hover یک استایل متفاوت دادیم که هروقت کلیک کنیم در ظاهر دکمه اسکرول رو به بالا تغییراتی ایجاد شود.

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

امیدوارم همه چی درست باشه و به مشکلی نخورید.

با تشکر از همراهی شما با این قسمت از آموزش وردپرس اگر در رابطه با این پست سوال یا مشکلی دارید در قسمت نظرات اعلام بکنید تا راهنمایی شوید. در صورتی که نیاز به قالب وردپرس دارید میتوانید به دسته بندی قالب وردپرس مراجعه بکنید.