Wordpress - 仅当特定类在页面上时才会将脚本排入队列

时间:2017-12-14 11:22:54

标签: javascript php wordpress

只有在该页面上检测到一类.google-map时才能在WordPress中排队脚本最合适的解决方案是什么?

在我的main.js中,我可以检测页面上的项目并执行某些操作,但我不确定您是否可以在JS文件中使用enqueue函数。

$(document).ready(function(){
  if (document.getElementsByClassName('.google-map')) {
    alert(true);
  }
});

以上只是尝试#1。请随时提供任何其他解决方案,使用功能或其他任何东西。我根本不太清楚为什么我没有更多的例子。

1 个答案:

答案 0 :(得分:0)

通常将以下代码添加到您的functions.php文件中,将文件google.js(或您选择的任何名称)添加到WP页脚。这将以正确的方式将javascript文件添加到WP页脚中。 https://developer.wordpress.org/reference/functions/wp_enqueue_script/

function my_scriptings_scripts() {  

    wp_enqueue_script( 'my_scriptings', get_template_directory_uri() . '/js/google.js', array('jquery'), '20171212', true );

}

add_action( 'wp_enqueue_scripts', 'my_scriptings_scripts' );

在你的js / google.js里面

使用Vanilla javascript,检查具有类名的元素。如果存在,则调用该操作的函数。

var element =  document.getElementByClassName('google-map');
  if (typeof(element) != 'undefined' && element != null)
  { 
     //call function for google actions
     google_acts_like_this();
  }

function google_acts_like_this(){
  console.log('Google will take over the world');
  alert('Google will take over the world');
}

或尝试wi enter code here Jquery -

 if ($(document).find(.google-map).length > 0) 
   { 
      //If the element exist, then do something.
      google_acts_like_this();
   }

function google_acts_like_this(){
      console.log('Google will take over the world');
      alert('Google will take over the world');
    }