آموزش افزودن دکمه بازگشت به بالای صفحه وردپرس
در این مقاله قصد دارم شما را با افزودن دکمه بازگشت به بالای صفحه وردپرس آشنا کنم؛ با مستر آموز همراه باشید…
استفاده از افزونه اسکرول به بالای صفحه وردپرس
افزونه‌ای که قصد معرفی اونو دارم با عنوان WPFront Scroll Top در مخزن وردپرس به ثبت رسیده است.
دانلود افزونه WPFront Scroll Top
بعد از نصب و فعال سازی افزونه مشابه تصویر زیر منویی با نام WPFront در پیشخوان سایت وردپرسی شما اضافه خواهد شد،
Enabled: برای فعال کردن نمایش دکمه اسکرول وردپرس
JavaScript Async: امکان اسکرول توسط جاوا اسکریپت
Scroll Offset: تا آفست اسکرول را بر حسب پیکسل وارد کنید.
Button Size: اندازه ثابت دکمه اسکرول را بر حسب پیکسل انتخاب کنید.
Button Opacity: میزان کدر بودن دکمه اسکرول وردپرس
Button Fade Duration: مدت زمان محو شدن دکمه اسکرول
Scroll Duration: مدت زمان اسکرول
Auto Hide: دکمه اسکرول وردپرس به صورت خودکار مخفی خواهد شد.
Auto Hide After: مدت زمان مورد نظر برای مخفی شدن دکمه اسکرول
Hide on Small Devices:در نمایشگرهایی با اندازه کوچک که در بخش بعدی یعنی در فیلد Small Device Max Width حداکثر اندازه آن را مشخص میکنید دکمه اسکرول نمایش داده نخواهد شد.
Hide on Small Window: با فعال کردن این گزینه نیز مشابه مورد قبل
Hide on WP-ADMIN: در صورتی که تمایلی به نمایش دکمه اسکرول وردپرس در پیشخوان وردپرس ندارید این گزینه را فعال کنید
Hide on iframes: دکمه اسکرول در آی‌فریم‌هایی که در صفحات خود استفاده میکنید مخفی خواهد شد.
Move Admin Menu: منوی تنظیمات این افزونه به زیر منوی تنظیمات در پیشخوان وردپرس منتقل خواهد شد.
Button Style: نوع دکمه خود را در حالت متنی، تصویر یا فونت آویسام انتخاب کنید.
Location: موقعیت نمایش دکمه در بالا یا پایین صفحات با امکان نمایش در سمت چپ یا راست صفحه را انتخاب کرد.
Filter: از این بخش نیز قادر خواهید بود تا نمایش دکمه اسکرول وردپرس را برای صفحات خاصی غیرفعال کنید.
Image Button: از این بخش میتونید تصویر مورد نظر برای اسکرول وردپرس را انتخاب کرد
استفاده از کدنویسی برای اسکرول به بالای صفحه وردپرس
برای این منظور ابتدا وارد هاست خودتون شده و روی دکمه File Manager کلیک کنید.
بعد از اینکه وارد صفحه مدیریت فایل‌ها در هاست خودتون شدید به مسیر /public_html/wp-content/themes/ مراجعه کنید و سپس وارد پوشه قالبی که از اون استفاده میکنید و در حال حاضر روی سایت شما فعال است کلیک کنید. بعد از اینکه وارد پوشه قالب شدید وارد پوشه js شوید، در صورتی که چنین پوشه‌ای ندارید یک پوشه با نام js در اون ایجاد کنید و سپس با استفاده از برنامه ویرایشگر متن مثل notepad کدهای زیر را در فایلی با نام scrolltotop.js ذخیره کرده و در نهایت داخل پوشه js آپلود کنید.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() < 200) {
$(‘#smoothup’) .fadeOut();
} else {
$(‘#smoothup’) .fadeIn();
}
});
$(‘#smoothup’).on(‘click’, function(){
$(‘html, body’).animate({scrollTop:۰}, ‘fast’);
return false;
});
});
|
حالا بعد از اینکه فایل را در پوشه js آپلود کردید به مسیر اصلی پوشه قالب برگردید و به دنبال فایل functions.php در اون بگردید و بعد از اینکه فایل فانکشن را پیدا کردید برای ویرایش کردن اون در هاست سی پنل روی فایل راست کلیک کرده و گزینه Edit را انتخاب کنید. بعد از اینکه صفحه ویرایش فایل برای شما باز شد کدهای زیر را در مکان مناسبی از این فایل قرار دهید. بهترین مکان قبل از کد <? قرار بدین و فایل را ذخیره کنید.
|
1
|
wp_enqueue_script( ‘smoothup’, get_template_directory_uri() . ‘/js/scrolltotop.js’, array( ‘jquery’ ), ”, true );
|
همانطور که در کد میبینید به وردپرس گفته شده تا اسکریپت موجود در فایل scroltotop را لود کنه، حالا در این مرحله لازمه تا دکمه اسکرول به بالای صفحه در وردپرس را در قالب خودمون نمایش بدیم. برای این منظور به ویرایشگر قالب مراجعه کرده و کد زیر را در مکان مناسبی از فایل فوتر(footer.php) قرار داده و آن را ذخیره کنید.
|
1
|
<a href=“#top” id=“smoothup” title=“Back to top”></a>
|
حال پس از قرار دادن این کد دکمه اسکرول برای شما نمایش داده میشه اما چون هنوز تصویری برای اون انتخاب نکردید در صفحه قابل مشاهده نیست. بنابراین برای این منظور به مسیر نمایش>ویرایشگر مراجعه کنید تا کدهای زیر را در استایل قالب خودتون قرار بدین. این کدها را میتونید در انتهای فایل style.css و یا rtl.css قرار دهید.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
#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;
}
|
حال همانطور که در خط 9 این کد میبینید آدرس تصویر دلخواه خودتون را به جای آدرس وارد شده قرار داده و فایل استایل را ذخیره کنید. در نهایت به آدرس سایت مراجعه کرده و پس از رفرش کردن صفحه اگر تمامی مراحل را به درستی وارد کرده باشید میبینید که دکمه‌ای در سمت راست صفحه قرار گرفته است که با کلیک بر روی آن با ابتدای صفحه اسکرول خواهد خورد.
