WordPress 子主题功能 + 为 WordPress 增加分类搜索功能并美化

近期关于 WordPress 方面主要写了两篇文章,分别是 使用 WordPress 的子主题(Child Themes)功能快速制作自己的主题为 WordPress 增加按分类搜索功能并自定义外观

之后,关于 WordPress 的文章,我直接首发在 我爱水煮鱼 上面,在 潜行者m 博客就不转发了,只对一些比较好点的文章做一个链接。欢迎大家关注 我爱水煮鱼,国内最专业的 WordPress 技术平台。

子主题功能

如果你想修改一个 WordPress 最好的方法并不是直接上去修改,而是通过 WordPress 的子主题功能进行修改。这样修改之后,不会影响到原来主题文件,原来主题升级覆盖之后,也不会影响你修改的内容。

结合着官方文档,并且动手实践了一下,写出了这篇文章:使用 WordPress 的子主题(Child Themes)功能快速制作自己的主题

增加分类搜索功能并定义外观

对于一个比较大型类门户的博客来说,按照分类搜索功能是必不可少的,这篇文章就介绍了如何增加这个功能。同时对输出的 select 分类选择下拉列表进行了美化。
这篇文章中,提供并用 jQuery 实现了模拟下拉列表的功能,想要围观请看这里:为 WordPress 增加按分类搜索功能并自定义外观

纯纯的超棒的写作工具:Writings.io

作为一个崇尚简约设计的博主,我对于写作环境的要求比较苛刻。先是用过 WordPress 的原生编辑器,然后觉得功能不够,使用增强版的编辑器插件,再到使用 Windows live write 这样的桌面写作软件,到现在的回归原始使用 WordPress 原生编辑器。这个过程中,我从要求功能的复杂转变到了简洁、简单。

但是 WordPress 原生编辑器仍然满足不了我追求简洁、愉快的写作体验,虽然它有全屏模式,但是切换神马的比较麻烦。自己如果修饰定义后台界面,工程又过于繁杂。偶然的机会,我发现了 Writings.io 这个工具。

可以这样说,如果 Writings.io 这个工具早点被开发出来,或许就不会有这个博客了,我会直接在那上面写作,用这个域名指向过去。相见恨晚。

Writings.io 简介

引用作者的话,就是说:

Writings.io 是一个提供在线文章写作、管理、发布的网站服务。整个网站采用清新简约的设计,学习 37signals 公司的理念,不求功能最多最全,但求简单够用。目前的 Writings.io 只有两个功能:文章管理和文章编辑。

其实作者也是简洁控,追求极致的写作乐趣,既然现有的已经无法满足,那么就自己动手开发个吧。看着这种介绍,我忍不住试了一下。

试用 Writings

先简单的注册一个账号,然后就进入了后台,及其简约的后台:

Writings 后台截图

然后很明显的新文章按钮,点击一下就进入了新写文章界面,超级简洁和必备的编辑功能:

Writings 文章编辑器截图

我把前段时间写的一篇文章复制上去测试一下,然后编辑器支持 HTML 代码,排版布局非常合理,写文章的普通基础功能都必备。点击一下发表之后就可以成功发布了,在此过程中实时的保存,妈妈再也不用担心我写的文章不见了。发布之后,就可以查看了。

Writings 文章发表之后截图

展示文章的样式也是非常简洁的,非常不错。后台其实有更强大的功能,比较亮的有这个:

Writings 后台亮点功能

支持绑定域名和 Disqus 账号,这样就可以自定义域名并且拥有评论功能了。绑定域名超级简单,直接 CNAME 到 writings.io 然后在后台设置一下,无需备案没有延迟,直接就可以使用了。

我做了一个小测试,绑定了一个域名然后发表了一片文章,大家可以点击看一下:http://test.qianxingzhem.com/

Writings 优势和未来发展

国内也有一些轻博客具有简约、专注于写作的特性,但是相比之下 Writings 做的更加极致,没有利益影响,没有框架和不必要的功能限制,单纯的享受写作的乐趣。

从前端技术的角度来看,整个网站前端做的非常好,采用了响应式的设计,同时 YSlow 性能测试得分 96 分。

