Dùng phím mũi tên để next và prev post trong wordpress

Cập nhật lần cuối 16/03/2017 by trong WordPress vào 13/10/2013 có 2178 Views

Bài này sẽ giúp chúng ta dùng phím mũi tên (trái và phải) để next hoặc Prev bài viết trong trang single. Để làm được điều này trước tiên bạn phải chèn thư viện jQuery vào web của mình rồi nhỉ?

dung phim mui ten de next prev bai viet

Thư viện jQuery trên google

Nếu bạn không sử dụng thư viện jquery của WordPress thì bạn cần thêm thư viện ngoài vào. Dưới đây là thư viện online từ google

Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.

Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều

<!--Thư viện jQuery bắt buộc để chạy Jquery trong trang web-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Chèn link Next và Prev bài viết

sau đó bạn tạo 2 link để next và prev ví dụ như sau. Bạn đặt code sau vào trang single.php nhé

<div class="navButtons">
 <span class="prev"><?php previous_post_link( '%link', __( 'Bài Trước', '' )); ?></span>
 <span class="next"><?php next_post_link( '%link', __( '& &nbsp;&nbsp;Bài Sau', '' ) );?></span>
</div>

Đây là code để ấn phím mũi tên có thể next và prev post trong wordpress.

<script type="text/javascript">
 $(function(){
 $(document).keyup(function(e){
 if(e.keyCode=='37'){
 var url1 = $('.navButtons .prev a').attr('href');
 if(url1){window.location = url1;}
 }
 if(e.keyCode=='39'){
 var url2 = $('.navButtons .next a').attr('href');
 if(url2){window.location = url2;}
 }
 })
 });
</script>

Đây là tổng hợp các jquery char codes
Chúc bạn thành công!

5/5 - (2 votes)
  • Bình luận
Sản phẩm nổi bật của Toản
x