博主建议:请专注于博客文章内容质量,不要过度美化,美化将会增加很多的动/静态资源导致页面加载变慢,服务器资源占用过高,极度影响访问者体验,尤其是移动端,所以请在保证能在2秒之内加载完网页的前提下择优美化吧

以下所有修改本人均已本地测试通过,如有问题还是建议去原作者那里留言哦,虽然你在我这里留言我也看但是不一定能解决~
修改前记得在 WP后台-外观-主题设置-CDN-开启本地调用主题 js、css 文件 选项哦~
推荐使用 WP Super Cache(专家模式)Autoptimize 这两个插件优化WP博客哦,好了下面都是满满的干货哦~

样式美化

首页的一句话和社交卡片

节选自:染川 瞳&关于本主题(Sakura by Mashiro)使用上的建议

  1. 在后台自定义CSS 或 直接主题包里的 style.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)  /*这是背景颜色*/
     }
    
  2. 关于社交卡片图标的修改,图片都在主题文件的 layouts/imgbox.php 里,你们自个替换下里面的图片URL就成
    修改完

首页随机图固定

看这行:https://github.com/mashirozx/Sakura/blob/master/inc/decorate.php#L81

全站字体替换

中文字体包挺大的,加载比较慢,不太推荐修改,本站用的是站酷快乐体

  1. 先选择一个你喜欢的字体下载他的TTF字体包(超过3M的我不建议你用它),用字客网转下格式(eot、woff、ttf、svg)

  2. 然后按如下CSS引用你的字体包,放到主题根目录的 style.css 文件里

    /* 全站字体样式 8262、8285、8290行+'zhanku', | 7881行+font-family: Noto Serif SC;*/
    @font-face {
        font-family: "zhanku";
        src: url("https://cdn.jsdelivr.net/gh/Fog-Forest/cdn@2.0.1/Sakura/fonts/zhanku/zhanku.eot"); /* IE9 */
        src: url("https://cdn.jsdelivr.net/gh/Fog-Forest/cdn@2.0.1/Sakura/fonts/zhanku/zhanku.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */  
        url("https://cdn.jsdelivr.net/gh/Fog-Forest/cdn@2.0.1/Sakura/fonts/zhanku/zhanku.woff") format("woff"), /* chrome、firefox */
        url("https://cdn.jsdelivr.net/gh/Fog-Forest/cdn@2.0.1/Sakura/fonts/zhanku/zhanku.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
        url("https://cdn.jsdelivr.net/gh/Fog-Forest/cdn@2.0.1/Sakura/fonts/zhanku/zhanku.svg#zhanku") format("svg"); /* iOS 4.1- */
        font-style: normal;
        font-weight: normal;
    }
    
  3. 最后主题根目录的 style.css 文件,大概第7881行、8262行、8285行、8290行,在前面加入你的字体,如下
    /*L7881*/
    .top-feature-row {
        width: 100%;
        height: auto;
        font-family: Noto Serif SC;/*这边用原来字体主要是怕聚焦图错位*/
        margin-top: 55px
    }
    /*L8262移动端字体*/
    .chinese-font {
        font-family: 'zhanku', 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif
    }
    /*L8285*/
    .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
    }
    /*L8290移动端字体*/
    @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
        }
    }
    

菜单栏居中显示

白猫那扒过来的

  1. 首先要修改Sakura主题目录的 header.php 文件内的结构

原来的页面结构(点击可放大)

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

代码如下

<?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 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>
  1. 然后修改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;
    }
}
  1. 最后在后台主题设置中打开展开导航菜单
    演示

首页文章卡片侧边栏

肾哥那扒过来的
直接加在Sakura主题目录的 styles.css 文件里 或者 后台添加自定义CSS

 /*侧边条*/
.post-list-thumb:hover:after {
    height: 100%;
}
.post-list-thumb:after {
    content: ' ';
    width: 4px;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #FF69B4;/*颜色自己换*/
    box-shadow: 0 0 6px #FF69B4;
    border-radius: 10px;
    transition: 1s all;
}
.post-list-thumb-left:after{
  right: 0;
 left: auto;
}

侧边条

页面模版

B站追番页面

请看此教程:WordPress博客添加B站追番页面

说说/心情页面

请看此教程:WordPress博客添加说说/心情页面

Steam游戏页面

请看此教程:WordPress博客展示你的Steam游戏库

旧文章过时提醒(一)

请看此教程:给你的WordPress加一个文章过时提醒吧(一)

旧文章过时提醒(二)

请看此教程:给你的WordPress加一个文章过时提醒吧(一)

个人页BotUI机器人

请看此教程:JS聊天机器人框架BotUI 使用笔记


Never give up your dreams.