使用键盘箭头在帖子中导航

时间:2019-09-27 作者:sound wave

我正在本地主机上构建我的网站,我想通过使用键盘上的左右箭头键导航到下一篇和上一篇文章。

我知道WP功能get_adjacent_post, get_next_postget_previous_post, 但由于我是新手,我不知道如何使用它们。

我找到了这个代码并把它放在了网站的标题中

<script type="text/javascript">
    document.onkeydown = function (e) {
        var e = e || event, 
        keycode = e.which || e.keyCode; 
        if (keycode == 37 || keycode == 33)
            location = "<?php echo get_permalink(get_previous_post()); ?>";
        if (keycode == 39 || keycode == 34)
            location = "<?php echo get_permalink(get_next_post()); ?>";
    }
</script>
好的是按下左/右箭头会发生一些事情,坏的是没有加载上一个/下一个帖子,比如http://localhost/testsite/%3C?php%20echo%20get_permalink(get_next_post());%20?%3E 而是加载。

如何修复此问题?

1 个回复
最合适的回答,由SO网友:Antti Koskinen 整理而成

您正在使用get_next_postget_previous_post 正确使用get_permalink. next和prev函数返回WP_Post 对象或错误值。permalink函数接受post对象或有效的post ID,并将post url作为字符串返回(如果找到),否则返回布尔值false。

我测试了您发布的代码,将其复制粘贴到主题的头文件中,作为之前的最后一件事</head> 它如预期的那样工作。当然,当没有下一个或上一个帖子导致位置为空时,就会出现愚蠢的重新加载行为。也许你的代码中还有其他东西破坏了代码?

您是否尝试过使用动作挂钩添加代码?例如,这是可行的(在我的本地WP安装上)。

function arrow_key_post_navigation() {

  $prev_post_url = get_permalink( get_previous_post() );
  $prev_post_url = $prev_post_url ? esc_url( $prev_post_url ) : \'\';

  $next_post_url = get_permalink( get_next_post() );
  $next_post_url = $next_post_url ? esc_url( $next_post_url ) : \'\';

  if ( ! $prev_post_url && ! $next_post_url ) {
    return;
  }
  ob_start();
  ?>
  <script type="text/javascript">
    document.onkeydown = function (e) {
      var e = e || event,
      keycode = e.which || e.keyCode,
      prevUrl = "<?php echo $prev_post_url ?>",
      nextUrl = "<?php echo $next_post_url ?>";
      if ( (keycode == 37 || keycode == 33) && prevUrl ) {
        location = prevUrl;
      }
      if ( (keycode == 39 || keycode == 34) && nextUrl ) {
        location = nextUrl;
      }
    }
  </script>
  <?php
  echo ob_get_clean();
}
add_action( \'wp_footer\', \'arrow_key_post_navigation\' );