آموزشوردپرس

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

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

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

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

برای شروع بایستی ، افزونه را Enabled کنید. بعد از آن می توانید تنظیمات مربوط به افزونه را با توجه به نیاز و ظاهر سایت خود ویرایش کنید.

ظاهر این دکمه را نیز می توانید با توجه به طرح های آماده یا طرح دلخواهی که خودتان درست کردید انتخاب و فعال کنید.

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

برای اینکه به صورت دستی دکمه بازگشت به بالا را اضافه کنید، ابتدا باید یک فایل text روی سیستم خود درست کنید. آن را به نام smoothscroll.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;
        });
});

این فایل را بایستی داخل پوشه js در theme فعال خود ذخیره کنید.

حالا بایستی فایل function.php قالب فعال خود را باز کنید. و کد زیر را درون آن کپی کنید:

wp_enqueue_script( 'smoothup', get_template_directory_uri() . 'https://آدرس سایت شما.com/js/smoothscroll.js', array( 'jquery' ), '',  true );

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

برای ویرایش ظاهر هم کد CSS زیر را می توانید استفاده کنید. فقط توجه داشته باشید که برای دکمه و تصویر استفاده شده در آن آدرس background را بایستی url دلخواه خود را وارد کنید:

#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;
}

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

بهروز فیض

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

نوشته های مشابه

دکمه بازگشت به بالا