1. خانه
  2. کسب و کار اینترنتی
  3. آموزش ساخت دکمه بازگشت به بالا در وردپرس (با کد و افزونه)

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

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

برای افزایش بازدید از مقالات، بهبود تجربه کاربری (UX) از الزامات سایت شما می باشد. هرچقدر محتوای سایت شما طولانی تر باشد، برای بهبود UX باید از دکمه بازگشت به بالا (Back to Top) در صفحات خود استفاده کنید.

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

در این آموزش از بلاگ میزبان نت از دو روش کدنویسی و افزونه، نحوه ساخت دکمه بازگشت به بالا در وردپرس را با هم بررسی خواهیم کرد. با ما همراه باشید.

دکمه بازگشت به بالا (Back-to-Top Button)

یکی از موضوعات پر طرفدار حال حاضر، افزایش طول محتوای سایت و مقالات می باشد. افزایش میزان محتوا باعث کارایی بیشتر و بازدید آن ها می شود؛ از طرف دیگر روی SEO سایت هم تاثیر مثبت خواهد گذاشت. اما صرف نظر کردن از تجربه کاربری (UX) یعنی مرگ یک سایت.

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

 

ساخت دکمه بازگشت به بالا با کد HTML

با این روش شما به صورت دستی می توانید روی ظاهر و عملکرد دکمه Back-to-Top کنترل داشته باشید. از طرف دیگر سایت خود را از تعدد افزونه های وردپرسی خلاص می کنید.

از آن جهت که در این روش روی کدهای قالب وردپرس کار می شود، توصیه می کنیم همه تغییرات را روی پوسته child سایت انجام دهید.

 

قدم ۱

اولین مرحله دسترسی به فایل های سایت خود از طریق هاست سی پنل، یا از طریق FTP می باشد. بعد از ورود به پوشه قالب خود از آدرس js < your theme < themes < wp-content، وارد پوشه js قالب خود شوید. در این پوشه باید یک فایل JavaScript برای اجرای دستورات ایجاد کنیم.

 

قدم ۲

یک فایل با عنوان totop.js درون پوشه js قالب بسازید. سپس با استفاده از قابلیت Edit کنترل پنل هاست خود یا از طریق  FTP، این فایل را باز کنید. کدهای زیر را درون آن قرار بدید:

jQuery(document.ready(function($){
    var offset = 100;
    var speed = 250;
    var duration = 500;
        $(window).scroll(function(){
            if ($(this).scrollTop() < offset) {
                      $('.toTop') .fadeOut(duration);
            } else {
                      $('.toTop') .fadeIn(duration);
            }
        });
     $('.toTop').on('click', function(){
            $('html, body').animate({scrollTop:0}, speed);
            return false;
            });
});

شما با تغییر مقادیر speed و duration می توانید نوع حرکت بازگشت به بالای صفحه را کنترل نمایید. تا اینجا کار ما با فایل js. تمام شده است.

قدم ۳

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

اگر درون کتابخانه وردپرس عکس را آپلود کردید، url یا آدرس لینک آن را نزد خود نگاه دارید.

 

قدم ۴

حال باید به این دکمه استایل دهیم. تغییر استایل از طریق فایل style.css درون قالب وردپرس امکان پذیر است. درون پوشه child قالب خود فایل style.css را با زدن گزینه Edit باز کنید؛ سپس کدهای زیر را درون آن قرار دهید:

.toTop {
     height:50px;
     width:50px;
     position:fixed;
     right:5px;
     bottom:5px;
     Z-index:1;
     background-image:url("http://example.com/wp-content/uploads/2015/01/topbutton.png");
     background-repeat:no-repeat;
     display:none;
}

در property مربوط به background-image آدرس تصویر آپلود شده در کتابخانه وردپرس را قرار دهید.

 

قدم ۵

برای اینکه قالب شما بداند که فایل جاوااسکریپت جدیدی برای آن ایجاد کرده اید، باید در فایل functions.php پوسته، آن را تعریف نمایید. در نتیجه این فایل را در مسیر اصلی قالب پیدا کرده و با حالت Editor باز نمایید. سپس کد زیر را درون آن قرار دهید:

function toTop_script_function () {
     wp_enqueue_script(
           'to-top-script',
           get_stylesheet_directory_uri() . '/js/totop.js',
           array( 'jquery' )
     );
}

add_action( 'wp_enqueue_scripts', 'toTop_script_function' );

بعد از این کار فایل را ذخیره کرده و به مرحله نهایی بروید.

 

قدم ۶

در این مرحله باید برای سایت خود آیکون یا تصویر بازگشت به بالا را تعریف نماییم. برای این کار باید از یک خط کد HTML استفاده کنیم. درون مسیر اصلی قالب وردپرس، فایل footer.php را پیدا کرد و با حالت  Editor باز کنید. سپس کد زیر را قبل از تگ </body> قرار دهید:

<a href="#" class="toTop"></a>

فایل را ذخیره نمایید و از این دکمه در صفحه خود لذت ببرید.

 

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

اگرچه روش کدنویسی برای توسعه دهندگان آسان است و ترجیح داده می شود، اما اگر تخصصی در کدنویسی ندارید می توانید از افزونه های ساخت دکمه بازگشت به بالا (Back-to-Top) استفاده نمایید. در این آموزش سه افزونه معروف را معرفی خواهیم کرد.

 

افزونه To Top بهترین برای ساخت دکمه بازگشت به بالا

افزونه وردپرس to top plugin

To Top یک افزونه سبک برای حرکت صفحه به بالا می باشد. با استفاده از این افزونه می توانید سایز، رنگ و موقعیت آیکون را تنظیم نمایید. ویژگی مثبت این افزونه، امکان تنظیم گزینه های مخصوص حالت گوشی می باشد.

برای افزایش کارایی و تجربه بهتر، با استفاده از افزونه To Top می توانید تعیین کنید که چه زمانی آیکون بازگشت به بالا ظاهر شود.

صفحه افزونه

 

افزونه WPFront Scroll Top

افزونه وردپرس wpfront scroll top

اگرچه این افزونه به اندازه To Top قابلیت های بالا ندارد، اما می تواند به عنوان یک گزینه مناسب در نظر گرفته شود. قابلیت های افزونه WPFront Scroll Top شامل قرار دادن هر تصویر به جای آیکون، استفاده از آیکون های Font Awesome و تغییر شکل آیکون می باشد.

با اینکه این افزونه باعث نمایش درست تصویر و آیکون در همه دستگاه ها و مرورگرهای می شود، اما گزینه ای وجود دارد که در اندازه تصاویر کوچک آیکون یا تصویر را نمایش ندهد.

صفحه افزونه

 

افزونه Page scroll to id

افزونه وردپرس page scroll to id برای دکمه بازگشت به بالا

مانند دو افزونه دیگر، افزونه Page scroll هم به راحتی قابل استفاده می باشد. نکته خاص این افزونه امکان اضافه کردن حالت اسکرول مختلف برای صفحه می باشد. این قابلیت برای سایت های تک صفحه وردپرس عالی می باشد.

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

صفحه افزونه

 

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
فهرست