目前还正在开发中,只由 Rei 一个人在开发,许多设想的功能还没有开发出来,例如:导出为 epub 格式、多人协作写作等等。欢迎大家亲自试用,然后提出相应的问题和需求。

为什么使用 class 属性来标注 HTML 元素而不是 id 属性

在网页中有很复杂的 HTML 结构,如果我们使用 CSS 来定义相关的样式,就需要为这些结构指定相应的标志,然后再编写相应的 CSS 选择器来获取他们赋予样式。最常用的两个标注属性就是 id 和 class 了,例如:

<div class=”header” id=”header” ></div>

现在还有更多的选择方法,例如:属性选择器等。但是并不推荐使用,使用属性选择器虽然可以省略掉 id 和 class,但是存在 后期维护起来不方便、早期浏览器兼容性不好、影响浏览器的渲染效率 等问题。所以,虽然有了更多的选择,我还是推荐使用 id 和 class 以及 元素名 来构造 CSS 选择器。

既然 id 和 class 都可以标注 HTML 结构,那么我应该优先选择使用什么?这就是本文即将讨论的。

id 和 class 的区别

有经验的朋友可以略过这一部分。

唯一性和重复可用性

id 在网页结构中只能是唯一的,如果你指定了一个元素的 id 为 aa,那么网页中就不能再出现一个 id 为 aa 的 HTML 元素。虽然强大的浏览器会支持多个重复 id 并赋予对应样式,但这是不标准不允许的。

而 class 相反,它可以在网页结构中重复使用,你指定了一个元素的 class 为 bb,同时可以指定下一个元素的 class 为 bb,这两个元素可以同时被应用 bb 的样式。此外,你还可以为一个元素制定多个 class 属性值,这样就会同时获得多个属性的样式。

CSS 中优先级不同

在 CSS 选择器中,对 id 和 class 的样式应用优先级不同。id 的样式优先级要高于 class 的样式优先级,如果我对一个 id 为 aa 、class 为 bb 的 div 指定了下面的样式:

#aa{background:red;}
.bb{background:blue;}

那么浏览器会显示成红色背景。

跳转功能

使用 id 属性可以增加锚标记跳转功能,如果在页面中我们对一个 div 指定 id 为 aa ,那么我们在当前的 URL 后面加上 #aa ,页面将会立刻跳转到 id 为 aa 的 div 所在的位置。例如:百度百科的章节跳转。而 class 没有这个功能。

http://baike.baidu.com/view/371.htm#8

为什么使用 class 而不是 id

使用 class 究竟有什么好处?

减少命名

为复杂的结构起名字真是一个麻烦的事情,如果我使用 id 来标注,那么我必须为每一个结构起一个名字。而在网页中,有很多结构的样式和效果都是一样的(例如:统一的按钮样式),那么我们仅仅编写一个通用的 class 样式,然后为所有的需要相同样式的结构赋值这个 class 即可。

高度重复使用

class 可以重复应用在其他结构中,并且可以对某个元素应用多个 class ,那么这样就可以高度重复使用某个 class 样式了。比较极端的实际应用就是原子类,例如:

.fl{float:left;display:inline;}
.fr{float:right;display:inline;}

尽可能小的简短的写出一些类,然后对于某个需要这个样式(例如:上面的浮动)的元素直接写上 class (例如:class=“fl”)。

一般的应用来说,对于某些需要相同样式的结构,只编写一个样式,然后对这些结构赋值相同的 class 即可,这样达到高度的样式代码重用,而且修改起来也比较方便。

优先级低

class 的优先级高于 元素名,低于 id ,利用优先级低的这个特性可以方便调试和样式覆盖。

如果我们之前对一个元素使用了 id 来标注,我们想修改这个元素的样式,只能去修改对应的 CSS 样式代码或者对某样式使用 !important 强调语法来覆盖原有样式。

如果元素使用了 class 来标注,那么我们直接为元素增加一个 id ,然后构造一个元素 id 的 CSS 选择器即可进行修改覆盖。

正是因为这些特性,所以要尽量使用 class 来标注元素,方便后期维护等。

id 也是必须有的

class 也不是万能的,有很多地方我们必须同时使用 id 来标注。

