Thủ thuật WordPress: Chuyển trang kế tiếp bằng bàn phím

keyboard-buttons-with-arrows-icons_21-52471813Sử dụng phím tắt để chuyển trang chắc chắn là một cái gì đó thật sự thú vị với người dùng, vì thế nếu được bạn hãy tích hợp thêm chuyển trang kế tiếp bằng bàn phím theo hướng dẫn ở bài này của mình dưới đây.

Thông thường, mình thường đọc báo hay đọc tin tức, hoặc lướt bất kỳ website nào mình cũng kết hợp phím SpaceShift+Space để lên xuống website nhanh hơn, nếu ngược ngược tay thì dùng phím PgUpPgDn cũng rất ổn. Cái này mà mặc định của trình duyệt sẽ cho phép bạn làm điều đó.

Nhưng ở đây mình không nói tới việc chuyển động lên xuống của 1 page trong website mà là chuyển tới trang kế tiếp bằng phím tắt bạn quy định sẵn trong code. Chúng ta không sử dụng PHP mà là jQuery, việc cần làm là cho đợn code dưới đây vào bất kỳ file JS nào trong theme của bạn sau khi chọn được phím tắt thích hợp:

$(document).keydown(function(e){
 if (e.which == 90) { // left arrow
 if(!prev) return false;
 window.location.href = $('link[rel=prev]').attr('href');
 }
 if (e.which == 77) { // right arrow
 if(!next) return false;
 window.location.href = $('link[rel=next]').attr('href');
 }
 });

Trong đoạn js trên bạn thấy có 2 con số 90 và 77, đó chính là ký tự thay thế cho phím bạn cần sử dụng để chuyển trang, ở đây là phím Z và M. Bây giờ bạn chỉ cần thêm một đoạn code HTML vào chổ nào đó dễ nhìn thông báo cho người dùng biết 2 phím tắt trên là ok rồi. Đảm bảo người dùng của bạn sẽ có một trải nghiệm thú vị trên website của bạn.

Bạn có thể xem số của từng phím tại đây.

Thủ thuật WordPress: Chuyển trang kế tiếp bằng bàn phím 3.20/5 (64.00%) 5 votes

Hãy bình luận, góp ý bằng Disqus để được hồi đáp nhanh hơn!
Sử dụng Facebook hoặc Google nếu không load được Disqus

Nhận nhiều thông tin bổ ích và quà tặng hấp dẫn
từ MELYWEB

Theo dõi blog MELYWEB để nhận được các tin tức bổ ích, khuyến mãi mới nhất, các quà tặng hấp dẫn.