tạo nút back to top wdi blog

Tạo nút Back to Top với plugin WPFront Scroll Top5 phút đọc

Hiện nay nút Back to Top là một phần không thể thiếu của mọi website.Nó giúp người đọc có thể di chuyển nhanh về đầu trang web sau khi đã đọc tới phần cuối.

Hầu hết các theme trả phí hiện nay đều có nút back to top nhưng ở một số theme miễn phí thì không có xuất hiện.Hơn nữa trên vị trí hay giao diện của nút back to top trên nhiều theme trả phí cũng không thực sự tối ưu.

Để khắc phục điều này bạn có thể tự tạo nút back to top theo phong cách riêng của mình với với plugin WPFront Scroll Top.Thiết lập settings cho plugin này tuy nhiều nhưng chúng đều rất dễ hiểu.

Hãy cùng mình tìm hiểu về plugin này luôn và ngay nhé.

Bạn lưu ý là trước khi cài đặt plugin bạn nên sao lưu lại website.Nếu sau khi kích hoạt plugin bạn thấy website của mình có dấu hiệu bất thường về hiển thị hay chức năng thì hãy vô hiệu hóa hoặc xóa plugin đi.Có thể lỗi do xung đột code và điều này có thể xảy ra với bất kì plugin hay theme nào hiện nay.

Tạo nút Back to Top

Cài đặt plugin WPFront Scroll Top

tạo nút back to top với plugin wpfront scroll top 1

Bạn hãy vào thư viện plugin của WordPress và tìm plugin có tên là WPFront Scroll Top giống như hình ảnh trên đây.Sau đó bạn hãy tiến hành cài đặt và kích hoạt plugin này lên.

Ngoài cách cài trực tiếp plugin này thông qua thư viện plugin thì bạn cũng có thể download plugin này về từ trang chủ wordpress và tải lên sử dụng như bình thường.

 

Thiết lập settings cho plugin WPFront Scroll Top

tạo nút back to top với plugin wpfront scroll top 2

Sau khi cài đặt và kích hoạt plugin lên trong menu Settings sẽ xuất hiện thêm một menu con có tên là Scroll Top.Bạn hãy kích vào menu này để đến màn hình thiết lập settings cho plugin WPFront Scroll Top.

Có rất nhiều mục để bạn có thể tùy chỉnh và mình sẽ giải thích qua một số mục nhé.

Enabled : chọn mục này để nút back to top xuất hiện trên website

Scroll Offset : khi cuộn trang được bao nhiêu px thì sẽ xuất hiện nút back to top

Button Size : kích thước nút back to top

Button Opacity : độ mờ của nút back to top

Auto Hide : ẩn nút back to top

Auto Hide After : ẩn nút back to top sau bao nhiêu giây kể từ khi người dùng ngừng cuộn trang

tạo nút back to top với plugin wpfront scroll top 3

Hide on Small Devices : ẩn nút back to top trên thiết bị nhỏ

Small Device Max Width : chiều rộng tối đa của thiết bị nhỏ mà bạn muốn áp dụng

Hide on Small Window : ẩn nút back to top trên màn hình window

Small Window Max Width : chiều rộng tối đa của màn hình window mà bạn muốn áp dụng

Hide on WP-ADMIN : ẩn nút back to top trong màn hình quản trị wordpress

Button Style : định dạng của nút back to top

Location : vị trí nút back to top

Margin X : khoảng cách của nút back to top so với lề trái hoặc phải

Margin Y : khoảng cách của nút back to top so với lề trên hoặc dưới

tạo nút back to top với plugin wpfront scroll top 4

Display on Pages : chọn trang hiển thị nút back to top

Image Button : chọn hình ảnh của nút back to top

tạo nút back to top với plugin wpfront scroll top 5

Custom URL : nếu bạn có ảnh back top top thì bạn có thể upload lên và chọn nó để sử dụng

tạo nút back to top với plugin wpfront scroll top 6

Button Style : trong mục Button Style thì ngoài tùy chọn Image mặc định bạn cũng có thể chọn kiểu Font Awesome 

Nếu bạn nào chưa rõ Font Awesome là gì thì có thể tham khảo bài viết mà mình để link ngay dưới đây.

tạo nút back to top với plugin wpfront scroll top 7

Sau khi bạn chọn Button Style là Font Awesome thì dưới cùng sẽ xuất hiện thêm một số tùy chọn để điều chỉnh hiển thị của nút back to top.

Font Awesome Button :

  • Icon Class : class của icon Font Awesome
  • Font Awesome URL : link dẫn đến thư viện của Font Awesome
  • Icon Color : màu sắc của nút back to top
  • Custom CSS : thêm CSS tùy chỉnh giao diện của nút back to top

tạo nút back to top với plugin wpfront scroll top 8

Trên đây là kết quả sau khi mình thiết lập xong settings cho plugin và nhấn Save Changes.Nút Back to top đã xuất hiện đúng như mình mong muốn.

Kết luận

Vậy là mình đã giới thiệu đến các bạn cách tạo nút back to top bằng cách sử dụng plugin WPFront Scroll Top.Với plugin này bạn có thể tùy chỉnh giao diện, vị trí và cả chuyển động của nút back to top này một cách dễ dàng.

Nếu thấy plugin này có ích thì bạn đừng quên chia sẻ nó cho bạn bè đồng nghiệp nhé.Hẹn gặp lại bạn trong các bài viết khác về wordpress plugin nhé.

Bài viết trước

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x