WordPress 如何获得最顶级的自定义分类

b29692084bbb

WordPress 支持设定多级分类,如果你需要在页面中展示最顶级的分类,则需要获取到最顶级的分类,具体实现的方式如下:

1. 获取当前文件类型的自定义分类

使用如下代码获取到自定义分类

$tax = wp_get_post_terms($post->ID,array('part'))
Code language: PHP (php)

获得的结果如下

Array
(
    [0] => WP_Term Object
        (
            [term_id] => 7
            [name] => 目录1
            [slug] => category1
            [term_group] => 0
            [term_taxonomy_id] => 7
            [taxonomy] => part
            [description] => 
            [parent] => 6
            [count] => 2
            [filter] => raw
        )

)
Code language: PHP (php)

这里的 term_id 则代表你设定的自定义分类的 ID

2.获取分类树

因为分类是多级的,我们需要找到祖先节点,因此需要用到函数 get_ancestors ,执行如下代码

$tree = get_ancestors($tax[0]->term_id)
Code language: PHP (php)

会获得如下结果

Array
(
    [0] => 6
    [1] => 8
)
Code language: PHP (php)

这个返回结果则是从你当前分类向上查找,查找到最顶级的分类的结果。需要注意的是,这个数组的最后一个元素才是你最终最顶级的分类。

3. 提取最后一个元素的 ID

当你知道了最后一个才是最顶级的分类,只需要使用 end() 函数来获取最后一个。

end($tree)
Code language: PHP (php)

这样,就能拿到最终目录的 ID,接下来要做的就是在你的界面上展示这些数据。

为 WordPress 加入 Server Timing 判断不同行为性能差异

b29692084bbb

自打上次为我的博客加入了 Redis 缓存后,博客站点访问速度明显变快,几乎可以达到秒开的效果。剩下的需要在网络层面进行进一步的优化。

不过,我还在思考如何才能更好的优化我的 WordPress 性能。很显然,我需要一个指标来帮助我做决策。这让我想到了一个东西 —— HTTP 标准中的 Server-Timing Header。

Server-Timing 标头传达在一个给定请求-响应周期中的一个或多个参数和描述。它用于在用户浏览器的开发工具或 PerformanceServerTiming (en-US) 接口中显示任何后端服务器定时参数(例如,数据库读/写、CPU 时间、文件系统访问等)。

来自 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Server-Timing

Server Timing 可以帮助我们记录服务端到底在哪些步骤中消耗了哪些时间,可以方便我进行性能的查询。

使用 WP Server Timing 添加 Server-Timing 头

我在 WordPress 的 Plugin Directory 目录进行了搜索,并没有找到支持这个功能的插件,不过我在 Github 上找到了这个插件 —— https://github.com/ocReaper/wp-server-timing

有了这个插件,我就可以无需自己手动添加相应的能力。

使用插件也非常简单,在页面上下载压缩包,并在 WordPress 后台安装并启用这个插件。

d2b5ca33bd970f64a6301fa75ae2eb22 14
安装后的效果

安装完成后,你接下来要做的就是重新在浏览器中打开你的网站,并按下 F12 打开开发者工具,选择文档 Tab(英文是 Document),刷新当前页面,就可以看到列表中出现了一个你博客地址对应的文档,点击文档,并在弹出的窗口中切换到「时间」Tab,就可以在下方看到服务器计时了。

d2b5ca33bd970f64a6301fa75ae2eb22 15
示意图

按照上图的结果,可以看到,我的 WordPress 耗时最长的是 Template Processing ,我需要针对这个属性进行定向优化。

辅助理解资料

以下是 WordPress 的加载顺序图,你可以对比着参考

dtckd
WordPres 的加载顺序图,来源:https://www.rarst.net/wordpress/wordpress-core-load/

WordPress 的静态化缓存和动态化缓存应该如何选择?

b29692084bbb

