WordPress建站教程：美化WordPress默认的H标签样式(WordPress调试模式的开启和设置)

WordPress建站教程：美化Wordpress默认的H标签样式

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

（此处已添加小程序，请到今日头条客户端查看）

​继续分享wordpress建站教程，今天我们给wordpress站点默认的H标签修改样式，让它好看一点。如果你的网站文章内容比较长，那么大概率会用到H标签，至少会有H2标签，或者是H3标签，这样可以让网站内容显得更有条理，对网站SEO优化也有不少好处。但是wordpress默认的H标签样式是比较难看的，只有一个又大又粗的样式。接下来我们就开始对H标签样式进行简单的美化。

步骤一：找到当前网站的H标签样式

有人可能尝试过直接代别人分享出来的CSS样式，但是直接使用时却没有生效，因为不同的网站不同的主题，它原来的CSS样式ID是不一样的，所以我们需要先找到当前网站的H标签CSS样式。

​先打开一篇含有H标签的文章，浏览中按F12进入开发者模式，选中H标签，从代码中找到当前H标签的CSS样式，如上图右边，我们确定了当前网站的H2样式ID为【.blog-details .details-content h2】。然后我们只需要把写好的CSS样式添加进去就可以了。同样的方法我们可以找到H3标签为【.blog-details .details-content h3】。

步骤二：编写CSS样式

接下来我们可以直接在浏览器在调试CSS样式，如果不懂也可以直接让别人写好的来修改，最终悦然建站确定好的样式如下：

.blog-details .details-content h2 {
font-size: 22px;
margin-top: 20px;
padding-left: 10px;
position: relative;
border-bottom: 1px #eee solid;
border-left: 5px solid #fcab03;
margin-bottom: 10px;
}

.blog-details .details-content h3 {
font-size: 18px;
margin-top: 20px;
padding-left: 10px;
position: relative;
border-bottom: 1px #eee solid;
border-left: 3px solid #fcab03;
margin-bottom: 10px;
}


步骤三：添加CSS代码

最后我们只需要把上面的CSS代码添加到当前使用的wordpress建站主题中即可，悦然建站之前的一篇文章给大家介绍过修改CSS的方法，大家没看过的可以先去了解一下。

​这里悦然建站推荐添加额外的CSS代码，不要直接修改主题的CSS文件。上面的代码可以直接添加到主题的【额外CSS】功能中，或者是添加到其它的CSS插件中。部分主题在添加上面的CSS代码时需要使用style标签闭合。

​最终的H标签效果如上图所示，上面分别是H2和H3标签的效果，这样会比原来的H标签样式好看一些。

总结

今天的wordpress建站教程就分享到这里。这里要提醒一点，虽然CSS样式可以实现很多漂亮的效果，但是如非必要，CSS样式还是不要太多，多了反而影响效果。

​

WordPress调试模式的开启和设置

在WordPress网站上打开调试模式(WP_DEBUG)可以使您更好地了解网站正在发生的事情，尤其是当你的网站出现问题时。WordPress调试模式对于主题、插件开发者或者网站开发人员来说，非常有用。

因此，在本文中，我们将向您展示有关WordPress调试模式的所有知识，以及如何在网站开发中使用它。

WP_DEBUG是一个PHP常量，可在WordPress中触发调试模式。您可以在wp-config.php文件中找到它。WordPress在默认情况下禁用了调试模式，但是启用该模式后，您可以执行许多重要的任务。

首先，它将为您提供有关如何重现问题的信息。通过保存日志文件，它可以记录您站点上发生的所有活动，并且可以帮助解决问题。

其次，WP_DEBUG将显示WordPress主题或插件版本中已弃用的函数列表。这些函数将来会被标记为无效。该通知通常还使您知道可以使用哪些替代函数。

启用调试模式的另一个重要原因是您要构建主题或插件时。

WordPress强烈建议每个开发人员在创建其产品时都使用WP_DEBUG，以便在出现问题或警告时，另一位开发人员可以检查并修复代码。

如果它与WP_DEBUG不兼容，则WordPress官方主题或插件审核团队将不会认可您的插件或主题。

WP_DEBUG位于网站根目录下的wp-config.php文件中，默认情况下，其值设置为“false”。如果要启用它，则必须将其更改为“true”。为此，您将需要FTP客户端（例如FileZilla）或文件管理器来访问文件。

一般情况下，你可以在wp-config.php文件中找到以下代码：

define(\'WP_DEBUG\',false);

将false更改为true。然后，保存文件。

如果您的wp-config.php文件中没有这样的代码，则可以将其添加到/*好了！请不要再继续编辑。请保存本文件。使用愉快！*/这行的上方。

请记住，不应在实时网站中启用调试，因为此模式仅用于开发目的。

WP_DEBUG_LOG

通过启用WP_DEBUG_LOG，用户可以将所有错误保存在debug.log文件中。此功能与WP_DEBUG协同工作，可以帮助重现问题以进行故障排除。

要启用它，请打开wp-config.php文件，然后在define(\'WP_DEBUG\',false);的下面输入以下代码：

define(\'WP_DEBUG_LOG\',true);

激活该功能后，随便浏览几个你网站的页面，如果存在错误，debug.log文件将自动保存在您网站的/wp-content/文件夹中。您可以在浏览器中直接查看文件。

WP_DEBUG_DISPLAY

您应该禁用WP_DEBUG_DISPLAY，这样可以使错误消息不显示在您的网站上。

默认情况下，WordPress每次发生错误时，都会生成错误信息并将其显示在HTML代码中。与WP_DEBUG不同，WP_DEBUG_DISPLAY的原始值是“true”，您必须将其更改为“false”以隐藏所有错误。

define(\'WP_DEBUG_DISPLAY\',false);

我们开启了WordPress调试模式，并将调试信息写入debug.log文件，同时禁止在网页上显示调试信息。这样一来，网站的用户不会看到调试错误信息，而开发者可以通过debug.log文件查看错误。

SCRIPT_DEBUG

默认情况下，WordPress使用CSS和JavaScript文件的压缩版本来帮助减少网站的加载时间。但是，这可能是一个问题，因为它可能会在您使用的脚本/插件中隐藏错误。

为了更改脚本执行，WordPress还提供了一个常量SCRIPT_DEBUG，我们可以将其添加到wp-config.php文件中，即：

define(\'SCRIPT_DEBUG\',true);

这样一来，在开发过程中，涉及到js脚本错误的一些调试就可以正常看到了。