l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在WordPress中将JavaScript文件移动到页面底部或脚部区域

如何在WordPress中将JavaScript文件移动到页面底部或脚部区域

Bug编译狮

Bug编译狮

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

方法一：修改 functions.php 文件

  1. 打开 WordPress 的根目录下的 wp-content/themes/your-theme-name/functions.php 文件。

  2. 找到以下代码段落：

    <?php wp_enqueue_script( $handle, plugins_url( 'js/my-js.js', __FILE__ ), array(), null, true );

  3. 替换为：

    <?php if ( is_page() || is_single() ) { ?>
   <script src="<?php echo get_template_directory_uri(); ?>/js/my-js.js"></script>
<?php } else {
   wp_enqueue_script( $handle, plugins_url( 'js/my-js.js', __FILE__ ), array(), null, true );
}

  4. 保存文件并刷新网站。

这个方法会根据当前页面类型（如单页或多页）动态加载 JavaScript 文件，确保只在需要时加载，从而提高性能。

示例代码

// 在 functions.php 中
if ( is_page() || is_single() ) { 
    wp_enqueue_script( 'my-js', plugin_dir_url( __FILE__ ) . 'js/my-js.js', array(), null, true ); 
} else { 
    wp_enqueue_script( 'my-js', plugin_dir_url( __FILE__ ) . 'js/my-js.js', array(), null, true ); 
}

效果说明

  • 当用户访问单页或多页时，JavaScript 文件会被立即加载，因为条件语句(is_page() 和 is_single()) 会检查当前页面是否满足条件。
  • 对于其他类型的页面（例如，博客页面），JavaScript 文件不会被加载，这样可以避免不必要的资源加载，提升用户体验。

方法二：使用插件

有许多插件可以帮助你在 WordPress 站点上管理脚本和样式。例如，Footer Scripts & Styles 插件允许你将所有脚本和样式放在页面的底部，而无需编辑任何代码。

安装与启用插件

  1. 登录您的 WordPress 控制面板。
  2. 进入“插件”菜单。
  3. 搜索“Footer Scripts & Styles”，然后点击安装。
  4. 启用该插件。

使用插件功能

  1. 打开您希望添加 JavaScript 的页面。
  2. 查找相关标签或区块（如“Footer Scripts & Styles”中的“Footer Scripts & Styles”标签）。
  3. 添加所需脚本链接到该标签。
  4. 再次刷新页面以查看更改。

这种方法不仅方便快捷，而且减少了错误的可能性，同时提供了更多的定制选项。

总结

无论是通过修改 functions.php 文件还是使用插件，都可以有效地将 JavaScript 文件移动到 WordPress 网站的底部或脚部区域。选择哪种方法取决于具体需求和个人偏好。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

要将JavaScript文件移到WordPress页面底部或脚部区域，你可以使用以下步骤：

  1. 首先，确保你的网站已安装了PHP、MySQL和WordPress。

  2. 打开你的网站的根目录下的wp-content/plugins/目录，找到并打开名为functions.php的文件（如果没有这个文件，创建一个）。

  3. 在functions.php文件中，添加以下代码以设置全局变量：

    function wp_scripts_bottom() {
if (is_admin()) return;
$bottom = apply_filters('wp_bottom_script', '');
if ($bottom) {
    echo '<script type="text/javascript" src="'. esc_url(plugins_url('/js/'.$bottom.'.js', __FILE__)).'"></script>';
}
}
add_action('wp_head', 'wp_scripts_bottom');

  4. 保存functions.php文件。

  5. 接下来，为你的JavaScript文件编写一个新的HTML文件，例如my-script.js。在这个文件中，你可以定义你想要显示的JavaScript代码。

  6. 将此新文件移动到你的网站的根目录下，例如wp-content/uploads/。

  7. 在WordPress的后台编辑器中，打开你的主题的functions.php文件（如果有这个文件，否则创建一个）。在该文件中添加以下代码：

    
function my_theme_scripts_bottom() {
if (is_admin()) return;
global $bottom_script;
$bottom_script = get_option('bottom_script');
if ($bottom_script && is_string($bottom_script)) {
    wp_enqueue_script($bottom_script);
} else {
    add_action('wp_footer', function () {
        echo '<script type="text/javascript">document.write('<script src="'.esc_url(get_stylesheet_directory_uri().'/js/my-script.js') . '" async defer></script>');</script>';
    });
}
}

add_action(‘wp_enqueue_scripts’, ‘my_theme_scripts_bottom’);

8. 保存`functions.php`文件。

9. 现在，你可以在WordPress的任何地方插入JavaScript代码。只需确保它位于`wp-content/themes/your-theme/js/`目录下，并使用相对路径（如`my-script.js`），或者使用绝对路径（如`../js/my-script.js`）来引用它。例如，在单个页面上，可以这样做：

```html
<script src="../js/my-script.js"></script>
  1. 这样一来，当用户浏览您的网站时，JavaScript代码将在页面底部或脚部自动加载。

最新更新