锚标记跳转

要想在页面中使用锚标记来跳转,那只能指定某个跳转目标的 id ,因为 class 可以被重复多次使用,所以不具备跳转的功能。

用在 input 中

使用 input 的时候,通常要使用 label 标签来描述这个 input 的功能。将 label 与 input 关联的方法有两种,一种是使用 label 的 for 属性,属性值就是 input 的 id 值,另一种就是将 label 把相应的 input 包裹起来。很显然第一种比较灵活比较好,但是你必须要对相应的 input 指定一个 id 属性。

此外,有些特殊的需求,也必须使用 id ,这里不再总结了。

最佳的使用组合

之前有很多批评 class 的言论,甚至有言论说 W3C 应该废除 class 标签,潜行者m 也曾经是 id 属性的狂热使用者,但是在实践过程中,越来越发现 class 的优点并改用 class。

比较好的使用组合就是对于绝大多数的元素和结构等使用 class 来指定,对于极个别需求特定功能的元素使用 id 标注。

欢迎讨论交流。

推荐一个最好的 WordPress 问题解决平台

使用 WordPress ,肯定就会遇到一些问题。基础的使用问题就不多说了,主要的问题就是诸如 插件开发、主题功能 等等,遇到这些问题就比较麻烦了。一般来说有三种方法:

  1. 搜索一下这个问题有没有别人解决过。这个可能有时候找不到。不推荐使用 百度,你的搜索效率会降低。
  2. 检索 WordPress 官方文档,然后在海量的英文中查找阅读相应的函数等。
  3. 在专业的 WordPress 问题解决平台上面问一下这个问题。
    很显然,本文要推荐一个最好的解决平台,那就是 WPJAM问答

之前网上已经有一些相关的问题解决平台(例如 Wopus 问答),为什么说这个刚开不久的 WPJAM问答是最好的呢?它的优势有:

  1. 无需注册直接使用多说或者评论框登陆即可发布问题。
  2. 问题主要由 Denis 亲自解答。
    主要还是最后一条比较有诱惑力,Denis 是我爱水煮鱼博客的博主,是国内公认的 WordPress 骨灰级技术大神,对于 WordPress 的理解和使用技巧已经远超我等小菜。所以绝大多数 WordPress 相关的问题,都会被很正确的解答。

欢迎有问题的同学去提问!也希望能推荐给你的其他朋友!

新版个人简历+博客写作方向

好久没有写一些生活记录类的文章了,今天就来一篇记录一下。马上就要开学了,有种很奇怪的感觉。如果说还在家里,觉得每天都坐在电脑面前真的有点无聊。如果说要回到学校,又是这种事那种事的,也挺烦人的。反正我留下或者开学,都无所谓了,就那么过吧。只是越学越觉得学得不踏实,很多东西只是皮毛,却以为用的很熟练。Javascript 从上学期就要拿下,结果这个假期都没有搞下。还有很多设计草稿,还只是画在上面,还没有做。执行力真的有些不行了。

新版个人简历

原本跟团队里面的人承诺,假期也要升级我的个人简历,但是转眼一个假期就过来了,也没有去做。当然草图是有的,打算应用视差滚动做一个,一共有六个页面,包括怎么滚动怎么交互都想好了。但是一个假期都没把视差滚动的相关技术研究好。之前看到网上有些插件,于是就想用插件的方法,但是插件都太不好用了。看起来太麻烦,就不想看,然后就忙别的了。

当然,昨天上午彻底不能忍了,于是就查找视差滚动相关教程,然后就找到了,然后看完之后豁然开朗,做这种效果太简单了。教程文章:Build a parallax scrolling website interface with jQuery and CSS 。这是11年8月份的文章,当时视差滚动已经流行了一段时间了,不得不承认,国内的技术水平和设计实力就是不如国外啊。国内很难找到关于视差滚动的教程,更找不到一些作品。

然后就开始动手做呗。拿出之前画的草图,挑选了几个场景,然后 PS 素材,写写代码,就做出来了。当然,这个版本的跟我之前的构思差距太远了,很多细节都没处理上,但是用了几个小时就做出来了。主要还是为了应付哈,有些滚动的方式什么的处理的不算好,大家可以看一下,如果有什么建议提一下。点击这里打开 于江水