在我发出了 为 WordPress 加入 Redis 缓存提升访问性能 的文章后,有不少朋友给了建议,主要有以下几个:

  1. 可以在前面套一层 CDN ,使用 CDN 来完成缓存。
  2. 可以配置 Nginx 缓存。
  3. 可以给文章生成静态的。

在我看来,这些都是很好的建议,对于很多新人的博客主而言,都是不错的选择。不过就我自己的需求而言,这个并不是好的选择。

从网站性能的提升而言,他们所提供的建议确实是不错的,通过对网站进行静态化处理,从而实现访问的提速,用户直接访问静态的缓存是不错的选择。

不过,对于我来说,倒也不仅仅是给读者一个更加舒服的阅读体验,对于我自己而言,更加舒适的写作体验也是极为重要的。

引入了 Redis 作为缓存后,所有的 MySQL 查询会进行一定的缓存,从而让网站的整体使用体验变得更好,对于我来说,是一个更好的选择。

为 WordPress 加入 Redis 缓存优化访问性能

0dbb4980acb58d4396e9a2055bf2176e

在之前的文章我是如何优化博客的本站在用的一些WordPress插件中我提到,我是使用了 WP-Optimize这个插件来进行博客优化的。

d2b5ca33bd970f64a6301fa75ae2eb22 11
WP Optimize

WP-Optimize 为用户提供了开箱即用的缓存方式,可以将你的 WordPress 文章加入文件缓存,从而减少在 MySQL 中查询的次数。

不过,文件缓存的问题是性能受限于你所使用的磁盘,而我使用的是阿里云的标准云磁盘,性能一般,所以访问速度并不能算快。

过去在我还愿意折腾 WordPress 的时候,我是会在 WordPress 上加入一些别的缓存的,比如 Redis、Memcached。不过,随着时间的流逝,我折腾的意愿变得越来越弱,就远离了这些。

直到最近刚好有空,于是开始研究起了 Redis 缓存。

其实在古早时代(比如我刚开始折腾个人博客的时候,2012年),WordPress 的 Redis 功能并不是特别好用,需要自己手动下载 object-cache.php 放在对应目录中,然后修改配置文件手动来开启,甚至还需要替换掉 index.php 文件来让请求通过缓存进行。

这次的折腾,让我感受到,时代在进步,配置缓存也变得简单了许多。

Requirements

在这篇博客中我并不打算介绍 Redis Server 的安装和调试过程,你可以在搜索引擎中找到各种各样的教程引导你如何完成安装的过程,因此,请自行完成 Redis Server 的安装,后续的各项操作会默认你已经完成了 Redis Server 的安装调试。

需要注意的是,如果你不打算修改配置文件,则需要在安装 Redis 之后,设置为空密码。而空密码是不安全的,建议你通过 iptables、安全组策略等方式,屏蔽掉 6379 端口的外部请求,只允许本地请求。

安装 Redis 缓存

我这次安装 Redis 缓存选择了 Redis Object Cache 这个插件。

d2b5ca33bd970f64a6301fa75ae2eb22 12
Redis Object Cache

和你在别的网站上看到的教程相比,这个插件提供了一个可视化的查看和管理的方式,对于懒得手动操作和编辑代码的人来说,更加友好。

安装插件后,启用插件,你可以在设置中的「Redis」设置页面找到如下的界面:

d2b5ca33bd970f64a6301fa75ae2eb22 13
设置页面

点击 Enable Object Cache,就会开启 Redis 的 Object Cache 。

如果你已经在之前配置好了 Redis Server,则会直接看到如下左图的界面。但如果你的 Redis Server 还没有配置或配置了密码,就会显示如下右图的界面,就需要你检查你的 Redis Server 是否配置成功。

d2b5ca33bd970f64a6301fa75ae2eb22 15
配置成功的情况
d2b5ca33bd970f64a6301fa75ae2eb22 14
配置失败的情况

当你看到如上左图的界面后,就说明你已经开启了 Redis 的 Object Cache 了,后续涉及到文章内容、菜单等各项基本配置的查询时,会优先使用 Redis 的缓存,而不是查询 MySQL,从而降低了 MySQL 的查询压力,提升了查询的诉求。

