Question

我要做的是使用左右箭头键浏览帖子库。

我知道这些密码是e.keyCode == 37和e.keyCode == 39

解决这个问题的最佳方法是什么？

我查看了jQuery键盘插件。

以下是我感兴趣的人的图库按钮

<div id="button-container-bottom">
<?php 
global $page, $pages;
if ($page == count($page)): 
$previous_post = get_previous_post(); 
?>
<div class="previous-gallery-button-container">
  <a href="<?php echo get_permalink( $previous_post->ID ); ?>"><span class="gallery-button meta-item">Previous Gallery</span></a>
</div>
<?php

endif;

wp_link_pages( array( 'before' => '<div style="text-align: center;" class="page-link-next-prev">', 
'after' => '', 'previouspagelink' => '<span class="gallery-button meta-item">Previous post</span>', 'nextpagelink' => '', 
'next_or_number' => 'next' ) ); 
//echo('<div class="numberof"><span style="text-align: center;">'.$page.' of '.count($pages).'</span></div>');

wp_link_pages( array( 'before' => '', 'after' => '</div>', 'previouspagelink' => '', 
'nextpagelink' => '<span class="next-gallery-button meta-item">Next post</span>', 'next_or_number' => 'next' ) ); 

?>


<?php
// If the current page equals the last page
if ($page == count($pages)): 

  $next_post = get_next_post(); 
  // Then spit out the next link
  ?>

<div class="next-gallery-button-container">
  <a href="<?php echo get_permalink( $next_post->ID ); ?>"><span class="next-gallery-button meta-item">Next Gallery</span></a>
</div>

<?php
// End the if statement
endif; ?>
</div>

现在我不是世界上最好的编码器，但是到目前为止管理还可以，让用户也可以使用他们的键盘浏览每个帖子页面。

编辑 - 我的目标是在每个帖子中使用该功能。目的是在该特定帖子中的每个页面之间切换，但是在最后一页上或者在第一页上导航时可以导航到下一个帖子到上一篇文章。

<script>

jQuery(document).keydown(function(e){

if (e.keyCode == 37) {
// alert( "left pressed" );
window.location = "<?php echo get_permalink( $previous_post->ID ); ?>";
//alert('prev');
return false;
}

if (e.keyCode == 39) {
window.location = "<?php echo get_permalink( $next_post->ID ); ?>";
//alert('next');
return false;

}
});

</script>

Answer 1

获取上一个和下一个链接并将其添加到javascript。

PHP

<?php

   $prev_next_urls = ['prev' => '', 'next' => ''];

   $prev_post = get_previous_post();
   if (!empty( $prev_post )){
     $prev_next_urls['prev'] = get_permalink( $prev_post->ID );
     echo '<a href="'. $prev_next_urls['prev'] .'">'. $prev_post->post_title .'</a>';
   }

   $next_post = get_next_post();
   if (!empty( $next_post )){
     $prev_next_urls['next'] = get_permalink( $next_post->ID );
     echo '<a href="'. $prev_next_urls['next'] .'">'. $next_post->post_title .'</a>';
   }
?>

在按键上，如果存在，我们可以导航到上一页和下一页。

JS

<script>
window.onkeydown = keydown;
var next_prev_urls = <?php echo json_encode($prev_next_urls);?>;

function keydown(e) {
  if(e.which === 37 && next_prev_urls['prev']){ // Previous
    window.location.href = next_prev_urls['prev'];
  }else if(e.which === 39 && next_prev_urls['next']){ // Next
    window.location.href = next_prev_urls['next'];
  }

}
</script>

使用键盘箭头浏览图库

1 个答案:

PHP

JS