博客写作方向

先来吐槽一下百度这个大垃圾搜索引擎。自从之前那次 robots 事件之后,google 的收录几天就全部恢复了,百度到现在还只是几十篇文章。瞎了百度的狗眼算法,光记忆中的就有两次 K我的博客,连搜索“潜行者m”这样的独一无二的关键词都找不到。距离那次已经接近半年的时间了,从那次之后,我就不用百度的搜索服务了。说是专注搜索体验,连我的原创博客都K,搜索也出现很多垃圾,滚蛋吧。

谷歌是最好的搜索引擎,但无奈香港节点经常抽风。所以,本人推荐使用 Bing。自从上次百度K站事件过来,我用 Bing 已经快半年了,这半年的搜索体验还算不错,虽然图片搜索经常抽风。也比百度的狗屎算法强多了。百度其他服务也有好的,也就百度云放点文件还不错。对了,百度还把我一老站给K了,流量直接减半。那论坛根本连碰都没碰,根本没改版过,也没有什么服务器的问题,就这么无缘无故的K掉。老子真想用 robots 吧百度给屏蔽掉,只能期待 X60 抓紧崛起。

其实也分析过为什么会这样。我写过的文章,通常都投稿到 我爱水煮鱼 博客上面,一般就给通过了。然后,通常就会有转载到别的地方的。对于百度这种垃圾算法而言,我的博客文章就成了复制转载的。所以写作方向要改变,这个博客主要记录前端相关的学习总结,包括一些 CSS3 Html5 之类的,推荐一些 jQuery 插件,翻译一些教程等。我还会写一些 WordPress 的文章,主要以翻译文档为主,但是不会发在这个博客上了。关于 WordPress 的文章,我直接发到 水煮鱼 博客上,这个博客如果有好的前端文章,发表一个月后再投稿到 水煮鱼 上。

还是尽量高的提高文章质量,更新频率不会太高。

回到学校

返校之后,马上开始酝酿已久的一个项目。抓紧给团队的人施压,给他们上课让他们学习。就目前了解的情况来看,大家在假期里都玩的挺好,一点都没学。虽然说,慢慢来,不能太慢了吧。

最后,再吐槽一下 IE,某日不小心搜索 HTML5 兼容性 出来的。

吐槽IE

 

在页面中添加滚动一定距离后跟随滚动模块的方法和注意事项

现在在网页中,经常可以看到一些滚动跟随模块。比较常见的两种场景:

  1. 页面滚动到了导航条位置,然后导航条就固定到页面顶端,跟随滚动
  2. 边栏高度不如正文高,滚动到边栏末端,出现一个跟随页面的滚动的边栏模块
    本文就是来介绍如何实现这个效果,并且解决这个效果带来的一些问题。

实现的基本原理

固定到页面的某个位置,并且跟随页面滚动,实际上就是用到了一个 CSS 中的 position 属性值 fixed。对 HTML 对象指定 position 属性为 fixed 之后,这个对象就会保证位置不变,跟随页面滚动。但是这个属性在早期的 IE 浏览器中是不支持的,有很多 hack 方法,在这里不再赘述。

那么,要想实现 滚动一定距离 之后,某个模块跟随页面滚动,要做的就是用 Javascript 来监控页面的滚动事件,判断滚动距离是否达到目标位置,然后对要跟随滚动的模块修改 position 属性为 fixed。当然,也可以提前做好一个滚动跟随模块,用 display 属性隐藏起来,等滚动到了一定距离,取消显示。至于怎么出现和出现什么内容,就看你自己的需求了。用 jQuery 监控方法如下:

