{"id":2964,"date":"2025-06-11T09:44:28","date_gmt":"2025-06-11T01:44:28","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/wpcms\/wpdt\/2964.html"},"modified":"2025-06-11T09:44:28","modified_gmt":"2025-06-11T01:44:28","slug":"%e5%a6%82%e4%bd%95%e5%9c%a8wordpress%e4%b8%ad%e5%b0%86javascript%e6%96%87%e4%bb%b6%e7%a7%bb%e5%8a%a8%e5%88%b0%e9%a1%b5%e9%9d%a2%e5%ba%95%e9%83%a8%e6%88%96%e8%84%9a%e9%83%a8%e5%8c%ba%e5%9f%9f","status":"publish","type":"post","link":"https:\/\/www.zhaozhao123.cn\/wpcms\/post\/2964.html","title":{"rendered":"\u5982\u4f55\u5728WordPress\u4e2d\u5c06JavaScript\u6587\u4ef6\u79fb\u52a8\u5230\u9875\u9762\u5e95\u90e8\u6216\u811a\u90e8\u533a\u57df"},"content":{"rendered":"
\r\n
\r\n
\r\n
\r\n
\r\n
\"Bug编译狮\"<\/figure>\r\n\r\n\r\n\r\n

Bug编译狮<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n

\r\n
\r\n

在WordPress中，将JavaScript文件移动到页面底部或脚部区域可以通过多种方法实现，包括修改functions.php<\/code>文件、使用插件和通过模板标签等。下面我将详细介绍这些方法，并提供一个简单的示例。<\/p>\n

方法一：修改 functions.php<\/code> 文件<\/h3>\n
    \n
  1. \n

    打开 WordPress 的根目录下的 wp-content\/themes\/your-theme-name\/functions.php<\/code> 文件<\/strong>。<\/p>\n<\/li>\n

  2. \n

    找到以下代码段落<\/strong>：<\/p>\n

    <?php wp_enqueue_script( $handle, plugins_url( 'js\/my-js.js', __FILE__ ), array(), null, true );<\/code><\/pre>\n<\/li>\n
  3. \n
    替换为<\/strong>：<\/p>\n
    <?php if ( is_page() || is_single() ) { ?>\n   <script src=\"<?php echo get_template_directory_uri(); ?>\/js\/my-js.js\"><\/script>\n<?php } else {\n   wp_enqueue_script( $handle, plugins_url( 'js\/my-js.js', __FILE__ ), array(), null, true );\n}<\/code><\/pre>\n<\/li>\n
  4. \n
    保存文件并刷新网站<\/strong>。<\/p>\n<\/li>\n<\/ol>\n
    这个方法会根据当前页面类型（如单页或多页）动态加载 JavaScript 文件，确保只在需要时加载，从而提高性能。<\/p>\n
    示例代码<\/h3>\n
    \/\/ 在 functions.php 中\nif ( is_page() || is_single() ) { \n    wp_enqueue_script( 'my-js', plugin_dir_url( __FILE__ ) . 'js\/my-js.js', array(), null, true ); \n} else { \n    wp_enqueue_script( 'my-js', plugin_dir_url( __FILE__ ) . 'js\/my-js.js', array(), null, true ); \n}<\/code><\/pre>\n
    效果说明<\/h3>\n
      \n
    • 当用户访问单页或多页时，JavaScript 文件会被立即加载，因为条件语句(is_page()<\/code> 和 is_single()<\/code>) 会检查当前页面是否满足条件。<\/li>\n
    • 对于其他类型的页面（例如，博客页面），JavaScript 文件不会被加载，这样可以避免不必要的资源加载，提升用户体验。<\/li>\n<\/ul>\n
      方法二：使用插件<\/h3>\n
      有许多插件可以帮助你在 WordPress 站点上管理脚本和样式。例如，Footer Scripts & Styles<\/code> 插件允许你将所有脚本和样式放在页面的底部，而无需编辑任何代码。<\/p>\n
      安装与启用插件<\/h4>\n
        \n
      1. 登录您的 WordPress 控制面板。<\/li>\n
      2. 进入“插件”菜单。<\/li>\n
      3. 搜索“Footer Scripts & Styles”，然后点击安装。<\/li>\n
      4. 启用该插件。<\/li>\n<\/ol>\n
        使用插件功能<\/h4>\n
          \n
        1. 打开您希望添加 JavaScript 的页面。<\/li>\n
        2. 查找相关标签或区块（如“Footer Scripts & Styles”中的“Footer Scripts & Styles”标签）。<\/li>\n
        3. 添加所需脚本链接到该标签。<\/li>\n
        4. 再次刷新页面以查看更改。<\/li>\n<\/ol>\n
          这种方法不仅方便快捷，而且减少了错误的可能性，同时提供了更多的定制选项。<\/p>\n
          总结<\/h3>\n
          无论是通过修改 functions.php<\/code> 文件还是使用插件，都可以有效地将 JavaScript 文件移动到 WordPress 网站的底部或脚部区域。选择哪种方法取决于具体需求和个人偏好。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
          \r\n
          \r\n
          \r\n
          \r\n
          \r\n
          \"黑板前的Bug语法讲师\"<\/figure>\r\n\r\n\r\n\r\n
          黑板前的Bug语法讲师<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
          \r\n
          \r\n
          要将JavaScript文件移到WordPress页面底部或脚部区域，你可以使用以下步骤：<\/p>\n
            \n
          1. \n
            首先，确保你的网站已安装了PHP、MySQL和WordPress。<\/p>\n<\/li>\n
          2. \n
            打开你的网站的根目录下的wp-content\/plugins\/<\/code>目录，找到并打开名为functions.php<\/code>的文件（如果没有这个文件，创建一个）。<\/p>\n<\/li>\n
          3. \n
            在functions.php<\/code>文件中，添加以下代码以设置全局变量：<\/p>\n
            function wp_scripts_bottom() {\nif (is_admin()) return;\n$bottom = apply_filters('wp_bottom_script', '');\nif ($bottom) {\n    echo '<script type=\"text\/javascript\" src=\"'. esc_url(plugins_url('\/js\/'.$bottom.'.js', __FILE__)).'\"><\/script>';\n}\n}\nadd_action('wp_head', 'wp_scripts_bottom');<\/code><\/pre>\n<\/li>\n
          4. \n
            保存functions.php<\/code>文件。<\/p>\n<\/li>\n
          5. \n
            接下来，为你的JavaScript文件编写一个新的HTML文件，例如my-script.js<\/code>。在这个文件中，你可以定义你想要显示的JavaScript代码。<\/p>\n<\/li>\n
          6. \n
            将此新文件移动到你的网站的根目录下，例如wp-content\/uploads\/<\/code>。<\/p>\n<\/li>\n
          7. \n
            在WordPress的后台编辑器中，打开你的主题的functions.php<\/code>文件（如果有这个文件，否则创建一个）。在该文件中添加以下代码：<\/p>\n
            \nfunction my_theme_scripts_bottom() {\nif (is_admin()) return;\nglobal $bottom_script;\n$bottom_script = get_option('bottom_script');\nif ($bottom_script && is_string($bottom_script)) {\n    wp_enqueue_script($bottom_script);\n} else {\n    add_action('wp_footer', function () {\n        echo '<script type=\"text\/javascript\">document.write('<script src=\"'.esc_url(get_stylesheet_directory_uri().'\/js\/my-script.js') . '\" async defer><\/script>');<\/script>';\n    });\n}\n}<\/code><\/pre>\n<\/li>\n<\/ol>\n
            add_action(‘wp_enqueue_scripts’, ‘my_theme_scripts_bottom’);<\/p>\n
            8. 保存`functions.php`文件。\n\n9. 现在，你可以在WordPress的任何地方插入JavaScript代码。只需确保它位于`wp-content\/themes\/your-theme\/js\/`目录下，并使用相对路径（如`my-script.js`），或者使用绝对路径（如`..\/js\/my-script.js`）来引用它。例如，在单个页面上，可以这样做：\n\n```html\n<script src=\"..\/js\/my-script.js\"><\/script><\/code><\/pre>\n
              \n
            1. 这样一来，当用户浏览您的网站时，JavaScript代码将在页面底部或脚部自动加载。<\/li>\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
              Bug编译狮 在WordPress中，将JavaScript文件移动到页面底部或&..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[59],"tuisongtax":[],"class_list":["post-2964","post","type-post","status-publish","format-standard","hentry","category-wpdt","tag-pzjc"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/2964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/comments?post=2964"}],"version-history":[{"count":0,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/2964\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/media?parent=2964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/categories?post=2964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tags?post=2964"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tuisongtax?post=2964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}