wordpress+sakura主题建站优化

Landasika

已于 2022-05-24 13:09:04 修改

阅读量4.3k

点赞数 10

分类专栏：其他文章标签： github php 前端

于 2022-05-16 20:44:02 首次发布

本文链接：https://blog.csdn.net/Jeff_12138/article/details/124807724

版权

其他专栏收录该内容

9 篇文章

订阅专栏

wordpress+Sakura主题建站优化

写在前面

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

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

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

为什么不安装Sakurairo呢？
- 主要是因为Sakura的可修改性高
- Sakura修改教程网上有很多

用wordpress搭建一个博客

部署WordPress

方法一、利用宝塔一键部署

这里直接用宝塔

首先建议升级一下数据库

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

这里注意PHP的版本

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

方法二、官方下载源码放在网页目录部署

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

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

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

配置WordPress

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

配置好之后，点击右上角

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

安装Sakura主题

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

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

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

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

Sakura主题优化

基础设置

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

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

这里不再赘述

DIY设置

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

这个地方勾选

添加樱花飘落等效果

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

<!-- 🌸飘落 -->
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/sakura.js"></script>

sakura-small.js	少量樱花
sakura-half.js	樱花相对原效果数量减半
sakura-reduce.js	樱花相对原效果减少1/4
sakura-original.js	樱花数量不变（原效果）

其他样式：

<!-- 点击出现社会主义彩色文字 --><script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/shehuizhuyi.js"></script>
<!-- 点击出现爱心 --><script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/love.js"></script>

<!-- // 星星跟随坠落 -->
<script src="https://cdn.jsdelivr.net/gh/cungudafa/cdn@2.1.2/js/cursor.js"></script>
<!-- // 连线 
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/canvas-nest.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>-->
<!-- 样式二（飘动的彩带）
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/piao.js" type="text/javascript"></script>-->

添加Live2D看板娘

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

    <!--看板娘-->
	<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

首页波浪动画效果

使用 CSS3 Animation 复现

1、在`style.css`中添加

#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;
    }
}

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

给首页添加下拉箭头

1、修改 `imgbox.php` 文件

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

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

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

2、添加CSS

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

3、修改`sakura-app.js` 文件

最后打开主题文件 js/sakura-app.js 文件，在底下添加函数

/* 首页下拉箭头 */

function headertop_down() {
    var coverOffset = $('#content').offset().top;
    $('html,body').animate({
        scrollTop: coverOffset
    },
    600);
}

微语/说说页面设置

1、注册一个新的帖子类型

首先，我们需要使用 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');

2、添加说说/心情WP页面模板文件

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

<?php
 
/**
 * Template Name: 说说/微语
 */
 
get_header(); ?>
 
