如何将WordPress主题的 JavaScript 移动到页脚

JavaScript是一种基于客户端的动态计算机编程语言，由访问者的浏览器执行。

它最常用作 Web 浏览器的一部分，其实现允许客户端脚本与用户交互、控制浏览器、异步通信以及更改显示的文档内容。

示例(众多示例之一)：当您将​​鼠标悬停在对象上时， Javascript可用于启用翻转图像。

在本文中，我们将向您展示如何将 JavaScript 从 部分移动到 WordPress 中的 部分。

此方法将缩短您的加载时间，减少视觉瓶颈的机会(将访问者留在您的页面上),并且在搜索结果中有更好的排名。

将 JavaScript 移到底部的好处

JavaScript 是一种客户端编程语言。它由用户的 Web 浏览器而不是您的 Web 服务器执行和运行。当您将 JavaScript 放在顶部时，浏览器可能会在加载页面的其余部分之前执行或处理 JavaScript。当 JavaScript 移到底部时，您的 Web 服务器将快速呈现页面，然后用户的浏览器将执行 JavaScript。由于所有服务器端渲染都已经完成，JavaScript 将在后台加载，从而加快整体加载速度。

在使用 Google 页面速度或 Yslow 进行测试时，这将提高您的速度得分。谷歌和其他搜索引擎现在正在考虑将页面速度作为显示搜索结果时的性能矩阵之一。这意味着加载速度更快的网站将在搜索结果中更显眼。

在 WordPress 中添加脚本的正确方法

WordPress 有一个强大的排队系统，它允许主题和插件开发人员将他们的脚本添加到队列中并根据需要加载它们。正确地将脚本和样式排入队列可以显着提高页面加载速度。

为了向您展示一个基本示例，我们将在 WordPress 主题中添加一些 JavaScript。将您的 JavaScript 保存在一个.js文件中，并将该.js 文件放在您的主题js目录中。如果您的主题没有 JavaScript 目录，请创建一个。放置脚本文件后，编辑主题functions.php文件并添加以下代码：

function wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('my-amazing-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

在这段代码中，我们使用了 wp_register_script() 函数。该函数具有以下参数：

<?php
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
?>

要将脚本添加到 WordPress 页面的页脚或底部，您只需将$in_footer参数设置为true.

我们还使用了另一个函数get_template_directory_uri()，它返回模板目录的 URL。此功能应用于在 WordPress 主题中对脚本和样式进行排队和注册。对于插件，我们将使用plugins_url()函数。

问题：

问题在于，有时 WordPress 插件会将自己的 JavaScript 添加到 或页面正文内的页面中。为了将这些脚本移动到底部，您需要编辑插件文件并将脚本正确移动到底部。

寻找 JavaScript 源代码

在 Web 浏览器中打开您的站点并查看页面源代码。您将看到指向 JavaScript 文件的链接，指示文件的位置和来源。例如，下面的屏幕截图告诉我们，我们的脚本属于一个名为“test-plugin101”的插件。脚本文件位于js目录中。

有时您会看到 JavaScript 直接添加到页面中，而不是通过单独的 .js 文件链接。在这种情况下，您需要一一停用所有插件。停用每个插件后刷新页面，直到找到将脚本添加到页面的插件。如果停用所有插件后 JavaScript 仍未消失，请尝试切换到另一个主题以查看 JavaScript 是否被您的主题添加。

注册和排队脚本

一旦你在标题部分找到了添加 JavaScript 的插件或主题，下一步就是找出插件在哪里调用了文件。在您的某个主题或插件的 PHP 文件中，您将看到对该特定.js文件的调用。

如果插件或主题已经使用入队来添加 JavaScript 文件，那么您需要做的就是更改插件或主题中的 wp_register_script 函数并为 $in_footer 参数添加 true。像这样：

wp_register_script('script-handle', plugins_url('js/script.js'  , __FILE__ ),'','1.0',true);

让我们假设您的插件或主题在标题或内容之间添加原始 JavaScript。在插件或主题文件中找到原始 JavaScript 代码，复制 JavaScript 并将其保存在.js文件中。然后使用wp_register_script() 如上所示的函数，将 JavaScript 移动到底部。

实现代码

如果你不懂代码也没有关系这里收集到一个不错的办法，可以将所有的WordPress程序中的JavaScript文件移动到网站底部。

第一、添加脚本

function theme_strip_tags_content($text, $tags = '', $invert = false) {

preg_match_all( '/<(.+?)[\s]*\/?[\s]*>/si', trim( $tags ), $tags );
$tags = array_unique( $tags[1] );

if ( is_array( $tags ) AND count( $tags ) > 0 ) {
if ( false == $invert ) {
return preg_replace( '@<(?!(?:'. implode( '|', $tags ) .')\b)(\w+)\b.*?>.*?</\1>@si', '', $text );
}
else {
return preg_replace( '@<('. implode( '|', $tags ) .')\b.*?>.*?</\1>@si', '', $text );
}
}
elseif ( false == $invert ) {
return preg_replace( '@<(\w+)\b.*?>.*?</\1>@si', '', $text );
}

return $text;
}

function theme_insert_js($source) {

$out = '';

$fragment = new DOMDocument();
$fragment->loadHTML( $source );

$xp = new DOMXPath( $fragment );
$result = $xp->query( '//script' );

$scripts = array();
$scripts_src = array();
foreach ( $result as $key => $el ) {
$src = $result->item( $key )->attributes->getNamedItem( 'src' )->value;
if ( ! empty( $src ) ) {
$scripts_src[] = $src;
} else {
$type = $result->item( $key )->attributes->getNamedItem( 'type' )->value;
if ( empty( $type ) ) {
$type = 'text/javascript';
}

$scripts[$type][] = $el->nodeValue;
}
}

foreach ( $scripts as $key => $value ) {
$out .= '<script type="'.$key.'">';

foreach ( $value as $keyC => $valueC ) {
$out .= "\n".$valueC;
}

$out .= '</script>';
}

foreach ( $scripts_src as $value ) {
$out .= '<script src="'.$value.'"></script>';
}

return $out;
}

将代码添加到当前主题的Functions.php文件中。

第二、替换头部文件

<?php
ob_start();
wp_head();
$themeHead = ob_get_contents();
ob_end_clean();
define( 'HEAD_CONTENT', $themeHead );

$allowedTags = '<style><link><meta><title>';
print theme_strip_tags_content( HEAD_CONTENT, $allowedTags );
?>

将当前主题的wp_head()头部文件这个代码替换到上面脚本。

第三、增加底部文件

<?php theme_insert_js( HEAD_CONTENT ); ?>

在footer.php底部文件中加上上面的代码。

最后，我们刷新当前的WP网站，可以看到所有的JS文件已经在网站底部。