至此,你的 Redis 就配置好了,可以打开你的网站首页,享受飞一样的速度。

d2b5ca33bd970f64a6301fa75ae2eb22 17
开启前的 TTFB 为 2.29 秒
d2b5ca33bd970f64a6301fa75ae2eb22 16
开启后的 TTFB 为 673.49 毫秒

FAQ

1. 如何使用非本地 Redis Server 或如何使用带密码鉴权的 Redis Server?

如果你需要使用非本地的 Redis Server(比如云 Redis),那么你需要在你的 wp-config.php 中加入如下代码来进行配置。

define( 'WP_REDIS_HOST', '127.0.0.1' );
define( 'WP_REDIS_PORT', 6379 );
// define( 'WP_REDIS_PASSWORD', 'secret' );
define( 'WP_REDIS_TIMEOUT', 1 );
Code language: JavaScript (javascript)

2. 如果我一个服务器上有多个 Redis ,如何配置使数据不会混淆呢?

有两种方式,

第一种方式是可以给你的不同站点配置不同的 Redis DB,只需要在你的 wp-config.php 文件中加入如下的配置,即可实现不同的站点使用不同的 Redis 数据库,你可以从 0 开始,向上递增设定不同的 Redis 数据库。

define( 'WP_REDIS_DATABASE', 0 );
Code language: JavaScript (javascript)

第二种方式是你无法控制 Redis,必须使用同一个数据库,那么你可以通过给其添加不同的 salt 来实现即使使用同一个数据库,数据也不会产生混淆。

define('WP_CACHE_KEY_SALT', 'www_ixiqin_com_');
Code language: JavaScript (javascript)

3. Metrics 怎么理解?

在 Redis 设置页面,你可以看到另外有一个 Metrics Tab,这个 Tab 你可以看到你的插件的工作情况,方便你随时进行查询 & Debug。

第一个 Time 是指 Redis Object Cache 和 Redis 沟通,获取数据所需的时间,可以看到,我这里的查询时间大概是在 12ms,耗时不多。需要注意,你第一次看可能会注意到,这里有一个 Object Cache Pro ,灰色的 Object Cache Pro 其实是官方在推广其自家的付费插件,付费插件 $99/月,可以提供更好的 Redis 查询性能。

d2b5ca33bd970f64a6301fa75ae2eb22 18

第二个 Bytes 则是 Redis Object Cache 从 Redis 获取到数据的大小,当有人访问你的文章的时候,这个数据就会出现一个增长,访问结束后就会消失。

d2b5ca33bd970f64a6301fa75ae2eb22 19

第三个 Ratio 则是缓存的命中率,基本上保持在 99% + ,说明缓存的命中率还不错。

d2b5ca33bd970f64a6301fa75ae2eb22 20

最后一个 Calls 则是调用次数,免费版不会批量获取数据,因此,调用次数会很高,而在付费版,会一次性拿多个数据,从而获得更少的查询次数。不过我目前对于这个速度已经很满意了,就不再购买付费的版本了。

d2b5ca33bd970f64a6301fa75ae2eb22 21

延展阅读

WordPress 5.9 + 2022 主题,如何修改主题代码?

b29692084bbb

如果你使用了最新的 WordPress 5.9 以及其自带的 WordPress 2022 主题,你会发现有个问题:

修改主题代码去哪了?

d2b5ca33bd970f64a6301fa75ae2eb22 9

