Sakura主题美化

发布于 2021-12-11  347 次阅读

WordPress无法将上传的文件移动至wp-content/uploads/

ps -aux | grep nginx              #看到Nginx的线程所有者(启动用户)是www
ll /data/wwwroot/                 #对应的权限是 644 所有者为root
chown -R www /data/wwwroot

WordPress 抱歉, 由于安全原因, 这个文件类型不受支持

打开wp-config.php你的WordPress安装文件，并在其上面 /* That’s all, stop editing! Happy blogging. */添加以下代码的地方：

define( \'ALLOW_UNFILTERED_UPLOADS\', true );

或者直接用插件，例如WP Extra File Types。

超过了站点的最大上传限制

首先，可通过插件，例如Themx Maximum Upload File Size，调整WordPress上传大小及时间限制。

第二步，调整例如nginx及php的上传大小限制。

nginx请在wordpress所在网址的对应配置文件location ~ .php$ {}中添加：

client_max_body_size 1024M;

php请在php.ini中修改如下三项：

upload_max_filesize = 1024M    #上传文件大小限制
post_max_size = 1024M          #post大小限制
memory_limit = 1024M           #内存占用限制

如果在docker中部署的wordpress，相关php.ini修改参考：

docker exec -it wordpress-wordpress-1 bash
apt-get update
apt-get install nano -y
cp /usr/local/etc/php/php.ini-production /usr/local/etc/php/php.ini

nano /usr/local/etc/php/php.ini

菜单栏居中

WordPress后台>外观>Sakura主题设置>基本设置>自定义CSS样式

.site-header.is-homepage .lower-cantiner {
    display: none;
}
 
.site-header.is-homepage.yya .lower-cantiner {
    display: block;
}
 
.site-top .lower nav {
    display: block !important;
}
 
.site-header:hover.is-homepage .lower-cantiner {
    display: block;
}
 
.gizle {
    top: 0px;
    z-index: 9999;
}
 
.site-top .lower-cantiner {
    position: absolute;
    left: 50%;
    min-width: 540.4px;
    pointer-events: none;
}
 
.site-top .lower_mod {
    display: inline-block;
    margin: 15px 0 0 10px;
    font-size: 16px;
    float: unset;
    position: relative;
    left: -50%;
   pointer-events: auto !important;
}
 
#show-nav.mobile-fit {
    position: fixed !important;
    right: 120px;
    opacity: 0;
    pointer-events: none;
}
 
@media (max-width: 900px) {
    .site-top .lower {
        left: 15px;
    }
 
    .site-top .lower-cantiner {
        left: 0;
    }
 
    .site-top .lower nav.hide {
        display: none !important;
    }
    #show-nav.mobile-fit {
        opacity: 1;
        pointer-events: auto;
    }
}
 
@media (max-width:860px) {
    .site-top .lower nav ul li .animated-hover i {
        display: inline
    }
}

同时修改header.php 文件

<div id="page" class="site wrapper">
    <header class="site-header no-select is-homepage gizle sabit" role="banner">
        <div class="site-top">
            <div class="site-branding">
                <?php if (akina_option('akina_logo')){ ?>
                <div class="site-title">
                    <a href="<?php bloginfo('url');?>" ><img src="<?php echo akina_option('akina_logo'); ?>"></a>
                </div>
                <?php }else{ ?>
                <span class="site-title">
                    <span class="logolink serif">
                        <a href="<?php bloginfo('url');?>">
                            <span class="site-name"><?php echo akina_option('site_name', ''); ?></span>
                        </a>
                    </span>
                </span> 
                <?php } ?><!-- logo end -->
            </div><!-- .site-branding -->
            <div class="lower-cantiner">
                <div class="lower lower_mod"><?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>  
        </div>
        <?php header_user_menu(); if(akina_option('top_search') == 'yes') { ?>
            <div class="searchbox"><i class="iconfont js-toggle-search iconsearch icon-search"></i></div>
        <?php } ?>
    </header><!-- #masthead -->
header下载

live2d

在合适的位置(footer.php里BODY标签结束之前)插入以下代码即可实现本站的live2d的效果:

<script src="https://cdn.jsdelivr.net/gh/acai66/[email protected]/autoload.js" async="async"></script>
footer下载

https://hyacm.com/acai/ui/267/sakura_menu_live2d/

首页波浪效果

WordPress后台>外观>Sakura主题设置>基本设置>自定义CSS样式 

#banner_wave_1 {
  width: auto;
  height: 65px;
  background: url(https://cdn.qnight.ink/blogfile/wave1.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://cdn.qnight.ink/blogfile/wave2.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;
}
 
@keyframes move1 {
100%{
  background-position: 100% 0;
}
}
 
@keyframes move2 {
100%{
  background-position: -100% 0;
}
}
.banner_wave_hide,.banner_wave_hide_fit_skin {
  opacity:0 !important;
  bottom:-999px !important
}
.headertop-down {
  position:absolute;
  bottom:50px;
  left:calc(50% - 14px);
  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);
  -webkit-transform:scale(1.5,1);
  transform:scale(1.5,1)
}

