Wordpress建站教程：为什么修改CSS不能立即生效？如何解决？

作者：悦然wordpress建站(悦然建站）

继续分享wordpress建站教程。不管是再好的wordpress主题或插件，它的一些样式都是可能存在一些我们不满意的地方，所以我们有时候可能需要修改wordpress主题或插件CSS样式，以达到我们想要的效果。不过当我们直接修改CSS文件就会发现它不会立即生效，甚至要很久之后才会生效，这是怎么回事呢？

因为缓存！不管是浏览器缓存，还是服务器缓存，甚至是CDN、对象存储的缓存都有可能导致网站的CSS样式不能立即更新，今天悦然建站就给大家分享解决方法。

方法一：手动修改替换

我们修改CSS文件的常规做法是直接修改主题或插件中的CSS文件，当我们修改了本地CSS文件后，还需要清楚浏览器缓存，刷新CDN缓存，如果使用了对象存储，我们还需要用本地修改过的CSS文件替换对象存储中的CSS文件。

总的来说这种做法非常不方便，很麻烦，而且容易出错，所以悦然建站不推荐大家使用这样的方法。

方法二：设置额外CSS

大多数功能完善的wordpress主题都会提供额外的代码添加功能，比如很多英文外贸wordpress主题的自定义设置中都会有一个【额外CSS】选项，点开之后就可以添加CSS代码。

如果是国内的中文wordpress主题，有一些也提供的额外代码添加功能，比如上图这个，把代码添加进来，然后使用style标签闭合即可。

如果你使用的主题没有添加代码的功能，那么可以使用第三方的插件代码，进入wordpress建站后台，在插件中心搜索就可以找到很多，如上图中的几个都可以。

操作演示

接下来悦然wordpress建站通过实例教大家添加额外CSS。

如上图所示，悦然wordpress建站几天几才发现我的网站存在一个小问题，就是列表模块的样式存在BUG，太靠边了，导致有些文字溢出了，这非常影响美观。

接下来我们在浏览器在按F12查看源码，然后找到这个列表页的CSS样式，通过测试悦然wordpress建站发现在原来的CSS样式下添加【padding:revert】即可解决问题。

<style>

dl, ol, ul {

margin-top: 0;

margin-bottom: 1rem;

padding: revert;

}

最后只需要把上面的CSS代码添加到主题的的相关设置中，如果是使用的CSS插件，或者是主题的额外CSS功能，那需要把上面的style标签删除，只添加中间的CSS样式即可。

最终的效果如上图所示。

今天的wordpress建站教程就给大家分享到这了，CSS效果对一个网站来说还是挺重要的，网站的大多数显示效果都可以通过CSS样式来调整，大家有时间可以多研究一下。

WordPress主题开发过程中容易出错的地方是哪里？

作为刚开始接触WordPress主题或插件开发的人来说，通常都无可避免的会犯一些比较常见的错误，那么WordPress主题开发过程中容易出错的地方是哪里？

让我们看一下WordPress主题开发中发现的五个最常见的错误，以及可以避免您以后头痛的替代方法。

1.在WordPress模板中使用绝对网址

如果您曾经看过WordPress页面或文章产生的HTML代码，则会注意到图片和内部链接都使用绝对（完整）网址。但这不是将代码添加到主题模板时完成工作的最佳方法。

举例来说，假设您正在开发使用临时网址的网站。模板中的使用绝对网址意味着当您准备在其永久域上启动网站时，必须手动更改代码。尽管可以做到这一点，却很容易忘记这种类型的代码存在的所有地方。

WordPress有内置的方法来确定正确的网址–从仪表板区域中设置>常规直接获取。

对于链接，输出esc_url(home_url())将提供指向主页的完整路径。因此，您可以像下面这样向您的主页添加一个简单的链接，而不是将位置明确地添加在代码中：

<ahref=\"<?phpechoesc_url(home_url());?>\"/>首页</a>

此外，您还可以使用它来指向其他页面。例如，如果我们想链接到网站的“关于我们”页面，则可以使用以下代码：

<ahref=\"<?phpechoesc_url(home_url());?>/about-us/\"/>关于我们</a>

类似的代码段也适用于图片。本示例从激活的主题的/images/子文件夹中提取图片：

<imgsrc=\"<?phpechoesc_url(get_stylesheet_directory_uri());?>/images/hello.png\"/>

2.将脚本和样式直接添加到模板

在WordPress中使用第三方脚本和样式是非常多的。刚开始构建主题时，您可能会想直接放置<script>或<style>标记，甚至将Google字体直接嵌入代码到主题页眉中。通常，这是静态HTML网站完成操作的方式，因此在此处执行相同操作是很有意义的。

但是，就像WordPress中的所有其他内容一样，还有更好的方法来解决它。我们应该利用wp_enqueue_script()和wp_enqueue_style()–将脚本和样式表添加到适合您的正确位置的优势。由于从主题functions.php文件中调用了所有内容，因此这也使脚本管理变得容易得多。

3.调用jQuery的外部实例

在相关说明中，WordPress的一个隐藏秘诀是它已经包含jQuery的副本以及几种流行的UI功能。因此，您不需要安装jQuery或远程调用它。

唯一的问题是您必须通过主题functions.php文件专门启用要使用的项目。虽然这创造了一些学习曲线，但也减少了项目的文件。

而且，实现所需的jQueryUI元素并不是不是太困难。例如，要启用jQueryUI选项卡，只需将以下代码段添加到您的functions.php：

functionmy_jquery_elements(){

wp_enqueue_script(\'jquery-ui-tabs\',array(\'jquery\'));

add_action(\'template_redirect\',my_jquery_elements\',10);

这告诉WordPress从其现有库中加载元素。

4.过度定制

添加自定义字段和自定义文章类型的功能可以使开发人员和网站内容编辑者的生活变得更加轻松。它们提供了便利，更好的内容组织和更直观的用户体验。但是有时候我们走得太远了。

例如，我非常喜欢自定义字段。但是即使我也承认，有时候我已经将主题定制为缺乏灵活性。字段非常适合需要确切知道需要输入哪些内容的设置，例如员工资料的字段。

但是，当有人要添加的内容类型不一致时，它可能会变得混乱。

对于这种类型的定制，没有硬性规定。我们唯一能做的就是最好地判断应该定制哪些内容，以及哪些内容可以更好地留给WordPress内容编辑器甚至是一个小插件。当我们确实添加字段或文章类型时，只要知道事情可能会发生变化，并尝试在此基础上进行构建即可。

国内的一些WordPress主题，往往捆绑了一大堆功能，恨不得一个主题就解决了所有问题和实现所有功能。其实这是非常不可取的，建议主题只作为一个基础的能满足普通用户的版本，而将一些相对独立的功能抽离作为插件进行补充，这也是国外很多主题开发商和销售平台，甚至WordPress官方建议的。

5.未添加代码注释

我将在这里再次承认：代码注释不是我的强项之一。这并不是说我根本不使用注释，而是更多的是它们不是很清晰。通常，我会指出特定项目的开头和结尾，而在两者之间没有太多的注解。我应该做更多吗？是的。

注释很重要，因为它至少在代码内提供了一些参考点。在浏览包含多个内容的PHP或JS文件时，您将想知道在哪里可以找到特定项目。

即使您是唯一会编辑该代码的人，也强烈建议使用注释。例如，如果您需要在六个月后进行更改，那么您不太可能会想起放置代码段的确切位置。

基本上所有的WordPress主题开发者，在最初的时候都会犯过这些错误，但是随着时间的推移，我们应该不断提高自己的技术，尽量去避免再次出现这些错误。