Tạo nút back to top cho wordpress

Mình chưa chạy deadlines xong 😥 nhưng mình bị ham hố mấy cái lung tung á huhu. Xin lưu ý, đây là bài viết hướng dẫn dành cho các phiên bản WordPress free (wordpress.com) còn phiên bản WordPress trả phí thì đã có plugin hỗ trợ nha, các bạn có thể search gg để tìm hiểu thêm, có rất nhiều web hướng dẫn về cái này.

Mục lục bài viết:

1. Tạo nút trở về đầu trang (Back/ Scroll to Top)
2. Cách thêm hình logo cố định trên blog
3. Thêm chức năng comment nhanh cho bài viết
_______________

CÁCH TẠO NÚT TRỞ VỀ ĐẦU TRANG (BACK/ SCROLL TO TOP)

• Bước 1: Truy cập vào giao diện chỉnh sửa theme trực quan

Tại trang chủ hoặc 1 bài viết bất kỳ nào trong Blog, bạn trượt con trỏ lên xuống sẽ thấy nút Customize (Tuỳ chỉnh) ở góc dưới bên phải màn hình, bạn bấm vào nút này để vào nhanh giao diện chỉnh sửa theme trực quan. Hoặc bạn có thể truy cập theo từng bước sau: My Site → Appearance → Customize.

• Bước 2: Bấm vào Widgets → Footer 3 (như ở theme mình dùng thì nó là Third Footer)

Tiếp theo bạn tiến hành Add Block (thêm khối) → Gõ Custom HTML để hiện ra nơi chèn nút.

• Bước 3: Copy rồi paste một trong hai đoạn code dưới đây vào block Custom HTML mà bạn vừa tạo (lưu  ý code 1 theo size mặc định của ảnh, nếu bạn muốn sửa size thì copy đoạn code 2 nha).

CODE 1:

(*) Bạn có thể searchcác hình ảnh biểu tượng bằng key search: transparent back to top icon, rồi đổi lại link hình ảnh là được.

CODE 2:

Trong đó:

+) bottom: 3px là khoảng cách đặt nút tính từ dưới lên, có thể tuỳ chỉnh theo ý riêng.
+) right: 7px là khoảng cách đặt nút tính phải sang, có thể tuỳ chỉnh sang trái bằng cách thay right bằng left và đổi lại khoảng cách sao cho phù hợp.
+) img src=”https…” là nơi chứa link hình ảnh, bạn paste link ảnh mà bạn ưng vào nhé.
+) width=”45″ là độ rộng hình ảnh, bạn có thể sửa thành 30, 35, 40, 50… tuỳ theo ý muốn.
+) height=”45″ là chiều dài hình ảnh, tương tự bạn cũng có thể sửa thành con số bất kỳ mà bạn thấy phù hợp.

Sau khi chỉnh sửa và paste xong xuôi, nút Back to Top sẽ hiện ở góc phải màn hình giống như ảnh dưới đây, bạn chỉ cần lưu lại là xong nè.

Ok vậy là xong rồi, chúc các bạn thành công. 

[MỞ RỘNG] CÁCH THÊM LOGO CỐ ĐỊNH TRÊN BLOG CỦA BẠN

Các bước làm y hệt như bên trên, một vài lưu ý:

+) Nếu muốn đổi vị trí từ bên dưới thành bên trên đầu: Thay bottom -> top
+) Đổi vị trí từ phải sang trái: right -> left
+) Không muốn hiện chú thích khi di chuột vào hình ảnh: Xoá title=”Tên blog của bạn”
+) Còn lại các con số xuất hiện trong code và các thuộc tính khác mình đã có chú thích ở bên trên rồi, các bạn lội lại xem nha.
+) Nếu chỉ muốn biểu tượng xuất hiện trong một post cụ thể: Truy cập vào post cần thêm -> paste code vào block HTML

+) Nếu không muốn khi bấm vào logo sẽ bị đẩy lên đầu trang, sử dụng code dưới đây:

[MỞ RỘNG P2] THÊM CHỨC NĂNG COMMENT NHANH CHO BÀI VIẾT

Chi tiết về cách dùng bạn hãy đọc thêm tại đây: Link

Code mình sử dụng:

Đây là code mẫu, tương tự như các code bên trên, bạn có thể thay đổi lại các thông số theo ý muốn nhé.

Nếu bạn muốn áp dụng code comment nhanh này cho tất cả các post, hãy dán code vào block Custom HTML trong Widget. Còn nếu chỉ muốn áp dụng cho một vài post riêng biệt, hãy dán vào block HTML trong post đó nhé.