因为之前用的两个代码高亮插件不是很顺手，所以打算自己制作一个
先创建一个空的块插件
npx @wordpress/create-block gutenpride
cd gutenpride如果电脑本来就有wordpress，则可以直接生成在 /wp-content/plugins 目录
如果没有，则可以使用 wp-env 工具，配合 docker ，生成一个专门调试插件的环境
标签： 插件
Download WebSite IP Information Query 3.2 CRX File for Chrome – Crx4Chrome
下载后，打开浏览器扩展页面开发人员模式，拖进去即可
edge浏览器也可以用
WP的滚动加载文章插件有很多，支持最好是jetpack里的滚动设置，但是安装这个插件会调用一些wp.com的资源，会降低网站速度，所以我还是放弃这个安装jetpack了。
我这里用的是 Catch Infinite Scroll，我的主题是官方的twentytwenty 2020主题。本来我好想用2021主题的，但对比了一下，我还是更喜欢2020的一些细节局部，干脆就用2020算了
默认安装好这个插件就直接实现滚动加载了，我猜测是这个插件会识别当前主题自动设置选择器。但我用的是我自己的子主题，所以要自己设置一下选择器
- Navigation Selector是分页器的选择器 nav.navigation
- Next Selector 是下一页的链接选择器，a 元素 nav.navigation .nav-links a.next
- Content Selector 不填。填了无法实现加载，我也不知道怎么回事
- Item Selector 是单个文章的选择器 article.status-publish
填好之后这个插件就会把原来的分页器换成 read more 的按钮
但是我又发现一个问题，用2020主题加载的话，文章之间的 hr 分隔栏是正常显示的。但是子主题就不会显示 hr 元素
所以我在子主题里把hr元素放到 article 里了
while (have_posts()) {
$i++;
the_post();
get_template_part("template-parts/content", get_post_type());
}
<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<?php if(is_archive()||is_home()) : ?>
<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />
<?php endif; ?>
...接下来设置一下加载按钮的样式，默认就是个 read more 链接，我把它改成2020主题的按钮样式
#infinite-handle span button,
#infinite-handle span button:focus,
#infinite-handle span button:hover {
background: #cd2653;
border: none;
border-radius: 0;
color: #fff;
cursor: pointer;
display: inline-block;
font-weight: 600;
letter-spacing: 0.0333em;
line-height: 1.25;
margin: 0;
opacity: 1;
padding: 18px 24px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: opacity 0.15s linear;
font-family: 'Lato', sans-serif;
font-size: 17px;
}加到子主题的style.css文件或者wp自定义主题里都行。
另外还要设置一下第一篇文章上面不需要分隔栏
#site-content article.status-publish:first-child hr {
display:none;
}
.archive-header + article hr {
display:none;
}
好了。到此完成，不用jetpack完美实现无限加载
新做的主题在谷歌pagespeed上跑了个分，被提示可以优化一下图片，采用webp格式显示图片可以更快，但实际上我用了谷歌pagespeed apache模块，所有的图片好像都是按webp格式加载的
但我还是试了一下两个图片优化插件Smush和Imagify，两个插件都是默认上传图片自动优化，对比了一下两个插件的优化效果
Smush默认原图不压缩，Imagify则从115kb压缩到43kb，而对比缩略图则也是Imagify压缩的更小，并且Imagify生成了webp格式
因为我也懒得去设置图片优化，所以光从默认设置来看，Imagify能把图片压缩的更下。应该更能节省服务器空间吧！