Sakura主题细节美化（一）

首页添加波浪动画效果

使用CSS3 Animation复现

打开wp后台-外观-Sakura主题设置-基本设置-自定义css
在里面填入下方代码

/* 首页浮动波浪动画 */
#banner_wave_1 {
    width: auto;
    height: 65px;
    background: url(https://view.amogu.cn/images/2020/08/30/wave_1.png) repeat-x;
    _filter: alpha(opacity=80);
    position: absolute;
    bottom: 0;
    width: 400%;
    left: -236px;
    z-index: 5;
    opacity: 1;
    transiton-property: opacity, bottom;
    transition-duration: .4s, .4s;
    animation-name: move2;
    animation-duration: 240s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
 
#banner_wave_2 {
    width: auto;
    height: 80px;
    background: url(https://view.amogu.cn/images/2020/08/30/wave_2.png) repeat-x;
    _filter: alpha(opacity=80);
    position: absolute;
    bottom: 0;
    width: 400%;
    left: 0;
    z-index: 4;
    opacity: 1;
    transiton-property: opacity, bottom;
    transition-duration: .4s, .4s;
    animation-name: move2;
    animation-duration: 160s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
 
/* move1和move2只是方向不同，根据喜好自选即可。 */
/* 没做浏览器适配，具体哪些浏览器会生效未知，反正Chrome没什么问题。*/
 
@keyframes move1 {
    100% {
        background-position: 100% 0;
    }
}
 
@keyframes move2 {
    100% {
        background-position: -100% 0;
    }
}

2.两个DIV的穿插位置

在路径 /wp-content/themes/Sakura/layouts 下，打开 imgbox.php。在下面所述位置插入。

<style>.header-info::before{display: none !important;opacity: 0 !important;}</style>
<div id="banner_wave_1"></div><div id="banner_wave_2"></div><!--两个DIV插在这。-->

给首页添加下拉小箭头

修改 imgbox.php 文件
找到路径/wp-content/themes/Sakura/layouts下的imgbox.php 文件，在最底下添加如下代码

?>
<!-- 首页下拉箭头 -->
<div class="headertop-down faa-float animated" onclick="headertop_down()"><span><i class="fa fa-chevron-down" aria-hidden="true"></i></span></div>
<!-- 首页下拉箭头END -->

PS: 这部分的fa-chevron-down为下拉图标部分，可以查看Font Awesome 中文网找到图标名称替换成你喜欢的图标

接着修改主题文件中的 style.css 文件（记得在WP后台主题设置-CDN-开启本地调用主题js、css文件）或者直接在 主题设置-自定义CSS样式 中添加如下代码

/* 首页下拉箭头 */
.headertop-bar::after {
    content: '';
    width: 150%;
    height: 4.375rem;
    background: #fff;
    left: -25%;
    bottom: -2.875rem;
    border-radius: 100%;
    position: absolute;
    z-index: 4;
}
 
.headertop-down {
    position: absolute;
    bottom: 50px;
    left: 50%;
    cursor: pointer;
    z-index: 5;
}
@media (max-width: 860px) {
    .headertop-down {
        display: none
    }
}
 
.headertop-down i {
    font-size: 28px;
    color: #fff;
    -ms-transform: scale(1.5,1); /* IE 9 */
    -webkit-transform: scale(1.5,1); /* Safari */
    transform: scale(1.5,1); /* Standard syntax */
}

最后打开主题文件 JS 目录里的 sakura-app.js 文件，在底下添加函数

/* 首页下拉箭头 */
function headertop_down() {
    var coverOffset = $('#content').offset().top;
    $('html,body').animate({
        scrollTop: coverOffset
    },
    600);
}

全站字体替换

中文字体包挺大的，加载比较慢，不太推荐修改，本站用的是站酷快乐体
先选择一个你喜欢的字体下载他的TTF字体包（超过3M的我不建议你用它），用字客网转下格式（eot、woff、ttf、svg）
然后按如下CSS引用你的字体包，放到主题根目录的 style.css 文件里


@font-face {
    font-family: "zhanku";
    src: url("https://cdn.jsdelivr.net/gh/kokarinn/source@1.2.4/fonts/zhanku2016/zhanku2016.eot"); /* IE9 */
    src: url("https://cdn.jsdelivr.net/gh/kokarinn/source@1.2.4/fonts/zhanku2016/zhanku2016.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */  
    url("https://cdn.jsdelivr.net/gh/kokarinn/source@1.2.4/fonts/zhanku2016/zhanku2016.woff") format("woff"), /* chrome、firefox */
    url("https://cdn.jsdelivr.net/gh/kokarinn/source@1.2.4/fonts/zhanku2016/zhanku2016.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    url("https://cdn.jsdelivr.net/gh/kokarinn/source@1.2.4/fonts/zhanku2016/zhanku2016.svg#zhanku") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}

最后主题根目录的 style.css 文件，大概第7922行、8305行、8329行、8334行，找不到的 Ctrl + F，在前面加入你的字体，如下

.top-feature-row {
    width: 100%;
    height: auto;
    font-family: 'Noto Serif SC';/*这边用原来字体主要是怕聚焦图错位*/
    margin-top: 55px
}
/*移动端字体*/
.chinese-font {
    font-family: zhanku, 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif
}
/*PC端字体*/
.serif {
    font-family: zhanku, 'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif', source-han-serif-sc, 'PT Serif', 'SongTi SC', 'MicroSoft Yahei', Georgia, serif
}
/*移动端字体*/
@media (max-width:860px) {
    .serif {
        font-family: zhanku, 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif
    }
}

菜单栏居中显示

首先要修改Sakura主题目录的 header.php 文件内的结构（从大概93行改起）原来的页面结构(点击可放大)

修改的页面结构(点击可放大)

修改一代码：

<?php if (is_front_page()){ ?><!--判断是否为首页-->
<header class="site-header no-select is-homepage" role="banner">
<?php }else{ ?>
<header class="site-header no-select" role="banner">
<?php } ?>

修改二代码：
找到</div> 插入下方代码

<div class="lower-cantiner">
    <div class="lower"><?php if(!akina_option('shownav')){ ?>
        <div id="show-nav" class="showNav mobile-fit">
            <div class="line line1"></div>
            <div class="line line2"></div>
            <div class="line line3"></div>
        </div><?php } ?>
        <nav class="mobile-fit-control hide"><?php wp_nav_menu( array( 'depth' => 2, 'theme_location' => 'primary', 'container' => false ) ); ?></nav><!-- #site-navigation -->
    </div>
</div>

修改三：注释掉下图代码

然后修改Sakura主题目录的 style.css 文件中的内容，增加如下 CSS（标记为修改的需要自己 Ctrl+F 修改下）

/* 菜单栏居中 */
.site-header.is-homepage .lower-cantiner {
    display: none;
}
.site-header.is-homepage.yya .lower-cantiner {
    display: block;
}
.site-header:hover.is-homepage .lower-cantiner {
    display: block;
}
.site-top .lower-cantiner {
    position: absolute;
    left: 50%;
    min-width: 758.4px;
    pointer-events: none;
}
#show-nav.mobile-fit {
    position: fixed !important;
    right: 120px;
    opacity: 0;
    pointer-events: none;
}
/*此属性需要修改*/
.site-top .lower {
    position: relative;
    display: inline-block;
    margin: 15px 0 0 10px;
    font-size: 16px;
    left: -50%;
    pointer-events: auto !important;
}
/*此属性需要修改*/
@media(max-width:1200px) {
    .site-top .lower nav{
        /*right: calc(-150px - 100%);这行注释适配IPadPro*/
        position: absolute;
        float: right;
        animation: searchbox .2s;
        min-width: 860px;
        z-index: -1;
    }
    .site-top .lower nav.navbar {
        right: calc(-50px - 100%);
    }
    .site-top .lower nav.navbar ul {
        background: #fff;
    }
}

评论区头像不显示

原因是白猫提供的 Gravatar 头像镜像挂了，解决方法很简单替换镜像地址即可（注意V3.3.8后可由后台直接修改）

1.首先后台主题设置把本地调用前端库（lib.js、lib.css）这个选项打开
2.修改主题目录下的 comments.php 大概第91行 img 的url为

https://gravatar.loli.net/avatar/f11f237b3de93c93b24045e71f7f65c6?s=80&d=mm&r=g

3.然后打开主题目录下的 cdn 子目录中的 js/lib.js ,在里面搜索 gravatar.2heng.xin ，把他替换成以下任意一个镜像地址

1.    cdn.geekzu.org/avatar 
2.    gravatar.loli.net/avatar
3.    cdn.v2ex.com/avatar

FuwaFuwa

首页添加波浪动画效果

使用CSS3 Animation复现

2.两个DIV的穿插位置

给首页添加下拉小箭头

全站字体替换

菜单栏居中显示

评论区头像不显示

极简风window10桌面设置

如何使用wordpress最新编辑器古登堡写一篇文章

kokarinn

Comments | NOTHING

取消回复

52赫兹の鯨