现在的位置:首页>wordpress>正文

wordpress文章内容页面段首空两格和图片居中显示

2014年07月27日 ⁄ 共 1303字 评论 2 条

说句实话,福利老幺的wordpress网站,一直没有去注意过这些细节,其实有时候想想,让文章内容页面的每一个段落空格这样一个符合国人习惯的做法,还是有利于用户体验的.另外一个就是文章内容页面中的图片了,福利老幺之前一直都是靠左显示的,wordpress默认就是靠左显示的.自己看习惯了,倒也不觉得有什么,直到有一天,一位朋友在我的评论中留言,说放在中间明显有利于用户浏览,对于有益于提高用户体验的事,当然能改就要改一下了,何况,这两个修改十分简单.

wordpress文章内容页面段首空两格
对于老手的话,这样的问题就不用多讲,自己找到style.css修改就能完成,这里先说一个适合新手的方法,在您的当前主题的 functions.php 这个文件中加入以下代码:

//文章段落首行缩进两格
function Bing_text_indent($text){
$return = str_replace('<p', '<p style="text-indent:2em;"',$text);
return $return;
}
add_filter('the_content','Bing_text_indent');

当然,大部分朋友不愿意在里面加上这样的代码,那么就一起来看看如何修改样式文件style.css.这里以福利老幺的lovnvns主题为例,找到控制文章排版的部分,如下图:

文章段落首行缩进两格

其实也简单,就是在这个里面加上一段这样的代码:text-indent:2em;注意后面的冒号.当然,有些主题可能是

.entry{margin:10px 0;color:#333;} 或者是

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

这样的代码,没有关系,直接在大括号中加入text-indent:2em;就可以了.不到非不得已的情况下,不建议使用插件,如果一定要用插件,好像有个Keep Blanks这个插件可以实现.

文章内容图片居中显示

我们在插入自己的图片时,其实是可以设置的,但有些主题因为没有相应的样式代码,还是会靠左显示图片,这时我们可以加入一段控制代码来让其实现居中显示的效果.

先来看看传图片时如何设置居中,在文章编辑可视化的状态下,点击您的文章图片,会出现一个设置按钮(或者是一支笔的形状),点击它,会出如下图所示:

图片居中显示

选择居中方式为"中",这时再回到您的文章页面,刷新一下,看看图片是否居中,如果没有居中,那么在您的当前主题的style.css中加入以下代码:

.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.aligncenter p.wp-caption-text {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}

好了,到此您的图片就应该居中了.

小结
网站中的文章内容页面段首空两格和图片居中符合国人的习惯,所以建议您有时间的话,就调整一下这两个样式,福利老幺之前也是一直不注意,结果有好些朋友一进来就说我的文章排版不行,严重的现象可能会导至用户的流失.

评论 2 条 评论内容很精采,有内幕,而且绝对有干货

  1. 噶里味美食网 2014年07月28日 15:50  @回复  Δ-49楼 回复

    这个问题我博客倒是一开始就设置好了的~

  2. 吴尼玛 2014年07月31日 22:19  @回复  Δ-48楼 回复

    不错,值得借鉴!

给我留言