بار دیگر در مرجع آموزش وردپرس با آموزش روش های قرار دادن دکمه بازگشت به بالای صفحه در سایت خدمت شما دوستان عزیز هستیم. بار ها شده که وقتی وارد یک سایت می شوید، زمانی به انتهای سایت یعنی به قسمت فوتر سایت که می رسید یک ابزار مشاهده می کنید که با کلیک بر روی آن شما را به ابتدای صفحه هدایت می کند. این ابزار کاربردی برای صفحاتی که متن طولانی و به اصطلاح اسکرول بلندی دارند بسیار مفید است. در اکثر طراحی سایت حرفه ای مشاهده خواهید کرد که این دکمه بازگشت به بالای صفحه توسط طراح سایت تعبیه خواهد شد. اما اگر شما هم می خواهید در قالب خود این ابزار را قرار دهید تا انتهای این آموزش در وردپرس باران همراه باشید.
فهرست
روش های ایجاد دکمه بازگشت به بالای صفحه:
دو حالت برای ایجاد دکمه بازگشت به بالای صفحه وجود دارد:
- از طریق کد نویسی
- از طریق نصب افزونه
در ادامه هر دو روش را برای شما به صورت کامل توضیح خواهیم داد. با ما همراه باشید.
ساخت دکمه رفتن به بالای صفحه از طریق کد نویسی
برای ساخت دکمه رفتن به بالای صفحه از طریق کد نویسی ابتدا از طریق یک برنامه ویرایشگر متن مانند notepad یک فایل متنی با نام scrolltotop.js ایجاد می کنیم. سپس کد زیر را در آن قرار می دهیم. پس از ساخت فایل بالا، وارد پنل هاست خود در مسیر /public_html/wp-content/themes/ شوید. پوشه قالب مورد استفاده خودتان را انتخاب و وارد شوید. پوشه js را پیدا کنید. در صورتی که چنین پوشه ای را پیدا نکردید، یک پوشه با این نام ساخته و فایل متنی scrolltotop.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:۰}, 'fast');
return false;
});
});پس از ساخت فایل بالا، در مسیر اصلی هاست به دنبال فایل functions.php بگردید و قطعه کد زیر را از طریق ابزار Edit قبل از کد <? قرار دهید و سپس آن را ذخیره نمایید.
wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/scrolltotop.js', array( 'jquery' ), '', true );
تا اینجا از طریق کد های تعریف شده اسکریپ موجود در فایل scroltotop فراخوانی خواهد شد. اما نیاز است که برای انجام این عمل، ظاهر دکمه بازگشت به بالای صفحه در سایت ظاهر گردد. برای این کار باید قطعه کد زیر را در فایل 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("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 این قطعه کد وارد کنید و سپس به صفحه اصلی سایت رجوع کرده و دکمه اسکرول به بالا را مشاهده خواهید نمود.
ساخت دکمه اسکرول به بالای صفحه از طریق نصب افزونه
روش دیگر قرار دادن دکمه بازگشت به بالای صفحه در سایت از طریق نصب افزونه می باشد. اگر دوست ندارید خودتان از طریق کد نویسی این کار را انجام دهید، می توانید با نصب افزونه WPFront Scroll Top به راحتی این دکمه را در سایت خود قرار دهید. این افزونه تاکنون بیش از 80000 بار نصب داشته است. این افزونه محصول Syam Mohan می باشد.
ویژگی های افزونه WPFront Scroll Top برای قرار دادن دکمه بازگشت به بالای صفحه
- نمایش دکمه بازگشت به بالا هنگام مراجعه به انتهای سایت
- استفاده از انیمیشن های جذاب هنگام رفتن به بالای صفحه
- لینک به یک عنصر در داخل صفحه
- لینک به یک صفحه مختلف با استفاده از URL
- ایجاد متن، تصویر یا دکمه با فونت زیبا
- قرار دادن هر تصویر دلخواه بجای دکمه پیش فرض
- پنهان شدن دکمه در حالت تصاویر کوچک
- پنهان کردن در iframes
- پنهان شدن خودکار
- و …
نتیجه گیری:
در این مقاله با عنوان آموزش روش های قرار دادن دکمه بازگشت به بالای صفحه در سایت در ابتدا نحوه ساخت دکمه از طریق کد نویسی را به شما اموزش دادیم. سپس یک افزونه برای قرار دادن دکمه بازگشت به بالا به شما معرفی نمودیم. برخی از ویژگی های افزونه WPFront Scroll Top را بر شمردیم. امیدواریم از این مقاله استفاده لازم را برده باشید. با ما در سایر مقالات سایت همراه باشید.
