为什么要将JS代码移至网站底部?
网站源代码顶部有很多的JS文件,会使得网站打开速度变慢,还会影响网站的用户体验,所以需要将JavaScript文件减少或者是移动到网站底部。
第一步:将如下代码复制到主题的functions.php中。
functions.php默认路径:..\wp-content\themes\主题名\functions.php
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;
}
第二步:将当前主题的wp_head()头部文件用以下代码替换。
<?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 );
?>
第三步:在footer.php底部文件中加上以下的代码。
<?php theme_insert_js( HEAD_CONTENT ); ?>
最后,刷新当前的WP网站,可以看到所有的JS文件已经在网站底部。

声明:
本站所有文章,如无特殊说明或标注,均为本站原创发布。
任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。
如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。