因为之前用的两个代码高亮插件不是很顺手,所以打算自己制作一个
先创建一个空的块插件
npx @wordpress/create-block gutenpride
cd gutenpride
如果电脑本来就有wordpress,则可以直接生成在 /wp-content/plugins 目录
如果没有,则可以使用 wp-env 工具,配合 docker ,生成一个专门调试插件的环境
因为之前用的两个代码高亮插件不是很顺手,所以打算自己制作一个
先创建一个空的块插件
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算了
默认安装好这个插件就直接实现滚动加载了,我猜测是这个插件会识别当前主题自动设置选择器。但我用的是我自己的子主题,所以要自己设置一下选择器
填好之后这个插件就会把原来的分页器换成 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能把图片压缩的更下。应该更能节省服务器空间吧!