历时两天,终于完成了主题的配置。在此感谢作者樱花庄的白猫制作的Sakura主题(https://2heng.xin/)
本文提到的所有方法,如未明确,均使用的是WordPress自带的自定义功能中的额外CSS功能
Sakura主题在免费的主题中算可定义比较多的,但仍有一些不可以手动修改的地方,在此汇总一下我比较Care的项目。

首页的一句话和社交卡片


通过修改,原本与标题并不搭配的暗色调可以和标题搭配,减少视觉上的对立。
修改方法:
打开WordPress的后台,找到

点击它

找到自定义,并点击它

接下来点击额外CSS

然后你就进入了一个可以输入文本的地方
在此输入以下内容
.header-info {
width: 63%;
margin: auto;
font-size: 16px;
color: #EE9CA7; // 这是修改一句话的颜色 (16进制色值)
background: rgba(255,250,250); //背景色(RGB色值)
padding: 15px; //大小
margin-top: 22px; //大小
letter-spacing: 0;
line-height: 30px; //大小
border-radius: 10px; //大小
box-sizing: initial;
white-space: nowrap
}
.top-social img {
height: 40px; //这是修改社交网络外图标的高
width: 40px; //这是修改社交网络外图标的宽
padding: 9px; //这是修改社交网络图标的大小
background: rgba(255,250,250) //这是背景颜色
}
你可以通过实时预览更好的更改。
关于社交卡片图标的更改


可以很清楚的看到,修改前的图标存在一些视觉上的混乱。Github的图标几乎不可见,微博的图标视觉上也存在的不协和。
通过修改统一风格的图标,虽然一定程度上辨别不如原方案,但视觉上十分协调。
修改图标,需要通过修改PHP文件实现
首先,访问目录

找到

打开它
你会发现以下内容

通过一些合理的分析,你可以很快的定位到某个社交网络的图标
例:此段代码多次出现Wechat,因此判定为微信图标
然后将原链接替换为你想要的图标的链接即可。
注意!此代码有两种显示方式,所以该代码有两次重复的内容,推荐全部修改。
关于菜单栏自定义


字体修改方式同第一条
代码是
textarea {
color: #EE9CA7; //颜色(十六进制)
font-size: 15px;
line-height: 1.5
}
搜索修改方式
代码是
i.iconfont.js-toggle-search.iconsearch {
color: #EE9CA7; //颜色(十六进制)
cursor:pointer;
font-size: 20px; //大小(慎重改动)
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
默认头像修改颜色方法
打开服务器目录:

找到

修改它,找到以下内容

找到 https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/images/none.png
替换你所需要的图标链接
关于首页圆形头像配色

方法同第一条
代码如下
.focusinfo .header-tou img {
box-shadow: inset 0 0 10px #EE9CA7; //颜色(十六进制)
padding: 5px; //虚化程度
opacity: 1;
transform: rotate(0);
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
transition: all ease 1s;
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
-o-transition: all ease 1s
}
占位图修改(图标及图案)
图标
在主题设置中的


修改LazyLoad占位图链接即可(只推荐使用SVG格式)
图案(如特色图片)
注意,此项工作较为复杂,酌情参考。您必须开启主题自定义选项后进行操作。
你将需要修改以下目录下的文件:
- Sakura/layouts/post-nextprev.php
- Sakura/layouts/feature.php
- Sakura/tpl/content-thumb.php
- Sakura/inc/theme_plus.php
首先,这个占位图的名称是: orange.progress-bar-stripe-loader.svg
此占位图存放在 jsDelivr,为SVG格式。不推荐尝试其他格式!
为了修改它,你需要准备好替换的SVG文件。
Post-nextprev.php的修改

位于第11行,替换链接{ https://cdn.jsdelivr.net/gh/moezx/cdn@3.0.1/img/svg/loader/orange.progress-bar-stripe-loader.svg }为你要更换的。

位于第14行,替换链接{ https://cdn.jsdelivr.net/gh/moezx/cdn@3.0.1/img/svg/loader/orange.progress-bar-stripe-loader.svg }为你要更换的。
feature.php 的修改

位于第12行,替换链接{ https://cdn.jsdelivr.net/gh/moezx/cdn@3.0.1/img/svg/loader/orange.progress-bar-stripe-loader.svg }为你要更换的。
content-thumb.php 的修改

位于第40行,替换链接{ https://cdn.jsdelivr.net/gh/moezx/cdn@3.0.1/img/svg/loader/orange.progress-bar-stripe-loader.svg }为你要更换的。
theme_plus.php 的修改
此文件有多处需修改

位于第316行,替换链接{ https://cdn.jsdelivr.net/gh/moezx/cdn@3.0.1/img/svg/loader/orange.progress-bar-stripe-loader.svg }为你要更换的。

位于第361行,替换链接{ https://cdn.jsdelivr.net/gh/moezx/cdn@3.0.1/img/svg/loader/orange.progress-bar-stripe-loader.svg }为你要更换的。

位于第367行,替换链接{ https://cdn.jsdelivr.net/gh/moezx/cdn@3.0.1/img/svg/loader/orange.progress-bar-stripe-loader.svg }为你要更换的。
网页鼠标的修改
你需要知道的
主题自带的五种不同的鼠标样式

例子
- Normal样式应用于全局
- No_Disponible样式用在PC端的返回上文
- Ayuda样式有用在选中某个地方的时候
- Texto样式有用在文本复制中
- Work样式有用在点击选项中
具体各个鼠标样式的使用地方本文不做全面解释
需要准备的
- 最好Cur格式的鼠标样式 (Ani格式未经测试)
- 最好有五种不同的样式(同一风格)
- 需要Style.css的修改
- 需要上传你所需要的鼠标样式,并准备好链接
- 理解且能正确的使用前文所说的方法 (方法可参考本文第一部分)
具体方法
Normal样式的修改
添加以下代码
body {
background: #fff;
background-attachment: fixed;
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件), auto
}
No_Disponible样式的修改
添加以下代码
.cd-top {
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件), auto;
opacity: 1
}
.botui-actions-buttons-button {
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件), auto;
}
button.botui-actions-buttons-button {
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件), auto;
-webkit-appearance: button
}
#emotion-toggle,
.emoji-item, //感谢维安雨轩的提醒
.emotion-box,
.emotion-item,
.on-hover,
.tieba-container span {
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件), auto
}
Ayuda样式的修改
添加以下代码
a {
background-color: transparent;
text-decoration: none;
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件), auto
}
.ins-section .ins-section-header,.ins-section .ins-search-item {
padding: 8px 15px;
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件),auto;
}
.ins-section .ins-search-item .ins-search-preview {
font-size: 12px;
color: #9a9a9a;
margin: 5px 0 0 0px;
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件),auto;
}
Texto样式的修改
添加以下代码
p {
margin-bottom: 1.5em;
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件), auto
}
.highlight-wrap code {
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件), auto
}
Work样式的修改
添加以下代码
a:active {
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件), alias
}
如果你的修改并未生效,请手动修改CSS文件
以上,是我在使用主题中的小建议。后续仍会添加。再次感谢作者制作了本主题。
Comments | 5 条评论
好棒,很漂亮的风格改变
(°∀°)ノ
真的是非常不错的修改方式!
)
(ps:希望可以用专用的代码框框,好抄一点
粉粉的主题,少女心爆满~
@chanshiyu 大佬好
同为infj哈哈哈哈