WordPress轻/暗主题最佳实践?有没有一种真正有效的方法?

时间:2019-10-17 作者:Kip Kniskern

我们目前在WordPress网站上使用Cookie和启用了一个浅色/深色主题。CSS中的深色类。它可以工作,但使用WP Total Cache几乎不值得,因为任何使用cookie的帖子/页面都无法进行页面缓存。我尝试改用localstorage,但在更改页面时无法通过恼人的“flash”:每个新导航都会加载默认的浅色css,然后应用深色css,从而在切换之前瞥见浅色主题,非常恼人。我能够将闪光灯最小化,但它仍然存在。我没有找到任何插件可以解决浅/暗主题的问题,到目前为止,我仍然坚持使用cookie,并接受缓存是不可能的。有没有人有一个浅/暗主题切换的工作示例,可以与缓存一起工作,并且真的可以工作?

2 个回复
SO网友:Matthew Brown aka Lord Matt

如果这是你自己的主题,我有一些建议。如果主题是第三方的,我建议制作一个儿童主题(谷歌上有很多关于这方面的有用建议)。

当您使用cookie来选择浅色或深色时,您应该能够钩住排队的样式,并使用style_loader_tag filter.

add_filter( \'style_loader_tag\',  \'fix_style_choice\', 10, 4 );
function fix_style_choice( $html, $handle, $href, $media ){
    // check cookies and only enqueue the right style (dequeue the wrong one).
}
我想这可以解决问题。

正如TomBroucke指出的,片段缓存也会有所帮助。

另一种方法是为两个样式表提供很短(或很长)的缓存时间。

最后,还有一个Javascript solution to the flash of unstyled content issue.

相关推荐

如何向WordPress添加自定义html和css

例如,如果我想从此网站添加此代码https://codepen.io/tamak/pen/ApLcqhtml教程已设置动画cssdiv{宽度:120px;高度:100px;显示:块;背景:绿色;文本对齐:居中;线宽:100px;边距:10px;浮动:左;颜色:白色;边框半径:10px;}。动画{动画持续时间:3s;动画填充模式:两者;动画迭代计数:无限;}js$(文档)。就绪(函数(){动画单击(“.卷展栏1”,“卷展栏”);动画单击(“.bounce1”,“bounce”);动画单击(“.flash1”