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

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

部分脚本代码或css样式

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

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

现在起,让您的站点焕然一新

日主题FheRf子主题,一次购买 永久使用

如果点击咨询购买按钮无法唤起QQ,请手动添加QQ1156488585(请注明主题咨询)

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注