Pigji.com
主机推荐,主机评测!

Wordpress全站优化,js加速,把js,css,图片之类的静态文件替换成bootcdn等CDN公共库里的进行wordpress CDN加速。

Wordpress博客优化与加速,把部分js,css之类的静态文件替换成公共CDN库里的文件进行CDN加速。网站js文件优化,提高WP博客网站加载速度。
本文部分内容仅对本站有效,请勿跟随操作。

如果我们右键检查 审查元素 发现比较慢的JS文件。复制js名子,然后进入网站后台——外观——主题编辑器 找到function.php文件
搜索之前复制的名字,即可直接定位到编辑位置:

wp_enqueue_script( 'bluth-magnific', get_template_directory_uri() . '/js/jquery.js', array('jquery'), BLISS_VERSION, true);

我们找一个第三方静态库比如:
https://www.staticfile.org
https://www.bootcdn.cn
我们去这些公共CDN库里搜索 jquery.popup.js,得到一个CDN库的地址:
https://cdn.staticfile.org/jquery/3.4.1/jquery.js

get_template_directory_uri() 意思是从网站本地获取;
$protocol.': 就是从第三方CDN地方获取。所以我们改成:

wp_enqueue_script( 'bluth-magnific', $protocol.'://cdn.staticfile.org/jquery/3.4.1/jquery.js', array('jquery'), BLISS_VERSION, true);

这样就替换成了引用外部的公共库的JS呢。能替换掉的都可以替换。

另外:WP博客的本地图片替换成CDN加速 wordpress静态分离:https://www.pigji.com/356.html

替换google的js公共库

google的js公共库访问速度又比较慢也不稳定。找到FTP里面的/wp-includes/script-loader.php文件里面搜索
https://ajax.googleapis.com
可以看到以下8条引用了google的公共库文件:

  $scripts->add( 'prototype', 'https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js', array(), '1.7.1' );
  $scripts->add( 'scriptaculous-root', 'https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js', array( 'prototype' ), '1.9.0' );
  $scripts->add( 'scriptaculous-builder', 'https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/builder.js', array( 'scriptaculous-root' ), '1.9.0' );
  $scripts->add( 'scriptaculous-dragdrop', 'https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/dragdrop.js', array( 'scriptaculous-builder', 'scriptaculous-effects' ), '1.9.0' );
  $scripts->add( 'scriptaculous-effects', 'https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/effects.js', array( 'scriptaculous-root' ), '1.9.0' );
  $scripts->add( 'scriptaculous-slider', 'https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/slider.js', array( 'scriptaculous-effects' ), '1.9.0' );
  $scripts->add( 'scriptaculous-sound', 'https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/sound.js', array( 'scriptaculous-root' ), '1.9.0' );
  $scripts->add( 'scriptaculous-controls', 'https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/controls.js', array( 'scriptaculous-root' ), '1.9.0' );
  $scripts->add( 'scriptaculous', false, array( 'scriptaculous-dragdrop', 'scriptaculous-slider', 'scriptaculous-controls' ) );

全部替换成 jsdelivr 或者 staticfile.org家的

  $scripts->add( 'prototype', 'https://cdn.staticfile.org/prototype/1.7.1.0/prototype.js', array(), '1.7.1' );
  $scripts->add( 'scriptaculous-root', 'https://cdn.staticfile.org/scriptaculous/1.9.0/scriptaculous.js', array( 'prototype' ), '1.9.0' );
  $scripts->add( 'scriptaculous-builder', 'https://cdn.staticfile.org/scriptaculous/1.9.0/builder.js', array( 'scriptaculous-root' ), '1.9.0' );
  $scripts->add( 'scriptaculous-dragdrop', 'https://cdn.staticfile.org/scriptaculous/1.9.0/dragdrop.js', array( 'scriptaculous-builder', 'scriptaculous-effects' ), '1.9.0' );
  $scripts->add( 'scriptaculous-effects', 'https://cdn.staticfile.org/scriptaculous/1.9.0/effects.js', array( 'scriptaculous-root' ), '1.9.0' );
  $scripts->add( 'scriptaculous-slider', 'https://cdn.staticfile.org/scriptaculous/1.9.0/slider.js', array( 'scriptaculous-effects' ), '1.9.0' );
  $scripts->add( 'scriptaculous-sound', 'https://cdn.staticfile.org/scriptaculous/1.9.0/sound.js', array( 'scriptaculous-root' ), '1.9.0' );
  $scripts->add( 'scriptaculous-controls', 'https://cdn.staticfile.org/scriptaculous/1.9.0/controls.js', array( 'scriptaculous-root' ), '1.9.0' );

至于修改GOOGLE字体是搜索
https://fonts.googleapis.com
目前大陆恢复对GOOGLE字体的访问,速度还可以,就暂时不更改呢。而且本身是全球CDN加速的。

模板函数 (functions.php)的修改优化

在新窗口中打开文章链接

//新窗口中打开文章内链接
function autoblank($text) {
  $return = str_replace('<a', '<a target="_blank"', $text);
  return $return;
}
add_filter('the_content', 'autoblank');