虽然提供的编辑器可以满足绝大多数需求,但对于一些特定场景下的开发需求(比如在 functions.php 中加入特定的逻辑,依然是需要修改代码的。

在当前的 5.9 版本中,主题的代码编辑器和插件的代码编辑器入口被移动到了「工具」当中,你需要到「工具」当中寻找对应的功能。

d2b5ca33bd970f64a6301fa75ae2eb22 10

对 WordPress 2012 主题的一些改动

b29692084bbb

在上一篇文章当中,我介绍了我为什么要迁移到 2012 这个主题,在这篇文章中,我将会向你介绍一下我对其做的一些修改。

加入广告信息

之前我接受了来自芦笋的广告赞助,作为权益,我答应为芦笋提供相应的广告展出,因此,我需要通过一些代码的修改,来实现对这部分内容的修改。

具体的修改方式是修改了 WordPress 2012 主题中的 content.php 这个文件,在合适的位置加入如下的代码

<!-- ads code start -->
<?php if(is_single()){ ?>
<a target="_blank" href="https://lusun.com/invite/20143" style="padding-bottom:10px"><img src="http://ixiqin.test/wp-content/uploads/2022/01/800498db4ecc3ecade82c7dfb0aaded5.png" class="wp-block-image" alt="白宦成邀请你注册芦笋,并赠送你 30 天高级版特权" style="max-width:100%"></img></a>
<?php }?>
<!-- ads code end -->
Code language: HTML, XML (xml)

文章页面的广告便是如此加上去的。

而侧边栏中的广告代码,则是通过 WordPress 自带的「小工具」功能来实现的,插入图片,并加入对应的链接即可。

首页显示摘要,而非全文

从阅读体验上来讲,在列表页面能看完所有内容自然是不错的,不过因为我的文章比较喜欢插入代码和图片,如果直接在文章页面展示所有内容,会导致页面看起来非常的混乱,所以我修改了对应的代码,将其调整为在首页展示摘要,而在内容详情页展示全文。

这里 2012 主题并未加入相对应的功能的开关,因此需要自行代码实现相应的功能。

原代码如下:

<?php if ( is_search() ) : // Only display excerpts for search. ?>
<div class="entry-summary">
	<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
	<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?>
	<?php
	wp_link_pages(
		array(
			'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ),
			'after'  => '</div>',
		)
	);
	?>
</div><!-- .entry-content -->
<?php endif; ?>
Code language: HTML, XML (xml)

新的代码如下:

<?php if (is_search()): // Only display excerpts for search.
?>
        <div class="entry-summary">
            <?php the_excerpt(); ?>
        </div><!-- .entry-summary -->
        <?php
else: ?>
        <?php if (is_single()): ?>
    <div class="entry-content">
            <?php the_content(__('Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve')); ?>
            <?php
        wp_link_pages(array('before' => '<div class="page-links">' . __('Pages:', 'twentytwelve'), 'after' => '</div>',));
?>
        </div><!-- .entry-content -->
<?php
    else: ?>
<div class="entry-summary">
            <?php the_excerpt(); ?>
        </div><!-- .entry-summary -->
<?php
    endif; // is_single()
?>
        <?php
endif; ?>
Code language: HTML, XML (xml)

通过上述的代码实现,来控制了在首页 & 列表页面只显示摘要,而在具体的内容页面,展示全部内容。

摘要显示超过默认长度的数量

WordPress 默认的摘要长度是 55 ,而我写的内容如果只是默认的 55 ,可能看起来会比较奇怪,所以我会通过代码,将其调整为 100

function custom_excerpt_length( $length ) {
    return 100;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
Code language: PHP (php)

加入面包屑展示

加入面包屑展示,有助于读者更好的在站内进行不同的导航,因此,借助于 All in One SEO 插件自带的面包屑功能,加入了面包屑。

<div id="aioseo_breadcrumbs" style="padding: 10px 0px;">
<?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?>
</div>
Code language: HTML, XML (xml)

推荐两款 WordPress 插件

flat screen monitor

我的博客写了很久,但是一直以来,有两个问题是我没有处理太好的,也正是因为没有处理好,过去的我的博客往往比较朴素。但是最近我发现了两个插件,可以完美解决我的问题,也分享给你。

对象存储对接: USS Upyun

d2b5ca33bd970f64a6301fa75ae2eb22

USS Upyun 是来自于沈唁开发的又拍云存储插件,安装使用后,你的附件会在通过 WordPress 插件中上传后,自动上传至又拍云。

由于我一直以来都是使用又拍云作为图床,并配合我电脑上的 iPic 来使用,所以,配合他的插件可以让我免于使用 iPic 来上传文件,直接通过 WordPress 上传即可,大大提升了我的写作舒适度。

此外,如果你使用的其他家的云存储,也没有问题,这个作者也开发了其他几家常见云存储的插件,你可以直接使用他开发的插件来完成功能,因为是同一个人开发的,所以功能方面不会有太大的差距。

d2b5ca33bd970f64a6301fa75ae2eb22 1

插图获取:Instant Images

d2b5ca33bd970f64a6301fa75ae2eb22 2

Instant Image 是用来找插图的,当你在写文章的时候需要一张插图,就可以在选择图片的时候,直接从 Pixabay 或 Unsplash 上搜索并选择合适的图片,选中后,就会自动将图片下载到你本地让你使用(配合上面的又拍云插件,可以直接将图片存在对象存储上)。

Surface laptop on a round straw foot rest in an office with Christmas decorations in the background
随手选择了一张图

插入的界面也是融合在媒体库当中的,非常符合 WordPress 的使用体验。

d2b5ca33bd970f64a6301fa75ae2eb22 3

总结

有了这两个插件,我以后大概会在写文章的时候大量配图,因为插图不再是我的痛点,那就可以多插一些符合场景的图片,来降低读者阅读文章的压力。

2021 年还在写 PHP 的人

Hello World text

PHP 是世界上最好的语言

这是技术圈的一个梗。只要你希望一个社区吵起来,只要抛出 XX 是最好的语言,就可以吵起来。而在这个鄙视链里,最底层的就是 PHP。

为什么会是 PHP?

应运而生的 PHP

PHP 其实是一门非常辉煌的语言,关于他有多辉煌。从 WordPress 的荣耀就可以看出来。 WordPress 这样一个被广泛应用的 CMS 系统便是 PHP 写就的。就连这个博客,也同样是基于 PHP 写成的。

在 PHP 盛行的时代,我们看到了大量的个人站长出现,他们使用一些开源 or 免费提供的 PHP 项目,开发出了一个个网站。我们所熟悉的 Discuz、WordPress、Drupal 、PHPBB等一系列 CMS,都是使用 PHP 开发者的。

这些 PHP 应用程序的诞生,使得 PHP 得以长盛不衰。可以说,只要 WordPress、Discuz、Drupal、PHPBB 这一类程序还在持续迭代,PHP 本身就不会消逝。

Web 友好的 PHP

PHP 之所以被众多开源项目选择,得益于其语言设计。

在其官网的标题中,明确指出,“PHP 是一个 Hypertext Preprocessor”。

更是在官网的显著位置,标注了如下的内容。

PHP is a popular general-purpose scripting language that is especially suited to web development.

Fast, flexible and pragmatic, PHP powers everything from your blog to the most popular websites in the world.

来源: php.net 

PHP  从设计之初,便是一门用于 Web 研发的编程语言,在 Web 2.0 时代,Web 网站大爆发的时代,PHP 自然也因此而大红大火。

PHP 作为一个面向模板输出的语言,在过去的二十多年里,造就了大量的 Web 应用。

LAMP 的助攻

PHP 能流行开来,和他的易于部署也不无关系。LAMP(Linux + Apache + MySQL + PHP)的流行,使得 PHP 的部署十分的简单,一个不太懂 Linux 的人,也可以参考一些简单的教程或使用一些现成的脚本,完成项目的部署。

而更进一步催生 PHP 发扬光大的,则是 cPanel、DirectAdmin、Plesk 等一系列虚拟主机管理系统,他们将 PHP 的易用性进一步提升。用户无需管理服务器,就可以直接部署 PHP 程序,让更多的人开始使用 PHP 所编写的程序。

培训班的热潮

PHP 被广泛应用,自然也被培训班看到,随之而来的,是培训班的介入,大量的非计算机专业的人涌入,通过 PHP,开始了他们的编程之旅。

一方面,客观的增加了 PHP 的开发者,使得 PHP 的市场份额进一步扩大。

另一方面,也降低了整体水平,使得 PHP 的开发者有一部分人真的就只是搬砖。

培训班的涌入所带来的后果,就是其他语言开始鄙视 PHP,觉得 PHP 是一门垃圾语言。然鹅,没有垃圾语言,只有垃圾的用语言的人。

为什么不是 PHP

上述的众多原因,让 PHP 成为一个时代的潮流,也成为鄙视链的底层。

但真正意义上让 PHP 失去生命活力的,是单页应用、MEAN Stack 和云原生的到来。

单页应用

单页应用的到来,使得 PHP 这种以服务端渲染为主流的应用开始慢慢从人们的视野中消失。

大家开始习惯了前后端分离,由前端在浏览器层面进行渲染。

PHP 自带的模板系统就失去了其先天的优势。

MEAN Stack

MEAN(MongoDB、Express、Angular、Node.js)这种架构,彻底让人们看到了 Node.js 的可能性。

前后端统一语言的诱惑自然很难让人拒绝,大家开始选择使用 Node.js 来构建服务端。或使用 Node.js 来完成 BFF 层,这让 PHP 进一步失去其价值。

云原生

云原生的出现,让 Golang 彻底成为一门热门语言,大家开始发现 Golang 这门语言的优势。

相比于 PHP,golang 同样容易上手。此外,作为一门编译型语言,与脚本语言的 PHP 有着无法比拟的性能优势。

Golang,成为培训班的新宠。

为什么 2021 年,还在用 PHP?

我可以同时写 JS、Golang、PHP,所以对于我来说,其实语言并不是问题。

但为什么还是选择 PHP 呢?

原因很明确

  1. 我还在用 WordPress:在 WP 没有完全被替代之前,我大概率会保留一定的 PHP 维护技能(毕竟挂了要自己修)
  2. 生态还算活跃,历史的 package 能用:我一直不是很喜欢 Rails 的原因就是他的生态并不算完善(我是指和中文相关的),这意味着我们做同样的事,需要花费更多的精力。同样,这也是我为什么喜欢 Node.js 的原因。
  3. 方便快捷:PHP 生态发展的足够久,拥有大量各种不同类型的脚手架,你可以快速完成一个项目的开发,这个目前在 Node 和 Golang 之中,还是有一定差距的。

总体来说,我还会继续使用 PHP 的原因很简单,它可以帮助我快速落地项目,让我的想法变为现实。

如何 Debug WordPress 的 Pingback 功能

b29692084bbb

前两天,朱峰老师在写博客的时候,引用了我的文章,发现我的博客并没有开通 Pingback。提醒我开通以后,发现依然没有效果。

于是进入了 Debug 模式。

Pingback 如何 Debug

PingBack 是基于 XML 构建的协议,因此,如果你需要调试的话,需要自己发送 XML 请求,以通知 WordPress 进行 Pingback 记录。

你需要构建一个 XML 文件,其中的内容如下

<?xml version="1.0" encoding="iso-8859-1"?>
<methodCall>
<methodName>pingback.ping</methodName>
<params>
 <param>
  <value>
   <!-- source,发起请求的文章,即要引用别人文章的文章 -->
   <string>https://blog.andie.im/blog-is-back/</string>
  </value>
 </param>
 <param>
  <value>
   <!-- target,被引用的文章,即他人的文章 -->
   <string>https://www.ixiqin.com/2021/10/more-and-more-good-a-lightweight-application-server/</string>
  </value>
 </param>
</params>
</methodCall>
Code language: HTML, XML (xml)

将上述的 URL 修改为你自己的以后,就可以在命令行中对 WordPress 发起请求,以实现 PingBack 功能。

curl -X POST -d @pingback.xml https://domain/xmlrpc.php #将 Domain 替换为你自己的博客地址
Code language: CSS (css)

发送成功后,你会看到这样的一个提示,就说明你的 Pingback 发起成功了,接下来要做的,就是在 WordPress 的评论页面去给 Pingback 进行放行了。

朱峰老师的文章

Reference

https://wordpress.org/support/topic/inbound-pingbacks-not-working/

我是如何优化博客的

由于主域名的备案掉了,所以我不得已,将站点从国内的 VPS 上迁移到了国外的 VPS 上,但是,站点迁移,速度不能下降。

事实上,经过一段优化,目前这个站点的速度着实不错,对我自己来说,基本上是秒开,而在测试网站上,速度也是杠杠的。

除了极个别监测点的速度实在是太慢,绝大多数的监测点都在 1s 内打开。

3elis
https://www.boce.com/http/www.ixiqin.com

能达到这样的速度,背后意味着很多种优化。我们一一来看。

原理

如果要对网站速度进行优化,就需要理解,在我们从浏览器中输入一个网址,到我们最终网页加载完成,都经历了哪些流程。

  1. 域名解析:我们输入在浏览器中的域名,是无法直接抵达目标主机的。因此,我们需要访问 DNS 服务,将域名转换为 IP 地址,从而才能抵达目标主机。
  2. 内容下载:当我们的请求抵达目标主机后,浏览器会下载服务器的返回。
  3. 本地渲染:浏览器将服务器的返回下载到本地后,会在浏览器的引擎中进行渲染。

当然, 在实际执行过程中,我们需要考虑的不仅仅是这三个点,不过就这三个点而言,也足够我们进行优化了,更加细致的,可以在后续遇见新的性能瓶颈后,进行优化。

分析

在理解了原理后,我们可以一一来分析

域名解析

对细节进行分析以后,可以看到,我的站点在解析时间上的耗时是普遍比较长的,大多是在 0.3 秒,这是一个优化点。

dzvhf

DNS 的优化总的来说,乏善可陈。因为系统底层对于 DNS 的机制只有两处,分别是

  1. Hosts
  2. DNS 解析

如果想要优化,那你就需要降低你的 DNS 解析时间。Hosts 显然是不靠谱的,你不可能让你的用户都去修改了 Hosts 后再使用。

而 DNS 解析,目前我使用的是免费的阿里云 DNS ,这里的优化其实依赖的是阿里云的 DNS 优化(付费版可能会好一点,不过我暂时不考虑上付费 DNS)。

内容下载

内容下载可以分为两个部分

  1. 内容生成:服务器计算得出结果。
  2. 内容下载:浏览器将服务器计算的结果下载到本地。

内容生成

在内容下载整个流程中,WordPress 主要的问题往往是卡在内容生成方面。

由于 WordPress 的功能强大,且在优化方面做的一般,因此,当我们的 WordPress 的内容足够多的时候, 数据库的查询就会开始变慢。

在这个时候,我们可以选择使用一些工具来加速站点的优化。一般的来说,会考虑使用 Key Value 数据库来替代直接使用 MySQL 进行查询。

这方面可选的包括

  • Memcached
  • Redis
  • 文件缓存

我因为懒得配置 MemeCached 和 Redis ,因此使用的是文件缓存,这里我用的是 WordPress 的 WP-Optimize 插件

kq8ap

可以看到,我的站点的缓存数量达到了 2716,缓存的大小达到了 45.6MB。也正是这些缓存,让我的站点在内容计算方面不需要耗费太多的时间,优化站点的体验。

当然,如果你追求更好的速度,可以考虑上 Redis 或 Memcache ,这些内容互联网上有非常多的教程,我就不再一一介绍。

内容下载

说完了内容生成,来谈一谈内容下载。

在内容下载方面,其实主要受限于你所使用的虚拟主机、VPS、云服务器性能。

在我们购买虚拟主机、云服务器的时候,我们往往会要购买相应的带宽。你购买的带宽越大,你的站点在下载时能够使用的带宽就会越大,相应的,下载的速度也就会越大。

在这方面,如果你的站点有备案,可以考虑购买一些国内的 CDN 服务,使用 CDN 来完成站点的加速,让你的站点加载速度可以变得更快一些。我的域名没有备案,所以没办法使用国内的 CDN,比较遗憾。

本地渲染

内容下载到本地,就会需要进行内容的渲染,而渲染的过程则和你的站点设计、标签数量、复杂度等都有关系。

你会发现,我现在站点使用的大多数是 WordPress 官方的主题,官方的主题的好处在于其站点设计简洁大方,同时页面的标签结构会比较合理,可以确保不会卡在一些奇奇怪怪得地方。

类似的,这也是为什么我很讨厌一些站点生成器(可视化拖拽工具),他们的确可以很方便的生成,但相应的,也会带来大量的冗余标签,让我觉得十分不优雅(当然,背后的人效计算又是另外一回事了)。

总结

对于你自己的博客来说,你也可以参照我的优化方法,来找到自己的问题点,并进行相应的优化,当然,如果你有什么想要讨论的,也欢迎你在下方的留言区和我一起分享。


Append:

我将 DNS 从阿里云免费 DNS 切换到 DNSPod 的个人专业版的以后,我的 DNS 解析时间获得大幅度下降,解析速度降为 0.13s 以内。如果你的解析速度也很高,值得试试。

Options Framework 如何将菜单移动到顶级菜单?

打开 inc/includes/class-options-framework-admin.php 文件,然后知道其中的 add_custom_options_page 方法,将其代码替换为如下代码

public function add_custom_options_page()
    {
        $menu = $this->menu_settings();
        switch ($menu['mode']) {
            case 'menu':
                // http://codex.wordpress.org/Function_Reference/add_menu_page
                $this->options_screen = add_menu_page(
                    $menu['page_title'],
                    $menu['menu_title'],
                    $menu['capability'],
                    $menu['menu_slug'],
                    array($this, 'options_page'),
                    $menu['icon_url'],
                    $menu['position']
                );
                break;
            default:
                // http://codex.wordpress.org/Function_Reference/add_submenu_page
                $this->options_screen = add_submenu_page(
                    $menu['parent_slug'],
                    $menu['page_title'],
                    $menu['menu_title'],
                    $menu['capability'],
                    $menu['menu_slug'],
                    array($this, 'options_page'));
                break;
        }
    }
Code language: PHP (php)

添加完成后,在你的主题的 functions.php 文件中添加如下代码:

function harvardchina_options_menu_filter($menu)
{
    $menu['mode'] = 'menu';
    $menu['page_title'] = 'Harvard 主题设置';
    $menu['menu_title'] = 'Harvard 主题设置';
    $menu['menu_slug'] = 'harvardchina-options';
    return $menu;
}
add_filter('optionsframework_menu', 'harvardchina_options_menu_filter');
Code language: PHP (php)

就可以实现将主题配置移动到顶级菜单。

reference:

https://gist.github.com/devinsays/884d6abe92857a329d99

如何自定义 WordPress 后台的 Admin

WordPress 的后台有非常多的东西,其中的很多东西都并非我们想要的,时间长了,看起来特别的头疼,所以,不妨写一些代码,来精简你的后台。

你所需要做的很简单,就是在你的主题的 functions.php 文件中添加如下代码。

function ixiqin_com_remove_menu_item()
{
    // 移除菜单项目的代码
}
add_action('admin_menu', 'ixiqin_com_remove_menu_item');
Code language: JavaScript (javascript)

其中,移除菜单项目的代码主要有以下两个函数

  • remove_menu_page('upload.php') 这个是移除一级菜单的,比如这个移除的是媒体库的菜单项目。
  • remove_submenu_page('options-general.php','options-reading.php')这个是移除设置中,阅读二级菜单的。

这两个函数的参数都是文件路径,这个路径你可以在 URL 栏中找到

dil27