您现在的位置是:首页 > 网站制作 > WordpressWordpress
WordPress代码块无法正常显示回车/换行/空行的几种解决方法
杰帅2023-05-09【Wordpress】人已围观
简介在 WordPress 后台编辑文章的时候,明明有按ENTER空行,但是发表后发现空行完全不见了,之前按的回车一点效果没有。自从使用上WP之后,这个问题一直无法得到解决
在 WordPress 后台编辑文章的时候,明明有按ENTER空行,但是发表后发现空行完全不见了,之前按的回车一点效果没有。自从使用上WP之后,这个问题一直无法得到解决,一直怀疑 WordPress 的编辑器不太好用。有时候在“可视化”模式下写完文章用“HTML”模式看一下,再切换回“可视化”结果就变了。而且经常有时候写文章想分段空一个空白行出来。必须切换到“HTML”模式中用<br/>来实现。
用Google查了一下,原来WP自带的这个功能:自动省略或删除空白行。这个功能简直是脑残设计。
WordPress 无法正常显示回车/换行/空行/回行的几种解决方法
解决方法1:
在编辑文章时,把文本编辑器切换到“文本”模式,在需要空行的地方输入:
 
然后再发布。
注:WordPress新版中加入<br />已经失效,无法实现换行,需要加入  
这个代码后再发布就会显示一个空白行了。
上面的方法有个最大的优点,原生的,不需要做任何修改,直接使用。但也有个最大的缺点,就是你每次都要在“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/
Tags:
很赞哦! ()
相关文章
随机图文
-
wordpress 上传的图片不显示的问题 base64,data:image/gif
-
WordPress 页面模板(Page Template)下拉列表不显示的原因及解决方法
WordPress 的自定义页面模板是一个非常强大好用的功能,使用它新建一些静态页面(Page),添加上一些数据调用的函数,再在网页上做一个导航连接到对应的页面就可以实现很多自定义的功 -
wp_reset_postdata 和 wp_reset_query 的作用与区别
什么时候使用wp_reset_query,什么时候用wp_reset_postdata? -
wordpress发布文章HTML标签被自动过滤掉该如何处理?
wordpress发布文章时很多html标签都会自动过滤掉,造成了文章中无法添加<style></style><script></script>等标签。那么该如何如何处理呢? 解决方法一: 将wp-includes文件夹下