wordpress+sakura主题建站优化

本人博客：http://landasika.top/

Sakura的使用手册：https://yremp.live/wordpress-sakura-teach/

Sakura主题美化系列归档：https://blog.ukenn.top/technology/sakura-tbs/

这里直接用宝塔

首先建议升级一下数据库

然后到软件商店直接一键部署

这里注意PHP的版本

然后根据要求一步一步部署即可。

官网链接：https://cn.wordpress.org/

直接点击右上角的 获取WordPress，然后拉到最下面点击下载即可

然后在网页根目录解压即可

访问站点目录，根据要求一步一步配置即可

配置好之后，点击右上角

注意！这个地方需要手动配置数据库

gitee仓库链接：https://gitee.com/mashirozx/Sakura

下载之后解压放在wp-content\themes这个目录下面，注意的是，别犯迷糊，解压的时候注意目录结构，保证wp-content\themes\Sakura-3.x就是项目的源码而不是Sakura-3.x文件夹！

之后访问站点，登陆管理员密码，点击有右上角的头像进入仪表盘

在外观里面可以看到Sakura主题，点击启用即可！

使用Sakura主题设置，慢慢捣鼓就可以慢慢的设置啦！

具体基础设置参考作者的文章：https://yremp.live/wordpress-sakura-teach/

这里不再赘述

首先！打开外链CSS和js的开关

这个地方勾选

在/wp-content/themes/Sakura/foot.php最下面添加

其他样式：

在/wp-content/themes/Sakura/foot.php添加

#banner_wave_1 {
    width: auto;
    height: 65px;
    background: url(https://oss.amogu.cn/blog/sakura/images/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://oss.amogu.cn/blog/sakura/images/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;
    }
}

在路径 /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插在这。-->
<figure id="centerbg" class="centerbg">
<?php if ( !akina_option('focus_infos') ){ ?>
    <div class="focusinfo">
        <?php if (akina_option('focus_logo')):?>
……
{1}

首先找到Sakura主题文件包下的 layouts 中的 imgbox.php 文件，在最底下添加如下代码

echo bgvideo(); //BGVideo 
?>

其中：fa-chevron-down是下拉图标的部分，可以在http://www.fontawesome.com.cn/faicons/中找到替换

接着修改主题文件中的 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);
}

首先，我们需要使用 WordPress 的 register_post_type() 函数注册一个新的帖子类型，以方便日后编辑说说。将以下代码直接添加到到主题的 functions.php 文件中去即可。

//说说页面
function shuoshuo_custom_init()
{
    labels = array(
        'name' => '说说',
        'singular_name' => '说说',
        'add_new' => '发表说说',
        'add_new_item' => '发表说说',
        'edit_item' => '编辑说说',
        'new_item' => '新说说',
        'view_item' => '查看说说',
        'search_items' => '搜索说说',
        'not_found' => '暂无说说',
        'not_found_in_trash' => '没有已遗弃的说说',
        'parent_item_colon' => '',
        'menu_name' => '说说'
    );args = array(
        'labels' => labels,
        'public' => true,
        'publicly_queryable' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'query_var' => true,
        'rewrite' => true,
        'capability_type' => 'post',
        'has_archive' => true,
        'hierarchical' => false,
        'menu_position' => null,
        'supports' => array(
            'title',
            'editor',
            'author',
            'comments'
 
        )
    );
    register_post_type('shuoshuo',args);
}
add_action('init', 'shuoshuo_custom_init');

添加说说/心情WP页面模板文件，添加完上述函数后，我们就可以在后台发现一个“说说”的菜单，通过菜单即可编辑说说，但是我们发现编辑完成后的说说并不能在前端显示出来，这时我们需要新建一个说说的页面模板控制其前端显示，将以下代码复制并另存为 page-shuo.php 文件，并扔到主题根目录下。

 

 

    

        
            
                
                    
                        
                            "  width="48" height="48">
                            
                                

                                

                                

                                
 
                            
                        
                    
                
            
                你还没有发表说说噢！
                
赶快去发表你的第一条说说心情吧！
            
        
    

@font-face {
    font-family: "zhanku";
    src: url("zhanku.eot"); /* IE9 */
    src: url("zhanku.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("zhanku.woff") format("woff"), /* chrome、firefox */
    url("zhanku.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    url("zhanku.svg#zhanku") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

.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
    }
}

/* 菜单栏居中 */
.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;
    }
}

[https://blog.ukenn.top](https://blog.ukenn.top)
[https://www.fuwafuwa.club](https://www.fuwafuwa.club)
[https://fairysen.com](https://fairysen.com)