当前位置:首页文章笔记建站教程WordPress 开发在指定页面添加js/css代码

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. });
温馨提示:

文章标题:WordPress 开发在指定页面添加js/css代码

文章链接:https://www.wuyanshuo.cn/279.html

更新时间:2022年03月21日

本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:service@wuyanshuo.cn我们将第一时间处理! 资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。 所有资源仅限于参考和学习,版权归原作者所有,更多请阅读无言说网络服务协议

给TA打赏
共{{data.count}}人
人已打赏
建站教程

WordPress 开发各种统计信息获取一览表

2022-3-21 15:54:38

建站教程

WordPress网站实现query_posts查询万能分页代码

2022-3-21 15:55:41

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
'