订阅Vs点击

本站一直很重视推广RSS订阅，现在两个RSS源的合计订阅数在260位上下波动。感谢大家的支持ヾ(´︶`*)ﾉ

我一直坚持RSS全文输出，方便订阅者，但不可否认这的确大大降低直接浏览页面的数量。我自己的各种订阅中，全文输出的是极少数，摘要输出是现在RSS输出的主流。出于各种各样的原因，网站所有者还是希望直接点击网页为主要的阅读方式，我也不能免俗。我的原因是阅读器无法反映真实排版：文章美观度大大降低（颜色与格式都没有了），没有Tag引导的关联阅读和网站其他内容推荐，也无法为友链发挥作用。

最近本站新增单栏格式（见文章银狐），宽度增加为更美观、花样更多的排版提供可能。我正在写的一篇关于漫画家Jeff Lemire的文章，就采用单栏格式，增强了排版，相信届时能让读者耳目一新。总之，我会在排版上作更多努力。也希望大家通过阅读器了解内容的同时，点进实际网页，体验更好的阅读【o・∀・o】

 

WordPress简体繁体转换

我个人阅读简体繁体都无障碍，所以误以为添加简繁转换并无必要。 直到最近与台湾的博友交换链接，对方特意注明本站使用简体中文，才惊觉简繁转换是必须的。抱歉之前没有为习惯繁体的读者考虑。也希望能有更多的繁体读者光临小站。(๑>◡<๑)

cntw我参考这篇博客，利用脚本zh-cn-tw.js实现，简单易行。其中往php里添加js位置的这一行<script type=”text/javascript” src=”绝对路径“></script>的书写需要注意一下。最简单的路径是将js文件传到博客的根目录，绝对路径即为 /zh-cn-tw.js 。

另外分享一下不成功的经验。搜索中位居前列的插件WP Chinese Conversion，使用失败，会造成网页布局出现错误。我认为它需要用户进行适应主题的修改，并不是兼容度很高的插件。另外在搜索中亦很靠前的脚本tw_cn.js（文件比zh-cn-tw.js要大一些）也使用失败，点击后无效果，原因不明。

在一个主题上应用成功不等于能用于别的主题。所以前面两例失败的方法对他人来说是可行的，也说不定。

总之，各位可以通过侧边栏的转换选项（CN ⇆ TW）来切换字体。（无侧边栏的）单栏文章，请直接点击题头上方的切换标志。

 

为双栏主题，增加自定义单栏文章模板

对于不熟悉网页编程语言的人来说，简单的事也不轻松。网上的解答多是抄来抄去，重复简单情况。这里详细介绍下银狐页面的实现，希望能帮助到和我一样没有经验的wordpress用户。

我使用的是Sight主题，它的文章（post）和页（page）都采用‘内容+边栏’的双栏模式。我想增设一种单栏文章（post），在该类型中去掉边栏，同时增加页面的宽度。

首先装载Custom Post Templates，该插件允许你增设页面模板，使用的方式很简单，请参见插件说明。安装完毕、并依照要求格式在新设的模板前写好题头、上传后，发布新文章的页面上会出现post template选项。然后即可为每篇文章选择你希望的模板。

为了与现有主题融合，新模板只需对已有模板进行修改即可。以Sight为例，文章模板为single.php，新模板就在single.php的基础上修改，另存为wide.php，再上传到主题所在的路径/wp-content/themes/sight/

去掉边栏（sidebar）：关键是要找到并删除<?php get_sidebar(); ?>这个调用（get意为加载）。该调用可能出现在文章模板，也可能出现在页脚模板（footer.php）、或者页眉模板（header.php）。Sight主题中，该调用在页脚里。因此我设定了一个不调用边栏的自定义页脚模板，新文章模板调用自定义脚本模板即可。具体操作（自定义页脚页眉的命名规则和调用规则）可参考此文。

增加页面宽度：查看css中的content部分（通常日志正文部分都叫content，也可以从single.php中推断日志正文部分的名称），找到类似这样的语句#content {width: 640px; float: left;} （根据主题的页面宽度以及相对位置，应该不难找到）。css中 ‘#’ 号代表的元素，在php中通过id来定位；css中 ‘.’ 号代表的元素，在php中通过class来定位。#content {width: 640px; float: left;}定义了页面宽640px，居左侧。在css里写新定义#content1 {width: 975px;}，在wide.php中用 <div id=”content1″> 调用，即把页面宽度增加到975px。

改变其他css格式：新页面模板往往需要定义新的字体等信息，在css中它们常常由 ‘.’ 号定义。例如.post-content p {margin: 10px 0;}定义的是正文（Paragraph）格式，为.post-content的下属小条目[1]。single.php通过<div class=”post-content”><?php the_content(); ?></div>将.post-content下的全体条目加载在内容页上。
可以在css中增加新类别，比如.post-content1。在wide.php中将之前的命令改为<div class=”post-content1″><?php the_content(); ?></div>。则新模板的格式就会参考.post-content1的明细。例如.post-content1 p {margin: 20px 0;}，改变了原有的边距。再例如为新模板定义引用格式只需要在blockquote的条目前增加.post-content1的字样[2]。

 

用css定位实现一图多用

使用一张背景图片，通过css定位其局部图像实现多项功能。算是很基本的减少图片加载数量，提升页面载入速度的方法。新近出现在每篇文章题头上方的社交网络推送，就采用了这个方法。实际上使用的图只有一张，即下方用Adobe Illustrator做的175 × 35的图标shareicons.png，每一张为35 × 35的小方块[3]。效果即如大家所见。

shareicon - Copy

定位的基本语法{ background:#FFF url(image) no-repeat fixed x y;}可参考这篇文章，我再以本博客的实例辅以说明。

css中上图的五个小图对应五个class元素：

.sina, .db, .tw, .fb, .qq {width: 35px; height: 35px; position: absolute;  bottom: 15px;}
.sina {right: 156px; background: url(“images/shareicons.png”) 0 0 no-repeat;}
.db {right: 117px; background: url(“images/shareicons.png”) -35px 0 no-repeat;}
.tw {right: 78px; background: url(“images/shareicons.png”) -70px 0 no-repeat;}
.fb {right: 39px; background: url(“images/shareicons.png”) -105px 0 no-repeat;}
.qq {right: 0px; background: url(“images/shareicons.png”) -140px 0 no-repeat;}

第一行定义元素: 从.sina到.qq分别对应图片里从左到右新浪/豆瓣/推特/脸书/qq空间五个元素。其中position采用绝对定位，距离它下方的元素有15px的空隙。

第二至五行是定义元素在图片中的位置，以及它们在页面上的摆放方式。以.fb（facebook图标）那行为例：

.fb {right: 39px; background: url(“images/shareicons.png“) -105px 0 no-repeat;}

images/shareicons.png是图片在主题文件夹中的路径[4]
-105px 0定义元素在图片中的位置，-105px是.fb的左边缘与图片左边缘的距离（35 × 3），0是.fb的上边缘与图片上边缘的距离。
no-repeat写在-105px 0的前面或后面都行，表示图片不会重复平铺，只有写它，-105px 0才有意义。
right: 39px定义元素在网页中的位置，即它的右边缘距离框架（正文框架）的右边缘39px，和.qq元素间有了4px的空隙（39 – 35）。

 

为网站添加社交网络推送

在php中，将之前定义的元素和推送动作联系在一起。对此网络上有不少文章，其中有关facebook和twitter的条目多是无效的。我简单列一下本博客使用的写法。可轻松移植到其他wordpress博客。

<a title=”分享到你的微博”  href=”http://v.t.sina.com.cn/share/share.php?url=<?php the_permalink() ?>&amp;title=<?php echo urlencode(the_title(”,”, false)) ?>” target=”_blank” class=”sina” rel=”nofollow”></a>
<a title=”分享到你的豆瓣” rel=”nofollow” href=”http://www.douban.com/recommend/?url=<?php the_permalink() ?>&amp;title=<?php echo urlencode(the_title(”,”, false)) ?>” target=”_blank” class=”db” rel=”nofollow”></a>
<a title=”分享到你的推特” href=”javascript: void(window.open(‘http://twitter.com/home/?status=’.concat(encodeURIComponent(document.title)) .concat(‘ ‘) .concat(encodeURIComponent(location.href))));” class=”tw” ></a>
<a title=”分享到你的脸书” href=”http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php the_title(); ?>” rel=”nofollow” onclick=”window.open(this.href); return false;” class=”fb”></a>
<a title=”分享到你的QQ空间”  href=”http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<?php the_permalink() ?>&amp;title=<?php echo urlencode(the_title(”,”, false)) ?>” target=”_blank” class=”qq” rel=”nofollow”></a>

红色部分就是方才css中定义的元素。target=”_blank”和 rel=”nofollow”是连接属性的常用定语，分别是打开新窗口、规定搜索引擎不跟踪。

 

小站成长

针对Chrome浏览器增加外显的图片注释：使用chrome浏览器[5]可能无法在鼠标移动到链接和图片上时看到链接和图片的名称(((ﾟДﾟ;))) 鉴于许多人使用Chrome浏览本网站，我已经对部分文章（漫画历史系列）增加了外部的图片注释。原先使用Chrome浏览器，因此看到一大堆配图却不知它们在讲什么的读者，请务必返回观看注释:)

受欢迎博文：最后依惯例通报下小站目前受欢迎的文章。头牌是介绍日本杂志发展史的长文『Manga 60 years | Part 3b』3280点击，到现在已发布一年，还有进量。它是我花费时间最多的一篇文章，能排位第一着实让我高兴。过2000点击的还有两篇『漫书手札16』『漫书手札17』，前者详细介绍了藤子不二雄的『异色短篇集』，后者大概是沾了排在16之后的光吧。漫书手札作为本站较有特色的系列，基本处于高位。上一篇日志中抱怨的花了功夫却无人问津的文章现在都有过1000点击，果然以长时间统计，用心写还是有收获的。音乐精选系列比同时期发布的文章浏览量高，体现出资源分享对读者的吸引力。

推荐索引：为了方便大家查询评论，本站在网站头部的网站描述旁边，新增两个index：Finished Series Reviews是完结的日本动画的评论索引，See All Banners是所有出现在滚动栏（均是个人感到满意，想要推广的文章）的评论索引。欢迎大家使用！ヽ(✿ﾟ▽ﾟ)ノ

增加二维码：虽然不知道会有多少人用，还是提供一下。反正侧栏一大片空白，不用白不用啊！二维码可在线通过草料网生成，提供多种颜色尺寸选择，非常方便。将生成后的图片放到网站里就可以了。

增加tumblr链接：知名的轻博客。我在那边主要分享艺术性较高的漫画图片。内地似乎无法访问。

增加侧边滑动tumblr更新：就是右侧那个写着Recent tumblr posts的东西啦，点一下就会滑出，可查看我最新的tumblr更新。实现方法是两个插件Sliding widgets和Tumblr widget。

设定新的手机浏览界面：主题本身没有手机模式，在PageSpeedInsight测试得分很低。通过MobilePress设定了简洁的手机模式，得分大幅提升。

为feed添加Copyright标记面：防君子防不了小人。之前只有网页浏览能看到copyright，从这篇文章起，rss浏览也可以看到copyright提示。相关的插件有不少，个人使用的是Simple feed copyright。

 

WordPress资源分享

简洁耐看的免费中文模板：阿肠网页设计

简洁耐看的免费英文模板：Colorlib; Esquire

↑一直对当前的模板字体小，宽度窄耿耿于怀；另外因为是较旧的主题，所以没有自适应宽度的功能，在移动阅读兴盛的今天看起来也有点过时。无奈文章和网站结构都是围绕现有模板编写，陆续的修整也作了不少，更换模板的代价太大。若非如此，可能已经使用了上述的某个模板。

代码学习：W3school中文站