仅将jQuery脚本应用于WooCommerce产品页面和类别

时间：2017-03-14 作者：Patrick

我有一个脚本，可以自动向下滚动到页面加载时的主要内容。

jQuery(document).ready(function($){
  if ( $(window).width() < 768 || window.Touch) { 
    $(\'html, body\').animate({ scrollTop: $("#primary").offset().top}, 2000);} 
});

1. 然而，我只想将其应用于我们的woocommerce产品页面和类别，因此它在主页/博客页面上不起作用。我该怎么做？

通过编辑WooCommerce核心文件，我可以做得很差，但我知道这是一个可怕的想法，所以我正在寻求有关如何通过我的函数正确执行此操作的帮助。php文件。

2. 此外，我想知道如何将其应用于除主页以外的所有页面，这是以后更好的选择。

非常感谢！

2 个回复

最合适的回答,由SO网友:RRikesh 整理而成

有两种方法可以做到这一点。

1。仅使用JS的WordPress主题通常使用body_class() 作用因此，您将看到<body> tag将有很多类。然后，您可以将具有特定类的页面作为目标，以在JavaScript中运行代码：

if( $(\'body.whateverclass\').length || $(\'body.anotherclass\').length ){
   // Your JS code here
}

2。使用PHP，您可以wp_localize_script() 向代码发送标志。

假设您将一个名为site.js 句柄名称为site, 在您的functions.php 您将拥有：

wp_register_script( \'site\', \'path/to/site.js\' );
wp_enqueue_script( \'site\' );

现在可以添加一些标志：

 wp_register_script( \'site\', \'path/to/site.js\' ); # Unchanged

 $value = \'\';
 if ( is_shop() || is_some_other_condition() ){
    $value = \'yes\';
 }
 wp_localize_script( \'site\', \'MYSITE\', $value );

 wp_enqueue_script( \'site\' ); # Unchanged

然后，您可以检查MYSITE JavaScript中的变量：

if( \'yes\' === MYSITE ){
  // Your JS code here
}

编辑：You asked 如何将其放在页脚中。php：

<script>
jQuery(document).ready(function($){
  if( $(\'body.product-template-default\').length || $(\'body.anotherclass\').length ){
    if ( $(window).width() < 768 || window.Touch) { 
         $(\'html, body\').animate({ scrollTop: $("#primary").offset().top}, 2000); 
    }
  }
});
</script>

SO网友:Dragos Micu

步骤1：将代码另存为一个新的js文件，比如main。js公司

步骤2：向函数添加条件函数。主题的php，可以围绕以下几行来表达：

if (is_shop() || is_product_category()) {
  wp_enqueue_script(\'main\', get_template_directory_uri() . \'/js/main.js\', false, false, true);
}

根据您的需要，检查此页面是否有条件标记：

https://docs.woocommerce.com/document/conditional-tags/

希望有帮助！

编辑：

对于内联脚本，您可以执行以下操作（例如，在footer.php内部）：

if (is_shop() || is_product_category()) {?>
      <script>
          jQuery(document).ready(function($){
              if ( $(window).width() < 768 || window.Touch) { 
                  $(\'html, body\').animate({ scrollTop: $("#primary").offset().top}, 2000);
              } 
          });
      </script>
<?php}

如何通过jQuery Datepicker搜索帖子？

我正在WordPress网站上工作，我有自己的搜索筛选页面，在那里我添加了jquery日期选择器，现在我想按日期选择器搜索帖子？Html Codescript> $(function() { jQuery( \"#datepicker-13\" ).datepicker({ dateFormat : \"yy-mm-dd\" }); $(\"#datepicker-13\").datepicker().datepick

小码农CODE

仅将jQuery脚本应用于WooCommerce产品页面和类别

相关推荐

如何通过jQuery Datepicker搜索帖子？