WP笔记

如何在WordPress主题中使用webpack

webpack是一款打包工具,可以将一些重复劳动自动化,比如css、js压缩打包,给css的属性添加浏览器前缀,即css vendor prefixes,还可以在css、js文件发生变化时帮我们自动刷新页面,或者允许其它设备访问本地的项目,总之很方便。本文就介绍一个简单的WordPress主题里配置webpack的方法。

继续阅读如何在WordPress主题中使用webpack
WP笔记

WordPress菜单添加SVG图标

svg图标清晰度高,代码可以直接放在网页上使用,不但能随意控制hover效果,还可以做动画,可谓好处多多。今天要介绍的是如何给WordPress的菜单项目添加svg图标,要直接插入svg代码,不是使用图片或背景,也不是使用类似fontawesome那样的字体图标。

继续阅读WordPress菜单添加SVG图标
WP笔记

WordPress Gutenberg编辑器的Gallery增加灯箱效果

WordPress默认的Gutenberg编辑器自带的Gallery图集很好用,美中不足的是查看大图比较麻烦,如果有lightbox灯箱效果,点击图片就展示大图,不用离开当前页,点点左右箭头就能继续看其它图片,岂不美哉。大家都喜欢看图,全用大图占地方,用小图看不清,图集+灯箱效果可以完美化解这个矛盾。

继续阅读WordPress Gutenberg编辑器的Gallery增加灯箱效果
WP笔记

WordPress文章列表模板带分页

WordPress博客类网站通常用文章(post)类型发布内容。为了让用户和搜索引擎快速了解网站的全部内容,可以制作一个文章列表页面,删繁就简,只将标题等重要信息展示出来,用户阅读标题就能了解网站内容是否对自己有用,搜索引擎则能更方便的找到链接,这有些类似HTML 网站地图

继续阅读WordPress文章列表模板带分页
WordPress 插件

使用Autoptimize优化网站访问速度

使用Autoptimize插件优化网站速度可以让站点在Google PageSpeed Insights测试中获得更高的分数,更高的分数通常代表更快的网站访问速度和更好的用户体验。与之类似的WP Minify Fix和Better WP Minify插件也不错,不过需要付出更多的努力让站点不报javascript错误,用户界面也稍显复杂。

继续阅读使用Autoptimize优化网站访问速度