Pigji.com
美国vps、国外主机评测！
当前位置：猪机博客 > Wordpress > 正文

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

2019-12-20 分类：Wordpress / 建站知识 评论(0)

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');
//禁用XML-RPC接口 防暴力破解xmlrpc.php
add_filter('xmlrpc_enabled', '__return_false');

//hide admin bar 隐藏顶部管理员工具栏
add_filter( 'show_admin_bar', '__return_false' );

切换回经典编辑器后，移除前端古腾堡的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 );
// 强制取消自动保存草稿
add_action('wp_print_scripts', 'fanly_no_autosave');
function fanly_no_autosave() { wp_deregister_script('autosave'); }

//禁用所有文章类型的产生修订版本
add_filter( 'wp_revisions_to_keep', 'fanly_wp_revisions_to_keep', 10, 2 );
function fanly_wp_revisions_to_keep( $num, $post ) { return 0;}
//WordPress 移除头部 global-styles-inline-css
add_action('wp_enqueue_scripts', 'fanly_remove_global_styles_inline');
function fanly_remove_global_styles_inline(){
  wp_deregister_style( 'global-styles' );
  wp_dequeue_style( 'global-styles' );
}

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

大前端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/fa-brands-400.woff) 之类的地址，改为自己已加速的绝对地址：
url('//cdn.pigji.com/dux/fonts/..woff'

宝塔面板跨域名请求字体的问题 在 网站设置 配置文件里面加
第一行的 代表允许任务域名， 也可替换成域名 https://www.pigji.com

    add_header Access-Control-Allow-Origin * always;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
    add_header Access-Control-Allow-Header Content-Type,*;

主题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: 'baseUrl: '//cdn.jsdelivr.net/gh/couldbe/xxx/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:5px 12px;border-left:6px solid #FC3E3F;margin:10px 0}
.article-content h2{font-size:17px;font-weight:700;background-color:#ececec;border-bottom:0 solid #12b4f0;padding:5px 12px;border-left:6px solid #00B7F1;margin:10px 0}
.article-content h3{font-size:16px;font-weight:700;background-color:#ececec;border-bottom:0 solid #12b4f0;padding:5px 12px;border-left:6px solid #83CDAD;margin:10px 0}
.article-content h4{font-size:17px;}
.article-content h5{font-size:16px;}

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

一级标题

二级标题

三级标题

四级标题

五级标题

其实 .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加速。

Dmit优惠码 美国三网cn2 gia线路 日本vps 香港vps优惠汇总_猪机博客 Dmit优惠码 美国三网cn2 gia线路 日本vps 香港vps优惠汇总 DMIT优惠码最新dmit服务器优惠促销：洛杉矶vps三网回程CN2 GIA线路优化，稳定建站，网络丢包少。香港CN2线路延迟低。日本东京VPS Pro系列为CN2 GIA/联通AS9929/移动CM...阅读全文 搬瓦工VPS美国DC6 CN2 GIA线路和日本机房软银线路介绍_猪机博客 搬瓦工VPS美国DC6 CN2 GIA线路和日本机房软银线路介绍 搬瓦工VPS哪个机房比较好？DC6 DC9机房是Bandwagonhost最出名的：CN2 GIA线路三网直连优化。日本东京JPTYO_8机房CN2 GIA线路，大阪JPOS_1机房为软银直连线路，香...阅读全文

像上面这种拥有到大陆的优化加速线路的VPS：CN2 GIA线路 、AS4837线路、日本软银线路、AS9929回程优化线路的主机商。可以不用加速也对国内有较好的访问体验。

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

相关推荐

  • 暂无文章

评论 抢沙发

取消

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

猪机博客，国外VPS推荐！

推荐：美国CN2 GIA+日本软银VPS
腾讯云：云服务器秒杀70元+特价
阿里云：新老客户VPS秒杀 大厂特价
月付型：全球17个机房 英文外贸建站vps
DMlT : 三网CN2 GIA优化vps+日本香港vps
Contabo : 德国4核8G200GB硬盘5欧起
RackNerd：国外便宜VPS10刀一年起
DediPath：美国便宜独立服务器39刀起
ioncloud：洛杉矶独立服务器+AS4837线路

新手建站教程

交流：VPS交流站长Q群 使用交流误入则T！
教程：如何使用xshell连接上vps
教程：VPS如何安装宝塔面板+配置PHP环境
建站：wordpress博客 或 DZ程序 安装教程
dmit
美国CN2 GIA线路vps
美国高防vps

热点关注

    最新活动

    关注热点

    美国VPS (44)香港VPS (37)腾讯云 (28)CN2 GIA (27)日本VPS (27)搬瓦工 (24)Contabo (24)virmach (24)Wordpress (22)racknerd (21)美国虚拟主机 (19)BandwagonHost (16)可看奈飞的VPS (16)ION (15)国外VPS (15)美国便宜VPS (15)Discuz (14)德国VPS (14)国外便宜虚拟主机 (14)dmit (14)洛杉矶VPS (13)外贸主机 (13)ioncloud (13)荷兰VPS (13)netflix (13)抗投诉VPS (12)buyvm (12)俄罗斯vps (12)便宜VPS (11)Namecheap (11)