试图在主页和底部发布一些Javascript

Question

  <script type="text/javascript">

  function toggleDiv() {
    var triggeredDiv = document.querySelector('.triggeredDiv');
    if (document.getElementById('myonoffswitch').checked) {
      triggeredDiv.classList.remove('shown');
    } else {
      triggeredDiv.classList.add('shown');
    }
  }
  document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);

  </script>

我需要在主页底部打印这个Javascript的片段.

我知道我可以使用这样的functions.php命令来做到这一点：

function for_homepage() {
    return 'JavaScript HERE';
}
add_shortcode('for_homepage', 'for_homepage');

然后我的短代码将是[for_homepage]，但我不认为这是最好的方法-我认为最好的脚本？

此外，出于速度原因，我是否应该直接将其打印在页面上(在页面底部，它需要这样做)？

谢谢!

顺便说一句，这是为了使这个开关工作：https://proto.io/freebies/onoff/

++++++

更新

我认为这可能是更好的办法：

function add_inline_script() {
  echo "<script>/* do awesome things */</script>\n";
}
add_action( 'wp_head', 'add_inline_script', 0 );

但是-我会将wp_head更改为正确的页脚函数.

这是最好的办法吗？

Answer 1

您可以根据主页的不同使用是_前面_页面()或是_首页()函数。另外，您可以使用wp_head代替wp_排队_脚本，您的代码如下所示

function add_inline_script() {
    if(is_home() || is_front_page)
    wp_enqueue_script('js-handler-name', 'js-url');
}
add_action( 'wp_enqueue_scripts', 'add_inline_script');