标签归档:WordPress

如何从 WordPress 插件目录下架一个插件

我在 WordPress 官方上架了不少的插件,但不少的插件如今我已经不再维护了。

再加上现在我开始重新调整 WPStore,因此,决定下架其中一些不再维护的插件,减少 WordPress 官方插件系统中的无用插件。

操作步骤

1. 登陆你的 WordPress.org 的账号,并找到你要下架的插件

d2b5ca33bd970f64a6301fa75ae2eb22 28

比如,我这里希望下架早年为 Payjs 写的付费阅读插件。

2. 点击 右下角的 Advanced View

d2b5ca33bd970f64a6301fa75ae2eb22 29

在 Details 页面找到 Advanced View 的连接,并点击进入 Advanced View 页面。

3. 在 THE DANGER ZONE 中关闭插件

d2b5ca33bd970f64a6301fa75ae2eb22 30

进入 Advanced View 页面之后,向下拖动,在底部的 THE DANGER ZONE 中可以找到 「Close This Plugin」,点击按钮,并在弹出的窗口中,点击确认即可。

4. 删除完成

d2b5ca33bd970f64a6301fa75ae2eb22 31

当你看到如上界面时,就说明你这个插件已经完全关闭了。

总结

其实 WordPress 并没有要求你关闭掉每一个插件,不过从插件的维护角度来看,关闭一个不再维护的插件可以减少你后续的服务的成本,也是一个不错的选择。

WordPress 官方的 Code Reference应该如何使用?

如果你要开发 WordPress ,必然会用到 WordPress 官方的文档。而在官方文档当中,除了各种 Handbook ,最重要便是 Code Reference

在使用 Code Reference 的时候,也是存在一些技巧的。

搜索你需要的函数、Hooks、Filter、Class

访问 Code Reference 主页,可以看到有一个搜索框,在这里你可以输入你要搜索的关键词,并在下拉框中筛选出你要用的具体的函数/Hooks/Filter/Class

d2b5ca33bd970f64a6301fa75ae2eb22 20

当然,如果你在开发过程中,明确了你要查询的某个特定的函数,也有一个简单的方式来查询,只需要将下方的链接中的 FUNCTIONNAME 替换为你要查询的函数名,就可以直接跳转到对应的函数的详细界面,查看对应的函数的功能。

https://developer.wordpress.org/reference/functions/FUNCTIONNAME/
Code language: JavaScript (javascript)

如果你查询的是 Hooks、Filter 也有类似的方法,WordPress 的单个函数/Hooks/Filter 的URL非常的明确,因此,你可以在写代码的时候,随时把你需要查询的函数直接复制出来,替换浏览器地址栏中的方法名即可。

理解 Code Reference 的内容

download_url 为例,在 Code Reference 当中,大体上会分为以下几个区域

Description
Parameters
Return
Source
Related
 - Uses
 - Used By
Changelog
User Contributed Notes
 - Feedback
Code language: PHP (php)

Description

d2b5ca33bd970f64a6301fa75ae2eb22 21

这里介绍了这个函数的基本介绍,一些时候,也会在这个区域加入一些使用的 Tips。

不过这个描述并非每一个函数都会有。

Parameters

d2b5ca33bd970f64a6301fa75ae2eb22 22

参数区域说明了这个函数的入参有哪些,你可以对着入参的介绍调用函数,从而避免传入错误的参数

Return

d2b5ca33bd970f64a6301fa75ae2eb22 23

返回值定义了具体的返回值,你可以根据返回值来判断具体的结果。不仅如此,点击里面的链接,可以跳转到对应的类,查看对应返回结果的类型。

Source

d2b5ca33bd970f64a6301fa75ae2eb22 24

Source 部分则给你了函数的具体的代码,对于一些你在开发过程中百思不得其解的函数,读一下这个函数的源码可能会让你茅塞顿开。

对于比较长的函数,点击 Expand 就可以展开看。如果你希望在本地看,左上角也告诉你了这个函数在具体哪个文件可以查看。你可以直接按图索骥,找到本地的对应函数来查看。

Related

d2b5ca33bd970f64a6301fa75ae2eb22 25

Related 当中分为两个区块,分别是 Uses 和 Used By ,分别介绍当前这个函数是基于哪些函数实现的(Uses)和其他哪些函数使用了当前这个函数(Used By)

有了 Uses 和 Used By,你就可以自己封装一个类似的函数,也可以看看其他的函数是如何调用当前这个函数,心中更有数。

Changelog

d2b5ca33bd970f64a6301fa75ae2eb22 26

Changelog 当中记录了这个函数的具体的变更历史,你就可以非常方便的去了解到一个函数的发展历史,可能某个功能你过去用的好好的,最近不能用了,就是因为函数发生了更新。

User Contributed Notes

d2b5ca33bd970f64a6301fa75ae2eb22 27

