我是靠谱客的博主 忧伤纸飞机,最近开发中收集的这篇文章主要介绍wordpress把JavaScript files 移动到HTML文档底部,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

为了提高你的WordPress博客的加载速度,建议您将JavaScript文件移动到HTML文档底部。但是,很多插件在必须加装在文档的头部,我们强制移动底部,会出现插件失效,这是一个简单的解决方案来自动将所有JavaScript文件移动到文档的底部,从而提高网页的加载速度,如果你在进行wp主题的开发,这对你的主题加载效率有很大帮助。

首页,把以下代码复制到 functions.php文件中

/**
 * Filter HTML code and leave allowed/disallowed tags only
 *
 * @param string 	$text 	Input HTML code.
 * @param string 	$tags 	Filtered tags.
 * @param bool 		$invert Define whether should leave or remove tags.
 * @return string Filtered tags
 */
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.*?>.*?@si', '', $text );
        }
        else {
            return preg_replace( '@<('. implode( '|', $tags ) .')b.*?>.*?@si', '', $text );
        }
    }
    elseif ( false == $invert ) {
        return preg_replace( '@<(w+)b.*?>.*?@si', '', $text );
    }

    return $text;
}

/**
 * Generate script tags from given source code
 *
 * @param string $source HTML code.
 * @return string Filtered HTML code with script tags only
 */
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;
        }
    }

    //used by inline code and rich snippets type like application/ld+json
    foreach ( $scripts as $key => $value ) {
        $out .= '';
    }

    //external script
    foreach ( $scripts_src as $value ) {
        $out .= '';
    }

    return $out;
}

其次 编辑 header.php 文件, 移除 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 文件的 </body>

<?php theme_insert_js( HEAD_CONTENT ); ?>

有关wordpress加载Js,建议阅读:WordPress引入css/js两种方法

您可能感兴趣的文章:


▪ wordpress网站标题动态优化的几种形式

▪ WordPress免插件实现面包屑导航

▪ Wordpress基于bootstrap自适应主题制作

▪ 第九课WordPress主题制作自定义顶部图像

▪ wordpress修改上传文件默认类型

▪ 第一课:511遇见wordpress本地环境搭建以及多站点配置

▪ WordPress评论中插入图片

▪ WordPress 3D旋转彩色标签云

▪ wordpress限制非管理员访问管理面板

▪ Wordpress无插件实现主题彩色标签云的N种方法总

最后

以上就是忧伤纸飞机为你收集整理的wordpress把JavaScript files 移动到HTML文档底部的全部内容,希望文章能够帮你解决wordpress把JavaScript files 移动到HTML文档底部所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(52)

评论列表共有 0 条评论

立即
投稿
返回
顶部