WordPress | 解决修改CSS样式不生效

1156字
甘普基本变形定律

artist 本文作者没有任何代码基础，所有说明性文字主要靠连蒙带猜兼灵光一现，参考时请务必注意，欢迎提出意见和给出建议~ 另外，感谢Revi的点拨！

前段时间搞了个WordPress书摘站，拿来放读书过程中的一些摘录和碎碎念，本来用的是Argon主题，看中它的瀑布流和说说页面，但用了一段时间后发现实际很难用：如果用说说来发布摘记，就不能使用文章的一系列分类/标签功能，日后聚合重温会很麻烦；如果通过修改CSS的办法不显示文章标题，摘记以文章形式发布，则由于文章显示在首页的只有无样式预览，连换行都无法实现。

于是干脆换主题，在内置商店里挨个换着试了试，挑了Twenty Sixteen主题来用：支持不显示文章标题，左侧栏依次显示摘记发布时间/分类/tag（书名）以及评论和编辑，默认输出文章全文，简洁干净，相当符合需求。

只有一个问题：我是27寸屏幕，在我看来整个内容栏太靠右了，我想把它往左移动一部分。实现很简单，参考主题原本的写法，用margin设定内容栏的外边距属性为-7em即可达成——但这个修改不能放在全局上，否则会导致小尺寸屏幕下整体内容向左溢出屏幕，因此要加上@media screen and (min-width: 61.5625em)让它只在大屏幕下生效。

整体代码如下：

@media screen and (min-width: 61.5625em) {
	.site-main {
		margin-bottom: 7.0em;
		margin-left: -7.0em;
	}

但实际操作中发现：这个修改加在额外CSS栏中，无论如何无法生效：写在全局可以生效，写在大屏幕尺寸下就不可以，写在额外CSS中不可以，写进主题样式表里依然不可以，强制刷新不可以，清空浏览器缓存不可以，换个浏览器重新加载一下还是不可以。

我：挠地，抓狂，陷入我是不是写错了的自我怀疑，不是吧都和CSS打架这么久了怎么还是惨败！

思路打结，求助Revi，Revi发来链接说是服务器开启了.htaccess缓存的问题，我从床上爬起来再接再厉，倒腾了一段时间后终于发现了问题所在：确实修改了CSS没有错，但是Wordpress它加载了老版本的CSS样式表。这个心态我非常熟悉，就很像我抱着老版本APP誓死不升级。

解决参考这篇：WordPress 中去掉 CSS 文件后的参数，解决修改样式不生效的问题


总的来说，分为以下几步：

  1. F12检查CSS加载，发现显示style.css?ver=20201208，那么很明显，只需要去functions.php 中找到对应的加载版本，修改版本为其他更新的版本号，或者按照文章中的方式改为null。

  2. 在外观-主题编辑器中找到style.css，把刚刚那段代码补充进去

  3. 在外观-主题编辑器中找到functions.php ，搜索20201208，找到引入样式的代码并修改（按照主题作者的编写习惯，我改成了20220130）

    	// Theme stylesheet.
	wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri(), array(), '20220130' );

  4. Shift+F5强制刷新，之后CSS生效，检查版本，引入版本变为style.css?ver=20220130

  5. 大功告成！ 灵机一动