并在footer.php中引用js

<script src="https://cdn.jsdelivr.net/gh/acai66/[email protected]/wave.js" async="async"></script>
footer下载

https://hyacm.com/acai/ui/181/sakura-wave/

logo效果

WordPress后台>外观>Sakura主题设置>基本设置>自定义CSS样式 

/*  logo  */
.logolink a {
    color: #464646;
    float: left;
    font-size: 20px;
    font-weight: 800;
    height: 56px;
    line-height: 56px;
    padding-left: 35px;
    padding-right: 15px;
    padding-top: 11px;
    text-decoration-line: none
}
 
.logolink .sakuraso {
    background-color: rgba(255, 255, 255, .5);
    border-radius: 5px;
    color: #464646;
    height: auto;
    line-height: 25px;
    margin-right: 0;
    padding-bottom: 0px;
    padding-top: 1px;
    text-size-adjust: 100%;
    width: auto
}
 
.logolink a:hover .sakuraso {
    background-color: orange;
    color: #fff;
}
 
.logolink a:hover .shironeko,
.logolink a:hover .no,
.logolink a:hover rt {
    color: orange;
}
 
.logolink.moe-mashiro a {
    color: #464646;
    float: left;
    font-size: 25px;
    font-weight: 800;
    height: 56px;
    line-height: 56px;
    padding-left: 6px;
    padding-right: 15px;
    padding-top: 11px;
    text-decoration-line: none;
}
.logolink.moe-mashiro .sakuraso,.logolink.moe-mashiro .no {
    font-size: 25px;
    border-radius: 9px;
    padding-bottom: 2px;
    padding-top: 5px;
}
 
.logolink.moe-mashiro .no {
    font-size: 20px;
    display: inline-block;
    margin-left: 5px;
}
 
.logolink a:hover .no {
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
 
.logolink ruby {
    ruby-position: under;
    -webkit-ruby-position: after;
}
 
.logolink ruby rt {
    font-size: 10px;
    letter-spacing:2px;
    transform: translateY(-15px);
    opacity: 0;
    transiton-property: opacity;
    transition-duration: 0.5s, 0.5s;
}
 
.logolink a:hover ruby rt {
    opacity: 1
}
 
.moe-mashiro {
    font-family: 'wenyihei-subfont', 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;;
}
.chinese-font {
    font-family: 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;
}

修改header.php文件

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/acai66/mydl/fonts/wenyihei/wenyihei-subfont.css" media="all">
<link rel="stylesheet" href="https://fonts.lug.ustc.edu.cn/css?family=Noto+SerifMerriweather|Merriweather+Sans|Source+Code+Pro|Ubuntu:400,700|Noto+Serif+SC" media="all">
</head>
<body <?php body_class(); ?>>
    <div class="scrollbar" id="bar"></div>
    <section id="main-container">
        <?php 
        if(!akina_option('head_focus')){ 
        $filter = akina_option('focus_img_filter');
        ?>
        <div class="headertop <?php echo $filter; ?>">
            <?php get_template_part('layouts/imgbox'); ?>
        </div>  
        <?php } ?>
        <div id="page" class="site wrapper">
            <header class="site-header no-select is-homepage gizle sabit" role="banner">
                <div class="site-top">
                    <div class="site-branding">
                        <?php if (akina_option('akina_logo')){ ?>
                        <div class="site-title">
                            <a href="<?php bloginfo('url');?>" ><img src="<?php echo akina_option('akina_logo'); ?>"></a>
                        </div>
                        <?php }else{ ?>
                        <span class="site-title">
                            <span class="logolink moe-mashiro">
                                <a href="<?php bloginfo('url');?>">
                                    <ruby>
                                    <!-- <span class="site-name"><?php echo akina_option('site_name', ''); ?></span> -->
                                    <span class="sakuraso">阿才</span>
                                    <span class="no">の</span>
                                    <span class="shironeko">部落阁</span>
                                    <rp></rp><rt class="chinese-font">Acai's Blog</rt><rp></rp></ruby>
                                </a>
                            </span>
                        </span> 
                        <?php } ?><!-- logo end -->
header下载

https://hyacm.com/acai/ui/143/sakura-logo/

本站已运行时间

在footer.php中，<div class="footer-device">后，添加如下代码：

本站已默默运行<span id="momk"> </span>
<script language="javascript">
function show_time(){
window.setTimeout("show_time()", 1000);
BirthDay=new Date("2020/06/14 23:21:00");//建站日期
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000;
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000;
e_daysold=timeold/msPerDay;
daysold=Math.floor(e_daysold);
e_hrsold=(daysold-e_daysold)*-24;
hrsold=Math.floor(e_hrsold);
e_minsold=(hrsold-e_hrsold)*-60;
minsold=Math.floor((hrsold-e_hrsold)*-60);
seconds=Math.floor((minsold-e_minsold)*-60);
momk.innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒" ;
}
show_time();
</script>
footer下载

Love is merely a madness.