<style>
body.theme-dark .cbp_tmtimeline::before{background:RGBA(255,255,255,0.06)}ul.cbp_tmtimeline{padding:0}div class.cdp_tmlabel > li .cbp_tmlabel{margin-bottom:0}.cbp_tmtimeline{margin:30px 0 0 0;padding:0;list-style:none;position:relative}.cbp_tmtimeline > li .cbp_tmtime{display:block;max-width:70px;position:absolute}.cbp_tmtimeline > li .cbp_tmtime span{display:block;text-align:right}.cbp_tmtimeline > li .cbp_tmtime span:first-child{font-size:0.9em;color:#bdd0db}.cbp_tmtimeline > li .cbp_tmtime span:last-child{font-size:1.2em;color:#9BCD9B}.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child{color:RGBA(255,125,73,0.75)}div.cbp_tmlabel > p{margin-bottom:0}.cbp_tmtimeline > li .cbp_tmlabel{margin:0 0 45px 65px;background:#24a0f0;color:#fff;padding:.8em 1.2em .4em 1.2em;font-weight:300;line-height:1.4;position:relative;border-radius:5px;transition:all 0.3s ease 0s;box-shadow:0 1px 2px rgba(0,0,0,0.15);cursor:pointer;display:block}.cbp_tmlabel:hover{transform:translateY(-3px);z-index:1;-webkit-box-shadow:0 15px 32px rgba(0,0,0,0.15) !important}.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel{background:#7878f0}.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after{border-right-color:#7878f0}.cbp_tmtimeline > li .cbp_tmlabel:after{right:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-right-color:#24a0f0;border-width:10px;top:4px}p.shuoshuo_time{margin-top:10px;border-top:1px dashed #fff;padding-top:5px;font-family:Ubuntu}@media screen and (max-width:65.375em){.cbp_tmtimeline > li .cbp_tmtime span:last-child{font-size:1.2em}}.shuoshuo_author_img img{border:1px solid #ddd;padding:2px;float:left;border-radius:64px;transition:all 1.0s;height:50px}.avatar{-webkit-border-radius:100% !important;-moz-border-radius:100% !important;box-shadow:inset 0 -1px 0 #3333sf;-webkit-box-shadow:inset 0 -1px 0 #3333sf;-webkit-transition:0.4s;-webkit-transition:-webkit-transform 0.4s ease-out;transition:transform 0.4s ease-out;-moz-transition:-moz-transform 0.4s ease-out}.zhuan{transform:rotateZ(720deg);-webkit-transform:rotateZ(720deg);-moz-transform:rotateZ(720deg)}
</style>
 
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <div class="cbp_shuoshuo">
            <?php
            query_posts("post_type=shuoshuo & post_status=publish & posts_per_page=-1");
            if (have_posts()) : ?>
                <ul class="cbp_tmtimeline">
                    <?php
                    while (have_posts()) : the_post(); ?>
                        <li>
                            <span class="shuoshuo_author_img"><img src="<?php echo get_avatar_url(get_the_author_meta('ID')); ?>" class="avatar avatar-48" width="48" height="48"></span>
                            <a class="cbp_tmlabel" href="javascript:void(0)">
                                <p></p>
                                <p><?php the_content(); ?></p>
                                <p></p>
                                <p class="shuoshuo_time"><i class="fa fa-clock-o"></i> <?php the_time('Y年n月j日G:i'); ?></p>
                            </a>
                        </li>
                    <?php endwhile;
                    wp_reset_query();//重置查询
                    ?>
                </ul>
            <?php
            else : ?>
                <h3 style="text-align: center;">你还没有发表说说噢！</h3>
                <p style="text-align: center;">赶快去发表你的第一条说说心情吧！</p>
            <?php
            endif; ?>
        </div>
    </main><!-- #main -->
</div><!-- #primary -->
<script type="text/javascript">
    (function() {
        var oldClass = "";
        var Obj = "";(".cbp_tmtimeline li").hover(function() {
            Obj = $(this).children(".shuoshuo_author_img");
            Obj = Obj.children("img");
            oldClass = Obj.attr("class");
            var newClass = oldClass + " zhuan";
            Obj.attr("class", newClass);
        }, function() {
            Obj.attr("class", oldClass);
        })
    })
</script>
<?php
get_footer();

3、新建页面

上面代码部署完成后前往WP后台新建一个页面，页面模板选择“说说/心情”即可。

全站字体替换

1、选择字体

先选择一个你喜欢的字体下载他的TTF字体包（超过3M的我不建议你用它），用https://transfonter.org/转下格式（eot、woff、ttf、svg）

2、引用你的字体包

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

@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;
}

注意名称的统一

最后主题根目录的 style.css 文件，大概在第7881行、8262行、8285行、8290行，找不到的 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
    }
}

菜单栏居中显示

1、关闭菜单栏收起

2、修改header.php

首先要修改 Sakura 主题目录的 header.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>

然后我们再将重复部分删除/注释掉

3、修改Sakura主题目录的 `style.css`

修改前记得在 WP后台-外观-主题设置-CDN-开启本地调用主题 js、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;
}

之后需要修改 style.css 中的部分属性，请依照下方修改，找不到的 Ctrl+F

/*此属性需要修改*/
.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)