Tạo nút trở về đầu trang trong WordPress không dùng Plugin [2 bước]

Tạo nút trở về đầu trang cho Website để làm gì?

Tạo nút trở về đầu trang (hay Back Top Top) cho những Website có nội dung dài là hoàn toàn cần thiết, giúp độc giả điều hướng trên Website được thuận tiện hơn. Đặc biệt website WordPress đang phát triển rất mạnh như hiện nay mà bạn lại đang sử theme WordPress không hỗ nút trở về đầu trang thì phải làm thế nào?

Bài viết hôm nay Kênh hướng dẫn sẽ chỉ ra chó bạn cách tạo nút trở về đầu trang trong trong Worspress đơn giản sau 2 bước. Bạn chỉ cần làm theo hướng dẫn được chia sẻ trong bài viết này là đã có thể thêm dễ dàng nút Back to top cho Website WordPress mà bạn đang sử dụng rồi.

Ưu nhược điểm của cài Plugin để Tạo nút trở về đầu trang

Cài Plugin trong WordPress là một giải pháp nhanh chóng và tiện lợi, dễ làm, nhưng ngược lại bạn lại phải chịu những sức ép về việc thiếu an toàn, ảnh hướng tới tốc độ load trang cũng như bảo mật của Website.

Như các bạn thấy, Website Kênh hướng dẫn các bạn đang vào đây có tốc độ load rất nhanh vì mình sử dụng rất ít Plugin, cái gì code được là mình tự code luôn. Nút trở về đầu trang ở trên trang cũng chính là Code Demo cho bạn luôn. (Yên tâm sử dụng nhé).

Cách tạo nút trở về đầu trang cho WordPress

Bước 1 – Chỉnh sửa file footer.php

Đầu tiên, bạn cần thêm đoạn sau vào file footer.php của theme mà bạn đang sử dụng, đường dẫn có thể khác nhau theo theme WordPress, chính vì vậy mình xin nhắc lại là vào file footer.php của theme mà bạn đang sử dụng, tránh tình trạng cài nhiều theme rồi chọn nhâm file.

Tiếp đến bạn thêm trước thẻ đóng body

<!– Scroll back to top –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”></script>
<div id=”backtotop”>
<a href=”javascript:void(0)” class=”backtotop”></a>
</div>
<script type=”text/javascript”>
$(function () {
$(“#backtotop”).hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 500) {
$(‘#backtotop’).fadeIn();
} else {
$(‘#backtotop’).fadeOut();
}
});
});
jQuery(‘.backtotop’).click(function () {
jQuery(‘html, body’).animate({
scrollTop: 0
}, ‘slow’);
});
</script>
<!– End of Scroll back to top –>

Bước 2 – Chỉnh sửa file style.css

Sau đó bạn thêm đoạn css sau vào file style.css của theme WordPress đang sử dụng. Bạn cũng cần có một chút kiến thức về css để căn chỉnh cũng như bố trí sao cho phù hợp nhất với Website của mình.

#backtotop {
bottom: 7px;
display: none;
margin: 0 20px 20px 0;
position: fixed;
right: 0;
z-index: 2;
}
#backtotop a {
background: url(“/wp-content/uploads/2019/06/top.png”) no-repeat scroll 50% 50% rgba(0, 0, 0, 0.5);
border: 0 none;
display: block;
height: 40px;
text-decoration: none;
transition: all 0.1s ease-in-out 0s;
width: 40px;
}
#backtotop a:hover {
-webkit-box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.5);
box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.5);
background-color: red;
}

Kết quả: Như vậy ở bài viết trên mình đã hướng dẫn bạn cách tạo nút trở về đầu trang cho wordpress mà không cần sử dụng đến bất kỳ plugin nào rồi đó.

Một số lưu ý khi tạo nút trở về đầu trang cho WordPress

Đường dẫn JS và ảnh Backgroud trong css có thể tải về máy chủ của bạn để giảm thiểu thời gian load trang, Ảnh nút trở về đầu trang cũng có thể thay tùy thích sao cho phù hợp với sở thích cũng như bố cục website của bạn.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”></script>
background: url(“/wp-content/uploads/2019/06/top.png”)

Lời kết

Hy vọng với 2 bước đơn giản này này đã giúp bạn tạo được nút trở về đầu trang thành công.

Xem thêm

[Giới thiệu khóa học Thiết kế Web chuẩn SEO bằng WordPress cho người mới bắt đầu]

[wpcc-iframe title=”Thiết kế web chuẩn SEO bằng wordpress cho người mới bắt đầu_David Thanh” width=”769″ height=”433″ src=”https://www.youtube.com/embed/39VVCO8KsG4?feature=oembed” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen]

Các kiến thức sẽ học được sau khóa học Thiết kế Web chuẩn SEO bằng WordPress

Các thành phần cốt lõi tạo nên một webside hoạt động trong môi trường internet
Thiết kế webside thứ nhất theo giao diện cơ bản simple
Thiết kế webside thứ hai theo giao diện nâng cao – landing pro
Tích hợp giao diện bán hàng thời trang với woocommerce
Thiết kế website thứ 3 đẹp tuyệt vời từ bộ src bên thứ 3
11 bước đưa website lên top google mà không cần phải quảng cáo
Thực hành chuẩn seo 100% cho website wordpress
Các công cụ hỗ trợ đánh giá đo lường và làm seo hiệu quả
Phát triển kinh doanh online bền vững
Tạo 2 live chat tự động với v chat và facebook chat
Tích hợp thanh toán tự động qua ngân hàng
Thiết kế form để thu thập data khách hàng mục tiêu
Phát triển quang hệ và bán hàng tự động bằng email auto responder
Chiến lược tăng doanh thu và lợi nhuận của boss

ĐĂNG KÝ HỌC THỬ KHÓA HỌC VÀ NHẬN ƯU ĐÃI GIẢM GIÁ 40%

Nội dung khóa học Thiết kế Web chuẩn SEO bằng WordPress

Phần 1: Các thành phần cốt lõi tạo nên một Website hoạt động trong môi trường Internet

Phần 2: Thiết kế Website thứ nhất theo giao diện cơ bản Simple

Phần 3: Thiết kế Website thứ hai theo giao diện nâng cao – Landing pro

Phần 4: Tích hợp giao diện bán hàng thời trang với WOOCOMMERCE

Phần 5: Thiết kế website thứ 3 đẹp tuyệt vời từ bộ src bên thứ 3

Phần 6: 11 bước đưa website lên Top Google mà không cần phải quảng cáo

Phần 7: Thực hành chuẩn seo 100% cho website wordpress

Phần 8: Các công cụ hỗ trợ đánh giá đo lường và làm seo hiệu quả

Phần 9: Phát triển kinh doanh online bền vững