WordPress主题风格样式细节修改,配图优化

nZone 2023年10月19日更新于8 月前 共1476字 32行代码 预计7分钟 评论 47
阿里云折扣】服务器活动对比【腾讯云秒杀

网上下载的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');

不过这样只修改了文章中的图片地址,而媒体库中的路径并不会自动更新。因为有些文章图片比较多,就没有使用媒体库,而是直接使用了外部链接的方式插入图片。

coc图片文件夹

媒体库中的路径通常是在数据库中的 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
公众号
闹着玩下网
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: