历时两天,终于完成了主题的配置。在此感谢作者樱花庄的白猫制作的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文件

以上,是我在使用主题中的小建议。后续仍会添加。再次感谢作者制作了本主题。


ありふれたあの日々をただ思い返す