WordPress 开发在指定页面添加js/css代码
很多时候,我们需要在一些特定的页面添加 js/css,这一次试试用 wp_footer 钩子的方法吧。有时候,…
很多时候,我们需要在一些特定的页面添加 js/css,这一次试试用 wp_footer 钩子的方法吧。有时候,一些代码需要添加到一个指定的页面,而不是全局。这时,可以使用一个 wp_footer 钩子,再结合 is_page 进行页面判断,将指定代码写到页面底部。
-
function custom_script() {
-
if (is_page('page-slug')) {
-
?>
-
<script type="text/javascript">
-
$(document).ready(function(){
-
....
-
});
-
</script>
-
<?php
-
}
-
}
-
add_action( 'wp_footer', 'custom_script' );
JS 脚本文件或 css 样式文件
如果要在一个指定页面中,引用一个指定的脚本文件,可以这么写:
-
function custom_js() {
-
// child theme: use get_stylesheet_directory_uri() instead of get_template_directory_uri()
-
wp_register_script('scrollTo', get_stylesheet_directory_uri() . '/jquery.scrollTo.min.js', array('bootstrap'), '01', true);
-
if (is_page('publications')) {
-
wp_enqueue_script('scrollTo');
-
}
-
}
-
add_action( 'wp_enqueue_scripts', 'custom_js' );
如果是样式文件,则使用 wp_enqueue_style 函数。
通过 enqueue 或其它方式在 WordPress 中添加一些 js 代码后,控制台报错”TypeError: $ is not a function” 。这是一个很常见的问题。
解决方法,需要将$替换为 Jquery,即:
-
jQuery(document).ready(function($){
-
$("#buttonName").onclick ....
-
})
-
jQuery('#btn').click(function() {
-
console.log('ok');
-
});
类别:WordPress教程、
本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。
还没有任何评论,赶紧来占个楼吧!