WordPress教程

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

阿里云

很多时候,我们需要在一些特定的页面添加 js/css,这一次试试用 wp_footer 钩子的方法吧。有时候,一些代码需要添加到一个指定的页面,而不是全局。这时,可以使用一个 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 函数。

通过 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.     });
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!