分类
技术向

我的 WordPress 二〇二〇 主题修改

2020,换个 “二〇二〇” 主题!

今天换了新主题!

之前的 Ultra 主题毕竟是歪果仁写的,完全没有为中文博客优化,而且很多地方也不够完善(其实什么主题都有不够完善的地方的)。因为前两天看见 WordPress 官方出的年度主题 二〇二〇(Twenty Twenty)还挺好看的,就打算换上。

今天花了点时间把二〇二〇改好了,这边把改动了的 style.css 和其他加的一些东西放上来(咕咕咕了好久)。子主题是什么不存在的

style.css 看这里:https://www.justhx.com/wp-content/themes/twentytwenty/style.css

如果你也想拥有本站同样的界面,把上面的 style.css 打开,然后全选复制,进入主题编辑器 – style.css 然后替换掉;接下来进入 classes\class-twentytwenty-non-latin-languages.php,删掉 33 至 95 行。但是这不是全部,请看下面。

样式的改动非常粗暴,主要有以下变化:

  • 把各种超大的字体改成差不多合适的大小(也照顾了移动端)
  • 桌面端文章显示区域改成更宽,从 58rem78rem
  • 由于上面那么窄的显示区域实际上是为 WordPress 的文章块编辑器设计的,换言之我这样改动就没办法用块编辑器里的各种特效了;然而我用 markdown 写博文。
  • 改了所有的 font-family,去除了这个主题引入(还是从本地引入的)Inner 字体系列,全部改 Spectre.css 默认的中文简体 font-family;但是优先了思源宋体的权重(稍后需要从 Google Fonts 引入)。代码 monospace 也改了,现在会 fallback 更多的字体。

首页摘要居中

let homepages = [ '/', 'index.html', 'index.htm', 'index.php'];

if (homepages.indexOf(window.location.pathname) == "0") {
let all = document.getElementsByClassName('entry-content');
for (var i = 0; i < all.length; i++) {
all[i].style['text-align'] = 'center';
} }

感谢 @haozi

首先定义 homepages 为数个常见首页写法,然后看 homepages 是否为 window.location.pathname 的第一个,如果是,遍历所有 entry-content 的类名,加上 text-align: center 属性。

其他的改动

在主题的 header.php,你需要从 Google Fonts 引用思源宋体:

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC&display=swap" rel="stylesheet">

放心,Google Fonts 在国内的可访问性非常可以,并且因为加了 display: swap 属性,网页上的字体会首先以本机字体显示,等字体加载完成以后才会替换掉原来的字体。所以不会对速度有任何影响。


在主题的 footer.php,你需要引用 instant.page 库。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/instantpage.min.js" type="module" defer></script>

instant.page 有利于访客快速加载下一次点击;原理是鼠标移动到超链接上时就直接开始加载,然后点击后再替换页面。

移动端不加载 Google Adsense

本站会加载 Google Adsense 广告;考虑到用户体验,和相比于桌面端移动端屏蔽广告的困难度,移动端访问本站不会加载 Adsense。

通过以下代码实现:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    console.log('is mobile, ads will not load')
    }
else {
    var script = document.createElement('script');
    script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    document.write(script.outerHTML);   
    }

“我的 WordPress 二〇二〇 主题修改”上的6条回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据