在 User Contributed Notes 当中,记录了别人对于这个函数使用的反馈,你可以看到其他开发者是如何使用这个函数的。当你在使用这个函数/Hook出现问题时,就可以参考一下其他人贡献的笔记,可能会更好的帮助你来理解这些 Notes。

总结

用好 WordPress 自带的 Code Reference 可以帮助大家更好的开发 WordPress 的各种功能,花点时间了解一下 Code Reference ,相信可以帮到你~

Gutenberg 编辑器带来的模式变更

自 WordPress 5.0 开始, Gutenberg 编辑器(后文称为古腾堡编辑器)开始存在于 WordPress 当中,为普通用户所用。而得益于古腾堡编辑器带来的卓越的使用体验(用户不需要再记录晦涩难懂的短代码、无须忍受 TinyMCE 的界面),用户使用 WordPress 的方式也开始变得多种多样。

如果你还没有用过古腾堡编辑器,那你可以访问 WordPress 官方提供的在线预览工具来试用:https://wordpress.org/gutenberg/

体验的变革

古腾堡的出现,让作者可以更加接近于我一直描述的 WordPress 所能够提供的最大的价值 —— 让写作变得更加简单,易实现。不仅如此,古腾堡带来的新的编辑体验,让除了工程师、Geek 以外的人也可以很轻松的实现一个更好看、更易读、更加丰富的界面。

而从 WordPress 开发团队的态度来看,也是更加推荐作者们更多的使用古腾堡编辑器:从Twenty Nineteen 开始,古腾堡的支持就成为了默认,并不断的通过官方主题的用法,让作者们看到 WordPress 原来还可以是这样。今年的 Twenty Twenty Two 更是从写作者变为了艺术家 —— 你可以十分简单的建造一个线上的画廊。

开发模式的变更

过去,WordPress 开发整体来说,可以分为两条线:一条是主题开发,你需要与 PHP、HTML、CSS、Javascript 共同战斗;另一条线则是插件开发,你需要与PHP 为伍。

搞插件开发的,你对于前端开发不甚了解也无所谓。WordPress 提供了大量的 helper function 。比如,我在「开发一个短代码插件」中,不使用一行前端代码就实现了 TinyMCE 的功能新增。

而在新的古腾堡编辑器生态下,开发者如果希望对于古腾堡进行拓展,一方面依然可以使用之前的方式,接入各种短代码来实现各种不同的用户体验,另一方面,则可以借助与前端技术栈来实现一个更加丰富的用户体验。

你可以使用 JQuery 和 WordPress 为你绑定的全局对象来修改古腾堡编辑器实现你的目标,更是可以借助前端的开发体系,诸如 Webpack、React 来开发一个强交互,体验佳的用户体验。

WordPress 的开发不再是 PHP 工程师自己的事情,它将更多的人卷入 WordPress 的开发过程中。而对于 WordPress 开发工程师来说,则有了更高的要求,来完成插件的开发、主题的开发。

总结

自古腾堡的推出,这样的趋势就开始渐显。但直到我真正开始开发一款古腾堡插件,我才真正意识到 —— WordPress 在内容创作领域的价值,无可替代。纵然他有众多的历史包袱,但对于每一个创作者来说,他都是最好的选择。

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

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 判断不同行为性能差异

自打上次为我的博客加入了 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/

为什么你应该自建图床?

我最近对博客做了个整体架构优化(或者其实说是重建了一次),在重建完成后,为了确保我的重建是成功的,我安装了 Broken Link Checker 来进行网站链接检查。经过插件的检查后,发现了不少我在迁移的时候出现问题的点。不过,在这个过程中,也注意到了我过去自己的问题。

首当其冲的是我在早期大量的应用了来自微博的图床,但随着后续微博图床的失效,我无法再使用这些图片,在读者访问的时候,就会相应的出现错误。我不得不针对这些图片一个个手动处理。

d2b5ca33bd970f64a6301fa75ae2eb22 22

好在是后来 iPic 的出现,我得以从新浪图床迁移到如今自建的又拍云图床中。

d2b5ca33bd970f64a6301fa75ae2eb22 23

而随着 WordPress 插件生态的丰富,如今我在 WordPress 上写作插图更加的方便。

自建图床和自建博客、自建网站等等的原因几乎是一样的 —— 只有你自己维护的,才是真正属于你的,别人维护的,都有可能在某个时刻不让你使用。那个时候,你的成本会骤增。比如现在的我,就在苦逼的一个个的修改图片的地址。

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

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

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

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

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

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

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

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

在之前的文章我是如何优化博客的本站在用的一些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 主题,如何修改主题代码?

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

修改主题代码去哪了?

d2b5ca33bd970f64a6301fa75ae2eb22 9

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

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

d2b5ca33bd970f64a6301fa75ae2eb22 10

对 WordPress 2012 主题的一些改动

在上一篇文章当中,我介绍了我为什么要迁移到 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)