Sakura Logo美化

方法来源于网络，如有侵权请联系。将于48小时内删除！

获取字体

· 点击下载 Fontmin，并导入Logo的字体到Fontmin，输入Logo文字并生成，记住左下角的字体包名称

· 生成完成后会有个文件夹，把文件夹重命名为logo，上传到服务器 \inc\fonts 处（直接搜索fonts）

修改header.php

· 添加以下一行代码到header.php，进而引用刚上传的css文件

<link rel="stylesheet" type="text/css" href="/wp-content/themes/Sakura/inc/fonts/LOGO/字体包名称.css">

· 搜索到logolink，将以下代码

<span class="logolink serif">
<a href="<?php bloginfo('url');?>">
<span class="site-name"><?php echo akina_option('site_name', ''); ?></span>

· 替换为

<span class="logolink 字体包名称">
<a href="<?php bloginfo('url');?>">
<ruby>
<span class="sakuraso">测试</span>
<span class="no">の</span>
<span class="shironeko">文字</span>
<rp></rp>
<rt class="chinese-font"><?php echo akina_option('site_name', ''); ?></rt>
<rp></rp>
</ruby>

修改style.css

· 在style.css添加

.字体包名称 {
    font-family: '字体包名称', 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;;
}
 
.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 rt {
    color: orange;
}
 
.logolink.字体包名称 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.字体包名称 .sakuraso,.logolink.字体包名称 .no {
    font-size: 25px;
    border-radius: 9px;
    padding-bottom: 2px;
    padding-top: 5px;
}
.logolink.字体包名称 .no {
    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;
    transform: translateY(-15px);
    opacity: 0;
    transiton-property: opacity;
    transition-duration: 0.5s, 0.5s;
}
 
.logolink a:hover ruby rt {
    opacity: 1
}

隐藏小字

· 如果添加之后发现Logo下面的小字与Logo重叠，把刚才添加到header.php中的

<rt class="chinese-font"><?php echo akina_option('site_name', ''); ?></rt>

· 替换为

<rt class="chinese-font"><?php echo akina_option(' ', ''); ?></rt>

修改颜色

· 可以像我一样把紫风颜色改为紫色，在style.css里修改

site-title a:hover {
    color: orange
}
 
----------------------------------------------------------------------------
 
.logolink a:hover .sakuraso {
    background-color: orange;
    color: #fff;
}
 
----------------------------------------------------------------------------
	
.logolink a:hover .shironeko,
.logolink a:hover rt {
    color: orange;
}