$(window).scroll(function(){
if ($(window).scrollTop()>64){
$(“#menu”).css({position:”fixed”,left:”0px”,top:”0px”});
}else{
$(“#menu”).css({position: “relative”});
}
});

这里,对 window 对象使用 jQuery 的 scroll 方法,用来监控滚动事件。当页面滚动的时候,就会触发定义的函数。函数的功能也比较简单,使用 scrollTop 方法来获取当前网页滚动的位置距离页面顶部多高(单位 px),然后用 if 语句判断,当滚动距离页面顶端超过 64px 之后,就对 id 为 menu 的模块修改 CSS 样式,让它跟随页面滚动。当小于这个高度的时候,再修改回去。

虽然功能比较简陋,但大体的原理就是这样,更多具体的效果,请自由发挥。

两个跟随滚动插件

神说,这么好的效果应该做成插件,于是就有了插件。这里简单的介绍两款基于 jQuery 的插件:Sidebar FollowScroll Follow

这是 mg12 写的一个小插件,代码比较少,功能也比较简单,所以使用起来就比较方便。看名字就可以知道,主要用于边栏模块的跟随滚动。代码页比较少,有兴趣的同学可以看一下。

Sidebar Follow官方主页和使用说明

Scroll Follow

这是个比较老功能比较强大的插件,可以实现各种你想要的跟随滚动效果。具体的下载地址和使用方法,也不再赘述了。

Scroll Follow官方主页和使用说明

添加跟随滚动模块的注意事项

本文介绍的技术其实没有什么技术含量,写本文的最主要的目的,是想介绍下面这两个注意事项。

尽量少的使用

再好的功能,也要适度使用。屏幕的空间本来就有限,加上一个很高的导航条,再加上左下角、右下角的广告,右边再来个边栏跟随,这样的页面你如何才能专注的看正文内容?所以要尽量多的留出浏览者阅读的空间,适度的补充内容,尽量保证页面的整洁。才能有一个比较好的用户体验。

设置合理的结构防止页面塌陷

这个问题才是本文的重点,网上很多采用这个效果的页面都中了这个问题。先来看看问题演示 demo

塌陷的具体问题效果很明显,就是下面的内容突然跑上去了,产生了回流(reflow)。回流简单的说,就是当你页面中某个部分突然消失了,浏览器就需要重新渲染网页的内容。潜行者M的 Demo 页面由于结构比较简单,所以具体效果只是内容突然上去而已。但是对于结构比较复杂、代码比较多的网站来说,一旦出现回流,浏览器就要重新计算渲染,页面就会卡一下子。如果浏览者的电脑配置比较低,甚至会卡一下电脑。如果浏览者的浏览器版本比较低,可能会导致页面错乱。

事关用户体验的问题,是不能容忍的。问题的原因,就是突然改变了相关结构的 CSS 属性导致。就本例而言,原来的导航条 position 属性是 relative ,在页面中占据一定空间。突然改成了 fixed 脱离了文档流,自然浏览器要把原来位置补上,重新渲染。

所以,在设计页面跟随滚动模块之前,一定要考虑到这个细节。最好设置比较好的 HTML 结构,撑起来。也可以在要滚动的模块外面包裹一层结构,用来占位。也可以在一开始,就让滚动模块脱离文档流。潜行者M的建议是,最好专门设置一个用来滚动的模块,先隐藏,然后触发显示。

使用 jquery.easing.js 增强动画过渡效果

jQuery 提供了一些诸如 show、hide、slideUp、fadeIn 等等动画方法,可以方便的切换元素的显隐。更有强大的自定义动画方法 animate ,可以实现很多动画效果。为了让动画有好的过渡变化过程,官方为这些方法设置 easing 属性,但是官方没有给出很多过渡效果。

jquery.easing.js 这个插件,增加了很多过渡效果,引入之后可以让动画过渡过程更加多样化。

先来看一下:Demo。官方也有案例:打开官方主页

如何使用 jquery.easing.js

第一步 引入插件

jQuery 插件嘛,当然要先引入 jQuery,然后再引入 jquery.easing.js 。

<script type=”text/javascript” src=”http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script&gt;
<script type=”text/javascript” src=”http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script&gt;

然后再在引入代码下面编写调用的 Javascript 代码,注意代码顺序

第二步 启用插件

首先先假设使用 animate 方法把网页上的 class 为 aa 的 div 的宽度,从原本的 300px 变成 600px。按照 animate 的写法,加上 easing 。

$(‘.aa’).animate( {‘width’:’600’} , { duration:1000,easing:’easeInOutCirc’ });

这样,就对 aa 对象,启用了一个 easeInOutCirc 过渡效果,在 1000毫秒 内变成 600px。

可以应用的动画方法

不仅仅支持 animate 方法,还支持 hide、show、slideDown、slideUp、fadeIn、fadeOut等等支持 easing 的动画方法。只需要按照官方对应的格式去写就可以,这个插件相当于扩充了官方的过渡效果样式

插件的参数

这个插件有三个参数:durationeasingcomplete

duration 参数

用来指定动画变化的时间,以毫秒为单位。

easing 参数

指定这个动画要使用何种过渡样式。具体的过渡样式名和效果,需要在官方主页上查看左边的 “Example”,选择找到自己想要的效果。

complete 参数

设置一个回调函数,当动画完成之后,执行这个函数。

其他注意事项

使用 slideUp 动画方法

slideUp 这类的动画方法,要比 animate 简单一些,不需要复杂的属性参数,所以可以直接这样写:

$(element).slideUp(1000, method, callback});
$(element).slideUp({ duration: 1000, easing: method, complete: callback});`</pre>
其他的 hide 、show 之类的方法,自行类比。

### 指定默认的 easing 样式

在使用中 easing 参数是可以省略的,省略之后,就会调用默认的过渡样式。可以使用下面一句代码,指定默认的动画过渡样式。
<pre>`jQuery.easing.def = "过渡样式名,例如 easeInOutCirc";

用起来挺简单的,但是有了更和谐的变化效果,可以增强用户体验。更多用法欢迎观看 Demo

如何用 WordPress 写出一篇“好看”的文章

一篇文章是否好看,无非在于两方面,第一个就是文章本身的内容,另一个就是文章显示的排版布局。潜行者m博客自创建以来,也已经过去了近两年的时间,这其中积攒了很多在 WordPress 写作的经验,特别是在文字排版这块。回首观看,早期的文章质量比现在的要差远了,本文就是总结一下对于使用 WordPress 写作文章排版的经验。

一些基础知识

在后台编写文章通常使用可视化的编辑器,你看到的排版布局就是比较具体的效果,但实际上数据是用 HTML 结构来记载的。例如,当你回车换行,那么在换行的地方系统就会加上一个段落标签(<p>),当你插入一个连接的时候,用的就是锚标记(<a>)。HTML 是具有语义性的,根据 HTML 的语义性写出的一篇文章,对于 SEO 、排版都有好处。此外,WordPress 主题的作者,通常也会针对这些结构进行一些设计和样式处理,会使其显示的效果更好。

用标题划分文章层次

用标题划分文章层次

标题标签(<hn>)是非常重要的一个 HTML 标签,它对于 SEO 也有很重要的作用。通常用它来划分文章的层次。写一篇文章,肯定要有一定的层次,也就是所谓的大论点、小论点等。通常的文章一般具有三个层次:文章标题、大标题、小标题,通常来说,对应的标签是 h1、h2、h3。对于有的主题来说,设计者会用 h2 作为文章标题,这点也需要注意。标题标签一共有六个(h1-6),分别代表不同的重要等级,实际应用当中,只会使用 h1-3。需要注意以下两点:

  • 内文标题层次不要高于文章标题。如果文章标题使用了 h1,那么内文大标题只能使用 h2。
  • 小标题包含在大标题中。分清楚小标题属于哪个大标题属于什么层次,不能把小标题和大标题的层次混合。
    合理的使用标题划分文章层次,可以让文章变得更容易理解,对阅读者和 SEO 都有好处,更有一些插件可以根据文章的标题建立目录层次,例如 水煮鱼 开发的 TOC 文章目录插件

对于重要的文字进行加重处理

这一点大家都知道,不再赘述。但是要注意的一点,只对非常重要的关键词进行加重,加重的效果通常是文字加粗,这样可以吸引浏览者的目光,如果太多的话,就会分散阅读者的注意力,要尽可能的少。下图就是个加太多的例子。

善用有序和无序列表

如果你在文中写的内容具有明显的并排性,可以作为一个列表,那么一定要使用无序列表(<ul>)或者有序列表(<ol>)。无序列表就是指没有顺序的列表。如果你想列举某项产品有什么样的有点,或者是一些赛事列表,那么你应该使用无序列表。有序列表是指一些有顺序的并排信息。如果你想写一下使用某个软件的四个步骤,或者是发布一个有明确顺序的资源列表,那么就用无序列表。

善用有序和无序列表

见过很多文章会对一些并排性的内容,手动编写诸如 1、2、3 之类的编号,其实这是错误的,应该使用有序列表, CSS 自动添加编号上去。

善用空格

空格是文章中比不可少的一部分,但是很多人用空格的方法是错误的。空格不是用来排版的,它不像是在 Word 之类的软件里面,使用空格在段落的开头空开两格。中文的写作习惯是在文章段落的开头,空开两个字符,这空开的距离,并不应该使用空格来实现,而是使用 CSS 对段落标签增加属性 text-indent 来实现的。这个是主题设计者的工作,如果你用的主题并没有做这个,那就不会自动空开了,你只能自己修改 CSS 或者用空格模拟空出两字的效果,但这是不合理的。

善用空格

那么空格究竟要用在什么地方呢?用在重要的关键词上面,特别是英文关键词。英文在中文文章中是个不太好处理的东西,绝大多数的作者会直接把英文字母和中文混写在一起,但是这样的显示效果并不好。具体对比效果如下图

善用空格

在稍微重要的关键词的两边,我加了两个空格,稍稍加一点距离,对于英文单词,除了空格之外还对首字母进行大写,两条文字一对比效果很明显就可以看出来。

标注文章引用内容

标注文章引用内容

有的文章可能会引用一些其他文章的资料、名人名言等,这样就需要选中这块文字,点击“块引用”,这样就可以告诉阅读者,这是一块来自他人的内容,我引用过来的。

用预格式化描述代码等有格式的内容

例如一段代码,通常有换行、空格之类的用来保持代码的结构,如果以普通的文字发布,可能会破坏这个结构,所以要用预格式化。

用预格式化描述代码

使用其他修饰的注意事项

其他的文字修饰还有很多,包括:斜体、删除线、下划线、颜色、字体大小等。这些文字修饰要慎用,用多了,会让阅读者感觉杂乱影响阅读心情。就颜色来说,一篇文章中最多不要超过两种颜色。

颜色不要超过两种

尽量多的使用图片

虽然不能极端的说没有图片的文章不是好文章,但是一篇好文章是肯定有图片的。文章中的图片主要有以下两个用处:

  • 与文章内容相符增强文章表现力
  • 缓和阅读中的视觉疲惫
    所以,文章中,要尽量配图。配图也要跟文章主题相符合,例如:介绍人物的文章,配张人物图片;介绍软件的,配张软件截图;写心情生活类的,可以配张唯美的图片等等。

用心去写文章

一篇文章最吸引人的是文章的内容,再好的排版,没有好的内容,人们也不会去看的。所以要用心去写文章。

写之前有明确的目的(介绍自己的写作排版经验),有一个大体的构思(包括写哪几部分),然后觉得写出来会给阅读者一定的帮助,这时候就开始动手写。写的过程中,按照之前的构思,列出大纲和知识点收集整理相关资料,然后针对每个知识点去截图或者用 PS 作图来更形象的描述这个问题。写完并且上传图片之后,还要反复检查两边,看看是否有废话、错别字以及没介绍清楚的地方。

就本文而言,本人用了两个小时的时间来写作,为写出一篇有价值的文章,付出这些是值得的。

一个反例

下图是从 所谓刚子 博客上截取的,是一篇被我缩小的文章,整体是一大段文字没有任何的段落层次、修饰、图片,是一个非常好的反例。

一个排版不好的反例

如果只是一篇短小的文字,这样是可以的,如果是一篇很长的文字,不免让阅读者疲惫。

写在最后

用 WordPress 写出一篇好看的文章,首先要用心去写,写出一篇高质量、有阅读价值的文章,其次要对文章不同的内容进行修饰。本文就介绍了一些写作经验。

至于文章内容具体的修饰样式,是根据你用的 WordPress 主题而定。本人的原创主题 Qetro 就对文字的排版进行了一定的优化,如果你的博客写文字比较多一点,不妨试用一下看看效果。 ^_^