一个分享WordPress、Zblog、Emlog、Typecho等主流博客的教程网站!
当前位置:网站首页 > 博客教程 > WordPress教程 > 正文

WordPress 博客文章内容段落首行缩进的方法

作者:xlnxin发布时间:2021-04-15分类:WordPress教程浏览:907


导读:不知道为什么,大多数的WordPress博客主题作者制作主题的时候,都没有把正文内容段落的首行缩进两格,这并不需要多大的功夫。段落首行缩进两格,可以让文章整体看起来更加条...

不知道为什么,大多数的WordPress博客主题作者制作主题的时候,都没有把正文内容段落的首行缩进两格,这并不需要多大的功夫。段落首行缩进两格,可以让文章整体看起来更加条理,读者阅读得更加轻松,这便是网站高手们常说的用户体验了。实现正文段落首行缩进的方法很简单,为需要的朋友介绍下。

首行缩进方法介绍:

主要是通过CSS代码为WordPress博客正文段落添加首行缩进的样式。这里需要注意的是,每个WordPress博客主题作者使用的CSS样式类名都不一样,但是方法是一样的,这里以当前主题为例进行讲解说明。

实现的方法步骤:

  1. 登陆自己的WordPress博客,点击“外观”选项卡下的“编辑”选项进入主题编辑界面(可以把需要修改的主题文件下载到本地进行修改)
  2. 查找正文内容的CSS样式的类名或id选择器(一般在正文内容标签代码上面),如本站的
    1
    2
    
    <div class="post">
    			<?php the_content(('<div class="more"><strong>Read More...</strong></div>'));?>

    其中的post使用是类名

  3. 选择style.css文件进行编辑,在样式文件中找到正文内容的CSS样式,找到该样式的派生选择器p,在派生选择器p中添加首行缩进代码text-indent:2em;,完整的代码如下:
    1
    
    #content .post p { color:#666; margin-bottom:7px; text-indent:2em;}

    如果没有派生选择器p,可以为其添加一个,代码如下:

    1
    
    #content .post p {text-indent:2em;}
  4. 提交更新文件,刷新页面,WordPress博客正文内容段落实现首行缩进了。

提醒:其实这是很简单的CSS知识,建议不会的博主们学习一下基础的CSS知识。

标签:wordpresscssdiv主题博客