为你的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 条评论
登录 后参与评论

相关文章

来自专栏黑泽君的专栏

打造自己的博客园页面

刚接触博客园时,总有一种要定制打造自己博客页面的冲动,后来感觉原有的模板足够了(博客园提供了大量的模板),没有做这项工作。今天不太忙,稍微研究了下博客园的页面定...

1683
来自专栏程序员的知识天地

2018前端工程师成长路线图

成为前端工程师,第一步应该是学习HTML/CSS/JavaScript,这是基础。

2842
来自专栏Zchannel

Yu Writer:macos系统不可多得的Markdown写作工具

1222
来自专栏葡萄城控件技术团队

Web程序员们,你准备好迎接HTML5了吗?

HTML5作为下一代的web开发标准,其特性已经慢慢地出现在主流的浏览器中,这种新的HTML将会让浏览器不必再依赖Flash、QuickTime、Silverl...

2199
来自专栏前端大白专栏

react 在使用数据请求的时候和setState的时候哪个先处理

1945
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(52)-美化EasyUI皮肤和图标

我很久以前就想更新系统的皮肤功能,Easyui 自带的皮肤已经无法满足客户的审美。 ? 皮肤颜色来源于AdminLTE系统。我的颜色全部都这里取的。,所以一共取...

3935
来自专栏葡萄城控件技术团队

Angular和Vue.js 深度对比

Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面。当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强...

6083
来自专栏HTML5学堂

metahandler.js——移动端适配各种屏幕无痛工具脚本

移动端H5知识[系列] - 固定像素的实现方法 HTML5学堂:随着对移动端的探索,而今我们逐渐形成了“横向百分比,纵向rem”。日前看网易对移动端的操作,发现...

53611
来自专栏逸鹏说道

无图片字体icon

W3C 仍然在对 CSS3 规范进行开发。不过,现代浏览器已经实现了相当多的 CSS3 属性。CSS3也从前几年的初试探到如今的广泛应用。最近折腾这方面的东西其...

3819
来自专栏HTML5学堂

移动端H5知识[系列] - 固定像素的实现方法

HTML5学堂:随着对移动端的探索,而今我们逐渐形成了“横向百分比,纵向rem”。日前看网易对移动端的操作,发现网易的lofter采用了固定像素进行制作。今天我...

5074

扫码关注云+社区

领取腾讯云代金券