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