WordPress代码块无法正常显示回车/换行/空行的几种解决方法

在 WordPress 后台编辑文章的时候，明明有按ENTER空行，但是发表后发现空行完全不见了，之前按的回车一点效果没有。自从使用上WP之后，这个问题一直无法得到解决，一直怀疑 WordPress 的编辑器不太好用。有时候在“可视化”模式下写完文章用“HTML”模式看一下，再切换回“可视化”结果就变了。而且经常有时候写文章想分段空一个空白行出来。必须切换到“HTML”模式中用<br/>来实现。

用Google查了一下，原来WP自带的这个功能：自动省略或删除空白行。这个功能简直是脑残设计。

WordPress 无法正常显示回车/换行/空行/回行的几种解决方法

解决方法1：
在编辑文章时，把文本编辑器切换到“文本”模式，在需要空行的地方输入：

&nbsp

然后再发布。

注：WordPress新版中加入<br />已经失效，无法实现换行，需要加入 &nbsp 这个代码后再发布就会显示一个空白行了。

上面的方法有个最大的优点，原生的，不需要做任何修改，直接使用。但也有个最大的缺点，就是你每次都要在“html编辑器”模式下输入并接着发布，你一旦转入“可视化编辑器”下编辑并发布以后，那么你以前做的工作就白费了，还得从头再来。

下面来介绍彻底一些、简单一些的更好方法吧。

解决方法二：
打开模板目录中style.css文件，添加以下代码：

.post .content {
	padding: 5px 0 5px 5px;
	line-height: 145%;
	overflow: hidden;
}

.post .content p {
	margin-bottom: 10px;
}

.post .content .under {
	height: 16px;
	line-height: 16px;
}

.post .content .under span {
	float: left;
	margin-right: 15px;
}

.post .content h4 {
	color：#080;
	margin-bottom: 10px;
}

.post .content img {
	max-width: 600px;
}

.post .content ul， .post .content ol {
	padding-bottom: 10px;
}

.post .content ul li， .post .content ol li {
	list-style-position: inside;
	padding-left: 20px;
}

.post .content table {
	background：#FFF;
	border: 1px solid #CCC;
	margin: 5px 0 10px;
}

.post .content table tr td {
	border-top: 1px solid #CCC;
	padding: 2px 10px;
}

.post .content table tr th {
	padding: 1px 10px;
	background：#EDEFF0;
	text-align: left;
}

.post .content .boxcaption {
	background-image: url（img/postbox.gif）;
	border-bottom: 1px solid #CCC;
}

.post .content .box {
	background-image: url（img/postbox.gif）;
}

然后再修改你模板文件夹下的single.php文件

注：部分朋友使用的模板文件里的代码和下面不一样，如果你不熟悉代码，推荐使用第三种方法安装插件解决。

查找

<?php the_content(); ?>

修改成

<div class="post-content"><?php the_content(); ?></div>

即可

解决方法三：

如果你对代码一窍不通，用前面的方法觉得有点麻烦；或者你使用上面的方法仍然不太满意，那么还可以用插件来解决问题！

安装TinyMCE Advanced插件（WordPress默认的是TinyMCE编辑器，现在安装一个高级版），在插件的设置页面的下方，找到 stop removing the p and br tags when saving and show them in the HTML editor 这个选项，打上勾即可。

TinyMCE Advanced 是一款用来增强和自定义WordPress默认编辑器 TinyMCE 的插件

TinyMCE Advanced 插件下载地址： http://wordpress.org/plugins/tinymce-advanced/

打赏赞