Code nút ảo chuyển nhanh đến phần bình luận của WordPress
  1. Home
  2. Phần mềm
  3. Code nút ảo chuyển nhanh đến phần bình luận của WordPress
Nguyễn Văn Luyến 4 năm trước

Code nút ảo chuyển nhanh đến phần bình luận của WordPress

Nếu bạn sở hữu một trang web, với nội dung bài viết cực kỳ dài, hay những bài viết của bạn có một lượng lớn người dùng bình luận, thì về cơ bản điều này sẽ gây ra việc nội dung của trang sẽ rất dài, đôi khi khiến cho đọc giả phải ngồi kéo chuột xuống tít dưới cùng mới có thể bình luận.
Chính vì lý do này, nên mình quyết định viết một cái nút nho nhỏ, với chức năng thống kê số lượng bình luận trong bài viết đó, cũng như nhằm giúp cho đọc giả chú ý, nhấn vào để chuyển nhanh đến ô nhập bình luận.

nút chuyển nhanh đến ô nhập bình luận

Code nút chuyển nhanh đến ô nhập bình luận

Đầu tiên mở file header.php trong thư mục theme mà bạn đang sử dụng lên. Thêm lệnh gọi file jQuery vào trước thẻ đóng

Tiếp theo bạn cần phải xác định được file có nhiệm vụ hiển thị nội dung bài viết của website của bạn.

nút chuyển nhanh đến ô nhập bình luận

Mở file single.php trong thư mục theme mà bạn đang sử dụng lên. Xem xem có đoạn code bôi đỏ như trên với chức năng gọi một trang php khác vào không?. Thì ở trên mình xác định được file có nhiệm vụ hiển thị nội dung bài viết là file content-single nằm trong thư mục /template-parts.

nút chuyển nhanh đến ô nhập bình luận

Vào thư mục tenplate-parts, Chọn vào file content-single.php và chỉnh sửa nó ngay. Bạn thêm đoạn code bên dưới vào cuối cùng nội dung của file content-single.php.




…/images/chat.png’ thay thế đường dẫn này bằng đường dẫn biểu tượng icon của bạn (kích thước icon khoảng 50 x 50 px là vừa).
scrollTop: $(“#respond”) chú ý đến đoạn script này. Bạn cần thêm class hoặc id của thẻ bao ngoài ô nhập bình luận, để khi bạn nhấn vào nút, nó sẽ chuyển đến khung bình luận ngay.

nút chuyển nhanh đến ô nhập bình luận

Trên Chrome, sử dụng công cụ Kiểm tra (CTRL + SHIFT + I) để kiểm tra xem thẻ div bao ngoài ô nhập bình luận có id hoặc class là gì.

nút chuyển nhanh đến ô nhập bình luận

Trên Firefox, sử dụng công cụ Kiểm tra phần tử HTML.

Như trên, mình xác định được thẻ div bao ngoài ô nhập bình luận có id là #respond. Dùng id này để thêm vào đoạn scrollTop: $(“id của thẻ div”) ở trên.

Tiếp theo bạn sao chép đoạn code css bên dưới rồi dán vào file style.css trong thư mục theme mà bạn đang sử dụng.

/* Nut thông báo số bình luận */
#nutms {
position: fixed;
bottom: 10px;
left: 10px;
z-index: 99;
border: none;
outline: none;
background-color: #009900;
color:#fff;
cursor: pointer;
border-radius:30px;
opacity: 0.7;
}

#nutms:hover {
background-color: #555;
}
.nutms {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.nutms .nutchu {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -40px;
opacity: 0;
transition: opacity 0.3s;
}

.nutms .nutchu::after {
content: "";
position: absolute;
top: 100%;
left: 34%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}

.nutms:hover .nutchu {
visibility: visible;
opacity: 1;
}

Cuối cùng sau khi đã làm xong các bước nêu trên, bạn lưu các file lại. Vào một bài viết bất kỳ rồi nhấn CTRL + F5 để xem kết quả nhé (nếu đang sử dụng plugin lưu cache thì xóa cache cũ đi hoặc tắt plugin đi để trang web có thể làm mới).

Chúc các bạn thành công!

Nguồn: //caodem.com/code-nut-ao-chuyen-nhanh-den-phan-binh-luan-cua-wordpress/

1 lượt xem | 0 bình luận
Tác giả vẫn chưa cập nhật trạng thái

Avatar

Bình luận gần đây

//rongcon.net
Nguyễn Văn Luyến 3 tuần trước
Ưng dụng này rất hay cho người hay thực hiện các biểu mâu, thư mời,...
//rongcon.net
Nguyễn Văn Luyến 1 tháng trước
Chuẩn bị lại lên giá
//rongcon.net
Chuyển Đổi Số 6 tháng trước
Có trang nguồn mình tải á, bạn qua trang đó xem thử. Mình cài được bình thường á
//rongcon.net
Chuyển Đổi Số 6 tháng trước
Mỉnh cũng thấy cái gì hay hay lưu lại trên trang cá nhân khi nào cần lấy ra dùng thôi à. Cảm ơn bạn nhiều!
//rongcon.net
quang tuấn 6 tháng trước
ok cám ơn add
//rongcon.net
Đàm kiên 10 tháng trước
sao không thấy hướng dẫn khắc phục lỗi the macro vậy
//rongcon.net
Đàm kiên 10 tháng trước
file tải về chỉ có 3 file hướng dẫn chứ không có file cài đặt nhé
//rongcon.net
Nguyễn Văn Luyến 1 năm trước
Bài viết hay
ZaloMessengerEmail
Đồng ý Cookie
Trang web này sử dụng Cookie để nâng cao trải nghiệm duyệt web của bạn và cung cấp các đề xuất được cá nhân hóa. Bằng cách chấp nhận để sử dụng trang web của chúng tôi