切换回经典编辑器后,移除前端古腾堡的CSS文件调用

//移除古腾堡前端CSS文件wp-block-library
function remove_block_library_css() {
  wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'remove_block_library_css', 100 );

屏幕 REST API,移除头部 wp-json链接

//屏蔽 REST API
add_filter('json_enabled', '__return_false' );
add_filter('json_jsonp_enabled', '__return_false' );
add_filter('rest_enabled', '__return_false');
add_filter('rest_jsonp_enabled', '__return_false');

// 移除头部 wp-json 标签和 HTTP header 中的 link
remove_action('wp_head', 'rest_output_link_wp_head', 10 );
remove_action('template_redirect', 'rest_output_link_header', 11 );
//头像读取修改成HTTPS

function get_ssl_avatar($avatar) {
   $avatar = preg_replace('/.*\/avatar\/(.*)\?s=([\d]+)&.*/','<img class="avatar avatar-$2" src="https://secure.gravatar.com/avatar/$1?s=$2" alt="" width="$2" height="$2" />',$avatar);
   return $avatar;
}
add_filter('get_avatar', 'get_ssl_avatar');

以下内容只适合本站 请勿照抄

大前端functions.php or functions-theme.php

cdn.staticfile.org OR jsdelivr.../gh/用户/库@版本号/资源路径 不用版本号则表示使用最新版本。

