为你的WordPress 博客文章页面增加多彩排版条

不知这个上面这个题目会不会让人产生误解,再说明一下,所谓排版条即是如下面的一个绿色的彩条(当然颜色可以自己设定)。有了这个排版条,能更加容易区分内容文字及总结文字,使得读者在阅读你的文章的时候看到的是井然有序的排版,而不是千篇一律的文字堆砌。

在网站统计中有一个术语:跳出率。跳出率是指在只访问了入口页面(例如网站首页)就离开的浏览量与所产生总浏览量的百分比,跳出率越高,意味着网站越没有吸引力;读者没有兴趣在网站再逗留下去,而是选择关闭窗口。对于wordpress博客,好的文章排版能在一定程度上降低跳出率。

Jeff认为,wordpress博客文章排版是一项技术活,能搞好排版的必定是了解wordpress本身、具有一定专业技术(网页相关)基础、文笔好的少数人——他们或许是将一篇文章排成如同网页设计的效果了。但对于我们这些专心写写文章,却又挺在乎浏览数的博主来说,是有必要提升一下文章排版的。

接下来提供教程——为你的wordpress博客文章页面增加多彩排版条:

一、打开你的wordpress主题文件的style.css文件,看看html代码中的<h1>~<h6>这六个标题属性你的主题用了多少个,找出没有用的。

不懂这<h1>~<h6>六个标题属性的童鞋麻烦入门一下html知识。

比如,有些主题的标题可能是以<h2>作为属性的,<h3><h4>都可能用于不同地方。那么剩下<h1><h5><h6>没有使用的就是我们要用于排版条的。

二、找到style.css相关代码,添加入诸如以下代码:

#content h1{margin:5px;padding:2px 8px;background:#15B00D;color:#fff;font-size:16px;border:1px solid #e5e5e5;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 4px;line-height:25px;}


#content h5{margin:5px;padding:2px 8px;background:#A3C159;color:#fff;font-size:16px;border:1px solid #e5e5e5;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 4px;line-height:25px;}


#content h4{margin:5px;padding:2px 8px;background:#40BBEC;color:#fff;font-size:16px;border:1px solid #e5e5e5;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 4px;line-height:25px;}

根据主题不同,选择器(如上面的#conent)可能不同,这就需要你自己去折腾了。颜色也可以自定义,只要替换如#000000的颜色代码;其他亦可自定义(需要懂一些css知识)。

三、使用方法

写文章时就可以在编辑器的html环境下实现排版条。如我想“AAAAAAAA”为总结性句子使用排版条,在编辑器的html环境下,输入入对应属性即可。如”<h1>AAAAAAAA</h1>”。保存即可。

 

注意问题:

想要实现多种颜色排版条需要你有多个闲置的h属性(当然最多不过6个),不过一般的主题仅仅占用两个而已。
评分:
当前平均分 0.00 (0%) - 0 个投票
5 条 评论
  1. 朋友,你这篇文章对我很有用,拿走了,为表谢意,点一下你的广告

    9年前 回复
  2. 还有问题请教,文章编辑的时候可视化下并不是所见即所得。如左对齐问题,不止有无更好办法。

    9年前 回复
  3. 很实用,增加美观度和可读性。

    9年前 回复
  4. 有没有这方面的插件推荐啊

    10年前 回复
    • 这个那么简单的就不用插件了吧?

      10年前 回复
发表评论