近期的主题更新
当前自用的 WordPress 主题 Slocks 自上线以来,一直也没间断调整代码。业余无暇,就少改一改,最近时间宽裕,就多修了一修。今天有兴致发篇日志,记录一下最近的改动,巧合的是,搜出来主题发布官宣的文章,居然正好是两年前的今天,2022 年 5 月 11 号。
这种感觉,虽然不像从压箱底的换季衣服兜里摸出一百块钱来那么洋洋得意,也不是丢了手机又失而复得那么轻松释然,更不如自己从无意之间发现自己于无意当中购买了自己在无意选择的几个号码作为幸运数字的彩票中了头奖那么欣喜若狂,但是看到这种没有多少意义的冥冥注定,我的心底还是泛出一丝波澜来。当然,我是记得那篇文章是 5 月份发布的,点开之前也闪念而过会不会是刚好两周年,那也仅是闪念。可尽管有了这闪念作为一点心理准备,当注视着这精确吻合的月份和日子,我的心底还是泛出一丝波澜来。
神奇。
两周年过去了,我的折腾劲头仍旧未减当年,不过倒是熟练了许多。而有了 AI 的加持,我的 Coding 时间也些许变成了“怎么当好一个提问者”。这里往下,记录都在哪里动刀。
第一处
oEmbed 站内文章样式定制。这是直接在编辑器贴上站内链接,就会生成一个文章块(还是叫卡片?)样式的文章链接,看本文紧挨第一段文字后的展示。oEmbed 当然不仅用于展示站内链接,还有国外各大类似于 Youtube 一样的视频站、社交媒体站等,就是说只要贴一个链接,WordPress 就会自动把嵌入到文章的媒体、链接样式做好了,雅。对我有什么用?貌似无,仅把这个功能还原出来。之前,是禁用了 oEmbed 功能相关的 js 资源输出。所谓样式定制,仅仅是用 css 把默认最大 550px 的宽度调整成 100% 了。
第二处
留言板和链接,这两个页面合二为一。作为非 PO 文的留言入口,留下一个足矣。除了删除原有的留言页,这里还涉及到一个评论迁移的问题。迁移成功后,当页的评论数量统计错误,编辑页面重存一下就好。这里是从 GPT 索取的代码,把留言板的评论迁入链接页:
UPDATE wp_comments SET comment_post_ID = '链接页ID' WHERE comment_post_ID = '留言页ID';
此外,链接页里,链接的样式现在改成了按钮,布局使用 Bootstrap 的网格类,也做了下优化。
第三处
代码高亮,从 SyntaxHighlighter Evolved 插件替换为主题原生支持的 Prism.js。我想,对于折腾 WP 主题的用户,代码高亮功能是必不可少的。不论是记录、还是科普,文章页上代码的字体和颜色,如果跟普通文字混为一谈别无二致,那就如同饭吃到一半掌柜的端来号称镇店美味的特色菜,客人听闻嘴里含着马上就要流出来的口水,瞪大了快要掉地上的眼珠子定睛一看:是一盘白米饭。
其实真就有这么的索然无味。我想,用这个类比来形容是极贴切,对于不折腾代码的人,可理解、可哑然。
第四处
Pingback 引用通知的启用和样式定制。在我的文章里贴上你的文章链接,你的文章评论区会出现一条评论,文字内容是我的文章题目和我的站名,并将文字赋链接,地址是我的文章,目的是告诉你:我引用你的文献了。我发布文章,就会自动 Ping 引用的链接,对方在评论区显示出来我的链接就是 Pingback。出于对垃圾评论控制、和莫名原因的考虑,多数站点禁用此功能。我亦把它启用起来,并在 comment walker 当中编写了输出的 html 结构、定制了 css 样式。
现在,这篇文章里边就有一条 Pingback,评论区见。显然,这属于站内 Ping。依据 WP 官方,使用 Slug 以避免站内 Ping。
第五处
评论 Ajax 提交及翻页的细节改进。完全基于 /wp-includes/js/comment-reply.js
的代码添加了 Ajax 评论提交、完善了评论表单移动的功能,而评论提交/翻页也均使用的 WordPress 的原生 Ajax 处理方式,维护和定制都方便多了。
第六处
这本质上不算一处,而应称为例行更新。引用的各种库文件,通常在放出新版后,更新到主题中。当前有 Bootstrap、FancyBox UI、Font Awesome,当然还有业已停更的 Javascript-MD5、和 Prism.js,这就没办法追新了。
第七处
临时想起的,标签页里对标签的样式和布局也做了微调,也是直接套用的 Bootstrap 网格类做的调整。
结语
磨磨蹭蹭近两小时,文赶紧发了,不然时间到了明天再发,那就不是两周年了。
第二处用wp_update_comment()好一些。原生函数会自动处理缓存和自动生成的字段。
@大致 当时对于处理这些评论的迁移,我的第一反应就是在 PhpMyAdmin 里执行 MySQL 语句实现,就沿着这个思路去实践了。对使用原生函数来处理这一点我极认可,如果重来一次,会采用你这个建议
图标有的挂了
@段先森 是指图标有的没显示出来?很可能因为你那里有文件没正常加载,这个图标字体的文件体积不小,会导致加载速度慢,不过我这强制刷新,也用隐私窗口看了下,顶部导航条的图标,或是首页每篇文章底部信息的图标,都木问题
@sys 比如说你插入的两篇文章,SYS 棚户区前面的是一个图片还是图标来着,看不见
@段先森 那个的确有点奇怪,我在 pc 浏览器上看着好好的,记得手机上次就发现显示不出来,图标的地址 /wp-includes/images/w-logo-blue.png,是我的站点 wp 的主程序目录中的,这个也是自动生成的链接地址,感觉没道理显示不出,蒙
@段先森 已找到问题原因,现在修复了,也把默认的 logo 替换成了站点自定义的 logo
简约,看着挺舒服的,比Weisay Box好看多,Weisay Box太多实线框了,不知会不会分享呢
@别无所求 好看倒是谈不上,简约才是对我最大的认可哈哈,整体结构还是跟 weisaybox 差不多的了,不过为了保有一点个性在这里,尚未计划与大佬共享,谨希望多提建议
嘿嘿,建议就没啥建议了,主要是想参考下你侧边栏的最新评论样式。标签页可以换换了,我看了这里的不错,可以改一下代码实现 WordPress 漂亮的标签归档页面
@别无所求 侧栏最新评论的样式,前端代码可以直接看到,过长的评论内容使用 css 的文字截断,我直接用了 Bootstrap 的 Text truncation,后端代码我觉得只有一点需要提,就是发表时间,是用 WP 原生函数
human_time_diff()
来计算的关于标签页,我仔细看了下,核心代码应该都是来自制作一个按标签首字母分类的WordPress标签页(升级版) 这篇教程,Kevin’s 的页面确实更加优雅、美观、现代化,我与他的样式上有一些差别,最重要的区别应该是字母导航的位置,他是放到侧边的,这样的好处是可以在页面的任何位置点选到导航,很方便,不过导航放在侧栏就需要占用一定的宽度,我观察到的第一反应是好奇他在手机浏览器上会如何处理,测试了一下,移动端真的出现侧栏遮挡标签正文的情况,当然也许在兼顾便捷的同时,也有解决这种遮挡问题的方法,不过对我来说不够刚需(其实就是懒
),所以这个暂且放弃
总之,感谢建议,欢迎交流
你应该也是一个折腾爱好者无疑,分享一下你的站点吧
@sys 站点停了,不过有这个打算重开,要先找找好看简洁的主题然后再折腾折腾
@别无所求 欢迎重开,期待回归,关注ing
自己搞,厉害啊
@王光卫博客 很业余的哈哈