修改Sakura主题的二三事(修改style.css无反应)

发布于 2019-12-16  504 次阅读


Sakura主题

在搬迁到WP之后,我选择了一款非常好看,功能全面的二次元、开源主题——Sakura。当然,如你所见,这个主题足够庞大,拥有许多好看的样式。当然,加载速度也相应降低了一点点,但是问题不大。如果你也和我一样,喜欢这款主题,可以从作者的博客内获取信息

修改CSS

如果要自定义主题当然是要修改CSS啦!那么讲道理我们需要修改主题下的style.css文件由于我添加了live2D在页面上,遮挡住左下角的位置。然而Sakura主题的切换主题样式也默认在左下角,刚好遮住。所以我希望把它挪到右下角。

我像往常一样,按下F12,审查元素,轻而易举,就找到了下面这两串子

.changeSkin-gear {
    position: fixed;
    bottom: -999px;
    left: 5px;
    width: auto;
    height: auto;
    z-index: 99;
    white-space: nowrap;
    padding: 10px 10px;
    cursor: pointer;
    border-radius: 10px 10px 0 0
}

.skin-menu {
    position: fixed;
    bottom: 50px;
    left: 10px;
    height: auto;
    width: 220px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 1px 40px -8px rgba(0, 0, 0, .5);
    z-index: 99;
    font-family: Ubuntu, sans-serif;
    transform: scaleX(0);
    transiton-property: transform, background;
    transition-duration: .3s, .3s
}

我一看,这还不简单,left改成right不久完事了!

发现事情不简单

改了,刷新页面,浏览器没得反应。清空浏览器缓存、清除super ache插件缓存、清CDN缓存,我把我能想到的缓存都清理了一遍。

然而,依旧如此,按下F12,CSS变都没变!莫非是使用了行内样式?看了代码,没发现啊?我开始怀疑,莫非有冲突,所以我尝试在浏览器控制台里更改CSS。改了之后,嗯哼?好着呢!位置变了!这就奇葩了!

看了搜索的教程,说版本号不对,所以我按照他们的方法修改了版本号,却导致CSS无法加载???各种教程我都尝试了一遍。依旧没有结果!

灵机乍现

最终我发现作者的博客也把切换样式改到了右下角,嗯哼?所以我对他的博客按下了F12。突然发现,他的CSS文件名字不一样,我的是style.css。这个人从哪里加载的,莫非这个主题没从我服务器加载CSS文件?

抱着这样的心态,我打开了functions.php妄图寻找。突然看到了下面的内容:

wp_enqueue_style( 'saukra_css', 'https://cdn.jsdelivr.net/gh/mashirozx/[email protected]' . SAKURA_VERSION . '/style.min.css', array(), SAKURA_VERSION );

好家伙!好像使用了CDN!所以我尝试打开链接,下载CDN上的CSS文件,看看和本地CSS文件是不是一样的,那么,它的链接应该是这个样子滴:https://cdn.jsdelivr.net/gh/mashirozx/Sakura/style.min.css。下载下来!果然,和原文件一模一样,使用了CDN。

那么也就是说根本没有从我服务器上加载CSS文件!闹了半天是你搞得鬼!讲道理,我按下F12看控制台左上的数据来源时,就应该想到(脸红)。

二话不说,我们把有关CSS的内容换了。看了一下WP的开发文档,ok,把它改成下面这样

wp_enqueue_style( 'sakura_css', get_template_directory_uri() . '/style.css' );

刷新,完美解决!

什么?你想知道WordPress怎么添加Live2D?稍等,新文章即将出炉!


长风破浪会有时,直挂云帆济沧海。在这条路上一直走下去!