_cssloader(array('bootstrap' => $purl.'/css/bootstrap.min.css', 'fontawesome' => $purl.'/css/font-awesome.min.css', 'main' => 'main'));`

修改成:(将$purl.删除,后面的单引号中补全公共CDN的加速地址!)

_cssloader(array('bootstrap' => '//cdn.staticfile.org/twitter-bootstrap/3.2.0/css/bootstrap.min.css', 'fontawesome' => $purl.'/css/font-awesome.min.css', 'main' => 'main'));

or 修改成全球加速

    // common css
    _cssloader(array('bootstrap' => '//cdn.jsdelivr.net/gh/couldbeloveu/foxian/css/bootstrap.min.css', 'fontawesome' => '//cdn.jsdelivr.net/gh/couldbeloveu/foxian/css/font-awesome.min.css', 'main' => '//cdn.jsdelivr.net/gh/couldbeloveu/foxian/css/main.css'));

    // page css
    if (is_page_template('pages/user.php')) {
      _cssloader(array('user' => '//cdn.jsdelivr.net/gh/couldbeloveu/foxian/css/user.css'));
    }
            'he' => array(
                'jquery' => '//code.jquery.com/jquery-1.9.1.min.js',
                'bootstrap' => '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'

修改成国内staticfile加速

           'he' => array(
                'jquery' => '//cdn.staticfile.org/jquery/1.9.1/jquery.min.js',
                'bootstrap' => '//cdn.staticfile.org/twitter-bootstrap/3.2.0/js/bootstrap.min.js'
            )

or 修改成全球加速

            'he' => array(
                'jquery' => '//cdn.jsdelivr.net/gh/couldbeloveu/foxian@1.0/js/libs/jquery.min.js',
                'bootstrap' => '//cdn.jsdelivr.net/gh/couldbeloveu/foxian@1.0/js/libs/bootstrap.min.js'
            )

DUX主题Fonts文件加速
font-awesome.min.css文件,将其所有的url(../fonts/改为自己已加速的绝对地址。

主题JS文件加速
在DUX主题的文件夹中,找到/js/loader.js文件进行编辑

tbquire.config({
  baseUrl: jsui.uri + '/js',
  urlArgs: 'ver=' + jsui.ver,
  paths: {
    'swiper'        : 'libs/swiper.min',
    'jquery.cookie' : 'libs/jquery.cookie.min',
    'jsrender'      : 'libs/jsrender.min',
    'router'        : 'libs/router.min',
    'lazyload'      : 'libs/lazyload.min',
    'prettyprint'   : 'libs/prettyprint',
    'ias'           : 'libs/ias.min',
    'main'          : 'main',
    'comment'       : 'comment',
    'user'          : 'user'
  }
})

将:baseUrl: jsui.uri + '/js',修改成:baseUrl: '//imgdujin/org/dux/js', 绝对地址,CDN加速地址。

找到

_jsloader(array('loader'));

前面加上//注释掉(//_jsloader(array('loader'));)然后在其下方添加以下代码:

wp_enqueue_script( 'loader',  '//cdn.jsdelivr.net/gh/couldbeloveu/foxian/js/loader.js', array(), THEME_VERSION, true );

这一处是把:前端的这个JS引用wp-content/themes/dux6.0/js/loader.js替换成CDN加速。

DUX img加速

默认表示替换区域

// smilies src
add_filter('smilies_src', '_smilies_src', 1, 10);
function _smilies_src($img_src, $img, $siteurl) {
  return get_stylesheet_directory_uri() . '/img/smilies/' . $img;
}

替换成

return '//cdn.jsdelivr.net/gh/couldbeloveu/foxian/img/smilies/' . $img;

默认头像替换区域

function _get_default_avatar(){
  return get_stylesheet_directory_uri() . '/img/avatar-default.png';
}

默认特色图片替换区域

  if( $r_src ){
    if( _hui('thumbnail_src') ){
        return sprintf('<img data-src="%s" alt="%s" src="%s" class="thumb">', $r_src, $post->post_title._get_delimiter().get_bloginfo('name'), get_stylesheet_directory_uri().'/img/thumbnail.png');
    }else{
        return sprintf('<img src="%s" alt="%s" class="thumb">', $r_src, $post->post_title._get_delimiter().get_bloginfo('name'));
    }
    }else{
      return sprintf('<img data-thumb="default" src="%s" class="thumb">', get_stylesheet_directory_uri().'/img/thumbnail.png');
    }
}

明天再折腾,理论上我们可以把文件传到 github 然后利用 jsdelivr.com 做全球CDN加速。
我太难了。

DUX二级标题三级标题美化

找到Main.css,查找

.article-content h1,.article-content h2{font-weight:700;margin:20px 0;border-bottom:1px solid #eee;padding-bottom:10px}.article-content h1{font-size:20px}.article-content h2{font-size:18px}.article-content h3{font-size:16px}.article-content h4{font-size:15px}.article-content h5{font-size:14px}

替换成:

.article-content h1, .article-content h2{font-weight:700;margin:10px 0;border-bottom:1px solid #eee;padding-bottom:8px}
.article-content h1{font-size:18px;font-weight:700;background-color:#ececec;border-bottom:0 solid #12b4f0;padding:6px 12px;border-left:6px solid #FC3E3F;margin:10px 0}
.article-content h2{font-size:16px;font-weight:700;background-color:#ececec;border-bottom:0 solid #12b4f0;padding:6px 12px;border-left:6px solid #00B7F1;margin:10px 0}
.article-content h3{font-size:15px;font-weight:700;background-color:#ececec;border-bottom:0 solid #12b4f0;padding:6px 12px;border-left:6px solid #83CDAD;margin:10px 0}
.article-content h4{font-size:14px;font-weight:700;background-color:#ececec;border-bottom:0 solid #12b4f0;padding:6px 12px;border-left:6px solid #A3A3A3;margin:10px 0}
.article-content h5{font-size:15px}

本次修改实现一级、二级、三级、四级标题美化。五级标题未做修改。

一级标题

二级标题

三级标题

四级标题

五级标题

其实 .article-content h1, .article-content h2, .article-content h3就代表的 1 2 3级标题的CSS设定。标题文字的背景颜色,可以自行修改代码“background-color:#ececec;”里面的#A3A3A3 即可。不同颜色代码自己百度。

在手机版下 二级无优化 大概在下方一点点此修改点下方
找 :

.article-content h2{font-size: 16px;font-weight: bold;margin: 15px -10px 15px -10px;line-height: 18px;padding-left: 10px;border-left:none}

直接
/ /注释掉

引用块的美化
找到MAIN.CSS

.article-content blockquote{margin: 30px 30px;padding: 15px 20px;font-size: 16px;color: #999;border-left: 5px solid #EEE;}
.article-content blockquote p{margin:0;padding:0;margin-bottom: 10px;}

修改

.article-content blockquote{font: 16px/20px italic Times, serif;color: #333;padding: 5px 20px;background-color: #f5f5f5;border-left: 15px solid #666666;border-radius: 5px;margin: 5px;line-height: 1.8;}
.article-content blockquote p{margin:0;padding:0;margin-bottom: 5px;}

原来

blockquote {
font: 16px/20px italic Times, serif;
color: #333;
padding: 5px 20px;
background-color: #f5f5f5;
border-left: 15px solid #666666;
border-radius: 5px;
margin: 5px;
/*text-indent: 23px; 首行缩进*/
line-height: 1.8;
}

编辑块是这样的

Markdown编辑器 src/Modules/Toc.php 修改 /otherjscss/jquery.toc.min.js
评论插件akismet/class.akismet.php 修改 otherjscss/form.js
postviews阅读 插件下的 修改 otherjscss/postviews-cache.js

wp_enqueue_script( 'wp-postviews-cache', plugins_url( 'postviews-cache.js', __FILE__ ), array( 'jquery' ), '1.68', true );

修改成

wp_enqueue_script( 'wp-postviews-cache', '//cdn.jsdelivr.net/.../postviews-cache.js', array( 'jquery' ), '1.68', true );

WP统计插件wp-statistics/includes/classes/class-wp-statistics-frontend.php
里面的
wp-statistics/assets/js/front.min.js 修改otherjscss/front.min.js

明天再折腾,理论上我们可以把文件传到 github 然后利用 jsdelivr.com 做全球CDN加速。

赞(0) 打赏
未经允许不得转载:猪机博客 » Wordpress全站优化,js加速,把js,css,图片之类的静态文件替换成bootcdn等CDN公共库里的进行wordpress CDN加速。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