网上下载的WordPress主题,默认模板可能不符合需求,闹着玩下网当前的主题是基于begin修改而来,想改成自己喜欢的风格。虽并非专业人士,不过审查元素是个好东西,还可借助人工智能工具辅助修改。
多次修改也主要是考虑深色主题观感,一般浅色主题都很好适应,现在的主题外观是红色系,主要logo是红色的,浅色的用白红配色没问题,而在深色模式下,用深红就不太好看。
![闹网旧样式](https://www.nzonex.com/wp-content/themes/beginlts/img/blank.gif)
一、配色样式
1、文章H标签文字配色
原来的H标签文字是没有颜色,在默认浅色模式下因为有加粗,没什么问题,而在深色模式下看不太明显,现在改成了淡红色,与前面的样式同色系。
2、导航菜单颜色
由之前的蓝色改为红色。
3、鼠标悬停特效
之前只有文章元素有,后面侧边栏也加上了,现在连评论、搜索框都加了。
![闹网新样式](https://www.nzonex.com/wp-content/themes/beginlts/img/blank.gif)
二、文章配图
1、缩小屏占比
文章配图占满屏幕怎么看都觉得不美观,调整最大宽度,与文字首段持平就好看多了,可对比前面的图。
max-width: 90%;
height: auto;
2、居中显示
默认居中显示,这样不用每次写文章都要设置为居中,虽然已经习惯了,但如果一次搞定,还能减少不必要的居中代码,何乐不为。
之所以要设置文章图片居中,是在修改维护BeoPlayer这篇文章时遇到问题。这是十多年前的文章了,有50多张图片,发现1张图片损坏得找回,这不是问题,主要是图片和文字的样式不一致,有的文字和图片连在一起,有的图片居中,有的图片居左。
![经典编辑器](https://www.nzonex.com/wp-content/themes/beginlts/img/blank.gif)
那篇文章还是以前的经典编辑器,也就是传统的富文本编辑器,而不是现在的谷腾堡(区块化)编辑器,把经典转成区块后,样式也是不一致,我就尝试用代码编辑器替换修改。
批量替换容易出错,想到用人工智能,比如ChatGPT,但输出不全,可能是文章太长了。我只能重新退回经典编辑器,发现代码量相当少,经典就是简洁,也因为文章图片没有一张张单独设置居中的代码。
display: block;
margin-left: auto;
margin-right: auto;
只是想把图片改成居中,文字正常即可,图片一张张的设置费时费神费力,直接修改样式简单直接。
3、删除原图阴影
不是删除图片在网站上显示的阴影特效,而是图片上的阴影特效。以前图片做成白色背景的阴影效果,但现在流行深色模式,背景如果是深色,看起来就很不和谐了。
![深色模式与浅色模式对比](https://www.nzonex.com/wp-content/themes/beginlts/img/blank.gif)
这些图片做的特效就完全多余了,所以得一张张修改裁剪,还得尽量还原图片的修改时间。为了减少体积,图片还得压缩一下,清晰度会有所降低,没用webp格式主要考虑要在Windows系统直接查看。
4、图片命名和路径优化
之前的路径比较乱,重新整理下,顺便命名一下,这样也方便维护,搜索关键词替换,直接通过 SQL 查询改数据库最方便了。比如:
UPDATE wp_posts SET post_content = REPLACE(post_content, 'file/pic/baidu/7.jpg', 'file/pic/blog/baiduhi9.jpg');
不过这样只修改了文章中的图片地址,而媒体库中的路径并不会自动更新。因为有些文章图片比较多,就没有使用媒体库,而是直接使用了外部链接的方式插入图片。
![coc图片文件夹](https://www.nzonex.com/wp-content/themes/beginlts/img/blank.gif)
媒体库中的路径通常是在数据库中的 wp_postmeta
表中的 _wp_attached_file
元数据字段中存储的。
UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, 'file/pic/baidu/7.jpg', 'file/pic/blog/baiduhi9.jpg') WHERE meta_key = '_wp_attached_file';
之前没有考虑到,都是只改文章,估计媒体库就会有很多失效的链接了,后续得用插件清理掉。
三、表格样式
因为文章图片的块都是把角隐藏变为圆角,图片这样设计没问题,但表格如果圆角就缺角了,得去掉圆角。跟图片一样,宽度也做下缩进。
.wp-block-table {
border-radius: 0;
width: 91%;
margin: 0 auto;
overflow-x: auto;
}
表格首行两边也是可以实现圆角,但有线框在,并没有完全实现,参考样式如下:
th:first-child {
border-top-left-radius: 10px;
}
th:last-child {
border-top-right-radius: 10px;
}
调整表格的列标题居中:
.wp-block-table th {
text-align: center;
}
四、侧边栏搜索框样式
之前是四方角,现在都改成了圆角,按钮调成圆形,要分开不然会出现扁圆的情况。
.wp-block-search,.wp-block-search__input {
border-radius: 1em;
padding: 6px;
}
.wp-block-search__button {
border-radius:50%;
padding: 6px;
}
最近有空没空都在改这个,有点沉迷了,因为图片较多,真是日夜折腾,就像是一个门外汉在搞网页设计,也要精益求精。感觉博客离完美又近了一点。
![weinxin](https://www.nzonex.com/file/pic/nZoneV.jpg)