wordpress的主题开发确实很容易,但是后续如果想做到稳定与速度还需要不断的优化调整,比如我们安装各种插件之后,会在前端代码里看到很多js文件堆积在顶部,这样不但影响了网站打开速度,还会影响网站的用户体验,今天大挖就来分享一下把JavaScript文件自动移动网站底部的代码操作方法。
这是一个很不优的速度优化方案,可以有效提升网站的访问速度
将以下代码添加至wordpress当前主题的Functions.php文件中;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
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文件中。
找到head.php文件,替换当前主题的wp_head()函数
1 2 3 4 5 6 7 8 9 |
<?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 ); ?> |
在网站的增加底部文件通常为foot.php添加以下代码
1 |
<?php theme_insert_js( HEAD_CONTENT ); ?> |
完成后,我们刷新站点,所有的js文件就会出现在网站底部了。