Wordpress 附件页面使用键盘导航

Question

我正在使用 WordPress。

我想使用 left 和 right 键导航我的附件页面。

这是我的代码，但没有用；

function GoToLocation(url)
  {
    window.location = url;
  }

  Mousetrap.bind("j", function() {
    //alert('j pressed' + document.getElementById("next").href);
    //document.getElementById("next").click();
    window.location=<?php echo $image->next_image_link ?>;
  });

<script src="https://craig.global.ssl.fastly.net/js/rainbow-custom.min.js?39e99"></script>
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?bc893"></script>

如果我改变那个

window.location=<?php echo $image->next_image_link ?>;

至此

window.location="http://mylink.com";

脚本运行良好。但我不能使用基于 link 的 WordPress（比如 next_image_link();）

我能做什么？

Answer 1

将window.location=<?php echo $image->next_image_link ?>;替换为 window.location="<?php echo $image->next_image_link ?>";。您的字符串声明无效，因此无法使用。

PHP 不会用引号回显 link。

编辑：Wordpress 不只打印 URL。它打印 link 元素。所以解决方案将是

绑定到现有导航
使用regex截断htmt语法

var element = '<?php echo $image->next_image_link ?>'; window.location = element.match(/href="([^"]*)/)[1];

Answer 2

我自己做的，

首先将此添加到顶部

<script src="https://craig.global.ssl.fastly.net/js/rainbow-custom.min.js?39e99"></script>
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?bc893"></script>

然后也添加这个脚本

function GoToLocation(url)
  {
    window.location = url;
  }
  Mousetrap.bind("right", function() {
document.getElementById('next-page').click();
  });



function GoToLocation(url)
  {
    window.location = url;
  }
  Mousetrap.bind("left", function() {
document.getElementById('prev-page').click();
  });

最后，将 "next-page" , "prev-page" ID 放到 link 标签的位置例如；

<a id="next-page"></a>

或

<a id="prev-page"></a>

因此，当您按下左或右键盘按钮时，脚本将正常运行。再见

Wordpress 附件页面使用键盘导航

Wordpress Attachment Page Navigate with Keyboard

wordpress

mousetrap