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

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

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

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

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

اهمیت داشتن دکمه اسکرول به بالای صفحه در وردپرس

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

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

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

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

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

در واقع اسکرول به بالا زمانیکه صفحه طولانی دارید و می خواهید به راحتی بالای صفحه برگردید بسیار می تواند برای سایت شما مفید لاست و برای اینکار شما باید کمی کد نویسی کنید و قبلا یک افزونه ای هم بود به نام Simple Scroll to Top Button که این قابلیت را برای دوستان وردپرسی فراهم می کرد ولی الان حدود 2 سال است که این افزونه از دسترس در مخزن وردپرس خارج شده است و آپدیتی صورت نگرفته و شما باید این کار را با استفاده از کد نویسی JQuery انجام دهید.

آموزش کد اسکرول به بالا صفحه در وردپرس

وقتی که یک مقاله در سایت شما دارای محتوا زیادی باشد کاربر شما مجبور است که برای خواندن و مطالعه آن مقاله اسکرول را به پایین آورد و با اسکرول به پایین تمام لینک های ناوبری به بالا سایت شما منتقل می شوند و زمانی که کاربران در حال مطالعه مقاله سایت شما هستند زمانی که در حال اسکرول به پایین می باشند دکمه به نام Scroll To Top در مقاله سایت شما به کاربران به سرعت نمایش داده می شود و با کلیک بر روی این دکمه به بالای مقاله سایت شما منتقل و راهی می شوند و شما می توانید این را بدون نیاز به کد نویسی JQuery و با استفاده از لینک متن زیر انجام دهید :

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

کار این تکیه کد بالا فقط این است که کاربران را بعد از کلیک بر روی آن دکمه به بالای صفحه منتقل شوند فقط همین و این مورد کاربردی است ولی اما یک مانع در این مسیر وجود دارد و این هم دقیقا Smooth Scroll مخالف این موضوع می باشد و بهتر است که این اسکرول کمی سرعت کمتری داشته باشد و آهسته حرکت کند که باعث بهبود یک تجربه کاربری زیبا تر شود

آموزش افزودن کد JQuery برای رفتن به بالای صفحه در وردپرس

برای اضافه کردن این اسکرول از JQuery باید کمی کد نویسی های CSS و Html در قالب وردپرس خود انجام دهید که برای این کار اول از همه یک فایل در سیستم شخصی خود یک فایل باز کنید و آن را با نام 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/ آپلود کنید و اگر که این فایل در دایرکتوری شما وجود ندارد مشکلی ندارد این پوشه را بسازید و فایل را در این پوشه قرار دهید و این کد اسکریپت جی کوئری است که اسکرول های موثر را به عنوان یک دکمه به کاربران برای انتقال آن ها به بالای صفحه اضافه می کند.

افزودن فایل Smoothscroll.js به قالب سایت

در این مرحله شما باید فایل اسکریپت خود را به قالب سایت برای شناسایی کد نویسی کنید و برای این کار شما باید کد زیر را به فایل Functions.php قالب سایت خود اضافه کنید :

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

در کد بالا به وردپرس شما گفته می شود که فلان اسکریپت جدید را شناسایی و بارگذاری کن و همچنین کتابخانه کد های جی کوئری را از آن قسمت که به افزونه ها وابسته به آن می باشند بارگذاری می کنند و اکنون که کد جی کوئری را به سایت خود اضافه کردیم باید یک لینک به سایت وردپرسی خود اضافه کنید که کاربران را به بالای صفحه منتقل کند و این کد Html زیر را به فایل Footer.php قالب خود اضافه کنید :

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

همانگونه که در کد نویسی بالا متوجه شدید ما فقط یک لینک به سایت خود اضافه کردیم ولی متنی برای آن مشخص نکرده ایم و دلیل آن هم مشخص است که می خواهیم یک آیکون یا یک تصویر را در سایت خود مشخص کنیم که به جای متن استفاده شود و در این کد زیر ما یک آیکون 40px در 40px استفاده کرده ایم و آن را به قالب سایت خود اضافه کرده کنیم و شما باید برای افزودن این دکمه تصویری کد زیر را در فایل Style.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/2024/07/top_icon.webp"); 
-webkit-transition-duration: 0.4s; 
-moz-transition-duration: 0.4s; transition-duration: 0.4s; 
}

#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}

در کد نویسی بالا ما از موقعیت مکانی ثابت برای آیکون و تصویر خود استفاده کرده ایم و شما می توانید آیکون تصویر انتخابی ما را با جایگزینی آدرس http://www.example.com/wp-content/uploads/2024/07/top_icon.webp که در کد بالا مشخص است به جای تصویر ما تغییر دهید و به همین راحتی شما می توانید دکمه اسکرول به بالا را در سایت خود اضافه کنید

موفق و پیروز باشید 😘