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

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

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

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

برای شروع این کار لازم است تا ابتدا کدهای جی‌کوئری زیر را در پوشه قالب وبسایت وردپرسی خود قرار دهید. برای این منظور وارد پوشه قالبی که از آن استفاده می‌کنید و در سایت نیز فعال است شده و سپس کدهای زیر را در فایل با نام scrolltotop.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;
});
});

در مرحله بعد لازم است تا با استفاده از فایل فانکشن این قایل را در قالب تعریف کنید. برای این منظور فایل فانکشن(functions.php) قالب خود را باز کرده و قطعه کد زیر را در مکان مناسبی از آن قرار دهید.

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

همانطور که در کد بالا مشاهده می‌کنید در این کد به وردپرس گفته می‌شود تا اسکریپت را لود و بارگزاری نماید. حال در این مرحله لازم است تا دکمه اسکرول به سمت بالا را در قالب خود اضافه کنیم. برای این منظور به ویرایشگر قالب مراجعه کرده و کد زیر را در مکان مناسبی از فایل فوتر(footer.php) قرار داده و آن را ذخیره کنید.

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

حال پس از قرار دادن این کد لازم است تا دکمه دلخواه خود را که برای نمایش آیکون اسکرول در وردپرس مورد استفاده قرار می‌گیرد را قرار دهید. برای این منظور به ویرایشگر استایل خود مراجعه کرده و کدهای زیر را در انتهای فایل style.css و یا rtl.css قرار دهید.

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("http://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;
}

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

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