在指定页面添加js/css代码 – WordPress开发

很多时候，我们需要在一些特定的页面添加js/css，这一次试试用wp_footer钩子的方法吧。

部分脚本代码或css样式

有时候，一些代码需要添加到一个指定的页面，而不是全局。这时，可以使用一个wp_footer钩子，再结合is_page进行页面判断，将指定代码写到页面底部。

1. function custom_script() {
3.  if (is_page('page-slug')) {
4.  ?>
5.  <script type="text/javascript">
6.  $(document).ready(function(){
7.  ....
8.  });
9.  </script>
10.  <?php
11.  }
12. }
13. add_action( 'wp_footer', 'custom_script' );

JS脚本文件或css样式文件

如果要在一个指定页面中，引用一个指定的脚本文件，可以这么写：

1. function custom_js() {
2.  // child theme: use get_stylesheet_directory_uri() instead of get_template_directory_uri()
3.  wp_register_script('scrollTo', get_stylesheet_directory_uri() .'/jquery.scrollTo.min.js', array('bootstrap'), '01', true);
4.  if (is_page('publications')) {
5.  wp_enqueue_script('scrollTo');
6.  }
7. }
8. add_action( 'wp_enqueue_scripts', 'custom_js' );

如果是样式文件，则使用wp_enqueue_style函数。

其它

• 页面用is_page()
• 文章用is_single()
• oocommerce的产品页，则用is_product()

相关：

通过enqueue或其它方式在wordpress中添加一些js代码后，控制台报错”TypeError: $ is not a function” 。这是一个很常见的问题。

解决方法，需要将$替换为Jquery，即：

1. jQuery(document).ready(function($){
2.  $("#buttonName").onclick ....
3. })

1. jQuery('#btn').click(function() {
2.  console.log('ok');
3. });

封二赞助永久

收藏 海报 分享链接