标签归档:WordPress

b29692084bbb

对 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)
b29692084bbb

为什么放弃 WordPress 的 2022 主题

近几年,我基本上是保持着跟随官方的步伐,使用当年的默认主题,比如 2021 出了,我就用 2021 主题,当 2022 出了,我就用了 2022 主题。

前几天我也还在使用 WordPress 2022 主题,今天恰逢得空,我就还是把主题切换回了更加古老的 2012 主题。

聊聊为什么吧。

为什么要放弃 WordPress 2022 主题?

实际上,从 2020 开始,你就会发现,WordPress 的主题设计就会逐渐的倾向于「个人主义」的主题,增加了大量的展示自己的主题,包括我自己,也在过去的一年里,大量的使用了 2021 这个主题。

d2b5ca33bd970f64a6301fa75ae2eb22 8
2021 年我的博客的样子

但是,当我在 Beta 版试用 WordPress 的 2022 主题时,我发现这样的情况愈发的明显,甚至对于我来说,超出了我的能力范围。

2022 主题相比于 2021 主题,提供了更多的编辑的能力,用户可以用一个可视化的编辑界面,去修改你的网站的任何一个位置。从一个普通的用户者的角度来看,它赋予了用户更多的能力,可以去实现任何一个想要的效果。但从一个专业的开发者的角度来看,他从某种程度上束缚住了我的手脚,我再也不能对 WordPress 主题做任何修改(你只会获得一个「编辑器」)。此外,对于一个「不那么有审美」的人(比如我),可拖拽意味着你会拖拽出一个完全不合理的界面。

So,我放弃了2022 主题

为什么是 2012 ?

2012 是我最近在看 HappyXiao 的博客 注意到的,我发现 2012 这个 10年前的主题在处理不同设备之间的响应式、清爽感等方面做的非常好,作为一个阅读者,我的体验极佳。

而我同样希望给我的读者提供更多更加友好的阅读体验,于是,我就选择了 2012 来作为当下我的主题。

当然,这个主题并不一定完全符合我的要求,因此,我也做了一些基本的改进,这些改进,后续我会单独写一篇文章来说明。

flat screen monitor

推荐两款 WordPress 插件

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

对象存储对接: 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

总结

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

b29692084bbb

如何 Debug WordPress 的 Pingback 功能

前两天,朱峰老师在写博客的时候,引用了我的文章,发现我的博客并没有开通 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 以内。如果你的解析速度也很高,值得试试。

WordPress 主题开发时应备的辅助函数

在 WordPress 主题开发时,经常会用到 三目运算符 来判断 Options Framework 的返回值。因此,可以将其封装为一个函数进行调用。


function hf_config_echo($name, $default = '')
{
    $value = of_get_options($name);
    if ($value) {
        echo $value;
    } else {
        echo $default;
    }
}
Code language: PHP (php)

如何自定义 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

用上了自己做的翻译插件

之前用的翻译插件cos_slug_translator 因为一些原因,并没有办法很好的和 JetPack 一起联用。导致每次发布到 Twitter 的文章链接都是失效的。为此,我前往 Github ,在 JetPack 的项目中发起了一个 Issue 。

Jeremy 给我了一些建议 , 于是,我就重新做了一个插件,并将这个插件提交到了官方的插件系统。希望可以通过审核。

后续考虑继续支持其他一些翻译平台,比如,有道翻译的新 API、搜狗、Google等一系列。特别是 Google, 这样就可以支持非中文文章了,比如,日语的。

项目仓库:

https://github.com/bestony/automatic-translate-slug