Sakura主题美化

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


解决WordPress上传文件问题

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 );

菜单栏居中

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

live2d

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

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

首页波浪效果

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>

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

页脚增加网站运行时间统计

本站已默默运行<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>
<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the #content div and all content after.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Sakura
 */

?>
	</div><!-- #content -->
	<?php 
		if(akina_option('general_disqus_plugin_support')){
			get_template_part('layouts/duoshuo');
		}else{
			comments_template('', true); 
		}
	?>
	</div><!-- #page Pjax container-->
	<footer id="colophon" class="site-footer" role="contentinfo">
		<div class="site-info" theme-info="Sakura v<?php echo SAKURA_VERSION; ?>">
			<div class="footertext">
				<div class="img-preload">
					<img src="https://cdn.jsdelivr.net/gh/moezx/[email protected]/img/Sakura/images/wordpress-rotating-ball-o.svg">
					<img src="https://cdn.jsdelivr.net/gh/moezx/[email protected]/img/Sakura/images/disqus-preloader.svg">
				</div>
				<p style="color: #666666;"><?php echo akina_option('footer_info', ''); ?></p>				
			</div>
<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>
				
				
			<p style="font-family: 'Ubuntu', sans-serif;">
					<span style="color: #b9b9b9;">
						<?php /* 能保留下面两个链接吗?算是我一个小小的心愿吧~ */ ?>
						Theme <a href="https://2heng.xin/theme-sakura/" target="_blank" style="color: #b9b9b9;;text-decoration: underline dotted rgba(0, 0, 0, .1);">Sakura</a> <i class="iconfont icon-sakura rotating" style="color: #ffc0cb;display:inline-block"></i> by <a href="https://2heng.xin/" target="_blank" style="color: #b9b9b9;;text-decoration: underline dotted rgba(0, 0, 0, .1);">Mashiro</a>																		
					</span>		
				</p>
			</div>
		</div><!-- .site-info -->
	</footer><!-- #colophon -->
	<div class="openNav no-select">
		<div class="iconflat no-select">	 
			<div class="icon"></div>
		</div>
		<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{ ?>
			<h1 class="site-title"><a href="<?php bloginfo('url');?>" ><?php bloginfo('name');?></a></h1>
			<?php } ?>
		</div>
	</div><!-- m-nav-bar -->
	</section><!-- #section -->
	<!-- m-nav-center -->
	<div id="mo-nav">
		<div class="m-avatar">
			<?php $ava = akina_option('focus_logo') ? akina_option('focus_logo') : get_template_directory_uri().'/images/avatar.jpg'; ?>
			<img src="<?php echo $ava ?>">
		</div>
		<div class="m-search">
			<form class="m-search-form" method="get" action="<?php echo home_url(); ?>" role="search">
				<input class="m-search-input" type="search" name="s" placeholder="<?php _e('Search...', 'sakura') /*搜索...*/?>" required>
			</form>
		</div>
		<?php wp_nav_menu( array( 'depth' => 2, 'theme_location' => 'primary', 'container' => false ) ); ?>
	</div><!-- m-nav-center end -->
	<a class="cd-top faa-float animated "></a>
	<button id="moblieGoTop" title="Go to top"><i class="fa fa-chevron-up" aria-hidden="true"></i></button>
	<button id="moblieDarkLight"><i class="fa fa-moon-o" aria-hidden="true"></i></button>
	<!-- search start -->
	<form class="js-search search-form search-form--modal" method="get" action="<?php echo home_url(); ?>" role="search">
		<div class="search-form__inner">
		<?php if(akina_option('live_search')){ ?>
			<div class="micro">
				<i class="iconfont icon-search"></i>
				<input id="search-input" class="text-input" type="search" name="s" placeholder="<?php _e('Want to find something?', 'sakura') /*想要找点什么呢*/?>" required>
			</div>
			<div class="ins-section-wrapper">
                <a id="Ty" href="#"></a>
                <div class="ins-section-container" id="PostlistBox"></div>
            </div>
		<?php }else{ ?>
			<div class="micro">
				<p class="micro mb-"><?php _e('Want to find something?', 'sakura') /*想要找点什么呢*/?></p>
				<i class="iconfont icon-search"></i>
				<input class="text-input" type="search" name="s" placeholder="<?php _e('Search', 'sakura') ?>" required>
			</div>
		<?php } ?>
		</div>
		<div class="search_close"></div>
	</form>
	<!-- search end -->
<?php wp_footer(); ?>
<?php if(akina_option('site_statistics')){ ?>
<div class="site-statistics">
<script type="text/javascript"><?php echo akina_option('site_statistics'); ?></script>
</div>
<?php } ?>
<div class="changeSkin-gear no-select" style="bottom: -999px;">
    <div class="keys">
        <span id="open-skinMenu">
		<i class="iconfont icon-gear inline-block rotating"></i>&nbsp; 切换主题 | SCHEME TOOL 
        </span>
    </div>
</div>
<div class="skin-menu no-select">
    <div class="theme-controls row-container">
        <ul class="menu-list">
            <li id="white-bg">
                <i class="fa fa-television" aria-hidden="true"></i>
            </li><!--Default-->
            <li id="sakura-bg">
                <i class="iconfont icon-sakura"></i>
            </li><!--Sakura-->
            <li id="gribs-bg">
                <i class="fa fa-slack" aria-hidden="true"></i>
            </li><!--Grids-->
            <li id="KAdots-bg">
                <i class="iconfont icon-dots"></i>
            </li><!--Dots-->
            <li id="totem-bg">
                <i class="fa fa-superpowers" aria-hidden="true"></i>
            </li><!--Orange-->
            <li id="pixiv-bg">
                <i class="iconfont icon-pixiv"></i>
            </li><!--Start-->
            <li id="bing-bg">
                <i class="iconfont icon-bing"></i>
            </li><!--Bing-->
            <li id="dark-bg">
                <i class="fa fa-moon-o" aria-hidden="true"></i>
            </li><!--Night-->
        </ul>
    </div>
    <div class="font-family-controls row-container">
        <button type="button" class="control-btn-serif selected" data-mode="serif" 
                onclick="mashiro_global.font_control.change_font()">Serif</button>
        <button type="button" class="control-btn-sans-serif" data-mode="sans-serif" 
                onclick="mashiro_global.font_control.change_font()">Sans Serif</button>
    </div>
</div>
<canvas id="night-mode-cover"></canvas>
<?php if (akina_option('sakura_widget')) : ?>
	<aside id="secondary" class="widget-area" role="complementary" style="left: -400px;">
    <div class="heading"><?php _e('Widgets') /*小工具*/ ?></div>
    <div class="sakura_widget">
	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sakura_widget')) : endif; ?>
	</div>
	<div class="show-hide-wrap"><button class="show-hide"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path d="M22 16l-10.105-10.6-1.895 1.987 8.211 8.613-8.211 8.612 1.895 1.988 8.211-8.613z"></path></svg></button></div>
    </aside>
<?php endif; ?>
<?php if (akina_option('aplayer_server') != 'off'): ?>
    <div id="aplayer-float" style="z-index: 100;"
	    class="aplayer"
        data-id="<?php echo akina_option('aplayer_playlistid', ''); ?>"
        data-server="<?php echo akina_option('aplayer_server'); ?>"
        data-type="playlist"
        data-fixed="true"
        data-theme="orange">
    </div>
<?php endif; ?>

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

</body>
</html>

Love is merely a madness.